drawio_dsl 0.6.0 → 0.8.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0f477a7317f4d012f3e7c1987de3ccedbf87431f5a5fa689862ba6ab3f19b62d
-  data.tar.gz: b76493c62b5fcd11ca2d51a028e2499e221c5a2e0f06a4b09701862f8d557afb
+  metadata.gz: edb45547be95911f2d2929e42b3ad02bf70f393491bdd58c4b941c43ce26f073
+  data.tar.gz: d63dfaf0273ff5b0c2e8752221068cf767ba47d535707b2219e309181372ab88
 SHA512:
-  metadata.gz: 684c4a481532aab5570fc06fbbb1bd075fe3b7dfd1d06903dbe8e0df8f08532c112ab73e8363243a8570224302fa104ed4a28ded7343bcba2a800d2997dd7d65
-  data.tar.gz: 732f7ebd2f67587caaff22b51970b1a10cc258809deb16f5b060f38853d20c76620f923ad00ccf7c022e12c381ffd028499fc487fce46e0fd246b1bc2653fd35
+  metadata.gz: 674da036356abb138fc1dce8bc4514dc5a6c3e39787979523e4abd0855350a31e8da7826533d4e7741c7919fcf2453e776909971cd5afd2d448e08bba9fb1799
+  data.tar.gz: 7e766df5cd63151e3a519fa898b8afc27f1099e5bb8f1532608f850b3e059ba690e2f0f2b33058ff448fa276cc09ee601552aa59cf0770ae19947dc0387547c4

data/.builders/.data/shapes.json

@@ -134,6 +134,42 @@
     "h": 160,
     "style_modifiers": "shape=cloud"
   },
+  {
+    "type": "container",
+    "text_only": false,
+    "x": 0,
+    "y": 0,
+    "w": 160,
+    "h": 160,
+    "style_modifiers": "swimlane"
+  },
+  {
+    "type": "container2",
+    "text_only": false,
+    "x": 0,
+    "y": 0,
+    "w": 160,
+    "h": 160,
+    "style_modifiers": "swimlane;horizontal=0"
+  },
+  {
+    "type": "container3",
+    "text_only": false,
+    "x": 0,
+    "y": 0,
+    "w": 160,
+    "h": 160,
+    "style_modifiers": "swimlane;startSize=50"
+  },
+  {
+    "type": "container4",
+    "text_only": false,
+    "x": 0,
+    "y": 0,
+    "w": 160,
+    "h": 160,
+    "style_modifiers": "swimlane;resizable=0"
+  },
   {
     "type": "cross",
     "text_only": false,
@@ -189,40 +225,22 @@
     "style_modifiers": "shape=hexagon"
   },
   {
-    "type": "container",
-    "text_only": false,
-    "x": 0,
-    "y": 0,
-    "w": 160,
-    "h": 160,
-    "style_modifiers": "swimlane"
-  },
-  {
-    "type": "container2",
+    "type": "interface",
     "text_only": false,
     "x": 0,
     "y": 0,
     "w": 160,
     "h": 160,
-    "style_modifiers": "swimlane;horizontal=0"
+    "style_modifiers": "align=left;overflow=fill;fontSize=12;fontFamily=Helvetica"
   },
   {
-    "type": "container3",
+    "type": "klass",
     "text_only": false,
     "x": 0,
     "y": 0,
     "w": 160,
     "h": 160,
-    "style_modifiers": "swimlane;startSize=50"
-  },
-  {
-    "type": "container4",
-    "text_only": false,
-    "x": 0,
-    "y": 0,
-    "w": 160,
-    "h": 160,
-    "style_modifiers": "swimlane;resizable=0"
+    "style_modifiers": "align=left;overflow=fill;fontSize=12;fontFamily=Helvetica"
   },
   {
     "type": "note",
@@ -287,6 +305,15 @@
     "h": 50,
     "style_modifiers": "verticalLabelPosition=bottom;verticalAlign=top;shape=mxgraph.basic.tick"
   },
+  {
+    "type": "todo",
+    "text_only": false,
+    "x": 0,
+    "y": 0,
+    "w": 300,
+    "h": 60,
+    "style_modifiers": ""
+  },
   {
     "type": "face",
     "text_only": false,
@@ -305,6 +332,15 @@
     "h": 100,
     "style_modifiers": "triangle"
   },
