drawio_dsl 0.8.1 → 0.8.4

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, :text_only, :x, :y, :w, :h, :style_modifiers, keyword_init: true)
+    ShapeDefaults   = Struct.new(:type, :category, :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, text_only: false, x: 0, y: 0, w: 20, h: 20, style_modifiers: ''),
+        shape: ShapeDefaults.new(type: :shape, category: :element, x: 0, y: 0, w: 20, h: 20, style_modifiers: ''),
         {{#each shapes}}
-        {{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}}
+        {{snake ./type}}: ShapeDefaults.new(type: :{{snake ./type}}, x: {{./x}}, category: :{{./category}}, y: {{./y}}, w: {{./w}}, h: {{./h}}, style_modifiers: '{{{./style_modifiers}}}'){{#if @last}}{{^}},{{/if}}
         {{/each}}
       )
     end

data/.builders/blueprint/shapes.rb

@@ -1,6 +1,14 @@
 m = KManager.model :shapes, namespace: %i[domain] do
   # microapp = import(:handlebars_helpers, :microapp)
 
+  # other settings
+  # strokeWidth: 1-n
+  # when there is an arrow at beginning
+  # startFill=1,0
+  # when there is an arrow at end
+  # endFill=1,0
+
+
   table :strokes do
     fields [:name, :style]
 
@@ -16,69 +24,147 @@ m = KManager.model :shapes, namespace: %i[domain] do
     row :dashed44             , 'dashed=1;fixDash=1;dashPattern=8 8'
   end
 
+  table :connector_compass do
+    fields %i[name x y]
+
+    row :n  , x: 0.5 , y: 0       # 'exitX=0.5;exitY=0;exitDx=0;exitDy=0'  'entryX=0.5;entryY=0;entryDx=0;entryDy=0'
+    row :ne , x: 1   , y: 0       # 'exitX=1;exitY=0;exitDx=0;exitDy=0'    'entryX=1;entryY=0;entryDx=0;entryDy=0'
+    row :e  , x: 1   , y: 0.5     # 'exitX=1;exitY=0.5;exitDx=0;exitDy=0'  'entryX=1;entryY=0.5;entryDx=0;entryDy=0'
+    row :se , x: 1   , y: 1       # 'exitX=1;exitY=1;exitDx=0;exitDy=0'    'entryX=1;entryY=1;entryDx=0;entryDy=0'
+    row :s  , x: 0.5 , y: 1       # 'exitX=0.5;exitY=1;exitDx=0;exitDy=0'  'entryX=0.5;entryY=1;entryDx=0;entryDy=0'
+    row :sw , x: 0   , y: 1       # 'exitX=0;exitY=1;exitDx=0;exitDy=0'    'entryX=0;entryY=1;entryDx=0;entryDy=0'
+    row :w  , x: 0   , y: 0.5     # 'exitX=0;exitY=0.5;exitDx=0;exitDy=0'  'entryX=0;entryY=0.5;entryDx=0;entryDy=0'
+    row :nw , x: 0   , y: 0       # 'exitX=0;exitY=0;exitDx=0;exitDy=0'    'entryX=0;entryY=0;entryDx=0;entryDy=0'
+  end
+
+  table :connector_design do
+    fields [:name, :style]
+
+    row :style1, ''
+    row :style2, 'shape=link'
+    row :style3, 'shape=flexArrow'
+    row :style4, 'shape=arrow'
+  end
+
+  table :connector_arrows do
+    fields [:name, :style]
+
+    row :simple                     , 'open'
+    row :triangle                   , 'block'
+    row :diamond                    , 'diamond'
+    row :circle                     , 'oval'
+    row :cross                      , 'cross'
+    row :short                      , 'classicThin'
+    row :default                    , 'classic'
+    row :none                       , 'none'
+    row :plain                      , 'open'
+    row :skewed_dash                , 'dash'
+    row :concave                    , 'openThin'
+    row :er_many                    , 'ERmany'
+    row :er_one                     , 'ERone'
+    row :er_one_optional            , 'ERzeroToOne'
+    row :er_one_mandatory           , 'ERmandOne'
+    row :er_many_optional           , 'ERzeroToMany'
+    row :er_many_mandatory          , 'ERoneToMany'
+  end
+
+  table :connector_waypoints do # aka edgeStyle
+    fields [:name, :style]
+
+    row :straight                 , 'edgeStyle=none'
+    row :orthogonal               , 'edgeStyle=orthogonalEdgeStyle'
+    row :elbow                    , 'edgeStyle=elbowEdgeStyle'
+    row :elbow_vertical           , 'edgeStyle=elbowEdgeStyle;elbow=vertical'
+    row :isometric                , 'edgeStyle=isometricEdgeStyle'
+    row :isometric_vertical       , 'edgeStyle=isometricEdgeStyle;elbow=vertical'
+    row :orthogonal_curved        , 'edgeStyle=orthogonalEdgeStyle;curved=1'
+    row :entity_relation          , 'edgeStyle=entityRelationEdgeStyle'
+  end
+
   table :shapes do
-    fields [:type, :text_only, :x, :y, :w, :h, :style_modifiers]
+    fields [:type, :category, :x, :y, :w, :h, :style_modifiers]
 
     # shape is a custom object
     # row :shape      , 0, 0,  20,  20, ''
 
-    # configuration for general purpose shapes
-    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 :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 :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, ''
-    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 :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;'
+    row :line                 , :line   , 0, 0,  50,  50, 'edgeStyle=none;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0'
+    # row :line                 , :line   , 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;'
+    # 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'
     # edge="1" parent="node_root_2T8" source="b" target="c"
 
+    # configuration for general purpose shapes
+    row :h1                   , :text   , 0, 0, 100,  50, 'text;fontSize=89;fontColor=#ffffff;fontStyle=1;fillColor=none'
+    row :h2                   , :text   , 0, 0, 100,  50, 'text;fontSize=67;fontColor=#ffffff;fontStyle=1;fillColor=none'
+    row :h3                   , :text   , 0, 0, 100,  50, 'text;fontSize=50;fontColor=#ffffff;fontStyle=1;fillColor=none'
+    row :h4                   , :text   , 0, 0, 100,  50, 'text;fontSize=37;fontColor=#ffffff;fontStyle=1;fillColor=none'
+    row :h5                   , :text   , 0, 0, 100,  50, 'text;fontSize=28;fontColor=#ffffff;fontStyle=1;fillColor=none'
+    row :h6                   , :text   , 0, 0, 100,  50, 'text;fontSize=21;fontColor=#ffffff;fontStyle=1;fillColor=none'
+    row :p                    , :text   , 0, 0, 100,  50, 'text;fontSize=16;fontColor=#ffffff;fontStyle=1;fillColor=none'
+
+    row :actor                , :element, 0, 0,  40,  50, 'shape=actor'
+    row :actor2               , :element, 0, 0,  30,  50, 'shape=umlActor;verticalLabelPosition=bottom;outlineConnect=1'
+    row :callout              , :element, 0, 0, 160, 120, 'shape=callout'
+    row :callout2             , :element, 0, 0, 160, 160, 'shape=mxgraph.basic.oval_callout'
+    row :callout3             , :element, 0, 0, 160, 160, 'shape=mxgraph.basic.cloud_callout'
+    row :callout4             , :element, 0, 0, 160, 120, 'shape=mxgraph.basic.roundRectCallout;dx=30;dy=15;size=5;boundedLbl=1;'
+    row :circle               , :element, 0, 0, 160, 160, 'ellipse'
+    row :cloud                , :element, 0, 0, 160, 160, 'shape=cloud'
+    row :container            , :element, 0, 0, 160, 160, 'swimlane'
+    row :container2           , :element, 0, 0, 160, 160, 'swimlane;horizontal=0'
+    row :container3           , :element, 0, 0, 160, 160, 'swimlane;startSize=50'
+    row :container4           , :element, 0, 0, 160, 160, 'swimlane;resizable=0'
+    row :cross                , :element, 0, 0,  50,  50, 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.x'
+    row :envelop              , :element, 0, 0, 160, 100, 'shape=message'
+    row :database             , :element, 0, 0, 160,  80, 'shape=mxgraph.flowchart.database;strokeWidth=1'
+    row :diamond              , :element, 0, 0, 100, 100, 'rhombus'
+    row :document             , :element, 0, 0, 160, 160, 'shape=mxgraph.basic.document'
+    row :ellipse              , :element, 0, 0, 200, 120, 'ellipse'
+    row :hexagon              , :element, 0, 0, 200, 120, 'shape=hexagon'
+    row :interface            , :element, 0, 0, 160, 160, 'align=left;overflow=fill;fontSize=12;fontFamily=Helvetica'
+    row :klass                , :element, 0, 0, 160, 160, 'align=left;overflow=fill;fontSize=12;fontFamily=Helvetica'
+    row :note                 , :element, 0, 0, 160, 160, 'shape=note'
+    row :process              , :element, 0, 0, 200, 120, 'shape=process'
+    row :rectangle            , :element, 0, 0, 200, 120, ''
+    row :rectangle2           , :element, 0, 0, 200, 120, 'shape=mxgraph.basic.cloud_rect'
+    row :square               , :element, 0, 0, 160, 160, ''
+    row :step                 , :element, 0, 0, 120,  80, 'shape=step;perimeter=stepPerimeter;fixedSize=1'
+    row :tick                 , :element, 0, 0,  50,  50, 'verticalLabelPosition=bottom;verticalAlign=top;shape=mxgraph.basic.tick'
+    row :todo                 , :element, 0, 0, 300,  60, ''
+    row :face                 , :element, 0, 0, 100, 100, 'verticalLabelPosition=bottom;verticalAlign=top;shape=mxgraph.basic.smiley'
+    row :triangle             , :element, 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            , 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'
+    row :embed_row            , :element, 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          , :element, 0, 0,  50,  40, 'shape=partialRectangle;connectable=0;top=0;left=0;bottom=0;right=0;fontStyle=1;overflow=hidden'
+    row :embed_col200         , :element, 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 = self.raw_data
-    shapes = JSON.pretty_generate(data['shapes'])
+    content = {
+      strokes: data['strokes'],
+      connector: {
+        compass: data['connector_compass'],
+        waypoints: data['connector_waypoints'],
+        arrows: data['connector_arrows'],
+        design: data['connector_design']
+      },
+      shapes: data['shapes'],
+    }
 
     k_builder
       .cd(:data)
-      .add_file('shapes.json', content: shapes, on_exist: :write)
+      .add_file('shapes.json', content: JSON.pretty_generate(content), on_exist: :write)
   end
 end
 

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

@@ -2,7 +2,9 @@ KManager.action :requires do
 
   action do
     shapes_file = k_builder.target_folders.get_filename(:data, 'shapes.json')
-    shapes = JSON.parse(File.read(shapes_file))
+    shapes_configuration = JSON.parse(File.read(shapes_file))
+    shapes = shapes_configuration['shapes']
+    # strokes = shapes_configuration['strokes']
 
     KDirector::Dsls::BasicDsl
       .init(k_builder,

data/.builders/generators/domain_diagram.rb

@@ -0,0 +1,40 @@
+KManager.action :domain_diagram do
+  action do
+
+    DrawioDsl::Drawio
+      .init(k_builder, on_exist: :write, on_action: :execute)
+      .diagram(theme: :style_04)
+      .page('Style-Plain', margin_left: 0, margin_top: 0, rounded: 0, background: '#fafafa') do
+        grid_layout(wrap_at: 6)
+
+        klass do
+          format
+            .header('Container', description: 'A container acts a base data object for any data that requires tagging')
+        end
+        interface(theme: :style_02) do
+          format
+            .header('Block Processor', interface_type: 'MixIn', description: 'Provide data load events, dependency and import management')
+        end
+        square(title: 'Documents', theme: :style_01)
+        interface(theme: :style_02) do
+          format
+            .header('Block Processor', interface_type: 'MixIn', description: 'Provide data load events, dependency and import management')
+            .field(:block, type: :proc)
+            .field(:block_state, type: :symbol)
+            .method(:depend_on)
+        end
+      end
+      .cd(:docs)
+      .save('domain.drawio')
+      .export_svg('domain_model', page: 1)
+  end
+end
+
+KManager.opts.app_name                    = 'domain_diagram'
+KManager.opts.sleep                       = 2
+KManager.opts.reboot_on_kill              = 0
+KManager.opts.reboot_sleep                = 4
+KManager.opts.exception_style             = :short
+KManager.opts.show.time_taken             = true
+KManager.opts.show.finished               = true
+KManager.opts.show.finished_message       = 'FINISHED :)'

data/.builders/generators/printspeak-architecture-generator.rb

@@ -0,0 +1,40 @@
+KManager.action :domain_diagram do
+  action do
+
+    DrawioDsl::Drawio
+      .init(k_builder, on_exist: :write, on_action: :execute)
+      .diagram(theme: :style_04)
+      .page('Style-Plain', margin_left: 0, margin_top: 0, rounded: 0, background: '#fafafa') do
+        grid_layout(wrap_at: 6)
+
+        klass do
+          format
+            .header('Container', description: 'A container acts a base data object for any data that requires tagging')
+        end
+        interface(theme: :style_02) do
+          format
+            .header('Block Processor', interface_type: 'MixIn', description: 'Provide data load events, dependency and import management')
+        end
+        square(title: 'Documents', theme: :style_01)
+        interface(theme: :style_02) do
+          format
+            .header('Block Processor', interface_type: 'MixIn', description: 'Provide data load events, dependency and import management')
+            .field(:block, type: :proc)
+            .field(:block_state, type: :symbol)
+            .method(:depend_on)
+        end
+      end
+      .cd(:docs)
+      .save('domain.drawio')
+      .export_svg('domain_model', page: 1)
+  end
+end
+
+KManager.opts.app_name                    = 'domain_diagram'
+KManager.opts.sleep                       = 2
+KManager.opts.reboot_on_kill              = 0
+KManager.opts.reboot_sleep                = 4
+KManager.opts.exception_style             = :short
+KManager.opts.show.time_taken             = true
+KManager.opts.show.finished               = true
+KManager.opts.show.finished_message       = 'FINISHED :)'

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

@@ -10,11 +10,12 @@ KManager.action :project_plan do
         # 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: 'build a domain (class) diagram')
         todo(title: 'add new shapes related to line connectors')
+        todo(title: 'line connector aliases gives a simple way to use predefined line configurations')
         todo(title: 'line connectors need to support autolinking using ids')
+        todo(title: 'line connectors should not effect the grid positioning systems')
       end
       .page('To Do', theme: :style_02, margin_left: 0, margin_top: 0) do
 
@@ -29,7 +30,7 @@ KManager.action :project_plan do
         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: 'add :shape, :line and :text 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')
@@ -45,6 +46,13 @@ KManager.action :project_plan do
 
         grid_layout(y:90, direction: :horizontal, grid_h: 80, grid_w: 320, wrap_at: 3, grid: 0)
 
+        todo(title: 'build configuration for line strokes %i[dashed dotted dashdot dashdotdot dotdotdot longdash)')
+        todo(title: 'build configuration for line compass %i[n ne e se s sw w nw]')
+        todo(title: 'build configuration for line shape %i[style1 style2 style3 style4]')
+        todo(title: 'build configuration for arrows %i[straight triangle diamond circle cross short default none plain skewed_dash concave er_many er_one er_one_optional er_one_mandatory er_many_optional er_many_mandatory]')
+        todo(title: 'refactor the shape->text_only (boolean) to category (symbol)')
+        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: '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')
@@ -61,7 +69,6 @@ KManager.action :project_plan do
         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')

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

@@ -5,15 +5,25 @@ KManager.action :bootstrap do
       .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)
+        grid_layout(wrap_at: 2, grid_w: 400)
+
+        shape_count = 2
+        # for 1 to 20 step 2
+        (1..shape_count).step(2).each do |i|
+          circle(i, title: i)
+          ellipse(i+1, title: i + 1)
+        end
+
+        (1..shape_count).step(2).each do |i|
+          line(source: i, target: i+1)
+        end
+
+        # # label = '<div style="background-color: #B85450; height: 100%; margin: 0; border: 1px solid red;"><p style="padding: 10px; font-size: 12px;color: #ffffff;width: 150px;"><img style="margin-right: 20px" src="https://picsum.photos/40" /> the quick brown fox jumped over the lazy dog</p></div>'
+        # label = ''
 
-        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')
+      .save('.samples/35-ids-and-arrows.drawio')
       # .cd(:docs)
       # .export_svg('samples/styles-plain', page: 1)
   end

data/CHANGELOG.md

@@ -1,3 +1,25 @@
+## [0.8.3](https://github.com/klueless-io/drawio_dsl/compare/v0.8.2...v0.8.3) (2022-03-17)
+
+
+### Bug Fixes
+
+* add line configuration definitions ([a1e0f50](https://github.com/klueless-io/drawio_dsl/commit/a1e0f509f309096013fa0db2d03a61fe78816948))
+* add line configuration definitions ([6864470](https://github.com/klueless-io/drawio_dsl/commit/6864470d00f1ffaa2d7dc572fa0d857f5d40256b))
+
+## [0.8.2](https://github.com/klueless-io/drawio_dsl/compare/v0.8.1...v0.8.2) (2022-03-17)
+
+
+### Bug Fixes
+
+* refactor the shape->text_only (boolean) to category (symbol) ([a469b2f](https://github.com/klueless-io/drawio_dsl/commit/a469b2fb0af9e47af35e8835fde79faba66a36df))
+
+## [0.8.1](https://github.com/klueless-io/drawio_dsl/compare/v0.8.0...v0.8.1) (2022-03-16)
+
+
+### Bug Fixes
+
+* alter the initial parameter of all shapes so that it can be an ID, without named attribute ([9c00a63](https://github.com/klueless-io/drawio_dsl/commit/9c00a634f818d25b92042a9cdb81749dbe994cf5))
+
 # [0.8.0](https://github.com/klueless-io/drawio_dsl/compare/v0.7.0...v0.8.0) (2022-03-15)
 
 

data/docs/domain.drawio

@@ -0,0 +1,31 @@
+<mxfile host="65bd71144e">
+    <diagram id="X2d" name="Style-Plain">
+        <mxGraphModel dx="862" dy="583" grid="0" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" background="#fafafa" math="0" shadow="0">
+            <root>
+                <mxCell id="page_root_X2d"/>
+                <mxCell id="node_root_X2d" parent="page_root_X2d"/>
+                <mxCell id="X2d-2" value="&lt;p style=&quot;margin:0px;margin-left:4px;margin-top:4px;text-align:center&quot;&gt;&lt;b&gt;Container&lt;/b&gt;&lt;/p&gt;&lt;hr size=&quot;1&quot;/&gt;" style="whiteSpace=wrap;html=1;rounded=0;fillColor=#ffe6cc;strokeColor=#d79b00;fontColor=#333333;align=left;overflow=fill;fontSize=12;fontFamily=Helvetica" parent="node_root_X2d" vertex="1">
+                    <mxGeometry x="30" y="30" width="160" height="160" as="geometry"/>
+                </mxCell>
+                <mxCell id="X2d-3" value="&lt;p style=&quot;margin:0px;margin-left:4px;margin-top:4px;text-align:center&quot;&gt;&lt;i&gt;&amp;lt;&amp;lt; MixIn &amp;gt;&amp;gt;&lt;/i&gt;&lt;/p&gt;&lt;p style=&quot;margin:0px;margin-left:4px;margin-top:4px;text-align:center&quot;&gt;&lt;b&gt;Block Processor&lt;/b&gt;&lt;/p&gt;&lt;hr size=&quot;1&quot;/&gt;" style="whiteSpace=wrap;html=1;rounded=0;fillColor=#dae8fc;strokeColor=#6c8ebf;fontColor=#333333;align=left;overflow=fill;fontSize=12;fontFamily=Helvetica" parent="node_root_X2d" vertex="1">
+                    <mxGeometry x="250" y="30" width="160" height="160" as="geometry"/>
+                </mxCell>
+                <mxCell id="X2d-4" value="Documents" style="whiteSpace=wrap;html=1;rounded=0;fillColor=#f5f5f5;strokeColor=#666666;fontColor=#333333" parent="node_root_X2d" vertex="1">
+                    <mxGeometry x="470" y="30" width="160" height="160" as="geometry"/>
+                </mxCell>
+                <mxCell id="X2d-5" value="&lt;p style=&quot;margin:0px;margin-left:4px;margin-top:4px;text-align:center&quot;&gt;&lt;i&gt;&amp;lt;&amp;lt; MixIn &amp;gt;&amp;gt;&lt;/i&gt;&lt;/p&gt;&lt;p style=&quot;margin:0px;margin-left:4px;margin-top:4px;text-align:center&quot;&gt;&lt;b&gt;Block Processor&lt;/b&gt;&lt;/p&gt;&lt;hr size=&quot;1&quot;/&gt;&lt;p style=&quot;margin:0px;margin-left:4px;margin-top:4px&quot;&gt;block: proc&lt;/p&gt;&lt;p style=&quot;margin:0px;margin-left:4px;margin-top:4px&quot;&gt;block_state: symbol&lt;/p&gt;&lt;hr size=&quot;1&quot;/&gt;&lt;p style=&quot;margin:0px;margin-left:4px;margin-top:4px&quot;&gt;depend_on()&lt;/p&gt;" style="whiteSpace=wrap;html=1;rounded=0;fillColor=#dae8fc;strokeColor=#6c8ebf;fontColor=#333333;align=left;overflow=fill;fontSize=12;fontFamily=Helvetica" parent="node_root_X2d" vertex="1">
+                    <mxGeometry x="690" y="30" width="160" height="160" as="geometry"/>
+                </mxCell>
+                <mxCell id="4tbYCbTjaN7O87TdMOiT-0" value="&lt;div style=&quot;color: rgb(212 , 212 , 212) ; background-color: rgb(30 , 30 , 30) ; font-family: &amp;#34;menlo&amp;#34; , &amp;#34;monaco&amp;#34; , &amp;#34;courier new&amp;#34; , monospace ; line-height: 18px&quot;&gt;&lt;span style=&quot;color: #ce9178&quot;&gt;db_schema.json&lt;/span&gt;&lt;/div&gt;" style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;" vertex="1" parent="node_root_X2d">
+                    <mxGeometry x="50" y="199" width="60" height="80" as="geometry"/>
+                </mxCell>
+                <mxCell id="4tbYCbTjaN7O87TdMOiT-1" value="11111111" style="shape=datastore;whiteSpace=wrap;html=1;" vertex="1" parent="node_root_X2d">
+                    <mxGeometry x="182" y="112" width="60" height="60" as="geometry"/>
+                </mxCell>
+                <mxCell id="4tbYCbTjaN7O87TdMOiT-2" value="db_schema.json" style="strokeWidth=1;html=1;shape=mxgraph.flowchart.database;whiteSpace=wrap;" vertex="1" parent="node_root_X2d">
+                    <mxGeometry x="193" y="249" width="138" height="60" as="geometry"/>
+                </mxCell>
+            </root>
+        </mxGraphModel>
+    </diagram>
+</mxfile>

data/docs/domain_model.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="822px" height="162px" viewBox="-0.5 -0.5 822 162"><defs/><g><rect x="0" y="0" width="160" height="160" fill="#ffe6cc" stroke="#d79b00" 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 flex-start; width: 162px; height: 160px; padding-top: 0px; margin-left: 0px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: left; width: 160px; height: 160px; overflow: hidden;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; width: 100%; height: 100%; white-space: normal; overflow-wrap: normal;"><p style="margin: 0px ; margin-left: 4px ; margin-top: 4px ; text-align: center"><b>Container</b></p><hr size="1" /></div></div></div></foreignObject><text x="0" y="84" fill="#333333" font-family="Helvetica" font-size="12px">Container</text></switch></g><rect x="220" y="0" width="160" height="160" fill="#dae8fc" stroke="#6c8ebf" 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 flex-start; width: 162px; height: 160px; padding-top: 0px; margin-left: 220px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: left; width: 160px; height: 160px; overflow: hidden;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; width: 100%; height: 100%; white-space: normal; overflow-wrap: normal;"><p style="margin: 0px ; margin-left: 4px ; margin-top: 4px ; text-align: center"><i>&lt;&lt; MixIn &gt;&gt;</i></p><p style="margin: 0px ; margin-left: 4px ; margin-top: 4px ; text-align: center"><b>Block Processor</b></p><hr size="1" /></div></div></div></foreignObject><text x="220" y="84" fill="#333333" font-family="Helvetica" font-size="12px">&lt;&lt; MixIn &gt;&gt;...</text></switch></g><rect x="440" y="0" width="160" height="160" fill="#f5f5f5" stroke="#666666" 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: 158px; height: 1px; padding-top: 80px; margin-left: 441px;"><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;">Documents</div></div></div></foreignObject><text x="520" y="84" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">Documents</text></switch></g><rect x="660" y="0" width="160" height="160" fill="#dae8fc" stroke="#6c8ebf" 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 flex-start; width: 162px; height: 160px; padding-top: 0px; margin-left: 660px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: left; width: 160px; height: 160px; overflow: hidden;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; width: 100%; height: 100%; white-space: normal; overflow-wrap: normal;"><p style="margin: 0px ; margin-left: 4px ; margin-top: 4px ; text-align: center"><i>&lt;&lt; MixIn &gt;&gt;</i></p><p style="margin: 0px ; margin-left: 4px ; margin-top: 4px ; text-align: center"><b>Block Processor</b></p><hr size="1" /><p style="margin: 0px ; margin-left: 4px ; margin-top: 4px">block: proc</p><p style="margin: 0px ; margin-left: 4px ; margin-top: 4px">block_state: symbol</p><hr size="1" /><p style="margin: 0px ; margin-left: 4px ; margin-top: 4px">depend_on()</p></div></div></div></foreignObject><text x="660" y="84" fill="#333333" font-family="Helvetica" font-size="12px">&lt;&lt; MixIn &gt;&gt;...</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>