2.2 KB140 lines
Blame
1<!doctype html>
2<html lang="en" xmlns="http://www.w3.org/1999/html">
3 <head>
4 <meta charset="utf-8" />
5 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6 <title>Mermaid Block diagram demo page</title>
7 <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
8 </head>
9
10 <body>
11 <h1>Block diagram demos</h1>
12 <pre id="diagram" class="mermaid">
13block
14columns 1
15 db(("DB"))
16 blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down)
17 block:ID
18 A
19 B["A wide one in the middle"]
20 C
21 end
22 space
23 D
24 ID --> D
25 C --> D
26 style B fill:#f9F,stroke:#333,stroke-width:4px
27 </pre>
28 <pre id="diagram" class="mermaid">
29block
30 A1["square"]
31 B1("rounded")
32 C1(("circle"))
33 A2>"rect_left_inv_arrow"]
34 B2{"diamond"}
35 C2{{"hexagon"}}
36 </pre>
37
38 <pre id="diagram" class="mermaid">
39block
40 A1(["stadium"])
41 A2[["subroutine"]]
42 B1[("cylinder")]
43 C1>"surprise"]
44 A3[/"lean right"/]
45 B2[\"lean left"\]
46 C2[/"trapezoid"\]
47 D2[\"trapezoid"/]
48 </pre>
49
50 <pre id="diagram" class="mermaid">
51block
52 block:e:4
53 columns 2
54 f
55 g
56 end
57
58 </pre>
59 <pre id="diagram" class="mermaid">
60block
61 block:e:4
62 columns 2
63 f
64 g
65 h
66 end
67
68 </pre>
69 <pre id="diagram" class="mermaid">
70block
71 columns 3
72 a:3
73 block:e:3
74 f
75 g
76 end
77 h
78 i
79 j
80
81 </pre>
82 <pre id="diagram" class="mermaid">
83block
84 columns 4
85 a b c d
86 block:e:4
87 columns 2
88 f
89 g
90 h
91 end
92 i:4
93
94 </pre>
95 <pre id="diagram" class="mermaid">
96flowchart LR
97 X-- "a label" -->z
98 </pre>
99 <pre id="diagram" class="mermaid">
100block
101columns 5
102 A space B
103 A --x B
104 </pre>
105 <pre id="diagram" class="mermaid">
106block
107columns 3
108 a["A wide one"] b:2 c:2 d
109 </pre>
110
111 <pre id="diagram" class="mermaid">
112block
113columns 3
114 a b c
115 e:3
116 f g h
117 </pre>
118
119 <pre id="diagram" class="mermaid">
120block
121
122 A1:3
123 A2:1
124 A3
125 </pre>
126
127 <script type="module">
128 import mermaid from './mermaid.esm.mjs';
129 mermaid.initialize({
130 theme: 'default',
131 logLevel: 3,
132 securityLevel: 'loose',
133 block: {
134 padding: 10,
135 },
136 });
137 </script>
138 </body>
139</html>
140