+  {
+    "type": "line",
+    "text_only": false,
+    "x": 0,
+    "y": 0,
+    "w": 50,
+    "h": 50,
+    "style_modifiers": "edgeStyle=entityRelationEdgeStyle;strokeWidth=1;elbow=vertical;startArrow=none;startFill=0;endArrow=block;endFill=0;targetPerimeterSpacing=0;shape=flexArrow;endSize=6;fillStyle=zigzag;"
+  },
   {
     "type": "embed_row",
     "text_only": false,

data/.builders/.templates/basic/dom_builder_shapes.rb

@@ -6,8 +6,9 @@ module DrawioDsl
   module DomBuilderShapes
     {{#each shapes}}
 
-    def add_{{snake ./type}}(**opts)
-      {{snake ./type}} = DrawioDsl::Schema::{{camel ./type}}.new(current_page, **opts)
+    def add_{{snake ./type}}(id = nil, **opts, &block)
+      opts = { id: id }.merge(opts) if id
+      {{snake ./type}} = DrawioDsl::Schema::{{camel ./type}}.new(current_page, **opts, &block)
       add_shape({{snake ./type}})
     end
     {{/each}}

data/.builders/.templates/basic/drawio_shapes.rb

@@ -14,8 +14,8 @@ module DrawioDsl
     end
     {{#each shapes}}
 
-    def {{snake ./type}}(**opts)
-      builder.add_{{snake ./type}}(**opts)
+    def {{snake ./type}}(id = nil, **opts, &block)
+      builder.add_{{snake ./type}}(id, **opts, &block)
     end
     {{/each}}
   end

data/.builders/blueprint/shapes.rb

@@ -1,6 +1,21 @@
 m = KManager.model :shapes, namespace: %i[domain] do
   # microapp = import(:handlebars_helpers, :microapp)
 
+  table :strokes do
+    fields [:name, :style]
+
+    row :dashed               , 'dashed=1;fixDash=1'
+    row :dotted               , 'dashed=1;fixDash=1;dashPattern=1 4'
+    row :dashdot              , 'dashed=1;fixDash=1;dashPattern=10 5 1 5'
+    row :dashdotdot           , 'dashed=1;fixDash=1;dashPattern=10 5 1 5 1 5'
+    row :dotdotdot            , 'dashed=1;fixDash=1;dashPattern=1 2'
+    row :longdash             , 'dashed=1;fixDash=1;dashPattern=16 6'
+    row :dashlongdash         , 'dashed=1;fixDash=1;dashPattern=10 6 16 6'
+    row :dashed24             , 'dashed=1;fixDash=1;dashPattern=3 8'
+    row :dashed32             , 'dashed=1;fixDash=1;dashPattern=6 5'
+    row :dashed44             , 'dashed=1;fixDash=1;dashPattern=8 8'
+  end
+
   table :shapes do
     fields [:type, :text_only, :x, :y, :w, :h, :style_modifiers]
 
@@ -24,16 +39,18 @@ m = KManager.model :shapes, namespace: %i[domain] do
     row :callout4             , false, 0, 0, 160, 120, 'shape=mxgraph.basic.roundRectCallout;dx=30;dy=15;size=5;boundedLbl=1;'
     row :circle               , false, 0, 0, 160, 160, 'ellipse'
     row :cloud                , false, 0, 0, 160, 160, 'shape=cloud'
+    row :container            , false, 0, 0, 160, 160, 'swimlane'
+    row :container2           , false, 0, 0, 160, 160, 'swimlane;horizontal=0'
+    row :container3           , false, 0, 0, 160, 160, 'swimlane;startSize=50'
+    row :container4           , false, 0, 0, 160, 160, 'swimlane;resizable=0'
     row :cross                , false, 0, 0,  50,  50, 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.x'
     row :envelop              , false, 0, 0, 160, 100, 'shape=message'
     row :diamond              , false, 0, 0, 100, 100, 'rhombus'
     row :document             , false, 0, 0, 160, 160, 'shape=mxgraph.basic.document'
     row :ellipse              , false, 0, 0, 200, 120, 'ellipse'
     row :hexagon              , false, 0, 0, 200, 120, 'shape=hexagon'
-    row :container            , false, 0, 0, 160, 160, 'swimlane'
-    row :container2           , false, 0, 0, 160, 160, 'swimlane;horizontal=0'
-    row :container3           , false, 0, 0, 160, 160, 'swimlane;startSize=50'
-    row :container4           , false, 0, 0, 160, 160, 'swimlane;resizable=0'
+    row :interface            , false, 0, 0, 160, 160, 'align=left;overflow=fill;fontSize=12;fontFamily=Helvetica'
+    row :klass                , false, 0, 0, 160, 160, 'align=left;overflow=fill;fontSize=12;fontFamily=Helvetica'
     row :note                 , false, 0, 0, 160, 160, 'shape=note'
     row :process              , false, 0, 0, 200, 120, 'shape=process'
     row :rectangle            , false, 0, 0, 200, 120, ''
@@ -41,9 +58,13 @@ m = KManager.model :shapes, namespace: %i[domain] do
     row :square               , false, 0, 0, 160, 160, ''
     row :step                 , false, 0, 0, 120,  80, 'shape=step;perimeter=stepPerimeter;fixedSize=1'
     row :tick                 , false, 0, 0,  50,  50, 'verticalLabelPosition=bottom;verticalAlign=top;shape=mxgraph.basic.tick'
+    row :todo                 , false, 0, 0, 300,  60, ''
     row :face                 , false, 0, 0, 100, 100, 'verticalLabelPosition=bottom;verticalAlign=top;shape=mxgraph.basic.smiley'
     row :triangle             , false, 0, 0, 100, 100, 'triangle'
 
+    row :line                 , false, 0, 0,  50,  50, 'edgeStyle=entityRelationEdgeStyle;strokeWidth=1;elbow=vertical;startArrow=none;startFill=0;endArrow=block;endFill=0;targetPerimeterSpacing=0;shape=flexArrow;endSize=6;fillStyle=zigzag;'
+    # edge="1" parent="node_root_2T8" source="b" target="c"
+
     # configuration for embedded element shape
     # note that the width / height probably should be driven of parent shape
     row :embed_row            , false, 0, 0, 200,  40, 'shape=partialRectangle;collapsible=0;dropTarget=0;pointerEvents=0;top=0;left=0;bottom=1;right=0;points=[[0,0.5],[1,0.5]];portConstraint=eastwest'

data/.builders/generators/project-plan.rb

@@ -0,0 +1,72 @@
+KManager.action :project_plan do
+  action do
+
+    DrawioDsl::Drawio
+      .init(k_builder, on_exist: :write, on_action: :execute)
+      .diagram(rounded: 1, glass: 1)
+      .page('In progress', theme: :style_03, margin_left: 0, margin_top: 0) do
+
+        # h5(x: 300, y: 0, w: 400, h: 80, title: 'DrawIO DSL')
+        # p(x: 350, y: 40, w: 400, h: 80, title: 'Project plan - In progress')
+
+        grid_layout(y:90, direction: :horizontal, grid_h: 80, grid_w: 320, wrap_at: 3, grid: 0)
+
+        todo(title: 'ensure that ids are working as expected')
+        todo(title: 'alter the initial parameter of all shapes so that it can be an ID, without named attribute')
+        todo(title: 'add new shapes related to line connectors')
+        todo(title: 'line connectors need to support autolinking using ids')
+      end
+      .page('To Do', theme: :style_02, margin_left: 0, margin_top: 0) do
+
+        # h5(x: 300, y: 0, w: 400, h: 80, title: 'DrawIO DSL')
+        # p(x: 350, y: 40, w: 400, h: 80, title: 'Project plan')
+
+        grid_layout(y:90, direction: :horizontal, grid_h: 80, grid_w: 320, wrap_at: 3, grid: 0)
+
+        todo(title: 'add page background to theme, use it whenever the theme is set at a diagram/page level')
+        todo(title: 'move DrawioDsl::Formatters::Factory::FORMATTERS to resource file')
+        todo(title: 'move DrawioDsl::Formatters::StyleBuilder::MAPPINGS to resource file')
+        todo(title: 'need to setup new project plans')
+        todo(title: 'settings style attributes need to de-duplicate, might be best to utilize the new StyleBuilder class')
+        todo(title: 'write SVG directly into other projects')
+        todo(title: 'add :shape and :text-only to random shape generator')
+        todo(title: 'Nodes need to support child nodes')
+        todo(title: 'Grid layout does not position itself in relation to the last element')
+        todo(title: 'Dynamic sized shapes that expand to the size of their text')
+        todo(title: 'Control of text padding left, right, top and bottom')
+        todo(title: 'Improve the theme control over text-only shapes')
+        todo(title: 'x,y settings do not work for shapes within a grid layout')
+        todo(title: 'page layout so that you drop elements on and they are positioned correctly, e.g centered, left, right, etc, maybe a grid layout with a wrap of 1 and a width of the page is sufficient')
+      end
+      .page('Done', theme: :style_06, margin_left: 0, margin_top: 0) do
+
+        # h5(x: 300, y: 0, w: 400, h: 80, title: 'DrawIO DSL')
+        # p(x: 350, y: 40, w: 400, h: 80, title: 'Done')
+
+        grid_layout(y:90, direction: :horizontal, grid_h: 80, grid_w: 320, wrap_at: 3, grid: 0)
+
+        todo(title: 'move project-plan files')
+        todo(title: 'alter configure_shape so it sets the default shape key and use that for selecting the default HTML formatter')
+        todo(title: 'add todo shape to simplify project plan drawing')
+        todo(title: 'introduce .value property to shape and let it use either formatted HTML or plain text title')
+        todo(title: 'formatter DSL that can render HTML directly into the value property')
+        todo(title: 'formatter DSL for class and interface generation')
+        todo(title: 'generate extension based graphics based on drawio extensions.js')
+        todo(title: 'active? flag on page defaulting to true. set to false to exclude page from diagram.')
+        todo(title: 'first level child nodes need to hang of node 1')
+        todo(title: 'node has child nodes and add_node will set a nodes parent')
+        todo(title: 'nodes can belong to a parent node, the top level node responds with truthy to root?')
+        todo(title: 'add sample diagram for the github readme file')
+        todo(title: 'write samples into docs folder and display in readme')
+        todo(title: 'add export as .PNG, needs to take a page number as the PNG will not support multiple pages')
+        todo(title: 'add export as .SVG, needs to take a page number as the SVG will not support multiple pages')
+        todo(title: 'add save as .drawio')
+
+      end
+      .cd(:docs)
+      .save('project-plan/project.drawio')
+      .export_svg('project-plan/project_in_progress', page: 1)
+      .export_svg('project-plan/project_todo'       , page: 2)
+      .export_svg('project-plan/project_done'       , page: 3)
+  end
+end

data/.builders/generators/sample_diagrams/05-samples.rb

@@ -9,15 +9,28 @@ KManager.action :bootstrap do
       .page('Samples') do
         grid_layout(wrap_at: 5)
 
-        KConfig.configuration.drawio.shapes.select { |shape| shape.type != :shape && !shape.text_only }.each do |shape|
-          # print random number between 0 and 1
-          send(shape.type, theme: KConfig.configuration.drawio.random_theme, title: shape.type.to_s, shape: shape, rounded: rnd(2), gloss: rnd(2), sketch: rnd(8))
+        # KConfig.configuration.drawio.shapes.select { |shape| shape.type != :shape && !shape.text_only }.each do |shape|
+        #   # print random number between 0 and 1
+        #   send(shape.type, theme: KConfig.configuration.drawio.random_theme, title: shape.type.to_s, shape: shape, rounded: rnd(2), gloss: rnd(2), sketch: rnd(8))
+        # end
+
+        for jersy_number in 67..112
+          team_color = :style_02
+          team_color = :style_03 if jersy_number % 3 == 0
+          team_color = :style_04 if jersy_number % 12 == 0
+
+          if jersy_number % 20 == 0
+            cloud(title: jersy_number, theme: team_color)
+          else
+            actor(title: jersy_number, theme: team_color)
+          end
         end
+      
 
       end
       .cd(:spec)
-      .save('.samples/05-samples.drawio')
-      .cd(:docs)
-      .export_svg('samples/samples', page: 1)
+      .osave('.samples/05-samples.drawio')
+      # .cd(:docs)
+      # .export_svg('samples/samples', page: 1)
   end
 end

data/.builders/generators/sample_diagrams/30-html-shapes.rb

@@ -0,0 +1,48 @@
+KManager.action :html_shapes do
+  action do
+
+    # :rounded, :shadow, :sketch, :glass
+    DrawioDsl::Drawio
+      .init(k_builder, on_exist: :write, on_action: :execute)
+      .diagram(theme: :style_11)
+      .page('Style-Plain', margin_left: 0, margin_top: 0, rounded: 0, background: '#FFEADB') do
+        grid_layout(wrap_at: 8)
+
+        # html = DrawioDsl::Formatters::KlassFormatter.new
+        #   .header('IPerson')
+        #   .field(:first_name, type: :string)
+        #   .field(:last_name, type: :string)
+        #   .field(:age, type: :integer)
+        #   .field(:birthday, type: :date)
+        #   .method(:full_name)
+        #   .method(:sean)
+        #   .as_html
+
+        # square(title: html,
+        #   style_modifiers: 'align=left;overflow=fill;fontSize=12;fontFamily=Helvetica'
+        # )
+
+        interface(theme: :style_07) do
+          format
+            .header('IPerson')
+            .field(:field1, type: :string)
+            .field(:field2, type: :string)
+            .method(:full_name, type: :string)
+        end
+
+        klass do
+          format(:class)
+            .header('Person')
+            .field(:field1, type: :string)
+            .field(:field2, type: :string)
+            .field(:age, type: :integer)
+            .field(:birthday, type: :date)
+            .method(:full_name, type: :string)
+        end
+      end
+      .cd(:spec)
+      .osave('.samples/30-html-shapes.drawio')
+      # .cd(:docs)
+      # .export_svg('samples/html-shapes', page: 1)
+  end
+end

data/.builders/generators/sample_diagrams/35-ids-and-arrows.rb

@@ -0,0 +1,20 @@
+KManager.action :bootstrap do
+  action do
+
+    DrawioDsl::Drawio
+      .init(k_builder, on_exist: :write, on_action: :execute)
+      .diagram(theme: :style_06)
+      .page('Style-Plain', margin_left: 0, margin_top: 0) do
+        grid_layout(wrap_at: 2)
+
+        square(:a, title: '01')
+        circle(:b, title: '02')
+        rectangle(:c, title: '03')
+        ellipse(:d, title: '04')
+      end
+      .cd(:spec)
+      .osave('.samples/35-ids-and-arrows.drawio')
+      # .cd(:docs)
+      # .export_svg('samples/styles-plain', page: 1)
+  end
+end

data/CHANGELOG.md

@@ -1,3 +1,31 @@
+# [0.8.0](https://github.com/klueless-io/drawio_dsl/compare/v0.7.0...v0.8.0) (2022-03-15)
+
+
+### Features
+
+* alter configure_shape so it sets the default shape key and use that for selecting the default HTML formatter ([f0cde77](https://github.com/klueless-io/drawio_dsl/commit/f0cde7719c7b230147f10e269cbb9f02584b542b))
+
+# [0.7.0](https://github.com/klueless-io/drawio_dsl/compare/v0.6.0...v0.7.0) (2022-03-14)
+
+
+### Features
+
+* add support for HTML formatters to shapes ([14b05e2](https://github.com/klueless-io/drawio_dsl/commit/14b05e2c55ea61ad8f275d678ca4fcff8a43b466))
+* add support for html shapes ([d2d0e72](https://github.com/klueless-io/drawio_dsl/commit/d2d0e72bef8f44c244dd209d191ab29aea0091c1))
+
+# [0.6.0](https://github.com/klueless-io/drawio_dsl/compare/v0.5.7...v0.6.0) (2022-03-13)
+
+
+### Bug Fixes
+
+* update failing tests ([37ebbbd](https://github.com/klueless-io/drawio_dsl/commit/37ebbbd37cf70b150c83dbd2a389c6f176a917cf))
+* update pre-commit ([374a29b](https://github.com/klueless-io/drawio_dsl/commit/374a29bad9f50ac01b670d6bfa01e42e9864e00e))
+
+
+### Features
+
+* first level child nodes need to hang of node 1, build example shapes from extensions.js ([4b233fb](https://github.com/klueless-io/drawio_dsl/commit/4b233fb452eafa8052e7d5014e19bec07ecf5657))
+
 ## [0.5.7](https://github.com/klueless-io/drawio_dsl/compare/v0.5.6...v0.5.7) (2022-03-09)
 
 

data/docs/project-plan/project.drawio

@@ -0,0 +1,128 @@
+<mxfile host="d2u">
+  <diagram id="goa" name="In progress">
+    <mxGraphModel dx="0" dy="0" background="#FFFACD" grid="0" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
+      <root>
+        <mxCell id="page_root_goa" parent="goa"/>
+        <mxCell id="node_root_goa" parent="page_root_goa"/>
+        <mxCell id="goa-2" value="ensure that ids are working as expected" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#d5e8d4;strokeColor=#82b366;fontColor=#333333" vertex="1" parent="node_root_goa">
+          <mxGeometry x="10" y="10" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="goa-3" value="alter the initial parameter of all shapes so that it can be an ID, without named attribute" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#d5e8d4;strokeColor=#82b366;fontColor=#333333" vertex="1" parent="node_root_goa">
+          <mxGeometry x="330" y="10" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="goa-4" value="add new shapes related to line connectors" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#d5e8d4;strokeColor=#82b366;fontColor=#333333" vertex="1" parent="node_root_goa">
+          <mxGeometry x="650" y="10" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="goa-5" value="line connectors need to support autolinking using ids" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#d5e8d4;strokeColor=#82b366;fontColor=#333333" vertex="1" parent="node_root_goa">
+          <mxGeometry x="10" y="90" width="300" height="60" as="geometry"/>
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+  <diagram id="ywj" name="To Do">
+    <mxGraphModel dx="0" dy="0" background="#FFFACD" grid="0" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
+      <root>
+        <mxCell id="page_root_ywj" parent="ywj"/>
+        <mxCell id="node_root_ywj" parent="page_root_ywj"/>
+        <mxCell id="ywj-2" value="add page background to theme, use it whenever the theme is set at a diagram/page level" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontColor=#333333" vertex="1" parent="node_root_ywj">
+          <mxGeometry x="10" y="10" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="ywj-3" value="move DrawioDsl::Formatters::Factory::FORMATTERS to resource file" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontColor=#333333" vertex="1" parent="node_root_ywj">
+          <mxGeometry x="330" y="10" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="ywj-4" value="move DrawioDsl::Formatters::StyleBuilder::MAPPINGS to resource file" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontColor=#333333" vertex="1" parent="node_root_ywj">
+          <mxGeometry x="650" y="10" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="ywj-5" value="need to setup new project plans" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontColor=#333333" vertex="1" parent="node_root_ywj">
+          <mxGeometry x="10" y="90" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="ywj-6" value="settings style attributes need to de-duplicate, might be best to utilize the new StyleBuilder class" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontColor=#333333" vertex="1" parent="node_root_ywj">
+          <mxGeometry x="330" y="90" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="ywj-7" value="write SVG directly into other projects" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontColor=#333333" vertex="1" parent="node_root_ywj">
+          <mxGeometry x="650" y="90" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="ywj-8" value="add :shape and :text-only to random shape generator" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontColor=#333333" vertex="1" parent="node_root_ywj">
+          <mxGeometry x="10" y="170" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="ywj-9" value="Nodes need to support child nodes" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontColor=#333333" vertex="1" parent="node_root_ywj">
+          <mxGeometry x="330" y="170" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="ywj-10" value="Grid layout does not position itself in relation to the last element" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontColor=#333333" vertex="1" parent="node_root_ywj">
+          <mxGeometry x="650" y="170" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="ywj-11" value="Dynamic sized shapes that expand to the size of their text" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontColor=#333333" vertex="1" parent="node_root_ywj">
+          <mxGeometry x="10" y="250" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="ywj-12" value="Control of text padding left, right, top and bottom" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontColor=#333333" vertex="1" parent="node_root_ywj">
+          <mxGeometry x="330" y="250" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="ywj-13" value="Improve the theme control over text-only shapes" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontColor=#333333" vertex="1" parent="node_root_ywj">
+          <mxGeometry x="650" y="250" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="ywj-14" value="x,y settings do not work for shapes within a grid layout" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontColor=#333333" vertex="1" parent="node_root_ywj">
+          <mxGeometry x="10" y="330" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="ywj-15" value="page layout so that you drop elements on and they are positioned correctly, e.g centered, left, right, etc, maybe a grid layout with a wrap of 1 and a width of the page is sufficient" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontColor=#333333" vertex="1" parent="node_root_ywj">
+          <mxGeometry x="330" y="330" width="300" height="60" as="geometry"/>
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+  <diagram id="TfV" name="Done">
+    <mxGraphModel dx="0" dy="0" background="#FFFACD" grid="0" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
+      <root>
+        <mxCell id="page_root_TfV" parent="TfV"/>
+        <mxCell id="node_root_TfV" parent="page_root_TfV"/>
+        <mxCell id="TfV-2" value="move project-plan files" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#f8cecc;strokeColor=#b85450;fontColor=#333333" vertex="1" parent="node_root_TfV">
+          <mxGeometry x="10" y="10" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="TfV-3" value="alter configure_shape so it sets the default shape key and use that for selecting the default HTML formatter" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#f8cecc;strokeColor=#b85450;fontColor=#333333" vertex="1" parent="node_root_TfV">
+          <mxGeometry x="330" y="10" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="TfV-4" value="add todo shape to simplify project plan drawing" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#f8cecc;strokeColor=#b85450;fontColor=#333333" vertex="1" parent="node_root_TfV">
+          <mxGeometry x="650" y="10" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="TfV-5" value="introduce .value property to shape and let it use either formatted HTML or plain text title" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#f8cecc;strokeColor=#b85450;fontColor=#333333" vertex="1" parent="node_root_TfV">
+          <mxGeometry x="10" y="90" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="TfV-6" value="formatter DSL that can render HTML directly into the value property" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#f8cecc;strokeColor=#b85450;fontColor=#333333" vertex="1" parent="node_root_TfV">
+          <mxGeometry x="330" y="90" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="TfV-7" value="formatter DSL for class and interface generation" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#f8cecc;strokeColor=#b85450;fontColor=#333333" vertex="1" parent="node_root_TfV">
+          <mxGeometry x="650" y="90" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="TfV-8" value="generate extension based graphics based on drawio extensions.js" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#f8cecc;strokeColor=#b85450;fontColor=#333333" vertex="1" parent="node_root_TfV">
+          <mxGeometry x="10" y="170" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="TfV-9" value="active? flag on page defaulting to true. set to false to exclude page from diagram." style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#f8cecc;strokeColor=#b85450;fontColor=#333333" vertex="1" parent="node_root_TfV">
+          <mxGeometry x="330" y="170" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="TfV-10" value="first level child nodes need to hang of node 1" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#f8cecc;strokeColor=#b85450;fontColor=#333333" vertex="1" parent="node_root_TfV">
+          <mxGeometry x="650" y="170" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="TfV-11" value="node has child nodes and add_node will set a nodes parent" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#f8cecc;strokeColor=#b85450;fontColor=#333333" vertex="1" parent="node_root_TfV">
+          <mxGeometry x="10" y="250" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="TfV-12" value="nodes can belong to a parent node, the top level node responds with truthy to root?" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#f8cecc;strokeColor=#b85450;fontColor=#333333" vertex="1" parent="node_root_TfV">
+          <mxGeometry x="330" y="250" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="TfV-13" value="add sample diagram for the github readme file" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#f8cecc;strokeColor=#b85450;fontColor=#333333" vertex="1" parent="node_root_TfV">
+          <mxGeometry x="650" y="250" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="TfV-14" value="write samples into docs folder and display in readme" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#f8cecc;strokeColor=#b85450;fontColor=#333333" vertex="1" parent="node_root_TfV">
+          <mxGeometry x="10" y="330" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="TfV-15" value="add export as .PNG, needs to take a page number as the PNG will not support multiple pages" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#f8cecc;strokeColor=#b85450;fontColor=#333333" vertex="1" parent="node_root_TfV">
+          <mxGeometry x="330" y="330" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="TfV-16" value="add export as .SVG, needs to take a page number as the SVG will not support multiple pages" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#f8cecc;strokeColor=#b85450;fontColor=#333333" vertex="1" parent="node_root_TfV">
+          <mxGeometry x="650" y="330" width="300" height="60" as="geometry"/>
+        </mxCell>
+        <mxCell id="TfV-17" value="add save as .drawio" style="whiteSpace=wrap;html=1;rounded=1;glass=1;fillColor=#f8cecc;strokeColor=#b85450;fontColor=#333333" vertex="1" parent="node_root_TfV">
+          <mxGeometry x="10" y="410" width="300" height="60" as="geometry"/>
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>

data/docs/project-plan/project_done.svg

@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="942px" height="462px" viewBox="-0.5 -0.5 942 462"><defs><linearGradient x1="0%" y1="0%" x2="0%" y2="100%" id="mx-gradient-ffffff-0.9-ffffff-0.1-s-0"><stop offset="0%" style="stop-color: rgb(255, 255, 255); stop-opacity: 0.9;"/><stop offset="100%" style="stop-color: rgb(255, 255, 255); stop-opacity: 0.1;"/></linearGradient></defs><g><rect x="0" y="0" width="300" height="60" rx="9" ry="9" fill="#f8cecc" stroke="#b85450" pointer-events="all"/><path d="M 10.15 -1 Q -1 -1 -1 10.15 L -1 24 Q 150 42 301 24 L 301 10.15 Q 301 -1 289.85 -1 Z" fill="url(#mx-gradient-ffffff-0.9-ffffff-0.1-s-0)" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 298px; height: 1px; padding-top: 30px; margin-left: 1px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">move project-plan files</div></div></div></foreignObject><text x="150" y="34" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">move project-plan files</text></switch></g><rect x="320" y="0" width="300" height="60" rx="9" ry="9" fill="#f8cecc" stroke="#b85450" pointer-events="all"/><path d="M 330.15 -1 Q 319 -1 319 10.15 L 319 24 Q 470 42 621 24 L 621 10.15 Q 621 -1 609.85 -1 Z" fill="url(#mx-gradient-ffffff-0.9-ffffff-0.1-s-0)" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 298px; height: 1px; padding-top: 30px; margin-left: 321px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">alter configure_shape so it sets the default shape key and use that for selecting the default HTML formatter</div></div></div></foreignObject><text x="470" y="34" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">alter configure_shape so it sets the default shape...</text></switch></g><rect x="640" y="0" width="300" height="60" rx="9" ry="9" fill="#f8cecc" stroke="#b85450" pointer-events="all"/><path d="M 650.15 -1 Q 639 -1 639 10.15 L 639 24 Q 790 42 941 24 L 941 10.15 Q 941 -1 929.85 -1 Z" fill="url(#mx-gradient-ffffff-0.9-ffffff-0.1-s-0)" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 298px; height: 1px; padding-top: 30px; margin-left: 641px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">add todo shape to simplify project plan drawing</div></div></div></foreignObject><text x="790" y="34" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">add todo shape to simplify project plan drawing</text></switch></g><rect x="0" y="80" width="300" height="60" rx="9" ry="9" fill="#f8cecc" stroke="#b85450" pointer-events="all"/><path d="M 10.15 79 Q -1 79 -1 90.15 L -1 104 Q 150 122 301 104 L 301 90.15 Q 301 79 289.85 79 Z" fill="url(#mx-gradient-ffffff-0.9-ffffff-0.1-s-0)" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 298px; height: 1px; padding-top: 110px; margin-left: 1px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">introduce .value property to shape and let it use either formatted HTML or plain text title</div></div></div></foreignObject><text x="150" y="114" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">introduce .value property to shape and let it use...</text></switch></g><rect x="320" y="80" width="300" height="60" rx="9" ry="9" fill="#f8cecc" stroke="#b85450" pointer-events="all"/><path d="M 330.15 79 Q 319 79 319 90.15 L 319 104 Q 470 122 621 104 L 621 90.15 Q 621 79 609.85 79 Z" fill="url(#mx-gradient-ffffff-0.9-ffffff-0.1-s-0)" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 298px; height: 1px; padding-top: 110px; margin-left: 321px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">formatter DSL that can render HTML directly into the value property</div></div></div></foreignObject><text x="470" y="114" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">formatter DSL that can render HTML directly into t...</text></switch></g><rect x="640" y="80" width="300" height="60" rx="9" ry="9" fill="#f8cecc" stroke="#b85450" pointer-events="all"/><path d="M 650.15 79 Q 639 79 639 90.15 L 639 104 Q 790 122 941 104 L 941 90.15 Q 941 79 929.85 79 Z" fill="url(#mx-gradient-ffffff-0.9-ffffff-0.1-s-0)" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 298px; height: 1px; padding-top: 110px; margin-left: 641px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">formatter DSL for class and interface generation</div></div></div></foreignObject><text x="790" y="114" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">formatter DSL for class and interface generation</text></switch></g><rect x="0" y="160" width="300" height="60" rx="9" ry="9" fill="#f8cecc" stroke="#b85450" pointer-events="all"/><path d="M 10.15 159 Q -1 159 -1 170.15 L -1 184 Q 150 202 301 184 L 301 170.15 Q 301 159 289.85 159 Z" fill="url(#mx-gradient-ffffff-0.9-ffffff-0.1-s-0)" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 298px; height: 1px; padding-top: 190px; margin-left: 1px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">generate extension based graphics based on drawio extensions.js</div></div></div></foreignObject><text x="150" y="194" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">generate extension based graphics based on drawio...</text></switch></g><rect x="320" y="160" width="300" height="60" rx="9" ry="9" fill="#f8cecc" stroke="#b85450" pointer-events="all"/><path d="M 330.15 159 Q 319 159 319 170.15 L 319 184 Q 470 202 621 184 L 621 170.15 Q 621 159 609.85 159 Z" fill="url(#mx-gradient-ffffff-0.9-ffffff-0.1-s-0)" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 298px; height: 1px; padding-top: 190px; margin-left: 321px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">active? flag on page defaulting to true. set to false to exclude page from diagram.</div></div></div></foreignObject><text x="470" y="194" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">active? flag on page defaulting to true. set to fa...</text></switch></g><rect x="640" y="160" width="300" height="60" rx="9" ry="9" fill="#f8cecc" stroke="#b85450" pointer-events="all"/><path d="M 650.15 159 Q 639 159 639 170.15 L 639 184 Q 790 202 941 184 L 941 170.15 Q 941 159 929.85 159 Z" fill="url(#mx-gradient-ffffff-0.9-ffffff-0.1-s-0)" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 298px; height: 1px; padding-top: 190px; margin-left: 641px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">first level child nodes need to hang of node 1</div></div></div></foreignObject><text x="790" y="194" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">first level child nodes need to hang of node 1</text></switch></g><rect x="0" y="240" width="300" height="60" rx="9" ry="9" fill="#f8cecc" stroke="#b85450" pointer-events="all"/><path d="M 10.15 239 Q -1 239 -1 250.15 L -1 264 Q 150 282 301 264 L 301 250.15 Q 301 239 289.85 239 Z" fill="url(#mx-gradient-ffffff-0.9-ffffff-0.1-s-0)" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 298px; height: 1px; padding-top: 270px; margin-left: 1px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">node has child nodes and add_node will set a nodes parent</div></div></div></foreignObject><text x="150" y="274" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">node has child nodes and add_node will set a nodes...</text></switch></g><rect x="320" y="240" width="300" height="60" rx="9" ry="9" fill="#f8cecc" stroke="#b85450" pointer-events="all"/><path d="M 330.15 239 Q 319 239 319 250.15 L 319 264 Q 470 282 621 264 L 621 250.15 Q 621 239 609.85 239 Z" fill="url(#mx-gradient-ffffff-0.9-ffffff-0.1-s-0)" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 298px; height: 1px; padding-top: 270px; margin-left: 321px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">nodes can belong to a parent node, the top level node responds with truthy to root?</div></div></div></foreignObject><text x="470" y="274" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">nodes can belong to a parent node, the top level n...</text></switch></g><rect x="640" y="240" width="300" height="60" rx="9" ry="9" fill="#f8cecc" stroke="#b85450" pointer-events="all"/><path d="M 650.15 239 Q 639 239 639 250.15 L 639 264 Q 790 282 941 264 L 941 250.15 Q 941 239 929.85 239 Z" fill="url(#mx-gradient-ffffff-0.9-ffffff-0.1-s-0)" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 298px; height: 1px; padding-top: 270px; margin-left: 641px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">add sample diagram for the github readme file</div></div></div></foreignObject><text x="790" y="274" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">add sample diagram for the github readme file</text></switch></g><rect x="0" y="320" width="300" height="60" rx="9" ry="9" fill="#f8cecc" stroke="#b85450" pointer-events="all"/><path d="M 10.15 319 Q -1 319 -1 330.15 L -1 344 Q 150 362 301 344 L 301 330.15 Q 301 319 289.85 319 Z" fill="url(#mx-gradient-ffffff-0.9-ffffff-0.1-s-0)" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 298px; height: 1px; padding-top: 350px; margin-left: 1px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">write samples into docs folder and display in readme</div></div></div></foreignObject><text x="150" y="354" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">write samples into docs folder and display in read...</text></switch></g><rect x="320" y="320" width="300" height="60" rx="9" ry="9" fill="#f8cecc" stroke="#b85450" pointer-events="all"/><path d="M 330.15 319 Q 319 319 319 330.15 L 319 344 Q 470 362 621 344 L 621 330.15 Q 621 319 609.85 319 Z" fill="url(#mx-gradient-ffffff-0.9-ffffff-0.1-s-0)" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 298px; height: 1px; padding-top: 350px; margin-left: 321px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">add export as .PNG, needs to take a page number as the PNG will not support multiple pages</div></div></div></foreignObject><text x="470" y="354" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">add export as .PNG, needs to take a page number as...</text></switch></g><rect x="640" y="320" width="300" height="60" rx="9" ry="9" fill="#f8cecc" stroke="#b85450" pointer-events="all"/><path d="M 650.15 319 Q 639 319 639 330.15 L 639 344 Q 790 362 941 344 L 941 330.15 Q 941 319 929.85 319 Z" fill="url(#mx-gradient-ffffff-0.9-ffffff-0.1-s-0)" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 298px; height: 1px; padding-top: 350px; margin-left: 641px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">add export as .SVG, needs to take a page number as the SVG will not support multiple pages</div></div></div></foreignObject><text x="790" y="354" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">add export as .SVG, needs to take a page number as...</text></switch></g><rect x="0" y="400" width="300" height="60" rx="9" ry="9" fill="#f8cecc" stroke="#b85450" pointer-events="all"/><path d="M 10.15 399 Q -1 399 -1 410.15 L -1 424 Q 150 442 301 424 L 301 410.15 Q 301 399 289.85 399 Z" fill="url(#mx-gradient-ffffff-0.9-ffffff-0.1-s-0)" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 298px; height: 1px; padding-top: 430px; margin-left: 1px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">add save as .drawio</div></div></div></foreignObject><text x="150" y="434" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">add save as .drawio</text></switch></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Text is not SVG - cannot display</text></a></switch></svg>