drawio_dsl 0.5.2 → 0.5.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bc020dbec3ff4115cab4aa60206f9e7321670c6337c6621134b592695f2f8037
-  data.tar.gz: 42f7bab79c6318c124cf457f1f2cabfd3738eff6ba3d8c8066bb486901cb0021
+  metadata.gz: 60804927795dfee66047328d57be2b2fbdb924622652f30551df7e89ec041ad1
+  data.tar.gz: d65e52b32cf6addeca5a34ab932ea8514b79a6c0d5ae0de937fe61039c8099aa
 SHA512:
-  metadata.gz: 62b9fa5927e15b638fe9e135fd90b5a304c248f9328a2c42d43079a15b06e839c309ebfa3a356d824fd29fe85bdcf2c02ccbe262dbd1a62aaa8a60ea2cca055d
-  data.tar.gz: 402641432dd415ff7694a3204ba2c5180910bb1f8642ce238c6374b4b2e3d930a93ea5ed4e6a04350cfa98f7c0fb5d7d5b49002022997e77e8c200ce242cfba9
+  metadata.gz: 7a7a8ac91696f596df2c25efa00ff308a7cd601bd7a5a40fb4de090538a96cf741d639b52e0f5e195140e10c0e107780b9c50323e1625ad4f64c3bc63f9becaa
+  data.tar.gz: 999205f96a80dff96d0d4645c921392e8a49a65bc25e1cbcd7950bb4c772f1fe636e42309be5bbf01ff484312c346985a78715aa53ccbc795b3e871896af9f93

data/.builders/.data/shapes.json

