drawio_dsl 0.5.4 → 0.5.7

Sign up to get free protection for your applications and to get access to all the features.
Files changed (43) hide show
  1. checksums.yaml +4 -4
  2. data/.builders/.templates/basic/schema_require.rb +3 -1
  3. data/.builders/generators/project_plans/drawio_dsl.rb +19 -15
  4. data/.builders/generators/project_plans/k_doc.rb +39 -0
  5. data/.builders/generators/sample_diagrams/05-samples.rb +23 -0
  6. data/.builders/generators/sample_diagrams/10-page-margin.rb +4 -8
  7. data/.builders/generators/sample_diagrams/15-grid-direction.rb +9 -7
  8. data/.builders/generators/sample_diagrams/16-grid-alignment.rb +6 -9
  9. data/.builders/generators/sample_diagrams/20-styles.rb +43 -45
  10. data/.builders/generators/sample_diagrams/25-themes.rb +21 -8
  11. data/.builders/generators/sample_diagrams/50-willoughby-council.rb +5 -6
  12. data/.rubocop.yml +3 -1
  13. data/CHANGELOG.md +22 -0
  14. data/README.md +6 -3
  15. data/docs/project_done.svg +1 -1
  16. data/docs/project_in_progress.svg +1 -1
  17. data/docs/project_todo.svg +1 -1
  18. data/docs/samples/grid-alignment-center.svg +3 -0
  19. data/docs/samples/grid-alignment.svg +3 -0
  20. data/docs/samples/grid-direction-horizontal.svg +3 -0
  21. data/docs/samples/grid-direction-vertical.svg +3 -0
  22. data/docs/samples/samples.md +48 -0
  23. data/docs/samples/samples.svg +3 -0
  24. data/docs/samples/styles-glass.svg +3 -0
  25. data/docs/samples/styles-plain.svg +3 -0
  26. data/docs/samples/styles-rounded.svg +3 -0
  27. data/docs/samples/styles-shadow.svg +3 -0
  28. data/docs/samples/styles-sketch.svg +3 -0
  29. data/docs/samples/themes-circle.svg +3 -0
  30. data/docs/samples/themes-random.svg +3 -0
  31. data/docs/samples/themes-square.svg +3 -0
  32. data/docs/samples/willoughby-council.svg +3 -0
  33. data/lib/drawio_dsl/drawio.rb +16 -0
  34. data/lib/drawio_dsl/schema/_.rb +2 -0
  35. data/lib/drawio_dsl/schema/node.rb +6 -0
  36. data/lib/drawio_dsl/schema/page.rb +4 -0
  37. data/lib/drawio_dsl/schema/virtual/anchor.rb +24 -0
  38. data/lib/drawio_dsl/version.rb +1 -1
  39. data/lib/drawio_dsl/xml_builder.rb +6 -5
  40. data/package-lock.json +2 -2
  41. data/package.json +1 -1
  42. metadata +20 -3
  43. data/.builders/generators/sample_diagrams/30-shapes.rb +0 -23
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="392px" viewBox="-0.5 -0.5 942 392"><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="290" y="0" width="400" height="80" rx="12" ry="12" fill="none" 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 flex-start; justify-content: unsafe flex-start; width: 398px; height: 1px; padding-top: 7px; margin-left: 292px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 28px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; overflow-wrap: normal;">DrawIO DSL</div></div></div></foreignObject><text x="292" y="35" fill="#333333" font-family="Helvetica" font-size="28px" font-weight="bold">DrawIO DSL</text></switch></g><rect x="340" y="40" width="400" height="80" rx="12" ry="12" fill="none" 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 flex-start; justify-content: unsafe flex-start; width: 398px; height: 1px; padding-top: 47px; margin-left: 342px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 16px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; overflow-wrap: normal;">Project plan</div></div></div></foreignObject><text x="342" y="63" fill="#333333" font-family="Helvetica" font-size="16px" font-weight="bold">Project plan</text></switch></g><rect x="0" y="10" width="300" height="60" rx="9" ry="9" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><path d="M 10.15 9 Q -1 9 -1 20.15 L -1 34 Q 150 52 301 34 L 301 20.15 Q 301 9 289.85 9 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: 40px; 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;">First level child nodes need to hang of node 1</div></div></div></foreignObject><text x="150" y="44" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">First level child nodes need to hang of node 1</text></switch></g><rect x="320" y="10" width="300" height="60" rx="9" ry="9" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><path d="M 330.15 9 Q 319 9 319 20.15 L 319 34 Q 470 52 621 34 L 621 20.15 Q 621 9 609.85 9 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: 40px; 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 page background to theme, use it whenever the theme is set at a diagram/page level</div></div></div></foreignObject><text x="470" y="44" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">Add page background to theme, use it whenever the...</text></switch></g><rect x="640" y="10" width="300" height="60" rx="9" ry="9" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><path d="M 650.15 9 Q 639 9 639 20.15 L 639 34 Q 790 52 941 34 L 941 20.15 Q 941 9 929.85 9 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: 40px; 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="44" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">Nodes need to support child nodes</text></switch></g><rect x="0" y="90" width="300" height="60" rx="9" ry="9" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><path d="M 10.15 89 Q -1 89 -1 100.15 L -1 114 Q 150 132 301 114 L 301 100.15 Q 301 89 289.85 89 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: 120px; 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="124" 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="90" width="300" height="60" rx="9" ry="9" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><path d="M 330.15 89 Q 319 89 319 100.15 L 319 114 Q 470 132 621 114 L 621 100.15 Q 621 89 609.85 89 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: 120px; 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="124" 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="90" width="300" height="60" rx="9" ry="9" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><path d="M 650.15 89 Q 639 89 639 100.15 L 639 114 Q 790 132 941 114 L 941 100.15 Q 941 89 929.85 89 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: 120px; 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="124" 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="170" width="300" height="60" rx="9" ry="9" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><path d="M 10.15 169 Q -1 169 -1 180.15 L -1 194 Q 150 212 301 194 L 301 180.15 Q 301 169 289.85 169 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: 200px; 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="204" 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="170" width="300" height="60" rx="9" ry="9" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><path d="M 330.15 169 Q 319 169 319 180.15 L 319 194 Q 470 212 621 194 L 621 180.15 Q 621 169 609.85 169 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: 200px; 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="204" 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="170" width="300" height="60" rx="9" ry="9" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><path d="M 650.15 169 Q 639 169 639 180.15 L 639 194 Q 790 212 941 194 L 941 180.15 Q 941 169 929.85 169 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: 200px; 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="204" 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="250" width="300" height="60" rx="9" ry="9" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><path d="M 10.15 249 Q -1 249 -1 260.15 L -1 274 Q 150 292 301 274 L 301 260.15 Q 301 249 289.85 249 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: 280px; 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="284" 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="250" width="300" height="60" rx="9" ry="9" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><path d="M 330.15 249 Q 319 249 319 260.15 L 319 274 Q 470 292 621 274 L 621 260.15 Q 621 249 609.85 249 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: 280px; 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="284" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">need to setup new project plans</text></switch></g><rect x="640" y="250" width="300" height="60" rx="9" ry="9" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><path d="M 650.15 249 Q 639 249 639 260.15 L 639 274 Q 790 292 941 274 L 941 260.15 Q 941 249 929.85 249 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: 280px; 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="284" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">write SVG directly into other projects</text></switch></g><rect x="0" y="330" width="300" height="60" rx="9" ry="9" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><path d="M 10.15 329 Q -1 329 -1 340.15 L -1 354 Q 150 372 301 354 L 301 340.15 Q 301 329 289.85 329 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: 360px; 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="364" 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 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>
data/docs/samples/grid-alignment-center.svg ADDED
@@ -0,0 +1,3 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
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="602px" height="602px" viewBox="-0.5 -0.5 602 602"><defs/><g><ellipse cx="80" cy="80" rx="80" ry="80" fill="#f5f5f5" stroke="#666666" pointer-events="all"/><rect x="220" y="0" width="160" height="160" fill="#f5f5f5" stroke="#666666" pointer-events="all"/><ellipse cx="520" cy="80" rx="80" ry="80" fill="#f5f5f5" stroke="#666666" pointer-events="all"/><rect x="0" y="220" width="160" height="160" fill="#f5f5f5" stroke="#666666" pointer-events="all"/><ellipse cx="300" cy="300" rx="80" ry="80" fill="#f5f5f5" stroke="#666666" pointer-events="all"/><rect x="440" y="220" width="160" height="160" fill="#f5f5f5" stroke="#666666" pointer-events="all"/><ellipse cx="80" cy="520" rx="80" ry="80" fill="#f5f5f5" stroke="#666666" pointer-events="all"/></g></svg>
data/docs/samples/grid-alignment.svg ADDED
@@ -0,0 +1,3 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
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="602px" height="602px" viewBox="-0.5 -0.5 602 602"><defs/><g><ellipse cx="80" cy="80" rx="80" ry="80" fill="#f5f5f5" stroke="#666666" pointer-events="all"/><rect x="220" y="0" width="160" height="160" fill="#f5f5f5" stroke="#666666" pointer-events="all"/><ellipse cx="520" cy="80" rx="80" ry="80" fill="#f5f5f5" stroke="#666666" pointer-events="all"/><rect x="0" y="220" width="160" height="160" fill="#f5f5f5" stroke="#666666" pointer-events="all"/><ellipse cx="300" cy="300" rx="80" ry="80" fill="#f5f5f5" stroke="#666666" pointer-events="all"/><rect x="440" y="220" width="160" height="160" fill="#f5f5f5" stroke="#666666" pointer-events="all"/><ellipse cx="80" cy="520" rx="80" ry="80" fill="#f5f5f5" stroke="#666666" pointer-events="all"/></g></svg>
data/docs/samples/grid-direction-horizontal.svg ADDED
@@ -0,0 +1,3 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
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="602px" height="602px" viewBox="-0.5 -0.5 602 602"><defs/><g><rect x="30" y="55" width="100" height="50" fill="none" 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 flex-start; justify-content: unsafe flex-start; width: 98px; height: 1px; padding-top: 62px; margin-left: 32px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 37px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; overflow-wrap: normal;">Horizontal</div></div></div></foreignObject><text x="32" y="99" fill="#333333" font-family="Helvetica" font-size="37px" font-weight="bold">Horizo...</text></switch></g><ellipse cx="300" cy="80" rx="80" ry="80" 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: 221px;"><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;">01</div></div></div></foreignObject><text x="300" y="84" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">01</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;">02</div></div></div></foreignObject><text x="520" y="84" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">02</text></switch></g><ellipse cx="80" cy="300" rx="80" ry="80" 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: 300px; 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;">03</div></div></div></foreignObject><text x="80" y="304" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">03</text></switch></g><rect x="220" y="220" 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: 300px; margin-left: 221px;"><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;">04</div></div></div></foreignObject><text x="300" y="304" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">04</text></switch></g><ellipse cx="520" cy="300" rx="80" ry="80" 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: 300px; 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;">05</div></div></div></foreignObject><text x="520" y="304" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">05</text></switch></g><rect x="0" y="440" 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: 520px; 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;">06</div></div></div></foreignObject><text x="80" y="524" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">06</text></switch></g><ellipse cx="300" cy="520" rx="80" ry="80" 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: 520px; margin-left: 221px;"><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;">07</div></div></div></foreignObject><text x="300" y="524" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">07</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/samples/grid-direction-vertical.svg ADDED
@@ -0,0 +1,3 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
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="602px" height="602px" viewBox="-0.5 -0.5 602 602"><defs/><g><rect x="30" y="55" width="100" height="50" fill="none" 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 flex-start; justify-content: unsafe flex-start; width: 98px; height: 1px; padding-top: 62px; margin-left: 32px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 37px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; overflow-wrap: normal;">Vertical</div></div></div></foreignObject><text x="32" y="99" fill="#333333" font-family="Helvetica" font-size="37px" font-weight="bold">Vertic...</text></switch></g><ellipse cx="80" cy="300" rx="80" ry="80" 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: 300px; 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;">01</div></div></div></foreignObject><text x="80" y="304" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">01</text></switch></g><rect x="0" y="440" 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: 520px; 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;">02</div></div></div></foreignObject><text x="80" y="524" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">02</text></switch></g><ellipse cx="300" cy="80" rx="80" ry="80" 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: 221px;"><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;">03</div></div></div></foreignObject><text x="300" y="84" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">03</text></switch></g><rect x="220" y="220" 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: 300px; margin-left: 221px;"><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;">04</div></div></div></foreignObject><text x="300" y="304" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">04</text></switch></g><ellipse cx="300" cy="520" rx="80" ry="80" 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: 520px; margin-left: 221px;"><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;">05</div></div></div></foreignObject><text x="300" y="524" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">05</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;">06</div></div></div></foreignObject><text x="520" y="84" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">06</text></switch></g><ellipse cx="520" cy="300" rx="80" ry="80" 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: 300px; 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;">07</div></div></div></foreignObject><text x="520" y="304" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">07</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/samples/samples.md ADDED
@@ -0,0 +1,48 @@
1
+ # Samples
2
+
3
+ ## Grid flow - Horizontal
4
+
5
+ ![](grid-direction-horizontal.svg)
6
+
7
+ ## Grid flow - Vertical
8
+
9
+ ![](grid-direction-vertical.svg)
10
+
11
+ ## Styles
12
+
13
+ ## Plain
14
+
15
+ ![](styles-plain.svg)
16
+
17
+ ### Shadow
18
+
19
+ ![](styles-shadow.svg)
20
+
21
+ ### Rounded
22
+
23
+ ![](styles-rounded.svg)
24
+
25
+ ### Glass
26
+
27
+ ![](styles-glass.svg)
28
+
29
+ ### Sketch
30
+
31
+ ![](styles-sketch.svg)
32
+
33
+ ## Themes
34
+
35
+ ### As circles
36
+ ![](themes-circle.svg)
37
+
38
+ ### As squares
39
+
40
+ ![](themes-square.svg)
41
+
42
+ ### As random shapes
43
+
44
+ ![](themes-random.svg)
45
+
46
+ ## Copyright
47
+
48
+ Copyright (c) David Cruwys. See [MIT License](LICENSE.txt) for further details.
data/docs/samples/samples.svg ADDED
@@ -0,0 +1,3 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
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="1082px" height="1253px" viewBox="-0.5 -0.5 1082 1253"><defs/><g><path d="M 80 105 C 80 85 80 75 100 75 C 86.67 75 86.67 55 100 55 C 113.33 55 113.33 75 100 75 C 120 75 120 85 120 105 Z" fill="#0050ef" stroke="#001dbc" stroke-miterlimit="10" 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: 38px; height: 1px; padding-top: 80px; margin-left: 81px;"><div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">actor</div></div></div></foreignObject><text x="100" y="84" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">actor</text></switch></g><ellipse cx="320" cy="61.25" rx="7.5" ry="6.25" fill="#6d8764" stroke="#3a5431" pointer-events="all"/><path d="M 320 67.5 L 320 88.33 M 320 71.67 L 305 71.67 M 320 71.67 L 335 71.67 M 320 88.33 L 305 105 M 320 88.33 L 335 105" fill="none" stroke="#3a5431" stroke-miterlimit="10" 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: 28px; height: 1px; padding-top: 130px; margin-left: 306px;"><div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">actor2</div></div></div></foreignObject><text x="320" y="134" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">actor2</text></switch></g><path d="M 460 65 L 460 30 Q 460 20 470 20 L 610 20 Q 620 20 620 30 L 620 100 Q 620 110 610 110 L 570 110 Q 560 110 554.45 118.32 L 540 140 L 540 120 Q 540 110 530 110 L 470 110 Q 460 110 460 100 Z" fill="#ffcc99" stroke="#36393d" stroke-miterlimit="10" 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: 65px; margin-left: 461px;"><div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">callout</div></div></div></foreignObject><text x="540" y="69" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">callout</text></switch></g><path d="M 710.02 116.93 C 682.66 94.06 680 56.37 703.91 30.67 C 727.83 4.96 770.17 0.01 800.83 19.33 C 831.48 38.64 840 75.64 820.32 104.02 C 800.64 132.39 759.48 142.46 726.1 127.06 C 718.59 146.13 706.49 158.25 693.2 160 C 701.56 149.51 707.51 134.26 710.02 116.93 Z" fill="#ffcccc" stroke="#36393d" stroke-miterlimit="15" 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: 681px;"><div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">callout2</div></div></div></foreignObject><text x="760" y="84" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">callout2</text></switch></g><path d="M 921.41 82.87 C 915.53 86.08 908.91 83.21 905.15 75.81 C 901.39 68.4 901.39 58.24 905.15 50.84 C 908.91 43.44 915.53 40.56 921.41 43.78 C 921.37 30.74 926.82 19.03 935.09 14.39 C 943.36 9.75 952.72 13.15 958.58 22.93 C 962.34 9.08 971.45 -0.01 981.58 -0.01 C 991.72 -0.01 1000.83 9.08 1004.59 22.93 C 1010.6 14.95 1019.18 12.7 1026.7 17.12 C 1034.21 21.55 1039.37 31.89 1039.98 43.78 C 1045.87 40.56 1052.49 43.44 1056.25 50.84 C 1060.01 58.24 1060.01 68.4 1056.25 75.81 C 1052.49 83.21 1045.87 86.08 1039.98 82.87 C 1039.34 95.43 1033.64 106.2 1025.52 110.19 C 1017.4 114.17 1008.45 110.59 1002.82 101.11 C 998.34 112.08 990.28 118.8 981.58 118.8 C 972.89 118.8 964.83 112.08 960.35 101.11 C 956.07 113.77 943.89 119.96 933.14 114.92 C 922.39 109.88 917.14 95.53 921.41 82.87 Z" fill="#e3c800" stroke="#b09500" stroke-linejoin="round" stroke-miterlimit="10" pointer-events="all"/><rect x="900" y="0" width="0" height="0" fill="none" stroke="#b09500" pointer-events="all"/><ellipse cx="926.72" cy="127.17" rx="10.618294436456145" ry="7.0358306188925095" fill="#e3c800" stroke="#b09500" pointer-events="all"/><ellipse cx="914.33" cy="144.1" rx="6.724919809755558" ry="4.690553745928339" fill="#e3c800" stroke="#b09500" pointer-events="all"/><ellipse cx="904.25" cy="156.61" rx="4.2473177745824575" ry="3.387622149837134" fill="#e3c800" stroke="#b09500" 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: 901px;"><div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">callout3</div></div></div></foreignObject><text x="980" y="84" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">callout3</text></switch></g><path d="M 42.5 345 L 25 345 C 22.24 345 20 342.76 20 340 L 20 245 C 20 242.24 22.24 240 25 240 L 175 240 C 177.76 240 180 242.24 180 245 L 180 340 C 180 342.76 177.76 345 175 345 L 57.5 345 C 54.54 352.77 45.79 358.6 35 360 C 38.89 357.15 41.68 351.57 42.5 345 Z" fill="#d0cee2" stroke="#56517e" stroke-miterlimit="10" 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: 293px; margin-left: 21px;"><div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">callout4</div></div></div></foreignObject><text x="100" y="296" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">callout4</text></switch></g><ellipse cx="320" cy="300" rx="80" ry="80" fill="#d5e8d4" stroke="#82b366" 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: 300px; margin-left: 241px;"><div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">circle</div></div></div></foreignObject><text x="320" y="304" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">circle</text></switch></g><path d="M 500 260 C 468 260 460 300 485.6 308 C 460 325.6 488.8 364 509.6 348 C 524 380 572 380 588 348 C 620 348 620 316 600 300 C 620 268 588 236 560 252 C 540 228 508 228 500 260 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 474.93 272.73 C 474.93 272.73 474.93 272.73 474.93 272.73 M 474.93 272.73 C 474.93 272.73 474.93 272.73 474.93 272.73 M 471.39 282.9 C 478.78 276.23 486.41 265.59 489.76 261.77 M 471.39 282.9 C 478.87 274.92 484.27 267.92 489.76 261.77 M 473.1 287.04 C 479.69 278.75 484.54 272.63 495.4 261.38 M 473.1 287.04 C 478.32 281.28 482.08 277.04 495.4 261.38 M 505.24 250.06 C 507.29 248.58 507.77 246.71 511.15 243.26 M 505.24 250.06 C 507.23 248.24 508.79 246.7 511.15 243.26 M 472.18 294.19 C 485.46 275.48 503.92 259 520.07 239.09 M 472.18 294.19 C 487.37 277.09 500.34 260.41 520.07 239.09 M 473.89 298.32 C 489.22 281.54 503.03 264.81 527.68 236.44 M 473.89 298.32 C 491.78 277.41 510.43 257.05 527.68 236.44 M 476.25 301.7 C 496.56 278.76 516.98 254.48 532.67 236.8 M 476.25 301.7 C 496.41 279.61 516.63 256.5 532.67 236.8 M 479.27 304.33 C 499.69 282.49 520.73 257.65 537 237.91 M 479.27 304.33 C 497.52 281.89 517.2 260.3 537 237.91 M 482.94 306.2 C 503.25 282.66 522.93 260.17 541.33 239.03 M 482.94 306.2 C 500.46 286.67 518.37 265.53 541.33 239.03 M 479.4 316.37 C 506.18 285.74 530.16 258.71 545.66 240.14 M 479.4 316.37 C 492.47 299.47 506.87 283.66 545.66 240.14 M 477.83 324.27 C 497.47 303.53 515.87 284.61 548.68 242.77 M 477.83 324.27 C 505.05 293.75 531.66 263.72 548.68 242.77 M 478.22 329.92 C 501.43 300.28 527.61 273.75 552.36 244.63 M 478.22 329.92 C 502.84 301.97 527.63 273.84 552.36 244.63 M 479.27 334.81 C 504.96 301.13 531.34 271.78 555.38 247.26 M 479.27 334.81 C 502.09 307.39 527.49 278.28 555.38 247.26 M 480.98 338.94 C 512.74 305.25 540.89 266.88 558.4 249.88 M 480.98 338.94 C 502.38 314.77 522.91 291.47 558.4 249.88 M 483.34 342.32 C 515.49 309.53 544.99 271.84 560.76 253.26 M 483.34 342.32 C 512.75 308.81 540.33 276.65 560.76 253.26 M 485.71 345.7 C 505.47 320.32 523.84 300.55 567.71 251.36 M 485.71 345.7 C 518.2 308.77 548.66 270.45 567.71 251.36 M 488.07 349.08 C 511.23 322.83 530.38 299.72 575.98 247.94 M 488.07 349.08 C 512.41 320.62 537.91 293.7 575.98 247.94 M 492.4 350.19 C 523 313.45 555.25 276.76 580.31 249.06 M 492.4 350.19 C 514.7 322.4 537.04 296.96 580.31 249.06 M 496.07 352.06 C 528.73 311.7 566.28 274.58 585.3 249.42 M 496.07 352.06 C 519.34 325.66 543.74 297.15 585.3 249.42 M 499.75 353.93 C 524.32 323.48 551.54 294.36 588.32 252.04 M 499.75 353.93 C 521.62 328.44 544.33 303.17 588.32 252.04 M 509.98 348.25 C 541.63 312.57 575.1 272.88 591.99 253.91 M 509.98 348.25 C 535.39 317.11 562.36 288.28 591.99 253.91 M 512.35 351.63 C 531.9 326.08 555.11 302.14 595.67 255.78 M 512.35 351.63 C 538.9 318.82 567.27 286.68 595.67 255.78 M 514.71 355.01 C 533.92 335.28 553.59 310.86 598.69 258.41 M 514.71 355.01 C 537.7 330.55 558.76 306.16 598.69 258.41 M 517.07 358.39 C 539.27 332.77 559.23 310.36 601.05 261.79 M 517.07 358.39 C 542.03 328.39 565.56 300.74 601.05 261.79 M 520.09 361.01 C 548.43 328.42 581.46 290.18 604.07 264.41 M 520.09 361.01 C 542.67 335.75 565.26 311.4 604.07 264.41 M 523.11 363.64 C 541.36 345.29 554.46 326.38 605.77 268.54 M 523.11 363.64 C 550.41 332.71 576.32 303.46 605.77 268.54 M 526.13 366.26 C 546.22 346.45 562.62 325.09 606.82 273.43 M 526.13 366.26 C 556.26 332.08 587.33 297.48 606.82 273.43 M 529.8 368.13 C 548.32 347.41 566.89 327.91 607.22 279.08 M 529.8 368.13 C 559.34 333.58 590.22 297.85 607.22 279.08 M 534.14 369.25 C 551.14 352.05 568.98 332.91 606.96 285.47 M 534.14 369.25 C 560.11 338.83 586.39 309.22 606.96 285.47 M 537.81 371.12 C 560.17 346.57 581.62 321.16 608.01 290.36 M 537.81 371.12 C 559.03 348.24 578.76 324.45 608.01 290.36 M 542.14 372.23 C 560.42 352.43 576.91 334.28 602.5 302.8 M 542.14 372.23 C 560.68 352.94 579.03 330.62 602.5 302.8 M 547.13 372.59 C 562.15 353.25 576.2 337.71 605.52 305.42 M 547.13 372.59 C 559.73 358.07 571.13 343.62 605.52 305.42 M 550.8 374.46 C 567.1 357.05 579.15 343.13 607.88 308.8 M 550.8 374.46 C 568.93 352.31 589.42 330.35 607.88 308.8 M 557.1 373.31 C 577.88 349.31 598.21 327.86 610.9 311.42 M 557.1 373.31 C 577 350.1 596.15 327.49 610.9 311.42 M 562.75 372.92 C 583.06 353.1 598.73 329.67 611.95 316.31 M 562.75 372.92 C 580.61 353.02 599.43 332.58 611.95 316.31 M 572.98 367.24 C 579.42 360.8 586 351.51 588.73 349.13 M 572.98 367.24 C 577.62 361.93 584.18 355.76 588.73 349.13 M 588.73 349.13 C 592.89 344.9 600.81 336.71 613.66 320.45 M 588.73 349.13 C 598.13 338.36 606.7 328.35 613.66 320.45 M 595.03 347.98 C 599.74 343.85 605.1 338.72 616.02 323.83 M 595.03 347.98 C 601.26 339.47 608.88 332.99 616.02 323.83 M 600.01 348.34 C 605.32 345.36 608.66 338.05 612.48 334 M 600.01 348.34 C 604.16 342.4 608.15 337.8 612.48 334" fill="none" stroke="#ffcc99" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/><path d="M 500 260 M 500 260 C 468.85 260.82 460.86 299.07 485.6 308 M 500 260 C 469.73 259.78 458.32 300.69 485.6 308 M 485.6 308 C 458.17 324.57 487.93 364.34 509.6 348 M 485.6 308 C 458.71 327.78 488.38 364.5 509.6 348 M 509.6 348 C 522.59 380.27 573.98 381.08 588 348 M 509.6 348 C 523.11 382.09 573.21 380.63 588 348 M 588 348 C 621.62 346.35 620.65 315.16 600 300 M 588 348 C 621.79 349.96 621.78 315.21 600 300 M 600 300 C 621.76 267.82 589.41 237.45 560 252 M 600 300 C 619.87 268.77 586.71 236.1 560 252 M 560 252 C 540.53 228.3 509.51 227.8 500 260 M 560 252 C 539.1 226.65 510.08 227.12 500 260 M 500 260 C 500 260 500 260 500 260 M 500 260 C 500 260 500 260 500 260" fill="none" stroke="#36393d" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" 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: 300px; margin-left: 461px;"><div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">cloud</div></div></div></foreignObject><text x="540" y="304" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">cloud</text></switch></g><path d="M 735 275 L 749.58 275 L 760 289.8 L 770.42 275 L 785 275 L 767.29 300 L 785 325 L 770.42 325 L 760 310.2 L 749.58 325 L 735 325 L 751.67 300 Z" fill="#60a917" stroke="#2d7600" stroke-miterlimit="10" 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 flex-start; justify-content: unsafe center; width: 48px; height: 1px; padding-top: 332px; margin-left: 736px;"><div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">cross</div></div></div></foreignObject><text x="760" y="344" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">cross</text></switch></g><path d="M 900 250 L 1060 250 L 1060 350 L 900 350 Z" fill="#0050ef" stroke="#001dbc" stroke-miterlimit="10" pointer-events="all"/><path d="M 900 250 L 980 300 L 1060 250" fill="none" stroke="#001dbc" stroke-miterlimit="10" 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: 300px; margin-left: 901px;"><div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">envelop</div></div></div></foreignObject><text x="980" y="304" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">envelop</text></switch></g><path d="M 100 470 L 150 520 L 100 570 L 50 520 Z" fill="#f5f5f5" stroke="#666666" stroke-miterlimit="10" 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: 98px; height: 1px; padding-top: 520px; margin-left: 51px;"><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;">diamond</div></div></div></foreignObject><text x="100" y="524" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">diamond</text></switch></g><path d="M 398.38 462.86 L 398.38 600 L 240 600 L 240 440 L 375.76 440 Z" fill="#fff2cc" stroke="#d6b656" stroke-miterlimit="10" pointer-events="all"/><path d="M 375.76 440 C 377.6 445.35 374.57 450.86 367.68 454.69 L 400 464 Z" fill="#fff2cc" stroke="#d6b656" stroke-miterlimit="10" 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: 520px; margin-left: 241px;"><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;">document</div></div></div></foreignObject><text x="320" y="524" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">document</text></switch></g><ellipse cx="540" cy="520" rx="100" ry="60" fill="#ffcc99" stroke="#36393d" 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: 198px; height: 1px; padding-top: 520px; margin-left: 441px;"><div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">ellipse</div></div></div></foreignObject><text x="540" y="524" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">ellipse</text></switch></g><path d="M 710 460 L 810 460 L 860 520 L 810 580 L 710 580 L 660 520 Z" fill="#e3c800" stroke="#b09500" stroke-miterlimit="10" 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: 198px; height: 1px; padding-top: 520px; margin-left: 661px;"><div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">hexagon</div></div></div></foreignObject><text x="760" y="524" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">hexagon</text></switch></g><path d="M 900 463 L 900 440 L 1060 440 L 1060 463" fill="#6d8764" stroke="#3a5431" stroke-miterlimit="10" pointer-events="all"/><path d="M 900 463 L 900 600 L 1060 600 L 1060 463" fill="none" stroke="#3a5431" stroke-miterlimit="10" pointer-events="none"/><path d="M 900 463 L 1060 463" fill="none" stroke="#3a5431" stroke-miterlimit="10" pointer-events="none"/><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: 452px; margin-left: 901px;"><div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: none; font-weight: bold; white-space: normal; overflow-wrap: normal;">container</div></div></div></foreignObject><text x="980" y="455" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">container</text></switch></g><path d="M 43 660 L 20 660 L 20 820 L 43 820" fill="#f9f7ed" stroke="#36393d" stroke-miterlimit="10" pointer-events="none"/><path d="M 43 660 L 180 660 L 180 820 L 43 820" fill="none" stroke="#36393d" stroke-miterlimit="10" pointer-events="none"/><path d="M 43 660 L 43 820" fill="none" stroke="#36393d" stroke-miterlimit="10" pointer-events="none"/><g transform="translate(-0.5 -0.5)rotate(-90 31.5 740)"><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: 740px; margin-left: -47px;"><div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; font-weight: bold; white-space: normal; overflow-wrap: normal;">container2</div></div></div></foreignObject><text x="32" y="744" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">container2</text></switch></g><path d="M 240 710 L 240 660 L 400 660 L 400 710" fill="#6d8764" stroke="#3a5431" stroke-miterlimit="10" pointer-events="none"/><path d="M 240 710 L 240 820 L 400 820 L 400 710" fill="none" stroke="#3a5431" stroke-miterlimit="10" pointer-events="none"/><path d="M 240 710 L 400 710" fill="none" stroke="#3a5431" stroke-miterlimit="10" pointer-events="none"/><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: 685px; margin-left: 241px;"><div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: none; font-weight: bold; white-space: normal; overflow-wrap: normal;">container3</div></div></div></foreignObject><text x="320" y="689" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">container3</text></switch></g><path d="M 460 660 C 460 660 460 660 460 660 M 460 660 C 460 660 460 660 460 660 M 459.74 666.4 C 461.81 665.11 462.68 662.87 464.99 660.36 M 459.74 666.4 C 461.22 664.53 463.21 661.96 464.99 660.36 M 460.13 672.04 C 462.99 668.65 465.24 667.15 470.63 659.97 M 460.13 672.04 C 464.6 667.08 468.44 662.8 470.63 659.97 M 459.87 678.44 C 464.95 672.62 467.51 671 475.62 660.33 M 459.87 678.44 C 464.23 673.24 468.43 668.39 475.62 660.33 M 460.92 683.33 C 467.71 674.66 474.15 668.03 481.26 659.93 M 460.92 683.33 C 467.9 675.91 476.27 666.88 481.26 659.93 M 465.91 683.69 C 475.04 673.39 481.9 665.7 486.25 660.29 M 465.91 683.69 C 472.15 676.43 478.19 668.58 486.25 660.29 M 471.55 683.29 C 476.71 675.14 483.34 672.78 491.89 659.9 M 471.55 683.29 C 478.24 675.38 483.92 667.78 491.89 659.9 M 476.54 683.65 C 481.36 675.69 489.41 668.55 496.88 660.26 M 476.54 683.65 C 483.19 674.86 490.82 666.84 496.88 660.26 M 482.18 683.26 C 489.47 674.52 497.74 667.25 502.52 659.86 M 482.18 683.26 C 487.46 675.92 494.16 670.37 502.52 659.86 M 487.17 683.62 C 493.97 675.64 497.95 669.13 507.51 660.22 M 487.17 683.62 C 494.14 675.9 499.92 669.68 507.51 660.22 M 492.81 683.22 C 501.57 672.66 507.63 665.66 513.15 659.83 M 492.81 683.22 C 498.21 676.18 503.25 671.43 513.15 659.83 M 497.8 683.58 C 507.29 674.94 515.21 663.95 518.14 660.19 M 497.8 683.58 C 502.71 677.31 508.33 671.2 518.14 660.19 M 502.79 683.94 C 507.14 676.05 515.57 670.37 523.78 659.79 M 502.79 683.94 C 508.24 678.63 513.22 671.1 523.78 659.79 M 508.43 683.55 C 513.71 674.72 521.31 667.55 528.77 660.15 M 508.43 683.55 C 514.02 676.87 519.76 668.43 528.77 660.15 M 513.42 683.91 C 521.72 673.83 528.74 666.31 534.41 659.76 M 513.42 683.91 C 519.28 677.77 526.04 669.44 534.41 659.76 M 519.06 683.51 C 524.17 675.91 531.6 667.77 539.4 660.12 M 519.06 683.51 C 526.48 674.89 534.68 665.46 539.4 660.12 M 524.05 683.87 C 534.02 675.72 541.15 662.95 545.04 659.72 M 524.05 683.87 C 531.68 676.76 537.24 668.34 545.04 659.72 M 529.69 683.48 C 533.15 676.39 539.37 672.63 550.03 660.08 M 529.69 683.48 C 535.52 676.07 539.91 670.29 550.03 660.08 M 534.68 683.84 C 541.76 673.95 551.46 667.69 555.67 659.69 M 534.68 683.84 C 538.56 677.9 543.27 673.2 555.67 659.69 M 540.32 683.45 C 546.54 676.85 549.93 675.17 560.66 660.05 M 540.32 683.45 C 545 677.14 550.42 671.48 560.66 660.05 M 545.31 683.81 C 553.66 673.02 562.87 666.55 566.3 659.66 M 545.31 683.81 C 552.21 675.96 560.76 667.14 566.3 659.66 M 550.95 683.41 C 554.37 677.99 559.28 670.33 571.29 660.02 M 550.95 683.41 C 556.72 676 564.46 668.33 571.29 660.02 M 555.94 683.77 C 561.81 676.57 565.05 670.5 576.27 660.38 M 555.94 683.77 C 562.98 677.41 567.9 669.84 576.27 660.38 M 561.58 683.38 C 568.57 673.53 573.76 665.61 581.92 659.98 M 561.58 683.38 C 567.72 676.14 574.91 668.91 581.92 659.98 M 566.57 683.74 C 574.27 676.52 582.2 666.16 586.91 660.34 M 566.57 683.74 C 571.92 676.38 579.25 669.24 586.91 660.34 M 572.21 683.34 C 579.53 672.74 588.76 665.94 592.55 659.95 M 572.21 683.34 C 580.25 674.16 587.45 665.95 592.55 659.95 M 577.2 683.7 C 582.34 677.62 592.23 669.35 597.54 660.31 M 577.2 683.7 C 584.82 675.97 589.74 669.1 597.54 660.31 M 582.84 683.31 C 588.72 678.35 591.18 673.28 603.18 659.91 M 582.84 683.31 C 589.66 674.68 596.25 667.38 603.18 659.91 M 587.83 683.67 C 591.78 676.68 597.48 671.95 608.17 660.27 M 587.83 683.67 C 595.75 675.87 603.28 667.26 608.17 660.27 M 593.47 683.27 C 598.17 676.56 603.25 672.89 613.81 659.88 M 593.47 683.27 C 598.43 676.1 604.14 671.13 613.81 659.88 M 598.46 683.63 C 606.97 676.19 614.46 668.28 618.8 660.24 M 598.46 683.63 C 603.73 677.03 609.12 672.84 618.8 660.24 M 604.1 683.24 C 608.72 675.5 613.74 669.55 622.47 662.11 M 604.1 683.24 C 611.23 674.66 616.91 667.66 622.47 662.11 M 609.09 683.6 C 613.31 680.7 615.99 676.81 622.21 668.5 M 609.09 683.6 C 612.71 679.25 617.75 674.25 622.21 668.5 M 614.07 683.96 C 616.74 679.4 619.6 675.78 622.6 674.15 M 614.07 683.96 C 616.36 681.64 618.69 677.94 622.6 674.15" fill="none" stroke="#f5f5f5" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="none"/><path d="M 460 683 M 460 683 C 461.77 677.14 461.77 667.72 460 660 M 460 683 C 459.39 677.68 459.49 672.43 460 660 M 460 660 C 503.79 660.29 546.42 657.9 620 660 M 460 660 C 494.11 661.63 528.69 661.18 620 660 M 620 660 C 618.17 669.37 618.48 678.94 620 683 M 620 660 C 619.6 667.08 620.52 673.23 620 683" fill="none" stroke="#666666" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="none"/><path d="M 460 683 M 460 683 C 461.15 717.55 459.01 751.36 460 820 M 460 683 C 459.53 736.05 458.28 789.68 460 820 M 460 820 C 504.78 819.78 546.69 818.25 620 820 M 460 820 C 517.02 820.51 575.25 819.56 620 820 M 620 820 C 620.69 789.45 620.67 761.26 620 683 M 620 820 C 621.46 766.01 621.11 712.82 620 683" fill="none" stroke="#666666" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="none"/><path d="M 460 683 M 460 683 C 501.02 683.88 538.05 684.16 620 683 M 460 683 C 523.38 680.94 584.98 680.75 620 683" fill="none" stroke="#666666" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="none"/><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: 672px; margin-left: 461px;"><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: none; font-weight: bold; white-space: normal; overflow-wrap: normal;">container4</div></div></div></foreignObject><text x="540" y="675" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">container4</text></switch></g><path d="M 680 660 L 810 660 L 840 690 L 840 820 L 680 820 L 680 660 Z" fill="#fad7ac" stroke="#b46504" stroke-miterlimit="10" pointer-events="none"/><path d="M 810 660 L 810 690 L 840 690" fill="none" stroke="#b46504" stroke-miterlimit="10" pointer-events="none"/><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: 740px; margin-left: 681px;"><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: none; white-space: normal; overflow-wrap: normal;">note</div></div></div></foreignObject><text x="760" y="744" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">note</text></switch></g><rect x="880" y="680" width="200" height="120" fill="#e1d5e7" stroke="#9673a6" pointer-events="none"/><path d="M 900 680 L 900 800 M 1060 680 L 1060 800" fill="none" stroke="#9673a6" stroke-miterlimit="10" pointer-events="none"/><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: 740px; margin-left: 901px;"><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: none; white-space: normal; overflow-wrap: normal;">process</div></div></div></foreignObject><text x="980" y="744" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">process</text></switch></g><rect x="0" y="900" width="200" height="120" rx="18" ry="18" fill="#dae8fc" stroke="#6c8ebf" pointer-events="none"/><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: 198px; height: 1px; padding-top: 960px; margin-left: 1px;"><div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; white-space: normal; overflow-wrap: normal;">rectangle</div></div></div></foreignObject><text x="100" y="964" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">rectangle</text></switch></g><path d="M 227.96 900 C 223.57 900 220 902.6 220 905.8 C 220 907.55 221.1 909.21 222.97 910.32 C 221.09 911.41 220 913.08 220 914.83 C 220 916.59 221.1 918.25 222.97 919.35 C 221.09 920.45 220 922.11 220 923.86 C 220 925.62 221.1 927.28 222.97 928.38 C 221.09 929.48 220 931.14 220 932.9 C 220 934.65 221.1 936.32 222.97 937.42 C 221.09 938.51 220 940.18 220 941.93 C 220 943.69 221.1 945.35 222.97 946.45 C 221.09 947.55 220 949.21 220 950.97 C 220 952.72 221.1 954.38 222.97 955.48 C 221.09 956.58 220 958.24 220 960 C 220 961.76 221.1 963.42 222.97 964.51 C 221.09 965.61 220 967.28 220 969.03 C 220 970.79 221.1 972.45 222.97 973.55 C 221.09 974.65 220 976.31 220 978.07 C 220 979.82 221.1 981.48 222.97 982.58 C 221.09 983.68 220 985.34 220 987.1 C 220 988.86 221.1 990.52 222.97 991.61 C 221.09 992.72 220 994.38 220 996.13 C 220 997.89 221.1 999.55 222.97 1000.65 C 221.09 1001.74 220 1003.41 220 1005.17 C 220 1006.92 221.1 1008.58 222.97 1009.68 C 221.09 1010.78 220 1012.45 220 1014.2 C 220 1017.4 223.57 1020 227.96 1020 C 230.62 1020 233.12 1019.03 234.59 1017.41 C 236.06 1019.03 238.55 1020 241.22 1020 C 243.84 1020 246.3 1019.05 247.79 1017.48 C 249.27 1019.05 251.72 1020 254.35 1020 C 256.97 1020 259.43 1019.05 260.91 1017.48 C 262.39 1019.05 264.85 1020 267.47 1020 C 270.1 1020 272.55 1019.05 274.04 1017.48 C 275.52 1019.05 277.97 1020 280.6 1020 C 283.23 1020 285.68 1019.05 287.17 1017.48 C 288.65 1019.05 291.1 1020 293.73 1020 C 296.35 1020 298.81 1019.05 300.3 1017.48 C 301.78 1019.05 304.23 1020 306.85 1020 C 309.48 1020 311.94 1019.05 313.42 1017.48 C 314.91 1019.05 317.36 1020 319.98 1020 C 322.61 1020 325.06 1019.05 326.55 1017.48 C 328.04 1019.05 330.48 1020 333.11 1020 C 335.73 1020 338.2 1019.05 339.68 1017.48 C 341.16 1019.05 343.61 1020 346.24 1020 C 348.86 1020 351.33 1019.05 352.8 1017.48 C 354.29 1019.05 356.75 1020 359.36 1020 C 362 1020 364.45 1019.05 365.93 1017.48 C 367.42 1019.05 369.87 1020 372.5 1020 C 375.12 1020 377.58 1019.05 379.06 1017.48 C 380.54 1019.05 383 1020 385.62 1020 C 388.25 1020 390.71 1019.05 392.18 1017.48 C 393.67 1019.05 396.13 1020 398.75 1020 C 401.42 1020 403.92 1019.01 405.4 1017.39 C 406.86 1019.02 409.36 1020 412.04 1020 C 416.43 1020 420 1017.4 420 1014.2 C 420 1012.45 418.91 1010.79 417.03 1009.68 C 418.91 1008.59 420 1006.92 420 1005.17 C 420 1003.41 418.91 1001.75 417.03 1000.65 C 418.91 999.55 420 997.89 420 996.13 C 420 994.38 418.91 992.72 417.03 991.62 C 418.91 990.52 420 988.86 420 987.1 C 420 985.35 418.91 983.69 417.03 982.58 C 418.91 981.49 420 979.82 420 978.07 C 420 976.31 418.91 974.65 417.03 973.55 C 418.91 972.45 420 970.79 420 969.03 C 420 967.28 418.91 965.62 417.03 964.52 C 418.91 963.42 420 961.76 420 960 C 420 958.25 418.91 956.58 417.03 955.49 C 418.91 954.38 420 952.72 420 950.97 C 420 949.21 418.91 947.55 417.03 946.45 C 418.91 945.35 420 943.69 420 941.93 C 420 940.18 418.91 938.52 417.03 937.42 C 418.91 936.32 420 934.66 420 932.9 C 420 931.14 418.91 929.48 417.03 928.39 C 418.91 927.28 420 925.62 420 923.86 C 420 922.11 418.91 920.45 417.03 919.35 C 418.91 918.25 420 916.59 420 914.83 C 420 913.08 418.91 911.42 417.03 910.32 C 418.91 909.22 420 907.55 420 905.8 C 420 902.6 416.43 900 412.04 900 C 409.37 900 406.86 900.99 405.4 902.61 C 403.93 900.98 401.42 900 398.75 900 C 396.12 900 393.66 900.95 392.18 902.52 C 390.7 900.95 388.24 900 385.62 900 C 382.99 900 380.53 900.95 379.05 902.52 C 377.57 900.95 375.11 900 372.5 900 C 369.86 900 367.41 900.95 365.92 902.52 C 364.44 900.95 361.99 900 359.36 900 C 356.74 900 354.28 900.95 352.79 902.52 C 351.32 900.95 348.86 900 346.24 900 C 343.61 900 341.15 900.95 339.67 902.52 C 338.19 900.95 335.73 900 333.11 900 C 330.48 900 328.03 900.95 326.54 902.52 C 325.06 900.95 322.61 900 319.98 900 C 317.36 900 314.9 900.95 313.41 902.52 C 311.94 900.95 309.48 900 306.85 900 C 304.23 900 301.77 900.95 300.29 902.52 C 298.81 900.95 296.35 900 293.73 900 C 291.1 900 288.65 900.95 287.16 902.52 C 285.67 900.95 283.23 900 280.6 900 C 277.97 900 275.52 900.95 274.03 902.52 C 272.55 900.95 270.1 900 267.47 900 C 264.85 900 262.39 900.95 260.91 902.52 C 259.42 900.95 256.97 900 254.35 900 C 251.72 900 249.26 900.95 247.78 902.52 C 246.29 900.95 243.84 900 241.22 900 C 238.55 900 236.06 900.97 234.59 902.59 C 233.12 900.97 230.62 900 227.96 900 Z" fill="#ffcc99" stroke="#36393d" stroke-miterlimit="10" pointer-events="none"/><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: 198px; height: 1px; padding-top: 960px; margin-left: 221px;"><div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; white-space: normal; overflow-wrap: normal;">rectangle2</div></div></div></foreignObject><text x="320" y="964" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">rectangle2</text></switch></g><rect x="460" y="880" width="160" height="160" fill="#fff2cc" stroke="#d6b656" pointer-events="none"/><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: 960px; margin-left: 461px;"><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: none; white-space: normal; overflow-wrap: normal;">square</div></div></div></foreignObject><text x="540" y="964" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">square</text></switch></g><path d="M 700 920 L 800 920 L 820 960 L 800 1000 L 700 1000 L 720 960 Z" fill="#ffe6cc" stroke="#d79b00" stroke-miterlimit="10" pointer-events="none"/><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: 118px; height: 1px; padding-top: 960px; margin-left: 701px;"><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: none; white-space: normal; overflow-wrap: normal;">step</div></div></div></foreignObject><text x="760" y="964" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">step</text></switch></g><path d="M 955.21 969.19 C 955.75 967.5 957.08 966.08 958.89 965.3 C 960.7 964.52 962.81 964.44 964.69 965.09 C 967.43 966.24 969.55 968.26 970.62 970.72 C 975.5 958.7 982.94 947.58 992.54 937.92 C 995.26 935.78 999.07 935 1002.61 935.87 C 1003.51 935.99 1004.28 936.51 1004.64 937.24 C 1005 937.96 1004.9 938.8 1004.38 939.45 C 991.34 952.2 981.64 967.24 975.95 983.54 C 972.59 985 968.64 985 965.28 983.54 C 962.75 978.67 959.35 974.17 955.21 970.21 C 955 969.89 955 969.5 955.21 969.19 Z" fill="#a20025" stroke="#6f0000" stroke-miterlimit="10" pointer-events="none"/><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 flex-start; justify-content: unsafe center; width: 48px; height: 1px; padding-top: 992px; margin-left: 956px;"><div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: none; white-space: normal; overflow-wrap: normal;">tick</div></div></div></foreignObject><text x="980" y="1004" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">tick</text></switch></g><ellipse cx="100" cy="1180" rx="50" ry="50" fill="#cce5ff" stroke="#36393d" pointer-events="none"/><path d="M 61.22 1185.1 C 61.22 1194.95 68.62 1204.04 80.61 1208.96 C 92.61 1213.88 107.39 1213.88 119.39 1208.96 C 131.38 1204.04 138.78 1194.95 138.78 1185.1" fill="none" stroke="#36393d" stroke-width="2.04" stroke-miterlimit="10" pointer-events="none"/><rect x="50" y="1130" width="0" height="0" fill="none" stroke="#36393d" pointer-events="none"/><path d="M 66.33 1182.04 L 56.12 1188.16" fill="#cce5ff" stroke="#36393d" stroke-miterlimit="10" pointer-events="none"/><path d="M 133.67 1182.04 L 143.88 1188.16" fill="#cce5ff" stroke="#36393d" stroke-miterlimit="10" pointer-events="none"/><ellipse cx="77.55" cy="1165.71" rx="3.0612244897959187" ry="8.16326530612245" fill="#cce5ff" stroke="#36393d" stroke-width="6.12" pointer-events="none"/><ellipse cx="122.45" cy="1165.71" rx="3.0612244897959187" ry="8.16326530612245" fill="#cce5ff" stroke="#36393d" stroke-width="6.12" pointer-events="none"/><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 flex-start; justify-content: unsafe center; width: 98px; height: 1px; padding-top: 1237px; margin-left: 51px;"><div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; white-space: normal; overflow-wrap: normal;">face</div></div></div></foreignObject><text x="100" y="1249" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">face</text></switch></g><path d="M 270 1130 L 370 1180 L 270 1230 Z" fill="#ffcd28" stroke="#d79b00" stroke-miterlimit="10" pointer-events="none"/><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: 98px; height: 1px; padding-top: 1180px; margin-left: 271px;"><div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; white-space: normal; overflow-wrap: normal;">triangle</div></div></div></foreignObject><text x="320" y="1184" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">triangle</text></switch></g><rect x="440" y="1160" width="200" height="40" fill="#fad7ac" stroke="none" pointer-events="none"/><path d="M 440 1160 M 640 1160 M 640 1200 L 440 1200" fill="none" stroke="#b46504" stroke-linecap="square" stroke-miterlimit="10" pointer-events="none"/><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: 198px; height: 1px; padding-top: 1180px; 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: none; white-space: normal; overflow-wrap: normal;">embed_row</div></div></div></foreignObject><text x="540" y="1184" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">embed_row</text></switch></g><path d="M 735.24 1159.73 C 735.24 1159.73 735.24 1159.73 735.24 1159.73 M 735.24 1159.73 C 735.24 1159.73 735.24 1159.73 735.24 1159.73 M 734.97 1166.13 C 736.24 1164.89 737.82 1162.73 740.22 1160.09 M 734.97 1166.13 C 737.07 1163.66 738.72 1161.27 740.22 1160.09 M 734.71 1172.53 C 737.29 1167.52 742.57 1163.31 745.87 1159.7 M 734.71 1172.53 C 736.92 1169.01 739.91 1167.57 745.87 1159.7 M 735.11 1178.17 C 737.22 1172.26 744.47 1170.85 750.85 1160.06 M 735.11 1178.17 C 739.13 1173.31 744.38 1166.73 750.85 1160.06 M 734.85 1184.57 C 737.72 1179.96 743.15 1174.82 756.5 1159.66 M 734.85 1184.57 C 741.49 1176.61 749.18 1169.04 756.5 1159.66 M 735.24 1190.21 C 741.28 1183.43 745.11 1176.79 761.48 1160.02 M 735.24 1190.21 C 742.65 1183.29 749.1 1176.17 761.48 1160.02 M 734.98 1196.61 C 744.15 1184.91 754.08 1175.61 767.13 1159.63 M 734.98 1196.61 C 744.52 1186.75 753.4 1174.14 767.13 1159.63 M 736.03 1201.5 C 747.06 1192.45 755.86 1179.35 772.11 1159.99 M 736.03 1201.5 C 747.22 1189.59 758.76 1176.49 772.11 1159.99 M 741.67 1201.1 C 756.7 1183.15 770.77 1170.87 777.1 1160.35 M 741.67 1201.1 C 750.65 1190.3 759.51 1180.47 777.1 1160.35 M 746.66 1201.46 C 761.46 1183.79 774.75 1170.95 782.74 1159.95 M 746.66 1201.46 C 757.32 1190.41 767.62 1177.92 782.74 1159.95 M 752.3 1201.07 C 759.11 1190.51 767.45 1182.61 786.42 1161.82 M 752.3 1201.07 C 765.42 1185.76 777.79 1171.25 786.42 1161.82 M 757.29 1201.43 C 766.49 1191.15 771.07 1182.88 786.81 1167.46 M 757.29 1201.43 C 763.44 1193.89 770.1 1186.72 786.81 1167.46 M 762.93 1201.03 C 771.76 1194.05 778.05 1184.99 786.55 1173.86 M 762.93 1201.03 C 770.51 1193.68 776.26 1185.18 786.55 1173.86 M 767.92 1201.39 C 775.19 1195 781.72 1188.3 786.95 1179.51 M 767.92 1201.39 C 772.96 1196.14 779.06 1189.27 786.95 1179.51 M 773.56 1201 C 779.86 1195 781.76 1189.39 786.68 1185.9 M 773.56 1201 C 778.5 1194.91 783.97 1189.23 786.68 1185.9 M 778.55 1201.36 C 780.19 1198.1 782.99 1197.08 786.42 1192.3 M 778.55 1201.36 C 781.14 1199.39 782.65 1196.65 786.42 1192.3" fill="none" stroke="#fa6800" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="none"/><path d="M 735 1160 M 785 1160 M 785 1200 M 735 1200" fill="none" stroke="#c73500" stroke-linejoin="round" stroke-linecap="square" stroke-miterlimit="10" pointer-events="none"/><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: 48px; height: 1px; padding-top: 1180px; margin-left: 736px;"><div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center; max-height: 36px; overflow: hidden;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; font-weight: bold; white-space: normal; overflow-wrap: normal;">embed_col50</div></div></div></foreignObject><text x="760" y="1184" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">embed_co...</text></switch></g><rect x="905" y="1160" width="150" height="40" fill="#1ba1e2" stroke="none" pointer-events="none"/><path d="M 905 1160 M 1055 1160 M 1055 1200 M 905 1200" fill="none" stroke="#006eaf" stroke-linecap="square" stroke-miterlimit="10" pointer-events="none"/><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: 142px; height: 1px; padding-top: 1180px; margin-left: 913px;"><div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: left; max-height: 36px; overflow: hidden;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: none; white-space: normal; overflow-wrap: normal;">embed_col200</div></div></div></foreignObject><text x="913" y="1184" fill="#ffffff" font-family="Helvetica" font-size="12px">embed_col200</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/samples/styles-glass.svg ADDED
@@ -0,0 +1,3 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
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="1082px" height="1587px" viewBox="-0.5 -0.5 1082 1587"><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="50" y="0" width="100" height="50" fill="none" 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 flex-start; justify-content: unsafe flex-start; width: 98px; height: 1px; padding-top: 7px; margin-left: 52px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 89px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; overflow-wrap: normal;">h1</div></div></div></foreignObject><text x="52" y="96" fill="#333333" font-family="Helvetica" font-size="89px" font-weight="bold">h1</text></switch></g><rect x="270" y="0" width="100" height="50" fill="none" 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 flex-start; justify-content: unsafe flex-start; width: 98px; height: 1px; padding-top: 7px; margin-left: 272px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 67px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; overflow-wrap: normal;">h2</div></div></div></foreignObject><text x="272" y="74" fill="#333333" font-family="Helvetica" font-size="67px" font-weight="bold">h2</text></switch></g><rect x="490" y="0" width="100" height="50" fill="none" 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 flex-start; justify-content: unsafe flex-start; width: 98px; height: 1px; padding-top: 7px; margin-left: 492px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 50px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; overflow-wrap: normal;">h3</div></div></div></foreignObject><text x="492" y="57" fill="#333333" font-family="Helvetica" font-size="50px" font-weight="bold">h3</text></switch></g><rect x="710" y="0" width="100" height="50" fill="none" 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 flex-start; justify-content: unsafe flex-start; width: 98px; height: 1px; padding-top: 7px; margin-left: 712px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 37px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; overflow-wrap: normal;">h4</div></div></div></foreignObject><text x="712" y="44" fill="#333333" font-family="Helvetica" font-size="37px" font-weight="bold">h4</text></switch></g><rect x="930" y="0" width="100" height="50" fill="none" 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 flex-start; justify-content: unsafe flex-start; width: 98px; height: 1px; padding-top: 7px; margin-left: 932px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 28px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; overflow-wrap: normal;">h5</div></div></div></foreignObject><text x="932" y="35" fill="#333333" font-family="Helvetica" font-size="28px" font-weight="bold">h5</text></switch></g><rect x="50" y="220" width="100" height="50" fill="none" 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 flex-start; justify-content: unsafe flex-start; width: 98px; height: 1px; padding-top: 227px; margin-left: 52px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 21px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; overflow-wrap: normal;">h6</div></div></div></foreignObject><text x="52" y="248" fill="#333333" font-family="Helvetica" font-size="21px" font-weight="bold">h6</text></switch></g><rect x="270" y="220" width="100" height="50" fill="none" 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 flex-start; justify-content: unsafe flex-start; width: 98px; height: 1px; padding-top: 227px; margin-left: 272px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 16px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; overflow-wrap: normal;">p</div></div></div></foreignObject><text x="272" y="243" fill="#333333" font-family="Helvetica" font-size="16px" font-weight="bold">p</text></switch></g><path d="M 520 270 C 520 250 520 240 540 240 C 526.67 240 526.67 220 540 220 C 553.33 220 553.33 240 540 240 C 560 240 560 250 560 270 Z" fill="#f8cecc" stroke="#b85450" stroke-miterlimit="10" 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: 38px; height: 1px; padding-top: 245px; margin-left: 521px;"><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;">actor</div></div></div></foreignObject><text x="540" y="249" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">actor</text></switch></g><ellipse cx="760" cy="226.25" rx="7.5" ry="6.25" fill="#f8cecc" stroke="#b85450" pointer-events="all"/><path d="M 760 232.5 L 760 253.33 M 760 236.67 L 745 236.67 M 760 236.67 L 775 236.67 M 760 253.33 L 745 270 M 760 253.33 L 775 270" fill="none" stroke="#b85450" stroke-miterlimit="10" 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: 28px; height: 1px; padding-top: 295px; margin-left: 746px;"><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;">actor2</div></div></div></foreignObject><text x="760" y="299" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">actor2</text></switch></g><path d="M 900 185 L 1060 185 L 1060 275 L 1000 275 L 980 305 L 980 275 L 900 275 Z" fill="#f8cecc" stroke="#b85450" stroke-miterlimit="10" 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: 230px; margin-left: 901px;"><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;">callout</div></div></div></foreignObject><text x="980" y="234" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">callout</text></switch></g><path d="M 50.02 501.93 C 22.66 479.06 20 441.37 43.91 415.67 C 67.83 389.96 110.17 385.01 140.83 404.33 C 171.48 423.64 180 460.64 160.32 489.02 C 140.64 517.39 99.48 527.46 66.1 512.06 C 58.59 531.13 46.49 543.25 33.2 545 C 41.56 534.51 47.51 519.26 50.02 501.93 Z" fill="#f8cecc" stroke="#b85450" stroke-miterlimit="15" 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: 465px; margin-left: 21px;"><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;">callout2</div></div></div></foreignObject><text x="100" y="469" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">callout2</text></switch></g><path d="M 261.41 467.87 C 255.53 471.08 248.91 468.21 245.15 460.81 C 241.39 453.4 241.39 443.24 245.15 435.84 C 248.91 428.44 255.53 425.56 261.41 428.78 C 261.37 415.74 266.82 404.03 275.09 399.39 C 283.36 394.75 292.72 398.15 298.58 407.93 C 302.34 394.08 311.45 384.99 321.58 384.99 C 331.72 384.99 340.83 394.08 344.59 407.93 C 350.6 399.95 359.18 397.7 366.7 402.12 C 374.21 406.55 379.37 416.89 379.98 428.78 C 385.87 425.56 392.49 428.44 396.25 435.84 C 400.01 443.24 400.01 453.4 396.25 460.81 C 392.49 468.21 385.87 471.08 379.98 467.87 C 379.34 480.43 373.64 491.2 365.52 495.19 C 357.4 499.17 348.45 495.59 342.82 486.11 C 338.34 497.08 330.28 503.8 321.58 503.8 C 312.89 503.8 304.83 497.08 300.35 486.11 C 296.07 498.77 283.89 504.96 273.14 499.92 C 262.39 494.88 257.14 480.53 261.41 467.87 Z" fill="#f8cecc" stroke="#b85450" stroke-linejoin="round" stroke-miterlimit="10" pointer-events="all"/><rect x="240" y="385" width="0" height="0" fill="none" stroke="#b85450" pointer-events="all"/><ellipse cx="266.72" cy="512.17" rx="10.618294436456145" ry="7.0358306188925095" fill="#f8cecc" stroke="#b85450" pointer-events="all"/><ellipse cx="254.33" cy="529.1" rx="6.724919809755558" ry="4.690553745928339" fill="#f8cecc" stroke="#b85450" pointer-events="all"/><ellipse cx="244.25" cy="541.61" rx="4.2473177745824575" ry="3.387622149837134" fill="#f8cecc" stroke="#b85450" 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: 465px; margin-left: 241px;"><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;">callout3</div></div></div></foreignObject><text x="320" y="469" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">callout3</text></switch></g><path d="M 482.5 510 L 465 510 C 462.24 510 460 507.76 460 505 L 460 410 C 460 407.24 462.24 405 465 405 L 615 405 C 617.76 405 620 407.24 620 410 L 620 505 C 620 507.76 617.76 510 615 510 L 497.5 510 C 494.54 517.77 485.79 523.6 475 525 C 478.89 522.15 481.68 516.57 482.5 510 Z" fill="#f8cecc" stroke="#b85450" stroke-miterlimit="10" 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: 458px; margin-left: 461px;"><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;">callout4</div></div></div></foreignObject><text x="540" y="461" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">callout4</text></switch></g><ellipse cx="760" cy="465" rx="80" ry="80" fill="#f8cecc" stroke="#b85450" 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: 465px; margin-left: 681px;"><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;">circle</div></div></div></foreignObject><text x="760" y="469" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">circle</text></switch></g><path d="M 940 425 C 908 425 900 465 925.6 473 C 900 490.6 928.8 529 949.6 513 C 964 545 1012 545 1028 513 C 1060 513 1060 481 1040 465 C 1060 433 1028 401 1000 417 C 980 393 948 393 940 425 Z" fill="#f8cecc" stroke="#b85450" stroke-miterlimit="10" 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: 465px; margin-left: 901px;"><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;">cloud</div></div></div></foreignObject><text x="980" y="469" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">cloud</text></switch></g><path d="M 75 660 L 89.58 660 L 100 674.8 L 110.42 660 L 125 660 L 107.29 685 L 125 710 L 110.42 710 L 100 695.2 L 89.58 710 L 75 710 L 91.67 685 Z" fill="#f8cecc" stroke="#b85450" stroke-miterlimit="10" 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 flex-start; justify-content: unsafe center; width: 48px; height: 1px; padding-top: 717px; margin-left: 76px;"><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;">cross</div></div></div></foreignObject><text x="100" y="729" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">cross</text></switch></g><path d="M 240 635 L 400 635 L 400 735 L 240 735 Z" fill="#f8cecc" stroke="#b85450" stroke-miterlimit="10" pointer-events="all"/><path d="M 240 635 L 320 685 L 400 635" fill="none" stroke="#b85450" stroke-miterlimit="10" 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: 685px; margin-left: 241px;"><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;">envelop</div></div></div></foreignObject><text x="320" y="689" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">envelop</text></switch></g><path d="M 540 635 L 590 685 L 540 735 L 490 685 Z" fill="#f8cecc" stroke="#b85450" stroke-miterlimit="10" 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: 98px; height: 1px; padding-top: 685px; margin-left: 491px;"><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;">diamond</div></div></div></foreignObject><text x="540" y="689" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">diamond</text></switch></g><path d="M 838.38 627.86 L 838.38 765 L 680 765 L 680 605 L 815.76 605 Z" fill="#f8cecc" stroke="#b85450" stroke-miterlimit="10" pointer-events="all"/><path d="M 815.76 605 C 817.6 610.35 814.57 615.86 807.68 619.69 L 840 629 Z" fill="#f8cecc" stroke="#b85450" stroke-miterlimit="10" 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: 685px; margin-left: 681px;"><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;">document</div></div></div></foreignObject><text x="760" y="689" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">document</text></switch></g><ellipse cx="980" cy="685" rx="100" ry="60" fill="#f8cecc" stroke="#b85450" 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: 198px; height: 1px; padding-top: 685px; margin-left: 881px;"><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;">ellipse</div></div></div></foreignObject><text x="980" y="689" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">ellipse</text></switch></g><path d="M 50 845 L 150 845 L 200 905 L 150 965 L 50 965 L 0 905 Z" fill="#f8cecc" stroke="#b85450" stroke-miterlimit="10" 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: 198px; height: 1px; padding-top: 905px; 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;">hexagon</div></div></div></foreignObject><text x="100" y="909" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">hexagon</text></switch></g><path d="M 240 848 L 240 825 L 400 825 L 400 848" fill="#f8cecc" stroke="#b85450" stroke-miterlimit="10" pointer-events="all"/><path d="M 240 848 L 240 985 L 400 985 L 400 848" fill="none" stroke="#b85450" stroke-miterlimit="10" pointer-events="none"/><path d="M 240 848 L 400 848" fill="none" stroke="#b85450" stroke-miterlimit="10" pointer-events="none"/><path d="M 239 824 L 239 834.2 Q 320 841.1 401 834.2 L 401 824 Z" fill="url(#mx-gradient-ffffff-0.9-ffffff-0.1-s-0)" stroke="none" pointer-events="none"/><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: 837px; margin-left: 241px;"><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: none; font-weight: bold; white-space: normal; overflow-wrap: normal;">container</div></div></div></foreignObject><text x="320" y="840" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">container</text></switch></g><path d="M 483 825 L 460 825 L 460 985 L 483 985" fill="#f8cecc" stroke="#b85450" stroke-miterlimit="10" pointer-events="none"/><path d="M 483 825 L 620 825 L 620 985 L 483 985" fill="none" stroke="#b85450" stroke-miterlimit="10" pointer-events="none"/><path d="M 483 825 L 483 985" fill="none" stroke="#b85450" stroke-miterlimit="10" pointer-events="none"/><path d="M 459 824 L 459 834.2 Q 540 841.1 621 834.2 L 621 824 Z" fill="url(#mx-gradient-ffffff-0.9-ffffff-0.1-s-0)" stroke="none" pointer-events="none"/><g transform="translate(-0.5 -0.5)rotate(-90 471.5 905)"><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: 905px; margin-left: 393px;"><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: none; font-weight: bold; white-space: normal; overflow-wrap: normal;">container2</div></div></div></foreignObject><text x="472" y="909" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">container2</text></switch></g><path d="M 680 875 L 680 825 L 840 825 L 840 875" fill="#f8cecc" stroke="#b85450" stroke-miterlimit="10" pointer-events="none"/><path d="M 680 875 L 680 985 L 840 985 L 840 875" fill="none" stroke="#b85450" stroke-miterlimit="10" pointer-events="none"/><path d="M 680 875 L 840 875" fill="none" stroke="#b85450" stroke-miterlimit="10" pointer-events="none"/><path d="M 679 824 L 679 845 Q 760 860 841 845 L 841 824 Z" fill="url(#mx-gradient-ffffff-0.9-ffffff-0.1-s-0)" stroke="none" pointer-events="none"/><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: 850px; margin-left: 681px;"><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: none; font-weight: bold; white-space: normal; overflow-wrap: normal;">container3</div></div></div></foreignObject><text x="760" y="854" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">container3</text></switch></g><path d="M 900 848 L 900 825 L 1060 825 L 1060 848" fill="#f8cecc" stroke="#b85450" stroke-miterlimit="10" pointer-events="none"/><path d="M 900 848 L 900 985 L 1060 985 L 1060 848" fill="none" stroke="#b85450" stroke-miterlimit="10" pointer-events="none"/><path d="M 900 848 L 1060 848" fill="none" stroke="#b85450" stroke-miterlimit="10" pointer-events="none"/><path d="M 899 824 L 899 834.2 Q 980 841.1 1061 834.2 L 1061 824 Z" fill="url(#mx-gradient-ffffff-0.9-ffffff-0.1-s-0)" stroke="none" pointer-events="none"/><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: 837px; margin-left: 901px;"><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: none; font-weight: bold; white-space: normal; overflow-wrap: normal;">container4</div></div></div></foreignObject><text x="980" y="840" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">container4</text></switch></g><path d="M 20 1045 L 150 1045 L 180 1075 L 180 1205 L 20 1205 L 20 1045 Z" fill="#f8cecc" stroke="#b85450" stroke-miterlimit="10" pointer-events="none"/><path d="M 150 1045 L 150 1075 L 180 1075" fill="none" stroke="#b85450" stroke-miterlimit="10" pointer-events="none"/><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: 1125px; margin-left: 21px;"><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: none; white-space: normal; overflow-wrap: normal;">note</div></div></div></foreignObject><text x="100" y="1129" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">note</text></switch></g><rect x="220" y="1065" width="200" height="120" fill="#f8cecc" stroke="#b85450" pointer-events="none"/><path d="M 240 1065 L 240 1185 M 400 1065 L 400 1185" fill="none" stroke="#b85450" stroke-miterlimit="10" pointer-events="none"/><path d="M 219 1064 L 219 1113 Q 320 1149 421 1113 L 421 1064 Z" fill="url(#mx-gradient-ffffff-0.9-ffffff-0.1-s-0)" stroke="none" pointer-events="none"/><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: 1125px; margin-left: 241px;"><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: none; white-space: normal; overflow-wrap: normal;">process</div></div></div></foreignObject><text x="320" y="1129" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">process</text></switch></g><rect x="440" y="1065" width="200" height="120" fill="#f8cecc" stroke="#b85450" pointer-events="none"/><path d="M 439 1064 L 439 1113 Q 540 1149 641 1113 L 641 1064 Z" fill="url(#mx-gradient-ffffff-0.9-ffffff-0.1-s-0)" stroke="none" pointer-events="none"/><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: 198px; height: 1px; padding-top: 1125px; 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: none; white-space: normal; overflow-wrap: normal;">rectangle</div></div></div></foreignObject><text x="540" y="1129" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">rectangle</text></switch></g><path d="M 667.96 1065 C 663.57 1065 660 1067.6 660 1070.8 C 660 1072.55 661.1 1074.21 662.97 1075.32 C 661.09 1076.41 660 1078.08 660 1079.83 C 660 1081.59 661.1 1083.25 662.97 1084.35 C 661.09 1085.45 660 1087.11 660 1088.86 C 660 1090.62 661.1 1092.28 662.97 1093.38 C 661.09 1094.48 660 1096.14 660 1097.9 C 660 1099.65 661.1 1101.32 662.97 1102.42 C 661.09 1103.51 660 1105.18 660 1106.93 C 660 1108.69 661.1 1110.35 662.97 1111.45 C 661.09 1112.55 660 1114.21 660 1115.97 C 660 1117.72 661.1 1119.38 662.97 1120.48 C 661.09 1121.58 660 1123.24 660 1125 C 660 1126.76 661.1 1128.42 662.97 1129.51 C 661.09 1130.61 660 1132.28 660 1134.03 C 660 1135.79 661.1 1137.45 662.97 1138.55 C 661.09 1139.65 660 1141.31 660 1143.07 C 660 1144.82 661.1 1146.48 662.97 1147.58 C 661.09 1148.68 660 1150.34 660 1152.1 C 660 1153.86 661.1 1155.52 662.97 1156.61 C 661.09 1157.72 660 1159.38 660 1161.13 C 660 1162.89 661.1 1164.55 662.97 1165.65 C 661.09 1166.74 660 1168.41 660 1170.17 C 660 1171.92 661.1 1173.58 662.97 1174.68 C 661.09 1175.78 660 1177.45 660 1179.2 C 660 1182.4 663.57 1185 667.96 1185 C 670.62 1185 673.12 1184.03 674.59 1182.41 C 676.06 1184.03 678.55 1185 681.22 1185 C 683.84 1185 686.3 1184.05 687.79 1182.48 C 689.27 1184.05 691.72 1185 694.35 1185 C 696.97 1185 699.43 1184.05 700.91 1182.48 C 702.39 1184.05 704.85 1185 707.47 1185 C 710.1 1185 712.55 1184.05 714.04 1182.48 C 715.52 1184.05 717.97 1185 720.6 1185 C 723.23 1185 725.68 1184.05 727.17 1182.48 C 728.65 1184.05 731.1 1185 733.73 1185 C 736.35 1185 738.81 1184.05 740.3 1182.48 C 741.78 1184.05 744.23 1185 746.85 1185 C 749.48 1185 751.94 1184.05 753.42 1182.48 C 754.91 1184.05 757.36 1185 759.98 1185 C 762.61 1185 765.06 1184.05 766.55 1182.48 C 768.04 1184.05 770.48 1185 773.11 1185 C 775.73 1185 778.2 1184.05 779.68 1182.48 C 781.16 1184.05 783.61 1185 786.24 1185 C 788.86 1185 791.33 1184.05 792.8 1182.48 C 794.29 1184.05 796.75 1185 799.36 1185 C 802 1185 804.45 1184.05 805.93 1182.48 C 807.42 1184.05 809.87 1185 812.5 1185 C 815.12 1185 817.58 1184.05 819.06 1182.48 C 820.54 1184.05 823 1185 825.62 1185 C 828.25 1185 830.71 1184.05 832.18 1182.48 C 833.67 1184.05 836.13 1185 838.75 1185 C 841.42 1185 843.92 1184.01 845.4 1182.39 C 846.86 1184.02 849.36 1185 852.04 1185 C 856.43 1185 860 1182.4 860 1179.2 C 860 1177.45 858.91 1175.79 857.03 1174.68 C 858.91 1173.59 860 1171.92 860 1170.17 C 860 1168.41 858.91 1166.75 857.03 1165.65 C 858.91 1164.55 860 1162.89 860 1161.13 C 860 1159.38 858.91 1157.72 857.03 1156.62 C 858.91 1155.52 860 1153.86 860 1152.1 C 860 1150.35 858.91 1148.69 857.03 1147.58 C 858.91 1146.49 860 1144.82 860 1143.07 C 860 1141.31 858.91 1139.65 857.03 1138.55 C 858.91 1137.45 860 1135.79 860 1134.03 C 860 1132.28 858.91 1130.62 857.03 1129.52 C 858.91 1128.42 860 1126.76 860 1125 C 860 1123.25 858.91 1121.58 857.03 1120.49 C 858.91 1119.38 860 1117.72 860 1115.97 C 860 1114.21 858.91 1112.55 857.03 1111.45 C 858.91 1110.35 860 1108.69 860 1106.93 C 860 1105.18 858.91 1103.52 857.03 1102.42 C 858.91 1101.32 860 1099.66 860 1097.9 C 860 1096.14 858.91 1094.48 857.03 1093.39 C 858.91 1092.28 860 1090.62 860 1088.86 C 860 1087.11 858.91 1085.45 857.03 1084.35 C 858.91 1083.25 860 1081.59 860 1079.83 C 860 1078.08 858.91 1076.42 857.03 1075.32 C 858.91 1074.22 860 1072.55 860 1070.8 C 860 1067.6 856.43 1065 852.04 1065 C 849.37 1065 846.86 1065.99 845.4 1067.61 C 843.93 1065.98 841.42 1065 838.75 1065 C 836.12 1065 833.66 1065.95 832.18 1067.52 C 830.7 1065.95 828.24 1065 825.62 1065 C 822.99 1065 820.53 1065.95 819.05 1067.52 C 817.57 1065.95 815.11 1065 812.5 1065 C 809.86 1065 807.41 1065.95 805.92 1067.52 C 804.44 1065.95 801.99 1065 799.36 1065 C 796.74 1065 794.28 1065.95 792.79 1067.52 C 791.32 1065.95 788.86 1065 786.24 1065 C 783.61 1065 781.15 1065.95 779.67 1067.52 C 778.19 1065.95 775.73 1065 773.11 1065 C 770.48 1065 768.03 1065.95 766.54 1067.52 C 765.06 1065.95 762.61 1065 759.98 1065 C 757.36 1065 754.9 1065.95 753.41 1067.52 C 751.94 1065.95 749.48 1065 746.85 1065 C 744.23 1065 741.77 1065.95 740.29 1067.52 C 738.81 1065.95 736.35 1065 733.73 1065 C 731.1 1065 728.65 1065.95 727.16 1067.52 C 725.67 1065.95 723.23 1065 720.6 1065 C 717.97 1065 715.52 1065.95 714.03 1067.52 C 712.55 1065.95 710.1 1065 707.47 1065 C 704.85 1065 702.39 1065.95 700.91 1067.52 C 699.42 1065.95 696.97 1065 694.35 1065 C 691.72 1065 689.26 1065.95 687.78 1067.52 C 686.29 1065.95 683.84 1065 681.22 1065 C 678.55 1065 676.06 1065.97 674.59 1067.59 C 673.12 1065.97 670.62 1065 667.96 1065 Z" fill="#f8cecc" stroke="#b85450" stroke-miterlimit="10" pointer-events="none"/><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: 198px; height: 1px; padding-top: 1125px; margin-left: 661px;"><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: none; white-space: normal; overflow-wrap: normal;">rectangle2</div></div></div></foreignObject><text x="760" y="1129" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">rectangle2</text></switch></g><rect x="900" y="1045" width="160" height="160" fill="#f8cecc" stroke="#b85450" pointer-events="none"/><path d="M 899 1044 L 899 1109 Q 980 1157 1061 1109 L 1061 1044 Z" fill="url(#mx-gradient-ffffff-0.9-ffffff-0.1-s-0)" stroke="none" pointer-events="none"/><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: 1125px; margin-left: 901px;"><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: none; white-space: normal; overflow-wrap: normal;">square</div></div></div></foreignObject><text x="980" y="1129" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">square</text></switch></g><path d="M 40 1305 L 140 1305 L 160 1345 L 140 1385 L 40 1385 L 60 1345 Z" fill="#f8cecc" stroke="#b85450" stroke-miterlimit="10" pointer-events="none"/><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: 118px; height: 1px; padding-top: 1345px; margin-left: 41px;"><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: none; white-space: normal; overflow-wrap: normal;">step</div></div></div></foreignObject><text x="100" y="1349" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">step</text></switch></g><path d="M 295.21 1354.19 C 295.75 1352.5 297.08 1351.08 298.89 1350.3 C 300.7 1349.52 302.81 1349.44 304.69 1350.09 C 307.43 1351.24 309.55 1353.26 310.62 1355.72 C 315.5 1343.7 322.94 1332.58 332.54 1322.92 C 335.26 1320.78 339.07 1320 342.61 1320.87 C 343.51 1320.99 344.28 1321.51 344.64 1322.24 C 345 1322.96 344.9 1323.8 344.38 1324.45 C 331.34 1337.2 321.64 1352.24 315.95 1368.54 C 312.59 1370 308.64 1370 305.28 1368.54 C 302.75 1363.67 299.35 1359.17 295.21 1355.21 C 295 1354.89 295 1354.5 295.21 1354.19 Z" fill="#f8cecc" stroke="#b85450" stroke-miterlimit="10" pointer-events="none"/><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 flex-start; justify-content: unsafe center; width: 48px; height: 1px; padding-top: 1377px; margin-left: 296px;"><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: none; white-space: normal; overflow-wrap: normal;">tick</div></div></div></foreignObject><text x="320" y="1389" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">tick</text></switch></g><ellipse cx="540" cy="1345" rx="50" ry="50" fill="#f8cecc" stroke="#b85450" pointer-events="none"/><path d="M 501.22 1350.1 C 501.22 1365.32 518.58 1377.65 540 1377.65 C 561.42 1377.65 578.78 1365.32 578.78 1350.1" fill="none" stroke="#b85450" stroke-width="2.04" stroke-miterlimit="10" pointer-events="none"/><rect x="490" y="1295" width="0" height="0" fill="none" stroke="#b85450" pointer-events="none"/><path d="M 506.33 1347.04 L 496.12 1353.16" fill="#f8cecc" stroke="#b85450" stroke-miterlimit="10" pointer-events="none"/><path d="M 573.67 1347.04 L 583.88 1353.16" fill="#f8cecc" stroke="#b85450" stroke-miterlimit="10" pointer-events="none"/><ellipse cx="517.55" cy="1330.71" rx="3.0612244897959187" ry="8.16326530612245" fill="#f8cecc" stroke="#b85450" stroke-width="6.12" pointer-events="none"/><ellipse cx="562.45" cy="1330.71" rx="3.0612244897959187" ry="8.16326530612245" fill="#f8cecc" stroke="#b85450" stroke-width="6.12" pointer-events="none"/><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 flex-start; justify-content: unsafe center; width: 98px; height: 1px; padding-top: 1402px; margin-left: 491px;"><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: none; white-space: normal; overflow-wrap: normal;">face</div></div></div></foreignObject><text x="540" y="1414" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">face</text></switch></g><path d="M 710 1295 L 810 1345 L 710 1395 Z" fill="#f8cecc" stroke="#b85450" stroke-miterlimit="10" pointer-events="none"/><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: 98px; height: 1px; padding-top: 1345px; margin-left: 711px;"><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: none; white-space: normal; overflow-wrap: normal;">triangle</div></div></div></foreignObject><text x="760" y="1349" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">triangle</text></switch></g><rect x="880" y="1325" width="200" height="40" fill="#f8cecc" stroke="none" pointer-events="none"/><path d="M 880 1325 M 1080 1325 M 1080 1365 L 880 1365" fill="none" stroke="#b85450" stroke-linecap="square" stroke-miterlimit="10" pointer-events="none"/><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: 198px; height: 1px; padding-top: 1345px; margin-left: 881px;"><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: none; white-space: normal; overflow-wrap: normal;">embed_row</div></div></div></foreignObject><text x="980" y="1349" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">embed_row</text></switch></g><rect x="75" y="1545" width="50" height="40" fill="#f8cecc" stroke="none" pointer-events="none"/><path d="M 75 1545 M 125 1545 M 125 1585 M 75 1585" fill="none" stroke="#b85450" stroke-linecap="square" stroke-miterlimit="10" pointer-events="none"/><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: 48px; height: 1px; padding-top: 1565px; margin-left: 76px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: center; max-height: 36px; overflow: hidden;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: none; font-weight: bold; white-space: normal; overflow-wrap: normal;">embed_col50</div></div></div></foreignObject><text x="100" y="1569" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">embed_co...</text></switch></g><rect x="245" y="1545" width="150" height="40" fill="#f8cecc" stroke="none" pointer-events="none"/><path d="M 245 1545 M 395 1545 M 395 1585 M 245 1585" fill="none" stroke="#b85450" stroke-linecap="square" stroke-miterlimit="10" pointer-events="none"/><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: 142px; height: 1px; padding-top: 1565px; margin-left: 253px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: left; max-height: 36px; overflow: hidden;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: none; white-space: normal; overflow-wrap: normal;">embed_col200</div></div></div></foreignObject><text x="253" y="1569" fill="#333333" font-family="Helvetica" font-size="12px">embed_col200</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>