drawio_dsl 0.6.0 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. checksums.yaml +4 -4
  2. data/.builders/.data/shapes.json +44 -26
  3. data/.builders/.templates/basic/dom_builder_shapes.rb +2 -2
  4. data/.builders/.templates/basic/drawio_shapes.rb +2 -2
  5. data/.builders/blueprint/shapes.rb +6 -4
  6. data/.builders/generators/project_plans/drawio_dsl.rb +3 -1
  7. data/.builders/generators/sample_diagrams/30-html-shapes.rb +68 -0
  8. data/CHANGELOG.md +13 -0
  9. data/docs/project_in_progress.svg +1 -1
  10. data/docs/project_todo.svg +1 -1
  11. data/lib/drawio_dsl/configuration_shapes.rb +12 -8
  12. data/lib/drawio_dsl/dom_builder_shapes.rb +92 -82
  13. data/lib/drawio_dsl/drawio_shapes.rb +108 -96
  14. data/lib/drawio_dsl/formatters/_.rb +8 -0
  15. data/lib/drawio_dsl/formatters/base_formatter.rb +24 -0
  16. data/lib/drawio_dsl/formatters/factory.rb +32 -0
  17. data/lib/drawio_dsl/formatters/html_builder.rb +84 -0
  18. data/lib/drawio_dsl/formatters/interface_formatter.rb +53 -0
  19. data/lib/drawio_dsl/formatters/klass_formatter.rb +52 -0
  20. data/lib/drawio_dsl/formatters/style_builder.rb +63 -0
  21. data/lib/drawio_dsl/schema/_.rb +6 -4
  22. data/lib/drawio_dsl/schema/shapes/interface.rb +9 -0
  23. data/lib/drawio_dsl/schema/shapes/klass.rb +9 -0
  24. data/lib/drawio_dsl/schema/shapes/shape.rb +9 -2
  25. data/lib/drawio_dsl/version.rb +1 -1
  26. data/lib/drawio_dsl.rb +1 -0
  27. data/package-lock.json +2 -2
  28. data/package.json +1 -1
  29. metadata +12 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 0f477a7317f4d012f3e7c1987de3ccedbf87431f5a5fa689862ba6ab3f19b62d
4
- data.tar.gz: b76493c62b5fcd11ca2d51a028e2499e221c5a2e0f06a4b09701862f8d557afb
3
+ metadata.gz: 0ca0ef8325e3ca9e3eeb032142a12c57bc12b5bf0f0e564fe162d2da70a06136
4
+ data.tar.gz: 17d39e80687f5fa5778a9e48011b4073fea363082b3ce490dff3f90d06747c94
5
5
  SHA512:
6
- metadata.gz: 684c4a481532aab5570fc06fbbb1bd075fe3b7dfd1d06903dbe8e0df8f08532c112ab73e8363243a8570224302fa104ed4a28ded7343bcba2a800d2997dd7d65
7
- data.tar.gz: 732f7ebd2f67587caaff22b51970b1a10cc258809deb16f5b060f38853d20c76620f923ad00ccf7c022e12c381ffd028499fc487fce46e0fd246b1bc2653fd35
6
+ metadata.gz: c938d044a019af58cd694619dc5de2e78760f13a3626e06deb9470e0cb3066c2d4841066fb69bed1e921c2955a5849ae350e916e07c3eae31440779907057403
7
+ data.tar.gz: c37d85e61f581533d6803541fbbe3e6ed1aedc58cdafd48ef20834ac4c9361f81e96890f8514bc68c21b8bd0e58a415a5960e901774968f802f16bbe50b5965f
data/.builders/.data/shapes.json CHANGED
@@ -134,6 +134,42 @@
134
134
  "h": 160,
135
135
  "style_modifiers": "shape=cloud"
136
136
  },