@@ -1,6 +1,70 @@
 [
+  {
+    "type": "h1",
+    "text_only": true,
+    "x": 0,
+    "y": 0,
+    "w": 100,
+    "h": 50,
+    "style_modifiers": "text;fontSize=89;fontColor=#ffffff;fontStyle=1;fillColor=none"
+  },
+  {
+    "type": "h2",
+    "text_only": true,
+    "x": 0,
+    "y": 0,
+    "w": 100,
+    "h": 50,
+    "style_modifiers": "text;fontSize=67;fontColor=#ffffff;fontStyle=1;fillColor=none"
+  },
+  {
+    "type": "h3",
+    "text_only": true,
+    "x": 0,
+    "y": 0,
+    "w": 100,
+    "h": 50,
+    "style_modifiers": "text;fontSize=50;fontColor=#ffffff;fontStyle=1;fillColor=none"
+  },
+  {
+    "type": "h4",
+    "text_only": true,
+    "x": 0,
+    "y": 0,
+    "w": 100,
+    "h": 50,
+    "style_modifiers": "text;fontSize=37;fontColor=#ffffff;fontStyle=1;fillColor=none"
+  },
+  {
+    "type": "h5",
+    "text_only": true,
+    "x": 0,
+    "y": 0,
+    "w": 100,
+    "h": 50,
+    "style_modifiers": "text;fontSize=28;fontColor=#ffffff;fontStyle=1;fillColor=none"
+  },
+  {
+    "type": "h6",
+    "text_only": true,
+    "x": 0,
+    "y": 0,
+    "w": 100,
+    "h": 50,
+    "style_modifiers": "text;fontSize=21;fontColor=#ffffff;fontStyle=1;fillColor=none"
+  },
+  {
+    "type": "p",
+    "text_only": true,
+    "x": 0,
+    "y": 0,
+    "w": 100,
+    "h": 50,
+    "style_modifiers": "text;fontSize=16;fontColor=#ffffff;fontStyle=1;fillColor=none"
+  },
   {
     "type": "actor",
+    "text_only": false,
     "x": 0,
     "y": 0,
     "w": 40,
@@ -9,6 +73,7 @@
   },
   {
     "type": "actor2",
+    "text_only": false,
     "x": 0,
     "y": 0,
     "w": 30,
@@ -17,6 +82,7 @@
   },
   {
     "type": "callout",
+    "text_only": false,
     "x": 0,
     "y": 0,
     "w": 160,
@@ -25,6 +91,7 @@
   },
   {
     "type": "callout2",
+    "text_only": false,
     "x": 0,
     "y": 0,
     "w": 160,
@@ -33,6 +100,7 @@
   },
   {
     "type": "callout3",
+    "text_only": false,
     "x": 0,
     "y": 0,
     "w": 160,
@@ -41,6 +109,7 @@
   },
   {
     "type": "callout4",
+    "text_only": false,
     "x": 0,
     "y": 0,
     "w": 160,
@@ -49,6 +118,7 @@
   },
   {
     "type": "circle",
+    "text_only": false,
     "x": 0,
     "y": 0,
     "w": 160,
@@ -57,6 +127,7 @@
   },
   {
     "type": "cloud",
+    "text_only": false,
     "x": 0,
     "y": 0,
     "w": 160,
@@ -65,6 +136,7 @@
   },
   {
     "type": "cross",
+    "text_only": false,
     "x": 0,
     "y": 0,
     "w": 50,
@@ -73,6 +145,7 @@
   },
   {
     "type": "envelop",
+    "text_only": false,
     "x": 0,
     "y": 0,
     "w": 160,
@@ -81,6 +154,7 @@
   },
   {
     "type": "diamond",
+    "text_only": false,
     "x": 0,
     "y": 0,
     "w": 100,
@@ -89,6 +163,7 @@
   },
   {
     "type": "document",
+    "text_only": false,
     "x": 0,
     "y": 0,
     "w": 160,
@@ -97,6 +172,7 @@
   },
   {
     "type": "ellipse",
+    "text_only": false,
     "x": 0,
     "y": 0,
     "w": 200,
@@ -105,6 +181,7 @@
   },
   {
     "type": "hexagon",
+    "text_only": false,
     "x": 0,
     "y": 0,
     "w": 200,
@@ -113,6 +190,7 @@
   },
   {
     "type": "container",
+    "text_only": false,
     "x": 0,
     "y": 0,
     "w": 160,
@@ -121,6 +199,7 @@
   },
   {
     "type": "container2",
+    "text_only": false,
     "x": 0,
     "y": 0,
     "w": 160,
@@ -129,6 +208,7 @@
   },
   {
     "type": "container3",
+    "text_only": false,
     "x": 0,
     "y": 0,
     "w": 160,
@@ -137,6 +217,7 @@
   },
   {
     "type": "container4",
+    "text_only": false,
     "x": 0,
     "y": 0,
     "w": 160,
@@ -145,6 +226,7 @@
   },
   {
     "type": "note",
+    "text_only": false,
     "x": 0,
     "y": 0,
     "w": 160,
@@ -153,6 +235,7 @@
   },
   {
     "type": "process",
+    "text_only": false,
     "x": 0,
     "y": 0,
     "w": 200,
@@ -161,6 +244,7 @@
   },
   {
     "type": "rectangle",
+    "text_only": false,
     "x": 0,
     "y": 0,
     "w": 200,
@@ -169,6 +253,7 @@
   },
   {
     "type": "rectangle2",
+    "text_only": false,
     "x": 0,
     "y": 0,
     "w": 200,
@@ -177,6 +262,7 @@
   },
   {
     "type": "square",
+    "text_only": false,
     "x": 0,
     "y": 0,
     "w": 160,
@@ -185,6 +271,7 @@
   },
   {
     "type": "step",
+    "text_only": false,
     "x": 0,
     "y": 0,
     "w": 120,
@@ -193,6 +280,7 @@
   },
   {
     "type": "tick",
+    "text_only": false,
     "x": 0,
     "y": 0,
     "w": 50,
@@ -201,6 +289,7 @@
   },
   {
     "type": "face",
+    "text_only": false,
     "x": 0,
     "y": 0,
     "w": 100,
@@ -209,6 +298,7 @@
   },
   {
     "type": "triangle",
+    "text_only": false,
     "x": 0,
     "y": 0,
     "w": 100,
@@ -217,6 +307,7 @@
   },
   {
     "type": "embed_row",
+    "text_only": false,
     "x": 0,
     "y": 0,
     "w": 200,
@@ -225,6 +316,7 @@
   },
   {
     "type": "embed_col50",
+    "text_only": false,
     "x": 0,
     "y": 0,
     "w": 50,
@@ -233,6 +325,7 @@
   },
   {
     "type": "embed_col200",
+    "text_only": false,
     "x": 0,
     "y": 0,
     "w": 150,

data/.builders/.templates/basic/configuration_shapes.rb

@@ -5,7 +5,7 @@
 module DrawioDsl
   # Used to attach configuration to KConfig module
   module ConfigurationShapes
-    ShapeDefaults   = Struct.new(:type, :x, :y, :w, :h, :style_modifiers, keyword_init: true)
+    ShapeDefaults   = Struct.new(:type, :text_only, :x, :y, :w, :h, :style_modifiers, keyword_init: true)
     Shapes = Struct.new(
       :shape,
       {{#each shapes}}
@@ -16,9 +16,9 @@ module DrawioDsl
 
     def add_shapes
       @shapes = Shapes.new(
-        shape: ShapeDefaults.new(type: :shape, x: 0, y: 0, w: 20, h: 20, style_modifiers: ''),
+        shape: ShapeDefaults.new(type: :shape, text_only: false, x: 0, y: 0, w: 20, h: 20, style_modifiers: ''),
         {{#each shapes}}
-        {{snake ./type}}: ShapeDefaults.new(type: :{{snake ./type}}, x: {{./x}}, y: {{./y}}, w: {{./w}}, h: {{./h}}, style_modifiers: '{{{./style_modifiers}}}'){{#if @last}}{{^}},{{/if}}
+        {{snake ./type}}: ShapeDefaults.new(type: :{{snake ./type}}, x: {{./x}}, text_only: {{./text_only}}, y: {{./y}}, w: {{./w}}, h: {{./h}}, style_modifiers: '{{{./style_modifiers}}}'){{#if @last}}{{^}},{{/if}}
         {{/each}}
       )
     end

data/.builders/.templates/basic/schema_require.rb

@@ -4,6 +4,7 @@ require_relative 'common_style'
 require_relative 'default_palette'
 require_relative 'diagram'
 require_relative 'node'
+require_relative 'node_list'
 require_relative 'page'
 
 require_relative 'layouts/layout'

data/.builders/blueprint/shapes.rb

@@ -2,45 +2,53 @@ KManager.model :shapes, namespace: %i[domain] do
   # microapp = import(:handlebars_helpers, :microapp)
 
   table :shapes do
-    fields [:type, :x, :y, :w, :h, :style_modifiers]
+    fields [:type, :text_only, :x, :y, :w, :h, :style_modifiers]
 
     # shape is a custom object
     # row :shape      , 0, 0,  20,  20, ''
 
     # configuration for general purpose shapes
-    row :actor                , 0, 0,  40,  50, 'shape=actor'
-    row :actor2               , 0, 0,  30,  50, 'shape=umlActor;verticalLabelPosition=bottom;outlineConnect=1'
-    row :callout              , 0, 0, 160, 120, 'shape=callout'
-    row :callout2             , 0, 0, 160, 160, 'shape=mxgraph.basic.oval_callout'
-    row :callout3             , 0, 0, 160, 160, 'shape=mxgraph.basic.cloud_callout'
-    row :callout4             , 0, 0, 160, 120, 'shape=mxgraph.basic.roundRectCallout;dx=30;dy=15;size=5;boundedLbl=1;'
-    row :circle               , 0, 0, 160, 160, 'ellipse'
-    row :cloud                , 0, 0, 160, 160, 'shape=cloud'
-    row :cross                , 0, 0,  50,  50, 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.x'
-    row :envelop              , 0, 0, 160, 100, 'shape=message'
-    row :diamond              , 0, 0, 100, 100, 'rhombus'
-    row :document             , 0, 0, 160, 160, 'shape=mxgraph.basic.document'
-    row :ellipse              , 0, 0, 200, 120, 'ellipse'
-    row :hexagon              , 0, 0, 200, 120, 'shape=hexagon'
-    row :container            , 0, 0, 160, 160, 'swimlane'
-    row :container2           , 0, 0, 160, 160, 'swimlane;horizontal=0'
-    row :container3           , 0, 0, 160, 160, 'swimlane;startSize=50'
-    row :container4           , 0, 0, 160, 160, 'swimlane;resizable=0'
-    row :note                 , 0, 0, 160, 160, 'shape=note'
-    row :process              , 0, 0, 200, 120, 'shape=process'
-    row :rectangle            , 0, 0, 200, 120, ''
-    row :rectangle2           , 0, 0, 200, 120, 'shape=mxgraph.basic.cloud_rect'
-    row :square               , 0, 0, 160, 160, ''
-    row :step                 , 0, 0, 120,  80, 'shape=step;perimeter=stepPerimeter;fixedSize=1'
-    row :tick                 , 0, 0,  50,  50, 'verticalLabelPosition=bottom;verticalAlign=top;shape=mxgraph.basic.tick'
-    row :face                 , 0, 0, 100, 100, 'verticalLabelPosition=bottom;verticalAlign=top;shape=mxgraph.basic.smiley'
-    row :triangle             , 0, 0, 100, 100, 'triangle'
+    row :h1                   ,  true, 0, 0, 100,  50, 'text;fontSize=89;fontColor=#ffffff;fontStyle=1;fillColor=none'
+    row :h2                   ,  true, 0, 0, 100,  50, 'text;fontSize=67;fontColor=#ffffff;fontStyle=1;fillColor=none'
+    row :h3                   ,  true, 0, 0, 100,  50, 'text;fontSize=50;fontColor=#ffffff;fontStyle=1;fillColor=none'
+    row :h4                   ,  true, 0, 0, 100,  50, 'text;fontSize=37;fontColor=#ffffff;fontStyle=1;fillColor=none'
+    row :h5                   ,  true, 0, 0, 100,  50, 'text;fontSize=28;fontColor=#ffffff;fontStyle=1;fillColor=none'
+    row :h6                   ,  true, 0, 0, 100,  50, 'text;fontSize=21;fontColor=#ffffff;fontStyle=1;fillColor=none'
+    row :p                    ,  true, 0, 0, 100,  50, 'text;fontSize=16;fontColor=#ffffff;fontStyle=1;fillColor=none'
+
+    row :actor                , false, 0, 0,  40,  50, 'shape=actor'
+    row :actor2               , false, 0, 0,  30,  50, 'shape=umlActor;verticalLabelPosition=bottom;outlineConnect=1'
+    row :callout              , false, 0, 0, 160, 120, 'shape=callout'
+    row :callout2             , false, 0, 0, 160, 160, 'shape=mxgraph.basic.oval_callout'
+    row :callout3             , false, 0, 0, 160, 160, 'shape=mxgraph.basic.cloud_callout'
+    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 :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 :note                 , false, 0, 0, 160, 160, 'shape=note'
+    row :process              , false, 0, 0, 200, 120, 'shape=process'
+    row :rectangle            , false, 0, 0, 200, 120, ''
+    row :rectangle2           , false, 0, 0, 200, 120, 'shape=mxgraph.basic.cloud_rect'
+    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 :face                 , false, 0, 0, 100, 100, 'verticalLabelPosition=bottom;verticalAlign=top;shape=mxgraph.basic.smiley'
+    row :triangle             , false, 0, 0, 100, 100, 'triangle'
 
     # configuration for embedded element shape
     # note that the width / height probably should be driven of parent shape
-    row :embed_row            , 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'
-    row :embed_col50          , 0, 0,  50,  40, 'shape=partialRectangle;connectable=0;top=0;left=0;bottom=0;right=0;fontStyle=1;overflow=hidden'
-    row :embed_col200         , 0, 0, 150,  40, 'shape=partialRectangle;connectable=0;top=0;left=0;bottom=0;right=0;align=left;spacingLeft=6;overflow=hidden'
+    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'
+    row :embed_col50          , false, 0, 0,  50,  40, 'shape=partialRectangle;connectable=0;top=0;left=0;bottom=0;right=0;fontStyle=1;overflow=hidden'
+    row :embed_col200         , false, 0, 0, 150,  40, 'shape=partialRectangle;connectable=0;top=0;left=0;bottom=0;right=0;align=left;spacingLeft=6;overflow=hidden'
   end
 
   action do

data/.builders/boot.rb

@@ -53,6 +53,7 @@ KConfig.configure(CONFIG_KEY) do |config|
   config.target_folders.add(:app                  , base_folder)
   config.target_folders.add(:lib                  , :app, 'lib', 'drawio_dsl')
   config.target_folders.add(:spec                 , :app, 'spec', 'drawio_dsl')
+  config.target_folders.add(:docs                 , :app, 'docs')
   config.target_folders.add(:builder              , builder_folder)
   config.target_folders.add(:data                 , :builder, '.data')
 end

data/.builders/generators/02-generate-app.rb

@@ -17,6 +17,7 @@ KManager.action :requires do
 
         add('schema/_.rb', template_file: 'schema_require.rb', shapes: shapes)
 
+        # build source code for each shape
         shapes.each do |shape|
           add("schema/shapes/#{shape['type']}.rb",
             template_file: 'schema_shape.rb',
@@ -29,6 +30,7 @@ KManager.action :requires do
 
         cd(:spec)
 
+        # build spec for each shape
         shapes.each do |shape|
           add("schema/shapes/#{shape['type']}_spec.rb",
             template_file: 'schema_shape_spec.rb',

data/.builders/generators/project_plans/drawio_dsl.rb

@@ -0,0 +1,57 @@
+KManager.action :todo_drawio_dsl 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)
+
+        square(w: 300, h: 60, title: 'write SVG directly into other projects')
+      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)
+
+        square(w: 300, h: 60, title: 'First level child nodes need to hang of node 1')
+        square(w: 300, h: 60, title: 'Add page background to theme, use it whenever the theme is set at a diagram/page level')
+        square(w: 300, h: 60, title: 'Nodes need to support child nodes')
+        square(w: 300, h: 60, title: 'Grid layout does no position itself in relation to the last element')
+        square(w: 300, h: 60, title: 'Dynamic sized shapes that expand to the size of their text')
+        square(w: 300, h: 60, title: 'Control of text padding left, right, top and bottom')
+        square(w: 300, h: 60, title: 'Improve the theme control over text-only shapes')
+        square(w: 300, h: 60, title: 'x,y settings do not work for shapes within a grid layout')
+        square(w: 300, h: 60, title: 'background color does not work from the diagram object')
+        square(w: 300, h: 60, title: 'settings style attributes need to de-duplicate')
+        square(w: 300, h: 60, title: 'need to setup new project plans')
+        square(w: 300, h: 60, title: 'write SVG directly into other projects')
+        square(w: 300, h: 60, 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)
+
+        square(w: 300, h: 60, title: 'write samples into docs folder and display in readme')
+        square(w: 300, h: 60, title: 'add export as .PNG, needs to take a page number as the PNG will not support multiple pages')
+        square(w: 300, h: 60, title: 'add export as .SVG, needs to take a page number as the SVG will not support multiple pages')
+        square(w: 300, h: 60, title: 'add save as .drawio')
+
+      end
+      .cd(:spec)
+      .save('project-plans/drawio_dsl.drawio')
+      .cd(:docs)
+      .export_svg('project_in_progress', page: 1)
+      .export_svg('project_todo'       , page: 2)
+      .export_svg('project_done'       , page: 3)
+  end
+end

data/.builders/generators/sample_diagrams/10-page-margin.rb

@@ -1,7 +1,7 @@
 KManager.action :bootstrap do
   action do
-    director = DrawioDsl::Drawio
-      .init(k_builder)
+    DrawioDsl::Drawio
+      .init(k_builder, on_exist: :write, on_action: :execute)
       .diagram(theme: :style_01)
       .page('PgMargin-default') do
         grid_layout(wrap_at: 4)
@@ -36,11 +36,7 @@ KManager.action :bootstrap do
         square
         circle
       end
-
-    diagram = DrawioDsl::XmlBuilder.new(director.builder.diagram)
-
-
-    File.write('../spec/.samples/drawio/10-page-margin.xml', diagram.build)
-    File.write('../spec/.samples/drawio/10-page-margin.drawio', diagram.build)
+      .cd(:spec)
+      .save('.samples/10-page-margin.drawio')
   end
 end

data/.builders/generators/sample_diagrams/15-grid-direction.rb

@@ -8,11 +8,12 @@ KManager.action :bootstrap do
     # KConfig.configuration.drawio.rectangle.w = KConfig.configuration.drawio.rectangle.w / 4
     # KConfig.configuration.drawio.rectangle.h = KConfig.configuration.drawio.rectangle.h / 4
 
-    director = DrawioDsl::Drawio
-      .init(k_builder)
+    DrawioDsl::Drawio
+      .init(k_builder, on_exist: :write, on_action: :execute)
       .diagram(theme: :style_01)
       .page('Horizontal', margin_left: 0, margin_top: 0) do
         grid_layout(wrap_at: 3, direction: :horizontal)
+        h4(title: 'Horizontal')
         circle(title: '01')
         square(title: '02')
         circle(title: '03')
@@ -23,6 +24,7 @@ KManager.action :bootstrap do
       end
       .page('Vertical', margin_left: 0, margin_top: 0) do
         grid_layout(wrap_at: 3, direction: :vertical)
+        h4(title: 'Vertical')
         circle(title: '01')
         square(title: '02')
         circle(title: '03')
@@ -31,10 +33,10 @@ KManager.action :bootstrap do
         square(title: '06')
         circle(title: '07')
       end
-
-    diagram = DrawioDsl::XmlBuilder.new(director.builder.diagram)
-
-    File.write('../spec/.samples/drawio/15-grid-direction.xml', diagram.build)
-    File.write('../spec/.samples/drawio/15-grid-direction.drawio', diagram.build)
+      .cd(:spec)
+      .save('.samples/15-grid-direction.drawio')
+      .cd(:docs)
+      .export_svg('samples/grid-direction-horizontal', page: 1)
+      .export_svg('samples/grid-direction-vertical', page: 2)
   end
 end

data/.builders/generators/sample_diagrams/16-grid-alignment.rb

@@ -9,10 +9,7 @@ KManager.action :bootstrap do
     # KConfig.configuration.drawio.rectangle.h = KConfig.configuration.drawio.rectangle.h / 4
 
     director = DrawioDsl::Drawio
-      .init(k_builder,
-        on_exist:                   :skip,                      # %i[skip write compare]
-        on_action:                  :queue                      # %i[queue execute]
-      )
+      .init(k_builder, on_exist: :write, on_action: :execute)
       .diagram(theme: :style_01)
       .page('Grid-Center', margin_left: 0, margin_top: 0) do
         grid_layout(wrap_at: 3)
@@ -64,10 +61,10 @@ KManager.action :bootstrap do
         square
         circle
       end
-
-    diagram = DrawioDsl::XmlBuilder.new(director.builder.diagram)
-
-    File.write('../spec/.samples/drawio/16-grid-alignment.xml', diagram.build)
-    File.write('../spec/.samples/drawio/16-grid-alignment.drawio', diagram.build)
+      .cd(:spec)
+      .save('.samples/16-grid-alignment.drawio')
+      .cd(:docs)
+      # note: there is no difference between center and top/bottom/left/right using SVG/PNG
+      .export_svg('samples/grid-alignment', page: 1)
   end
 end