drawio_dsl 0.5.4 → 0.5.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/.builders/generators/project_plans/drawio_dsl.rb +7 -6
- data/.builders/generators/sample_diagrams/10-page-margin.rb +4 -8
- data/.builders/generators/sample_diagrams/15-grid-direction.rb +9 -7
- data/.builders/generators/sample_diagrams/16-grid-alignment.rb +6 -9
- data/.builders/generators/sample_diagrams/20-styles.rb +43 -45
- data/.builders/generators/sample_diagrams/25-themes.rb +21 -8
- data/.builders/generators/sample_diagrams/50-willoughby-council.rb +5 -6
- data/CHANGELOG.md +8 -0
- data/README.md +4 -3
- data/docs/project_done.svg +1 -1
- data/docs/samples/grid-alignment-center.svg +3 -0
- data/docs/samples/grid-alignment.svg +3 -0
- data/docs/samples/grid-direction-horizontal.svg +3 -0
- data/docs/samples/grid-direction-vertical.svg +3 -0
- data/docs/samples/samples.md +48 -0
- data/docs/samples/styles-glass.svg +3 -0
- data/docs/samples/styles-plain.svg +3 -0
- data/docs/samples/styles-rounded.svg +3 -0
- data/docs/samples/styles-shadow.svg +3 -0
- data/docs/samples/styles-sketch.svg +3 -0
- data/docs/samples/themes-circle.svg +3 -0
- data/docs/samples/themes-random.svg +3 -0
- data/docs/samples/themes-square.svg +3 -0
- data/docs/samples/willoughby-council.svg +3 -0
- data/lib/drawio_dsl/drawio.rb +16 -0
- data/lib/drawio_dsl/version.rb +1 -1
- data/package-lock.json +2 -2
- data/package.json +1 -1
- metadata +15 -2
- data/.builders/generators/sample_diagrams/30-shapes.rb +0 -23
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 60804927795dfee66047328d57be2b2fbdb924622652f30551df7e89ec041ad1
|
4
|
+
data.tar.gz: d65e52b32cf6addeca5a34ab932ea8514b79a6c0d5ae0de937fe61039c8099aa
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 7a7a8ac91696f596df2c25efa00ff308a7cd601bd7a5a40fb4de090538a96cf741d639b52e0f5e195140e10c0e107780b9c50323e1625ad4f64c3bc63f9becaa
|
7
|
+
data.tar.gz: 999205f96a80dff96d0d4645c921392e8a49a65bc25e1cbcd7950bb4c772f1fe636e42309be5bbf01ff484312c346985a78715aa53ccbc795b3e871896af9f93
|
@@ -1,8 +1,7 @@
|
|
1
1
|
KManager.action :todo_drawio_dsl do
|
2
2
|
action do
|
3
3
|
|
4
|
-
|
5
|
-
director = DrawioDsl::Drawio
|
4
|
+
DrawioDsl::Drawio
|
6
5
|
.init(k_builder, on_exist: :write, on_action: :execute)
|
7
6
|
.diagram(rounded: 1, glass: 1)
|
8
7
|
.page('In progress', theme: :style_03, margin_left: 0, margin_top: 0) do
|
@@ -42,15 +41,17 @@ KManager.action :todo_drawio_dsl do
|
|
42
41
|
|
43
42
|
grid_layout(y:90, direction: :horizontal, grid_h: 80, grid_w: 320, wrap_at: 3, grid: 0)
|
44
43
|
|
45
|
-
square(w: 300, h: 60, title: '
|
44
|
+
square(w: 300, h: 60, title: 'write samples into docs folder and display in readme')
|
45
|
+
square(w: 300, h: 60, title: 'add export as .PNG, needs to take a page number as the PNG will not support multiple pages')
|
46
46
|
square(w: 300, h: 60, title: 'add export as .SVG, needs to take a page number as the SVG will not support multiple pages')
|
47
|
+
square(w: 300, h: 60, title: 'add save as .drawio')
|
47
48
|
|
48
49
|
end
|
49
50
|
.cd(:spec)
|
50
51
|
.save('project-plans/drawio_dsl.drawio')
|
51
52
|
.cd(:docs)
|
52
|
-
.export_svg('project_in_progress
|
53
|
-
.export_svg('project_todo
|
54
|
-
.export_svg('project_done
|
53
|
+
.export_svg('project_in_progress', page: 1)
|
54
|
+
.export_svg('project_todo' , page: 2)
|
55
|
+
.export_svg('project_done' , page: 3)
|
55
56
|
end
|
56
57
|
end
|
@@ -1,7 +1,7 @@
|
|
1
1
|
KManager.action :bootstrap do
|
2
2
|
action do
|
3
|
-
|
4
|
-
.init(k_builder)
|
3
|
+
DrawioDsl::Drawio
|
4
|
+
.init(k_builder, on_exist: :write, on_action: :execute)
|
5
5
|
.diagram(theme: :style_01)
|
6
6
|
.page('PgMargin-default') do
|
7
7
|
grid_layout(wrap_at: 4)
|
@@ -36,11 +36,7 @@ KManager.action :bootstrap do
|
|
36
36
|
square
|
37
37
|
circle
|
38
38
|
end
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
File.write('../spec/.samples/drawio/10-page-margin.xml', diagram.build)
|
44
|
-
File.write('../spec/.samples/drawio/10-page-margin.drawio', diagram.build)
|
39
|
+
.cd(:spec)
|
40
|
+
.save('.samples/10-page-margin.drawio')
|
45
41
|
end
|
46
42
|
end
|
@@ -8,11 +8,12 @@ KManager.action :bootstrap do
|
|
8
8
|
# KConfig.configuration.drawio.rectangle.w = KConfig.configuration.drawio.rectangle.w / 4
|
9
9
|
# KConfig.configuration.drawio.rectangle.h = KConfig.configuration.drawio.rectangle.h / 4
|
10
10
|
|
11
|
-
|
12
|
-
.init(k_builder)
|
11
|
+
DrawioDsl::Drawio
|
12
|
+
.init(k_builder, on_exist: :write, on_action: :execute)
|
13
13
|
.diagram(theme: :style_01)
|
14
14
|
.page('Horizontal', margin_left: 0, margin_top: 0) do
|
15
15
|
grid_layout(wrap_at: 3, direction: :horizontal)
|
16
|
+
h4(title: 'Horizontal')
|
16
17
|
circle(title: '01')
|
17
18
|
square(title: '02')
|
18
19
|
circle(title: '03')
|
@@ -23,6 +24,7 @@ KManager.action :bootstrap do
|
|
23
24
|
end
|
24
25
|
.page('Vertical', margin_left: 0, margin_top: 0) do
|
25
26
|
grid_layout(wrap_at: 3, direction: :vertical)
|
27
|
+
h4(title: 'Vertical')
|
26
28
|
circle(title: '01')
|
27
29
|
square(title: '02')
|
28
30
|
circle(title: '03')
|
@@ -31,10 +33,10 @@ KManager.action :bootstrap do
|
|
31
33
|
square(title: '06')
|
32
34
|
circle(title: '07')
|
33
35
|
end
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
36
|
+
.cd(:spec)
|
37
|
+
.save('.samples/15-grid-direction.drawio')
|
38
|
+
.cd(:docs)
|
39
|
+
.export_svg('samples/grid-direction-horizontal', page: 1)
|
40
|
+
.export_svg('samples/grid-direction-vertical', page: 2)
|
39
41
|
end
|
40
42
|
end
|
@@ -9,10 +9,7 @@ KManager.action :bootstrap do
|
|
9
9
|
# KConfig.configuration.drawio.rectangle.h = KConfig.configuration.drawio.rectangle.h / 4
|
10
10
|
|
11
11
|
director = DrawioDsl::Drawio
|
12
|
-
.init(k_builder,
|
13
|
-
on_exist: :skip, # %i[skip write compare]
|
14
|
-
on_action: :queue # %i[queue execute]
|
15
|
-
)
|
12
|
+
.init(k_builder, on_exist: :write, on_action: :execute)
|
16
13
|
.diagram(theme: :style_01)
|
17
14
|
.page('Grid-Center', margin_left: 0, margin_top: 0) do
|
18
15
|
grid_layout(wrap_at: 3)
|
@@ -64,10 +61,10 @@ KManager.action :bootstrap do
|
|
64
61
|
square
|
65
62
|
circle
|
66
63
|
end
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
64
|
+
.cd(:spec)
|
65
|
+
.save('.samples/16-grid-alignment.drawio')
|
66
|
+
.cd(:docs)
|
67
|
+
# note: there is no difference between center and top/bottom/left/right using SVG/PNG
|
68
|
+
.export_svg('samples/grid-alignment', page: 1)
|
72
69
|
end
|
73
70
|
end
|
@@ -3,62 +3,60 @@ KManager.action :bootstrap do
|
|
3
3
|
|
4
4
|
# :rounded, :shadow, :sketch, :glass
|
5
5
|
director = DrawioDsl::Drawio
|
6
|
-
.init(k_builder)
|
6
|
+
.init(k_builder, on_exist: :write, on_action: :execute)
|
7
7
|
.diagram(theme: :style_06)
|
8
8
|
.page('Style-Plain', margin_left: 0, margin_top: 0) do
|
9
|
-
grid_layout(wrap_at:
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
circle
|
9
|
+
grid_layout(wrap_at: 5)
|
10
|
+
|
11
|
+
KConfig.configuration.drawio.shapes.members.each do |shape|
|
12
|
+
next if shape == :shape
|
13
|
+
|
14
|
+
send(shape, title: shape.to_s, shape: shape)
|
15
|
+
end
|
17
16
|
end
|
18
17
|
.page('Style-Shadow', shadow: 1, margin_left: 0, margin_top: 0) do
|
19
|
-
grid_layout(wrap_at:
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
circle
|
18
|
+
grid_layout(wrap_at: 5)
|
19
|
+
|
20
|
+
KConfig.configuration.drawio.shapes.members.each do |shape|
|
21
|
+
next if shape == :shape
|
22
|
+
|
23
|
+
send(shape, title: shape.to_s, shape: shape)
|
24
|
+
end
|
27
25
|
end
|
28
26
|
.page('Style-Rounded', rounded: 1, margin_left: 0, margin_top: 0) do
|
29
|
-
grid_layout(wrap_at:
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
circle
|
27
|
+
grid_layout(wrap_at: 5)
|
28
|
+
|
29
|
+
KConfig.configuration.drawio.shapes.members.each do |shape|
|
30
|
+
next if shape == :shape
|
31
|
+
|
32
|
+
send(shape, title: shape.to_s, shape: shape)
|
33
|
+
end
|
37
34
|
end
|
38
35
|
.page('Style-Glass', glass: 1, margin_left: 0, margin_top: 0) do
|
39
|
-
grid_layout(wrap_at:
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
circle
|
36
|
+
grid_layout(wrap_at: 5)
|
37
|
+
|
38
|
+
KConfig.configuration.drawio.shapes.members.each do |shape|
|
39
|
+
next if shape == :shape
|
40
|
+
|
41
|
+
send(shape, title: shape.to_s, shape: shape)
|
42
|
+
end
|
47
43
|
end
|
48
44
|
.page('Style-Sketch', sketch: 1, margin_left: 0, margin_top: 0) do
|
49
|
-
grid_layout(wrap_at:
|
50
|
-
circle
|
51
|
-
square
|
52
|
-
circle
|
53
|
-
square
|
54
|
-
circle
|
55
|
-
square
|
56
|
-
circle
|
57
|
-
end
|
45
|
+
grid_layout(wrap_at: 5)
|
58
46
|
|
59
|
-
|
47
|
+
KConfig.configuration.drawio.shapes.members.each do |shape|
|
48
|
+
next if shape == :shape
|
60
49
|
|
61
|
-
|
62
|
-
|
50
|
+
send(shape, title: shape.to_s, shape: shape)
|
51
|
+
end
|
52
|
+
end
|
53
|
+
.cd(:spec)
|
54
|
+
.save('.samples/20-styles.drawio')
|
55
|
+
.cd(:docs)
|
56
|
+
.export_svg('samples/styles-plain', page: 1)
|
57
|
+
.export_svg('samples/styles-shadow', page: 2)
|
58
|
+
.export_svg('samples/styles-rounded', page: 3)
|
59
|
+
.export_svg('samples/styles-glass', page: 4)
|
60
|
+
.export_svg('samples/styles-sketch', page: 5)
|
63
61
|
end
|
64
62
|
end
|
@@ -2,23 +2,36 @@ KManager.action :bootstrap do
|
|
2
2
|
action do
|
3
3
|
|
4
4
|
# :rounded, :shadow, :sketch, :glass
|
5
|
-
|
6
|
-
.init(k_builder)
|
5
|
+
DrawioDsl::Drawio
|
6
|
+
.init(k_builder, on_exist: :write, on_action: :execute)
|
7
7
|
.diagram(theme: :style_06)
|
8
8
|
.page('Style-Plain', margin_left: 0, margin_top: 0, rounded: 1, background: '#FFEADB') do
|
9
9
|
grid_layout(wrap_at: 8)
|
10
10
|
|
11
|
-
|
12
|
-
|
11
|
+
KConfig.configuration.drawio.themes.keys.each do |theme|
|
12
|
+
square(title: theme.to_s, theme: theme)
|
13
|
+
end
|
14
|
+
end
|
15
|
+
.page('Style-Plain', margin_left: 0, margin_top: 0, rounded: 1, background: '#FFEADB') do
|
16
|
+
grid_layout(wrap_at: 8)
|
13
17
|
|
14
18
|
KConfig.configuration.drawio.themes.keys.each do |theme|
|
15
|
-
|
19
|
+
circle(title: theme.to_s, theme: theme)
|
16
20
|
end
|
17
21
|
end
|
22
|
+
.page('Style-Plain', margin_left: 0, margin_top: 0, rounded: 1, background: '#FFEADB') do
|
23
|
+
grid_layout(wrap_at: 8)
|
18
24
|
|
19
|
-
|
25
|
+
KConfig.configuration.drawio.themes.keys.each do |theme|
|
26
|
+
random(title: theme.to_s, theme: theme)
|
27
|
+
end
|
28
|
+
end
|
29
|
+
.cd(:spec)
|
30
|
+
.save('.samples/25-themes.drawio')
|
31
|
+
.cd(:docs)
|
32
|
+
.export_svg('samples/themes-square', page: 1)
|
33
|
+
.export_svg('samples/themes-circle', page: 2)
|
34
|
+
.export_svg('samples/themes-random', page: 3)
|
20
35
|
|
21
|
-
File.write('../spec/.samples/drawio/25-themes.xml', diagram.build)
|
22
|
-
File.write('../spec/.samples/drawio/25-themes.drawio', diagram.build)
|
23
36
|
end
|
24
37
|
end
|
@@ -3,7 +3,7 @@ KManager.action :bootstrap do
|
|
3
3
|
|
4
4
|
# :rounded, :shadow, :sketch, :glass
|
5
5
|
director = DrawioDsl::Drawio
|
6
|
-
.init(k_builder)
|
6
|
+
.init(k_builder, on_exist: :write, on_action: :execute)
|
7
7
|
.diagram(theme: :style_03)
|
8
8
|
.page('Shapes', margin_left: 0, margin_top: 0, rounded: 1) do
|
9
9
|
grid_layout(direction: :vertical, grid_h: 120, grid_w: 400, wrap_at: 10, grid: 0)
|
@@ -43,10 +43,9 @@ KManager.action :bootstrap do
|
|
43
43
|
square(theme: :style_02, w: 240, h: 140, title: '10. TAKE ACTION: Once a decision is made as to the action that should happen in respect of the breach the council can then decide as to what the appropriate action is: WARNING, CIVIL, CRIMINAL and then proceed from there => it is important to keep the complainant informed throughout the entire process to be able to explain why you have taken the course you've taken and to be able to justify it')
|
44
44
|
|
45
45
|
end
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
File.write('../spec/.samples/drawio/50-willoughby-council.drawio', diagram.build)
|
46
|
+
.cd(:spec)
|
47
|
+
.save('.samples/50-willoughby-council.drawio')
|
48
|
+
.cd(:docs)
|
49
|
+
.export_svg('samples/willoughby-council', page: 1)
|
51
50
|
end
|
52
51
|
end
|
data/CHANGELOG.md
CHANGED
@@ -1,3 +1,11 @@
|
|
1
|
+
## [0.5.4](https://github.com/klueless-io/drawio_dsl/compare/v0.5.3...v0.5.4) (2022-03-08)
|
2
|
+
|
3
|
+
|
4
|
+
### Bug Fixes
|
5
|
+
|
6
|
+
* add generated project plan ([fa36f25](https://github.com/klueless-io/drawio_dsl/commit/fa36f25ff6f6d137ed3b1a3b141097305d4b6c19))
|
7
|
+
* add generated project plan ([7faf9b0](https://github.com/klueless-io/drawio_dsl/commit/7faf9b03da5b1aaf8461c73eb375b506aca05124))
|
8
|
+
|
1
9
|
## [0.5.3](https://github.com/klueless-io/drawio_dsl/compare/v0.5.2...v0.5.3) (2022-03-08)
|
2
10
|
|
3
11
|
|
data/README.md
CHANGED
@@ -32,15 +32,16 @@ gem install drawio_dsl
|
|
32
32
|
|
33
33
|
As a Developer, I to use natural language to build diagrams quickly, so that I can create visual documentation
|
34
34
|
|
35
|
-
See
|
35
|
+
See [project plan](./docs/project-plan.md)
|
36
36
|
|
37
|
+
## Samples
|
38
|
+
|
39
|
+
See all [samples](./docs/samples/samples.md)
|
37
40
|
|
38
41
|
## Usage
|
39
42
|
|
40
43
|
See all [usage examples](./USAGE.md)
|
41
44
|
|
42
|
-
|
43
|
-
|
44
45
|
## Development
|
45
46
|
|
46
47
|
Checkout the repo
|
data/docs/project_done.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="
|
3
|
+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="942px" height="152px" viewBox="-0.5 -0.5 942 152"><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;">Done</div></div></div></foreignObject><text x="342" y="63" fill="#333333" font-family="Helvetica" font-size="16px" font-weight="bold">Done</text></switch></g><rect x="0" y="10" width="300" height="60" rx="9" ry="9" fill="#f8cecc" stroke="#b85450" 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;">write samples into docs folder and display in readme</div></div></div></foreignObject><text x="150" y="44" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">write samples into docs folder and display in read...</text></switch></g><rect x="320" y="10" width="300" height="60" rx="9" ry="9" fill="#f8cecc" stroke="#b85450" 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 export as .PNG, needs to take a page number as the PNG will not support multiple pages</div></div></div></foreignObject><text x="470" y="44" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">add export as .PNG, needs to take a page number as...</text></switch></g><rect x="640" y="10" width="300" height="60" rx="9" ry="9" fill="#f8cecc" stroke="#b85450" 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;">add export as .SVG, needs to take a page number as the SVG will not support multiple pages</div></div></div></foreignObject><text x="790" y="44" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">add export as .SVG, needs to take a page number as...</text></switch></g><rect x="0" y="90" width="300" height="60" rx="9" ry="9" fill="#f8cecc" stroke="#b85450" 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;">add save as .drawio</div></div></div></foreignObject><text x="150" y="124" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">add save as .drawio</text></switch></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Text is not SVG - cannot display</text></a></switch></svg>
|
@@ -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>
|
@@ -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>
|
@@ -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>
|
@@ -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>
|
@@ -0,0 +1,48 @@
|
|
1
|
+
# Samples
|
2
|
+
|
3
|
+
## Grid flow - Horizontal
|
4
|
+
|
5
|
+

|
6
|
+
|
7
|
+
## Grid flow - Vertical
|
8
|
+
|
9
|
+

|
10
|
+
|
11
|
+
## Styles
|
12
|
+
|
13
|
+
## Plain
|
14
|
+
|
15
|
+

|
16
|
+
|
17
|
+
### Shadow
|
18
|
+
|
19
|
+

|
20
|
+
|
21
|
+
### Rounded
|
22
|
+
|
23
|
+

|
24
|
+
|
25
|
+
### Glass
|
26
|
+
|
27
|
+

|
28
|
+
|
29
|
+
### Sketch
|
30
|
+
|
31
|
+

|
32
|
+
|
33
|
+
## Themes
|
34
|
+
|
35
|
+
### As circles
|
36
|
+

|
37
|
+
|
38
|
+
### As squares
|
39
|
+
|
40
|
+

|
41
|
+
|
42
|
+
### As random shapes
|
43
|
+
|
44
|
+

|
45
|
+
|
46
|
+
## Copyright
|
47
|
+
|
48
|
+
Copyright (c) David Cruwys. See [MIT License](LICENSE.txt) for further details.
|