137
+ {
138
+ "type": "container",
139
+ "text_only": false,
140
+ "x": 0,
141
+ "y": 0,
142
+ "w": 160,
143
+ "h": 160,
144
+ "style_modifiers": "swimlane"
145
+ },
146
+ {
147
+ "type": "container2",
148
+ "text_only": false,
149
+ "x": 0,
150
+ "y": 0,
151
+ "w": 160,
152
+ "h": 160,
153
+ "style_modifiers": "swimlane;horizontal=0"
154
+ },
155
+ {
156
+ "type": "container3",
157
+ "text_only": false,
158
+ "x": 0,
159
+ "y": 0,
160
+ "w": 160,
161
+ "h": 160,
162
+ "style_modifiers": "swimlane;startSize=50"
163
+ },
164
+ {
165
+ "type": "container4",
166
+ "text_only": false,
167
+ "x": 0,
168
+ "y": 0,
169
+ "w": 160,
170
+ "h": 160,
171
+ "style_modifiers": "swimlane;resizable=0"
172
+ },
137
173
  {
138
174
  "type": "cross",
139
175
  "text_only": false,
@@ -189,40 +225,22 @@
189
225
  "style_modifiers": "shape=hexagon"
190
226
  },
191
227
  {
192
- "type": "container",
228
+ "type": "interface",
193
229
  "text_only": false,
194
230
  "x": 0,
195
231
  "y": 0,
196
- "w": 160,
197
- "h": 160,
198
- "style_modifiers": "swimlane"
199
- },
200
- {
201
- "type": "container2",
202
- "text_only": false,
203
- "x": 0,
204
- "y": 0,
205
- "w": 160,
206
- "h": 160,
207
- "style_modifiers": "swimlane;horizontal=0"
208
- },
209
- {
210
- "type": "container3",
211
- "text_only": false,
212
- "x": 0,
213
- "y": 0,
214
- "w": 160,
215
- "h": 160,
216
- "style_modifiers": "swimlane;startSize=50"
232
+ "w": 200,
233
+ "h": 120,
234
+ "style_modifiers": "align=left;overflow=fill;fontSize=12;fontFamily=Helvetica"
217
235
  },
218
236
  {
219
- "type": "container4",
237
+ "type": "klass",
220
238
  "text_only": false,
221
239
  "x": 0,
222
240
  "y": 0,
223
- "w": 160,
224
- "h": 160,
225
- "style_modifiers": "swimlane;resizable=0"
241
+ "w": 200,
242
+ "h": 120,
243
+ "style_modifiers": "align=left;overflow=fill;fontSize=12;fontFamily=Helvetica"
226
244
  },
