drawio_dsl 0.5.4 → 0.5.5
Sign up to get free protection for your applications and to get access to all the features.
- 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
|
+
![](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.
|