227
245
  {
228
246
  "type": "note",
data/.builders/.templates/basic/dom_builder_shapes.rb CHANGED
@@ -6,8 +6,8 @@ module DrawioDsl
6
6
  module DomBuilderShapes
7
7
  {{#each shapes}}
8
8
 
9
- def add_{{snake ./type}}(**opts)
10
- {{snake ./type}} = DrawioDsl::Schema::{{camel ./type}}.new(current_page, **opts)
9
+ def add_{{snake ./type}}(**opts, &block)
10
+ {{snake ./type}} = DrawioDsl::Schema::{{camel ./type}}.new(current_page, **opts, &block)
11
11
  add_shape({{snake ./type}})
12
12
  end
13
13
  {{/each}}
data/.builders/.templates/basic/drawio_shapes.rb CHANGED
@@ -14,8 +14,8 @@ module DrawioDsl
14
14
  end
15
15
  {{#each shapes}}
16
16
 
17
- def {{snake ./type}}(**opts)
18
- builder.add_{{snake ./type}}(**opts)
17
+ def {{snake ./type}}(**opts, &block)
18
+ builder.add_{{snake ./type}}(**opts, &block)
19
19
  end
20
20
  {{/each}}
21
21
  end
data/.builders/blueprint/shapes.rb CHANGED
@@ -24,16 +24,18 @@ m = KManager.model :shapes, namespace: %i[domain] do
24
24
  row :callout4 , false, 0, 0, 160, 120, 'shape=mxgraph.basic.roundRectCallout;dx=30;dy=15;size=5;boundedLbl=1;'
25
25
  row :circle , false, 0, 0, 160, 160, 'ellipse'
26
26
  row :cloud , false, 0, 0, 160, 160, 'shape=cloud'
27
+ row :container , false, 0, 0, 160, 160, 'swimlane'
28
+ row :container2 , false, 0, 0, 160, 160, 'swimlane;horizontal=0'
29
+ row :container3 , false, 0, 0, 160, 160, 'swimlane;startSize=50'
30
+ row :container4 , false, 0, 0, 160, 160, 'swimlane;resizable=0'
27
31
  row :cross , false, 0, 0, 50, 50, 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.x'
28
32
  row :envelop , false, 0, 0, 160, 100, 'shape=message'
29
33
  row :diamond , false, 0, 0, 100, 100, 'rhombus'
30
34
  row :document , false, 0, 0, 160, 160, 'shape=mxgraph.basic.document'
31
35
  row :ellipse , false, 0, 0, 200, 120, 'ellipse'
32
36
  row :hexagon , false, 0, 0, 200, 120, 'shape=hexagon'
33
- row :container , false, 0, 0, 160, 160, 'swimlane'
34
- row :container2 , false, 0, 0, 160, 160, 'swimlane;horizontal=0'
35
- row :container3 , false, 0, 0, 160, 160, 'swimlane;startSize=50'
36
- row :container4 , false, 0, 0, 160, 160, 'swimlane;resizable=0'
37
+ row :interface , false, 0, 0, 200, 120, 'align=left;overflow=fill;fontSize=12;fontFamily=Helvetica'
38
+ row :klass , false, 0, 0, 200, 120, 'align=left;overflow=fill;fontSize=12;fontFamily=Helvetica'
37
39
  row :note , false, 0, 0, 160, 160, 'shape=note'
38
40
  row :process , false, 0, 0, 200, 120, 'shape=process'
39
41
  row :rectangle , false, 0, 0, 200, 120, ''
data/.builders/generators/project_plans/drawio_dsl.rb CHANGED
@@ -11,6 +11,8 @@ KManager.action :todo_drawio_dsl do
11
11
 
12
12
  grid_layout(y:90, direction: :horizontal, grid_h: 80, grid_w: 320, wrap_at: 3, grid: 0)
13
13
 
14
+ square(w: 300, h: 60, title: 'formatter DSL that can render HTML directly into the title property')
15
+ square(w: 300, h: 60, title: 'formatter DSL for class and interface generation')
14
16
  square(w: 300, h: 60, title: 'Add page background to theme, use it whenever the theme is set at a diagram/page level')
15
17
  end
16
18
  .page('To Do', theme: :style_02, margin_left: 0, margin_top: 0) do
@@ -23,7 +25,7 @@ KManager.action :todo_drawio_dsl do
23
25
  square(w: 300, h: 60, title: 'write SVG directly into other projects')
24
26
  square(w: 300, h: 60, title: 'add :shape and :text-only to random shape generator')
25
27
  square(w: 300, h: 60, title: 'Nodes need to support child nodes')
26
- square(w: 300, h: 60, title: 'Grid layout does no position itself in relation to the last element')
28
+ square(w: 300, h: 60, title: 'Grid layout does not position itself in relation to the last element')
27
29
  square(w: 300, h: 60, title: 'Dynamic sized shapes that expand to the size of their text')
28
30
  square(w: 300, h: 60, title: 'Control of text padding left, right, top and bottom')
29
31
  square(w: 300, h: 60, title: 'Improve the theme control over text-only shapes')
data/.builders/generators/sample_diagrams/30-html-shapes.rb ADDED
@@ -0,0 +1,68 @@
1
+ KManager.action :html_shapes do
2
+ action do
3
+
4
+ # :rounded, :shadow, :sketch, :glass
5
+ DrawioDsl::Drawio
6
+ .init(k_builder, on_exist: :write, on_action: :execute)
7
+ .diagram(theme: :style_11)
8
+ .page('Style-Plain', margin_left: 0, margin_top: 0, rounded: 0, background: '#FFEADB') do
9
+ grid_layout(wrap_at: 8)
10
+
11
+ html = DrawioDsl::Formatters::InterfaceFormatter.new
12
+ .header('IPerson')
13
+ .field(:first_name, type: :string)
14
+ .field(:last_name, type: :string)
15
+ .field(:age, type: :integer)
16
+ .field(:birthday, type: :date)
17
+ .method(:full_name)
18
+ .as_html
19
+
20
+ square(
21
+ title: html,
22
+ style_modifiers: 'align=left;overflow=fill;fontSize=12;fontFamily=Helvetica'
23
+ )
24
+
25
+ square(title: 'xxx', style_modifiers: 'align=left;overflow=fill;fontSize=12;fontFamily=Helvetica') do
26
+ format(:interface)
27
+ .header('IPerson')
28
+ .field(:field1, type: :string)
29
+ .field(:field2, type: :string)
30
+ .method(:full_name, type: :string)
31
+ end
32
+
33
+ html = DrawioDsl::Formatters::KlassFormatter.new
34
+ .header('Person')
35
+ .field(:first_name, type: :string)
36
+ .field(:last_name, type: :string)
37
+ .field(:age, type: :integer)
38
+ .method(:full_name)
39
+ .as_html
40
+
41
+ square(
42
+ title: html,
43
+ style_modifiers: 'align=left;overflow=fill;fontSize=12;fontFamily=Helvetica'
44
+ )
45
+
46
+ # square do
47
+ # formatter(:class)
48
+ # .name('Person')
49
+ # .field(:field1, type: :string)
50
+ # .field(:field2, type: :string)
51
+ # .method(:full_name, type: :string)
52
+ # end
53
+
54
+ # dg_interface('IContract') do
55
+ # field('first_name', type: 'String')
56
+ # field('last_name', type: 'String')
57
+ # field('age', type: 'int')
58
+ # method('full_name', type: 'String', params: 'String first_name, String last_name')
59
+ # end
60
+
61
+ end
62
+ .cd(:spec)
63
+ .save('.samples/30-html-shapes.drawio')
64
+ # .cd(:docs)
65
+ # .export_svg('samples/themes-square', page: 1)
66
+
67
+ end
68
+ end
data/CHANGELOG.md CHANGED
@@ -1,3 +1,16 @@
1
+ # [0.6.0](https://github.com/klueless-io/drawio_dsl/compare/v0.5.7...v0.6.0) (2022-03-13)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * update failing tests ([37ebbbd](https://github.com/klueless-io/drawio_dsl/commit/37ebbbd37cf70b150c83dbd2a389c6f176a917cf))
7
+ * update pre-commit ([374a29b](https://github.com/klueless-io/drawio_dsl/commit/374a29bad9f50ac01b670d6bfa01e42e9864e00e))
8
+
9
+
10
+ ### Features
11
+
12
+ * 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))
13
+
1
14
  ## [0.5.7](https://github.com/klueless-io/drawio_dsl/compare/v0.5.6...v0.5.7) (2022-03-09)
2
15
 
3
16
 
data/docs/project_in_progress.svg CHANGED
@@ -1,3 +1,3 @@
1
1
  <?xml version="1.0" encoding="UTF-8"?>
2
2
  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3
- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="302px" height="62px" viewBox="-0.5 -0.5 302 62"><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="#d5e8d4" stroke="#82b366" 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;">Add page background to theme, use it whenever the theme is set at a diagram/page level</div></div></div></foreignObject><text x="150" y="34" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">Add page background to theme, use it whenever the...</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>
3
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="942px" height="62px" viewBox="-0.5 -0.5 942 62"><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="#d5e8d4" stroke="#82b366" 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;">formatter DSL that can render HTML directly into the title property</div></div></div></foreignObject><text x="150" y="34" 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="320" y="0" width="300" height="60" rx="9" ry="9" fill="#d5e8d4" stroke="#82b366" 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;">formatter DSL for class and interface generation</div></div></div></foreignObject><text x="470" y="34" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">formatter DSL for class and interface generation</text></switch></g><rect x="640" y="0" width="300" height="60" rx="9" ry="9" fill="#d5e8d4" stroke="#82b366" 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 page background to theme, use it whenever the theme is set at a diagram/page level</div></div></div></foreignObject><text x="790" y="34" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">Add page background to theme, use it whenever the...</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>
data/docs/project_todo.svg CHANGED
@@ -1,3 +1,3 @@
1
1
  <?xml version="1.0" encoding="UTF-8"?>
2
2
  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3
- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="942px" height="382px" viewBox="-0.5 -0.5 942 382"><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="#dae8fc" stroke="#6c8ebf" 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;">write SVG directly into other projects</div></div></div></foreignObject><text x="150" y="34" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">write SVG directly into other projects</text></switch></g><rect x="320" y="0" width="300" height="60" rx="9" ry="9" fill="#dae8fc" stroke="#6c8ebf" 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;">add :shape and :text-only to random shape generator</div></div></div></foreignObject><text x="470" y="34" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">add :shape and :text-only to random shape generator</text></switch></g><rect x="640" y="0" width="300" height="60" rx="9" ry="9" fill="#dae8fc" stroke="#6c8ebf" 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;">Nodes need to support child nodes</div></div></div></foreignObject><text x="790" y="34" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">Nodes need to support child nodes</text></switch></g><rect x="0" y="80" width="300" height="60" rx="9" ry="9" fill="#dae8fc" stroke="#6c8ebf" 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;">Grid layout does no position itself in relation to the last element</div></div></div></foreignObject><text x="150" y="114" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">Grid layout does no position itself in relation to...</text></switch></g><rect x="320" y="80" width="300" height="60" rx="9" ry="9" fill="#dae8fc" stroke="#6c8ebf" 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;">Dynamic sized shapes that expand to the size of their text</div></div></div></foreignObject><text x="470" y="114" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">Dynamic sized shapes that expand to the size of th...</text></switch></g><rect x="640" y="80" width="300" height="60" rx="9" ry="9" fill="#dae8fc" stroke="#6c8ebf" 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;">Control of text padding left, right, top and bottom</div></div></div></foreignObject><text x="790" y="114" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">Control of text padding left, right, top and bottom</text></switch></g><rect x="0" y="160" width="300" height="60" rx="9" ry="9" fill="#dae8fc" stroke="#6c8ebf" 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;">Improve the theme control over text-only shapes</div></div></div></foreignObject><text x="150" y="194" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">Improve the theme control over text-only shapes</text></switch></g><rect x="320" y="160" width="300" height="60" rx="9" ry="9" fill="#dae8fc" stroke="#6c8ebf" 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;">x,y settings do not work for shapes within a grid layout</div></div></div></foreignObject><text x="470" y="194" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">x,y settings do not work for shapes within a grid...</text></switch></g><rect x="640" y="160" width="300" height="60" rx="9" ry="9" fill="#dae8fc" stroke="#6c8ebf" 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;">background color does not work from the diagram object</div></div></div></foreignObject><text x="790" y="194" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">background color does not work from the diagram ob...</text></switch></g><rect x="0" y="240" width="300" height="60" rx="9" ry="9" fill="#dae8fc" stroke="#6c8ebf" 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;">settings style attributes need to de-duplicate</div></div></div></foreignObject><text x="150" y="274" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">settings style attributes need to de-duplicate</text></switch></g><rect x="320" y="240" width="300" height="60" rx="9" ry="9" fill="#dae8fc" stroke="#6c8ebf" 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;">need to setup new project plans</div></div></div></foreignObject><text x="470" y="274" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">need to setup new project plans</text></switch></g><rect x="640" y="240" width="300" height="60" rx="9" ry="9" fill="#dae8fc" stroke="#6c8ebf" 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;">write SVG directly into other projects</div></div></div></foreignObject><text x="790" y="274" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">write SVG directly into other projects</text></switch></g><rect x="0" y="320" width="300" height="60" rx="9" ry="9" fill="#dae8fc" stroke="#6c8ebf" 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;">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</div></div></div></foreignObject><text x="150" y="354" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">page layout so that you drop elements on and they...</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>
3
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="942px" height="382px" viewBox="-0.5 -0.5 942 382"><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="#dae8fc" stroke="#6c8ebf" 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;">write SVG directly into other projects</div></div></div></foreignObject><text x="150" y="34" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">write SVG directly into other projects</text></switch></g><rect x="320" y="0" width="300" height="60" rx="9" ry="9" fill="#dae8fc" stroke="#6c8ebf" 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;">add :shape and :text-only to random shape generator</div></div></div></foreignObject><text x="470" y="34" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">add :shape and :text-only to random shape generator</text></switch></g><rect x="640" y="0" width="300" height="60" rx="9" ry="9" fill="#dae8fc" stroke="#6c8ebf" 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;">Nodes need to support child nodes</div></div></div></foreignObject><text x="790" y="34" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">Nodes need to support child nodes</text></switch></g><rect x="0" y="80" width="300" height="60" rx="9" ry="9" fill="#dae8fc" stroke="#6c8ebf" 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;">Grid layout does not position itself in relation to the last element</div></div></div></foreignObject><text x="150" y="114" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">Grid layout does not position itself in relation t...</text></switch></g><rect x="320" y="80" width="300" height="60" rx="9" ry="9" fill="#dae8fc" stroke="#6c8ebf" 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;">Dynamic sized shapes that expand to the size of their text</div></div></div></foreignObject><text x="470" y="114" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">Dynamic sized shapes that expand to the size of th...</text></switch></g><rect x="640" y="80" width="300" height="60" rx="9" ry="9" fill="#dae8fc" stroke="#6c8ebf" 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;">Control of text padding left, right, top and bottom</div></div></div></foreignObject><text x="790" y="114" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">Control of text padding left, right, top and bottom</text></switch></g><rect x="0" y="160" width="300" height="60" rx="9" ry="9" fill="#dae8fc" stroke="#6c8ebf" 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;">Improve the theme control over text-only shapes</div></div></div></foreignObject><text x="150" y="194" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">Improve the theme control over text-only shapes</text></switch></g><rect x="320" y="160" width="300" height="60" rx="9" ry="9" fill="#dae8fc" stroke="#6c8ebf" 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;">x,y settings do not work for shapes within a grid layout</div></div></div></foreignObject><text x="470" y="194" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">x,y settings do not work for shapes within a grid...</text></switch></g><rect x="640" y="160" width="300" height="60" rx="9" ry="9" fill="#dae8fc" stroke="#6c8ebf" 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;">background color does not work from the diagram object</div></div></div></foreignObject><text x="790" y="194" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">background color does not work from the diagram ob...</text></switch></g><rect x="0" y="240" width="300" height="60" rx="9" ry="9" fill="#dae8fc" stroke="#6c8ebf" 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;">settings style attributes need to de-duplicate</div></div></div></foreignObject><text x="150" y="274" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">settings style attributes need to de-duplicate</text></switch></g><rect x="320" y="240" width="300" height="60" rx="9" ry="9" fill="#dae8fc" stroke="#6c8ebf" 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;">need to setup new project plans</div></div></div></foreignObject><text x="470" y="274" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">need to setup new project plans</text></switch></g><rect x="640" y="240" width="300" height="60" rx="9" ry="9" fill="#dae8fc" stroke="#6c8ebf" 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;">write SVG directly into other projects</div></div></div></foreignObject><text x="790" y="274" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">write SVG directly into other projects</text></switch></g><rect x="0" y="320" width="300" height="60" rx="9" ry="9" fill="#dae8fc" stroke="#6c8ebf" 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;">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</div></div></div></foreignObject><text x="150" y="354" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">page layout so that you drop elements on and they...</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>
data/lib/drawio_dsl/configuration_shapes.rb CHANGED
@@ -23,16 +23,18 @@ module DrawioDsl
23
23
  :callout4,
24
24
  :circle,
25
25
  :cloud,
26
+ :container,
27
+ :container2,
28
+ :container3,
29
+ :container4,
26
30
  :cross,
27
31
  :envelop,
28
32
  :diamond,
29
33
  :document,
30
34
  :ellipse,
31
35
  :hexagon,
32
- :container,
33
- :container2,
34
- :container3,
35
- :container4,
36
+ :interface,
37
+ :klass,
36
38
  :note,
37
39
  :process,
38
40
  :rectangle,
@@ -66,16 +68,18 @@ module DrawioDsl
66
68
  callout4: ShapeDefaults.new(type: :callout4, x: 0, text_only: false, y: 0, w: 160, h: 120, style_modifiers: 'shape=mxgraph.basic.roundRectCallout;dx=30;dy=15;size=5;boundedLbl=1;'),
67
69
  circle: ShapeDefaults.new(type: :circle, x: 0, text_only: false, y: 0, w: 160, h: 160, style_modifiers: 'ellipse'),
68
70
  cloud: ShapeDefaults.new(type: :cloud, x: 0, text_only: false, y: 0, w: 160, h: 160, style_modifiers: 'shape=cloud'),
71
+ container: ShapeDefaults.new(type: :container, x: 0, text_only: false, y: 0, w: 160, h: 160, style_modifiers: 'swimlane'),
72
+ container2: ShapeDefaults.new(type: :container2, x: 0, text_only: false, y: 0, w: 160, h: 160, style_modifiers: 'swimlane;horizontal=0'),
73
+ container3: ShapeDefaults.new(type: :container3, x: 0, text_only: false, y: 0, w: 160, h: 160, style_modifiers: 'swimlane;startSize=50'),
74
+ container4: ShapeDefaults.new(type: :container4, x: 0, text_only: false, y: 0, w: 160, h: 160, style_modifiers: 'swimlane;resizable=0'),
69
75
  cross: ShapeDefaults.new(type: :cross, x: 0, text_only: false, y: 0, w: 50, h: 50, style_modifiers: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.x'),
70
76
  envelop: ShapeDefaults.new(type: :envelop, x: 0, text_only: false, y: 0, w: 160, h: 100, style_modifiers: 'shape=message'),
71
77
  diamond: ShapeDefaults.new(type: :diamond, x: 0, text_only: false, y: 0, w: 100, h: 100, style_modifiers: 'rhombus'),
72
78
  document: ShapeDefaults.new(type: :document, x: 0, text_only: false, y: 0, w: 160, h: 160, style_modifiers: 'shape=mxgraph.basic.document'),
73
79
  ellipse: ShapeDefaults.new(type: :ellipse, x: 0, text_only: false, y: 0, w: 200, h: 120, style_modifiers: 'ellipse'),
74
80
  hexagon: ShapeDefaults.new(type: :hexagon, x: 0, text_only: false, y: 0, w: 200, h: 120, style_modifiers: 'shape=hexagon'),
75
- container: ShapeDefaults.new(type: :container, x: 0, text_only: false, y: 0, w: 160, h: 160, style_modifiers: 'swimlane'),
76
- container2: ShapeDefaults.new(type: :container2, x: 0, text_only: false, y: 0, w: 160, h: 160, style_modifiers: 'swimlane;horizontal=0'),
77
- container3: ShapeDefaults.new(type: :container3, x: 0, text_only: false, y: 0, w: 160, h: 160, style_modifiers: 'swimlane;startSize=50'),
78
- container4: ShapeDefaults.new(type: :container4, x: 0, text_only: false, y: 0, w: 160, h: 160, style_modifiers: 'swimlane;resizable=0'),
81
+ interface: ShapeDefaults.new(type: :interface, x: 0, text_only: false, y: 0, w: 200, h: 120, style_modifiers: 'align=left;overflow=fill;fontSize=12;fontFamily=Helvetica'),
82
+ klass: ShapeDefaults.new(type: :klass, x: 0, text_only: false, y: 0, w: 200, h: 120, style_modifiers: 'align=left;overflow=fill;fontSize=12;fontFamily=Helvetica'),
79
83
  note: ShapeDefaults.new(type: :note, x: 0, text_only: false, y: 0, w: 160, h: 160, style_modifiers: 'shape=note'),
80
84
  process: ShapeDefaults.new(type: :process, x: 0, text_only: false, y: 0, w: 200, h: 120, style_modifiers: 'shape=process'),
81
85
  rectangle: ShapeDefaults.new(type: :rectangle, x: 0, text_only: false, y: 0, w: 200, h: 120, style_modifiers: ''),