UNPKG

26.4 kBHTMLView Raw
1<!DOCTYPE html>
2<html>
3<head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <title>Mermaid Quick Test Page</title>
7 <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
8 <style>
9 div.mermaid {
10 /* font-family: 'trebuchet ms', verdana, arial; */
11 font-family: 'Courier New', Courier, monospace !important;
12 }
13 </style>
14</head>
15<body>
16 <div class="mermaid">
17 info
18 </div>
19
20 <hr/>
21
22 <div class="mermaid">
23 gantt
24 title Exclusive end dates (Manual date should end on 3d)
25 dateFormat YYYY-MM-DD
26 axisFormat %d
27 section Section1
28 2 Days: 1, 2019-01-01,2d
29 Manual Date: 2, 2019-01-01,2019-01-03
30 </div>
31 <div class="mermaid">
32 gantt
33 title Inclusive end dates (Manual date should end on 4th)
34 dateFormat YYYY-MM-DD
35 axisFormat %d
36 inclusiveEndDates
37 section Section1
38 2 Days: 1, 2019-01-01,2d
39 Manual Date: 2, 2019-01-01,2019-01-03
40 </div>
41 <div class="mermaid">
42 gantt
43 title Hide today marker (vertical line should not be visible)
44 dateFormat YYYY-MM-DD
45 axisFormat %d
46 todayMarker off
47 section Section1
48 Today: 1, -1h
49 </div>
50 <div class="mermaid">
51 gantt
52 title Style today marker (vertical line should be 5px wide and half-transparent blue)
53 dateFormat YYYY-MM-DD
54 axisFormat %d
55 todayMarker stroke-width:5px,stroke:#00f,opacity:0.5
56 section Section1
57 Today: 1, -1h
58 </div>
59
60 <hr/>
61
62 <div class="mermaid">
63 graph LR
64 sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
65
66 提交申请
67 熊大
68 "];
69 class sid-B3655226-6C29-4D00-B685-3D5C734DC7E1 node-executed;
70 sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A["
71 负责人审批
72 强子
73 "];
74 class sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A node-executed;
75 sid-E27C0367-E6D6-497F-9736-3CDC21FDE221["
76 DBA审批
77 强子
78 "];
79 class sid-E27C0367-E6D6-497F-9736-3CDC21FDE221 node-executed;
80 sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD["
81 SA审批
82 阿美
83 "];
84 class sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD node-executed;
85 sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7["
86 主管审批
87 光头强
88 "];
89 class sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7 node-executed;
90 sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89["
91 DBA确认
92 强子
93 "];
94 class sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89 node-executed;
95 sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937["
96 SA确认
97 阿美
98 "];
99 class sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937 node-executed;
100 sid-4FC27B48-A6F9-460A-A675-021F5854FE22["
101 结束
102 "];
103 class sid-4FC27B48-A6F9-460A-A675-021F5854FE22 node-executed;
104 sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E["
105 SA执行1
106 强子
107 "];
108 class sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E node-executed;
109 sid-6C2120F3-D940-4958-A067-0903DCE879C4["
110 SA执行2
111 强子
112 "];
113 class sid-6C2120F3-D940-4958-A067-0903DCE879C4 node-executed;
114 sid-9180E2A0-5C4B-435F-B42F-0D152470A338["
115 DBA执行1
116 强子
117 "];
118 class sid-9180E2A0-5C4B-435F-B42F-0D152470A338 node-executed;
119 sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD["
120 DBA执行3
121 强子
122 "];
123 class sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD node-executed;
124 sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756["
125 DBA执行2
126 强子
127 "];
128 class sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756 node-executed;
129 sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93["
130 DBA执行4
131 强子
132 "];
133 class sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93 node-executed;
134 sid-1897B30A-9C5C-4D5B-B80B-76A038785070["
135 负责人确认
136 梁静茹
137 "];
138 class sid-1897B30A-9C5C-4D5B-B80B-76A038785070 node-executed;
139 sid-B3655226-6C29-4D00-B685-3D5C734DC7E1-->sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7;
140 sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A-->sid-1897B30A-9C5C-4D5B-B80B-76A038785070;
141 sid-E27C0367-E6D6-497F-9736-3CDC21FDE221-->sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89;
142 sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD-->sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937;
143 sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E-->sid-6C2120F3-D940-4958-A067-0903DCE879C4;
144 sid-9180E2A0-5C4B-435F-B42F-0D152470A338-->sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756;
145 sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD-->sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93;
146 sid-6C2120F3-D940-4958-A067-0903DCE879C4-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
147 sid-1897B30A-9C5C-4D5B-B80B-76A038785070-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
148 sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E;
149 sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89-->sid-9180E2A0-5C4B-435F-B42F-0D152470A338;
150 sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89-->sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD;
151 sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
152 sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
153 sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD;
154 sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-E27C0367-E6D6-497F-9736-3CDC21FDE221;
155 sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-6C2120F3-D940-4958-A067-0903DCE879C4;
156 sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
157 sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
158 </div>
159 <div class="mermaid">
160 graph TD
161 A[Christmas] -->|Get money| B(Go shopping)
162 B --> C{Let me thinksssssx<br/>sssssssssssssssssssuuu<br />tttsssssssssssssssssssssss}
163 C -->|One| D[Laptop]
164 C -->|Two| E[iPhone]
165 C -->|Three| F[Car]
166 </div>
167 <div class="mermaid">
168 graph TD
169 A[/Christmas\]
170 A -->|Get money| B[\Go shopping/]
171 B --> C{Let me thinksssss<br/>ssssssssssssssssssssss<br/>sssssssssssssssssssssssssss}
172 C -->|One| D[/Laptop/]
173 C -->|Two| E[\iPhone\]
174 C -->|Three| F[Car]
175 </div>
176 <div class="mermaid">
177 graph LR
17847(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget)
17937(SAM.CommonFA.BudgetSubserviceLineVolume)-->48(SAM.CommonFA.CommonFAFinanceBudget)
18035(SAM.CommonFA.PopulationFME)-->47(SAM.CommonFA.FMESummary)
18141(SAM.CommonFA.MetricCost)-->47(SAM.CommonFA.FMESummary)
18244(SAM.CommonFA.MetricOutliers)-->47(SAM.CommonFA.FMESummary)
18346(SAM.CommonFA.MetricOpportunity)-->47(SAM.CommonFA.FMESummary)
18440(SAM.CommonFA.OPVisits)-->47(SAM.CommonFA.FMESummary)
18538(SAM.CommonFA.CommonFAFinanceRefund)-->47(SAM.CommonFA.FMESummary)
18643(SAM.CommonFA.CommonFAFinancePicuDays)-->47(SAM.CommonFA.FMESummary)
18742(SAM.CommonFA.CommonFAFinanceNurseryDays)-->47(SAM.CommonFA.FMESummary)
18845(SAM.CommonFA.MetricPreOpportunity)-->46(SAM.CommonFA.MetricOpportunity)
18935(SAM.CommonFA.PopulationFME)-->45(SAM.CommonFA.MetricPreOpportunity)
19041(SAM.CommonFA.MetricCost)-->45(SAM.CommonFA.MetricPreOpportunity)
19141(SAM.CommonFA.MetricCost)-->44(SAM.CommonFA.MetricOutliers)
19239(SAM.CommonFA.ChargeDetails)-->43(SAM.CommonFA.CommonFAFinancePicuDays)
19339(SAM.CommonFA.ChargeDetails)-->42(SAM.CommonFA.CommonFAFinanceNurseryDays)
19439(SAM.CommonFA.ChargeDetails)-->41(SAM.CommonFA.MetricCost)
19539(SAM.CommonFA.ChargeDetails)-->40(SAM.CommonFA.OPVisits)
19635(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
19736(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
198 </div>
199 <div class="mermaid">
200 graph TD
201 9e122290_1ec3_e711_8c5a_005056ad0002("fa:fa-creative-commons My System | Test Environment")
202 82072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 1")
203 db052290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 2")
204 4e112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Report Server:Service 1")
205 30122290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Report Server:Service 2")
206 5e112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Dedicated Test Business Logic Server:Service 1")
207 c1112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Dedicated Test Business Logic Server:Service 2")
208 b7042290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[SupportDb]")
209 8f102290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[DevelopmentDb]")
210 0e102290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[TestDb]")
211 07132290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[SharedReportingDb]")
212 c7072290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Shared Business Logic Server")
213 ca122290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Shared Report Server")
214 68102290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Dedicated Test Business Logic Server")
215 f4112290_1ec3_e711_8c5a_005056ad0002("fa:fa-database [DBServer\SharedDbInstance]")
216 d6072290_1ec3_e711_8c5a_005056ad0002("fa:fa-server DBServer")
217 71082290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:MSSQLSERVER")
218 c0102290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:SQLAgent")
219 9a072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:SQLBrowser")
220 1d0a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost1")
221 200a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost2")
222 1c0a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost3")
223 9e122290_1ec3_e711_8c5a_005056ad0002-->82072290_1ec3_e711_8c5a_005056ad0002
224 9e122290_1ec3_e711_8c5a_005056ad0002-->db052290_1ec3_e711_8c5a_005056ad0002
225 9e122290_1ec3_e711_8c5a_005056ad0002-->4e112290_1ec3_e711_8c5a_005056ad0002
226 9e122290_1ec3_e711_8c5a_005056ad0002-->30122290_1ec3_e711_8c5a_005056ad0002
227 9e122290_1ec3_e711_8c5a_005056ad0002-->5e112290_1ec3_e711_8c5a_005056ad0002
228 9e122290_1ec3_e711_8c5a_005056ad0002-->c1112290_1ec3_e711_8c5a_005056ad0002
229 82072290_1ec3_e711_8c5a_005056ad0002-->b7042290_1ec3_e711_8c5a_005056ad0002
230 82072290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
231 82072290_1ec3_e711_8c5a_005056ad0002-->0e102290_1ec3_e711_8c5a_005056ad0002
232 82072290_1ec3_e711_8c5a_005056ad0002-->c7072290_1ec3_e711_8c5a_005056ad0002
233 db052290_1ec3_e711_8c5a_005056ad0002-->c7072290_1ec3_e711_8c5a_005056ad0002
234 db052290_1ec3_e711_8c5a_005056ad0002-->82072290_1ec3_e711_8c5a_005056ad0002
235 4e112290_1ec3_e711_8c5a_005056ad0002-->b7042290_1ec3_e711_8c5a_005056ad0002
236 4e112290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
237 4e112290_1ec3_e711_8c5a_005056ad0002-->0e102290_1ec3_e711_8c5a_005056ad0002
238 4e112290_1ec3_e711_8c5a_005056ad0002-->07132290_1ec3_e711_8c5a_005056ad0002
239 4e112290_1ec3_e711_8c5a_005056ad0002-->ca122290_1ec3_e711_8c5a_005056ad0002
240 30122290_1ec3_e711_8c5a_005056ad0002-->ca122290_1ec3_e711_8c5a_005056ad0002
241 30122290_1ec3_e711_8c5a_005056ad0002-->4e112290_1ec3_e711_8c5a_005056ad0002
242 5e112290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
243 5e112290_1ec3_e711_8c5a_005056ad0002-->68102290_1ec3_e711_8c5a_005056ad0002
244 c1112290_1ec3_e711_8c5a_005056ad0002-->68102290_1ec3_e711_8c5a_005056ad0002
245 c1112290_1ec3_e711_8c5a_005056ad0002-->5e112290_1ec3_e711_8c5a_005056ad0002
246 b7042290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
247 8f102290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
248 0e102290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
249 07132290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
250 c7072290_1ec3_e711_8c5a_005056ad0002-->1d0a2290_1ec3_e711_8c5a_005056ad0002
251 ca122290_1ec3_e711_8c5a_005056ad0002-->200a2290_1ec3_e711_8c5a_005056ad0002
252 68102290_1ec3_e711_8c5a_005056ad0002-->1c0a2290_1ec3_e711_8c5a_005056ad0002
253 f4112290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
254 f4112290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
255 f4112290_1ec3_e711_8c5a_005056ad0002-->c0102290_1ec3_e711_8c5a_005056ad0002
256 f4112290_1ec3_e711_8c5a_005056ad0002-->9a072290_1ec3_e711_8c5a_005056ad0002
257 d6072290_1ec3_e711_8c5a_005056ad0002-->1c0a2290_1ec3_e711_8c5a_005056ad0002
258 71082290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
259 c0102290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
260 c0102290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
261 9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
262 9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
263 </div>
264 <div class="mermaid">
265graph TB
266 subgraph One
267 a1-->a2
268 end
269 </div>
270 <div class="mermaid">
271 graph TB
272 A
273 B
274 subgraph foo[Foo SubGraph]
275 C
276 D
277 end
278 subgraph bar[Bar SubGraph]
279 E
280 F
281 end
282 G
283
284 A-->B
285 B-->C
286 C-->D
287 B-->D
288 D-->E
289 E-->A
290 E-->F
291 F-->D
292 F-->G
293 B-->G
294 G-->D
295
296 style foo fill:#F99,stroke-width:2px,stroke:#F0F
297 style bar fill:#999,stroke-width:10px,stroke:#0F0
298 </div>
299 <div class="mermaid">
300 graph LR
301 456ac9b0d15a8b7f1e71073221059886[1051 AAA fa:fa-check]
302 f7f580e11d00a75814d2ded41fe8e8fe[1141 BBB fa:fa-check]
303 81dc9bdb52d04dc20036dbd8313ed055[1234 CCC fa:fa-check]
304 456ac9b0d15a8b7f1e71073221059886 -->|Node| f7f580e11d00a75814d2ded41fe8e8fe
305 f7f580e11d00a75814d2ded41fe8e8fe -->|Node| 81dc9bdb52d04dc20036dbd8313ed055
306 click 456ac9b0d15a8b7f1e71073221059886 "/admin/user/view?id=1051" "AAA
307 6000"
308 click f7f580e11d00a75814d2ded41fe8e8fe "/admin/user/view?id=1141" "BBB
309 600"
310 click 81dc9bdb52d04dc20036dbd8313ed055 "/admin/user/view?id=1234" "CCC
311 3000"
312 style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
313 </div>
314 <div class="mermaid">
315 graph TD
316 A[Christmas] -->|Get money| B(Go shopping)
317 B --> C{{Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?}}
318 C -->|One| D[Laptop]
319 C -->|Two| E[iPhone]
320 C -->|Three| F[Car]
321 click A "index.html#link-clicked" "link test"
322 click B testClick "click test"
323 classDef someclass fill:#f96;
324 class A someclass;
325 class C someclass;
326 </div>
327 <div class="mermaid">
328 graph TD
329 A([stadium shape test])
330 A -->|Get money| B([Go shopping])
331 B --> C([Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?])
332 C -->|One| D([Laptop])
333 C -->|Two| E([iPhone])
334 C -->|Three| F([Car<br/>wroom wroom])
335 click A "index.html#link-clicked" "link test"
336 click B testClick "click test"
337 classDef someclass fill:#f96;
338 class A someclass;
339 class C someclass;
340 </div>
341 <div class="mermaid">
342 graph LR
343 A[[subroutine shape test]]
344 A -->|Get money| B[[Go shopping]]
345 B --> C[[Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?]]
346 C -->|One| D[[Laptop]]
347 C -->|Two| E[[iPhone]]
348 C -->|Three| F[[Car<br/>wroom wroom]]
349 click A "index.html#link-clicked" "link test"
350 click B testClick "click test"
351 classDef someclass fill:#f96;
352 class A someclass;
353 class C someclass;
354 </div>
355 <div class="mermaid">
356 graph LR
357 A[(cylindrical<br />shape<br />test)]
358 A -->|Get money| B1[(Go shopping 1)]
359 A -->|Get money| B2[(Go shopping 2)]
360 A -->|Get money| B3[(Go shopping 3)]
361 C[(Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?)]
362 B1 --> C
363 B2 --> C
364 B3 --> C
365 C -->|One| D[(Laptop)]
366 C -->|Two| E[(iPhone)]
367 C -->|Three| F[(Car)]
368 click A "index.html#link-clicked" "link test"
369 click B testClick "click test"
370 classDef someclass fill:#f96;
371 class A someclass;
372 </div>
373 <div class="mermaid">
374 graph LR
375 A1[Multi<br>Line] -->|Multi<br>Line| B1(Multi<br>Line)
376 C1[Multi<br/>Line] -->|Multi<br/>Line| D1(Multi<br/>Line)
377 E1[Multi<br />Line] -->|Multi<br />Line| F1(Multi<br />Line)
378 A2[Multi<br>Line] -->|Multi<br>Line| B2(Multi<br>Line)
379 C2[Multi<br/>Line] -->|Multi<br/>Line| D2(Multi<br/>Line)
380 E2[Multi<br />Line] -->|Multi<br />Line| F2(Multi<br />Line)
381 linkStyle 0 stroke:DarkGray,stroke-width:2px
382 linkStyle 1 stroke:DarkGray,stroke-width:2px
383 linkStyle 2 stroke:DarkGray,stroke-width:2px
384 </div>
385 <div class="mermaid">
386 graph LR
387 A(( )) -->|step 1| B(( ))
388 B(( )) -->|step 2| C(( ))
389 C(( )) -->|step 3| D(( ))
390 linkStyle 1 stroke:greenyellow,stroke-width:2px
391 style C fill:greenyellow,stroke:green,stroke-width:4px
392 </div>
393 <div class="mermaid">
394 graph TB
395 TITLE["Link Click Events<br>(click the nodes below)"]
396 A["link test (open in same tab)"]
397 B["link test (open in new tab)"]
398 C[anchor test]
399 D[mailto test]
400 E[other protocol test]
401 F[script test]
402 TITLE --> A & B & C & D & E & F
403 click A "https://mermaid-js.github.io/mermaid/#/" "link test (open in same tab)"
404 click B "https://mermaid-js.github.io/mermaid/#/" "link test (open in new tab)" _blank
405 click C "#link-clicked"
406 click D "mailto:user@user.user" "mailto test"
407 click E "notes://do-your-thing/id" "other protocol test"
408 click F "javascript:alert('test')" "script test"
409 </div>
410 <hr/>
411 <div class="mermaid">
412 graph LR
413 A[red<br>text] -->|red<br>text| B(blue<br>text)
414 C[/red<br/>text/] -->|blue<br/>text| D{blue<br/>text}
415 E{{default<br />style}} -->|default<br />style| F([default<br />style])
416 linkStyle default color:Sienna;
417 linkStyle 0 color:red;
418 linkStyle 1 stroke:DarkGray,stroke-width:2px,color:#0000ff
419 style A color:red;
420 style B color:blue;
421 style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
422 style D stroke:#0000ff,fill:#ccccff,color:#0000ff
423 click B "index.html#link-clicked" "link test"
424 click D testClick "click test"
425 </div>
426 <div class="mermaid">
427 graph TD
428 A[myClass1] --> B[default] & C[default]
429 B[default] & C[default] --> D[myClass2]
430 classDef default stroke-width:2px,fill:none,stroke:silver
431 classDef node color:red
432 classDef myClass1 color:#0000ff
433 classDef myClass2 stroke:#0000ff,fill:#ccccff
434 class A myClass1
435 class D myClass2
436 </div>
437
438 <hr/>
439
440 <div class="mermaid">
441sequenceDiagram
442participant Alice
443participant Bob
444participant John as John<br/>Second Line
445rect rgb(200, 220, 100)
446rect rgb(200, 255, 200)
447Alice ->> Bob: Hello Bob, how are you?
448Bob-->>John: How about you John?
449end
450Bob--x Alice: I am good thanks!
451Bob-x John: I am good thanks!
452Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
453Bob-->Alice: Checking with John...
454end
455alt either this
456Alice->>John: Yes
457else or this
458Alice->>John: No
459else or this will happen
460Alice->John: Maybe
461end
462par this happens in parallel
463Alice -->> Bob: Parallel message 1
464and
465Alice -->> John: Parallel message 2
466end
467 </div>
468 <div class="mermaid">
469 sequenceDiagram
470 participant 1 as multiline<br>using #lt;br#gt;
471 participant 2 as multiline<br/>using #lt;br/#gt;
472 participant 3 as multiline<br />using #lt;br /#gt;
473 participant 4 as multiline<br />using #lt;br /#gt;
474 1->>2: multiline<br>using #lt;br#gt;
475 note right of 2: multiline<br>using #lt;br#gt;
476 2->>3: multiline<br/>using #lt;br/#gt;
477 note right of 3: multiline<br/>using #lt;br/#gt;
478 3->>4: multiline<br />using #lt;br /#gt;
479 note right of 4: multiline<br />using #lt;br /#gt;
480 4->>1: multiline<br />using #lt;br /#gt;
481 note right of 1: multiline<br />using #lt;br /#gt;
482 </div>
483 <div class="mermaid">
484 sequenceDiagram
485 autonumber
486 Alice->>John: Hello John,<br>how are you?
487 Alice->>John: John,<br/>can you hear me?
488 John-->>Alice: Hi Alice,<br />I can hear you!
489 John-->>Alice: I feel great!
490 </div>
491
492 <hr/>
493
494 <div class="mermaid">
495gantt
496dateFormat YYYY-MM-DD
497axisFormat %d/%m
498title Adding GANTT diagram to mermaid
499excludes weekdays 2014-01-10
500
501section A section
502Completed task :done, des1, 2014-01-06,2014-01-08
503Active task :active, des2, 2014-01-09, 3d
504Future task : des3, after des2, 5d
505Future task2 : des4, after des3, 5d
506
507section Critical tasks
508Completed task in the critical line :crit, done, 2014-01-06,24h
509Implement parser and jison :crit, done, after des1, 2d
510Create tests for parser :crit, active, 3d
511Future task in critical line :crit, 5d
512Create tests for renderer :2d
513Add to mermaid :1d
514
515section Documentation
516Describe gantt syntax :active, a1, after des1, 3d
517Add gantt diagram to demo page :after a1 , 20h
518Add another diagram to demo page :doc1, after a1 , 48h
519
520section Clickable
521Visit mermaidjs :active, cl1, 2014-01-07,2014-01-10
522Calling a Callback (look at the console log) :cl2, after cl1, 3d
523
524click cl1 href "https://mermaidjs.github.io/"
525click cl2 call ganttTestClick("test", test, test)
526
527section Last section
528Describe gantt syntax :after doc1, 3d
529Add gantt diagram to demo page : 20h
530Add another diagram to demo page : 48h
531 </div>
532 <div class="mermaid">
533 gantt
534 dateFormat YYYY-MM-DD
535 axisFormat %d/%m
536 title GANTT diagram with multiline section titles
537 excludes weekdays 2014-01-10
538
539 section A section<br>multiline
540 Completed task : done, des1, 2014-01-06,2014-01-08
541 Active task : active, des2, 2014-01-09, 3d
542 Future task : des3, after des2, 5d
543 Future task2 : des4, after des3, 5d
544
545 section Critical tasks<br/>multiline
546 Completed task in the critical line : crit, done, 2014-01-06, 24h
547 Implement parser and jison : crit, done, after des1, 2d
548 Create tests for parser : crit, active, 3d
549 Future task in critical line : crit, 5d
550 Create tests for renderer : 2d
551 Add to mermaid : 1d
552
553 section Documentation<br />multiline
554 Describe gantt syntax : active, a1, after des1, 3d
555 Add gantt diagram to demo page : after a1, 20h
556 Add another diagram to demo page : doc1, after a1, 48h
557
558 section Last section<br />multiline
559 Describe gantt syntax : after doc1, 3d
560 Add gantt diagram to demo page : 20h
561 Add another diagram to demo page : 48h
562 </div>
563
564 <hr/>
565
566 <div class="mermaid">
567gitGraph:
568options
569{
570 "nodeSpacing": 150,
571 "nodeRadius": 10
572}
573end
574commit
575branch newbranch
576checkout newbranch
577commit
578commit
579checkout master
580commit
581commit
582merge newbranch
583 </div>
584
585 <hr/>
586
587 <div class="mermaid">
588classDiagram
589Class01 <|-- AveryLongClass : Cool
590&lt;&lt;interface&gt;&gt; Class01
591Class03 "0" *-- "0..n" Class04
592Class05 "1" o-- "many" Class06
593Class07 .. Class08
594Class09 "many" --> "1" C2 : Where am i?
595Class09 "0" --* "1..n" C3
596Class09 --|> Class07
597Class07 : equals()
598Class07 : Object[] elementData
599Class01 : #size()
600Class01 : -int chimp
601Class01 : +int gorilla
602Class08 <--> C2: Cool label
603class Class10 {
604 &lt;&lt;service&gt;&gt;
605 int id
606 size()
607}
608 </div>
609
610 <div class="mermaid">
611 classDiagram
612 class Class01~T~
613 Class01 : #size()
614 Class01 : -int chimp
615 Class01 : +int gorilla
616 class Class10~T~ {
617 &lt;&lt;service&gt;&gt;
618 int id
619 size()
620 }
621 </div>
622
623 <div class="mermaid">
624 classDiagram
625 Class01~T~ <|-- AveryLongClass : Cool
626 &lt;&lt;interface&gt;&gt; Class01
627 Class03~T~ "0" *-- "0..n" Class04
628 Class05 "1" o-- "many" Class06
629 Class07~T~ .. Class08
630 Class09 "many" --> "1" C2 : Where am i?
631 Class09 "0" --* "1..n" C3
632 Class09 --|> Class07
633 Class07 : equals()
634 Class07 : Object[] elementData
635 Class01 : #size()
636 Class01 : -int chimp
637 Class01 : +int gorilla
638 Class08 <--> C2: Cool label
639 class Class10 {
640 &lt;&lt;service&gt;&gt;
641 int id
642 size()
643 }
644 </div>
645
646 <div class="mermaid">
647 stateDiagram
648 State1
649 </div>
650
651 <hr>
652
653 <div class="mermaid">
654 stateDiagram
655 [*] --> First
656 state First {
657 [*] --> second
658 second --> [*]
659 }
660 </div>
661 <div class="mermaid">
662 stateDiagram
663 State1: The state with a note
664 note right of State1
665 Important information! You can write
666 notes.
667 end note
668 State1 --> State2
669 note left of State2 : This is the note to the left.
670 </div>
671 <div class="mermaid">
672 stateDiagram
673 State1
674 note right of State1
675 Line1<br>Line2<br/>Line3<br />Line4<br />Line5
676 end note
677 </div>
678
679 <h1 id="link-clicked">Anchor for "link-clicked" test</h1>
680
681 <script src="./mermaid.js"></script>
682 <script>
683 mermaid.initialize({
684 theme: 'forest',
685 // themeCSS: '.node rect { fill: red; }',
686 logLevel: 3,
687 securityLevel: 'loose',
688 flowchart: { curve: 'basis' },
689 gantt: { axisFormat: '%m/%d/%Y' },
690 sequence: { actorMargin: 50 },
691 // sequenceDiagram: { actorMargin: 300 } // deprecated
692 });
693 </script>
694 <script>
695 function ganttTestClick(a, b, c){
696 console.log("a:", a)
697 console.log("b:", b)
698 console.log("c:", c)
699 }
700 function testClick(nodeId) {
701 console.log("clicked", nodeId)
702 var originalBgColor = document.querySelector('body').style.backgroundColor
703 document.querySelector('body').style.backgroundColor = 'yellow'
704 setTimeout(function() {
705 document.querySelector('body').style.backgroundColor = originalBgColor
706 }, 100)
707 }
708 </script>
709 <script>
710 const testLineEndings = (test, input) => {
711 try {
712 mermaid.render(test, input, () => {});
713 } catch (err) {
714 console.error("Error in %s:\n\n%s", test, err);
715 }
716 };
717
718 testLineEndings("CR", "graph LR\rsubgraph CR\rA --> B\rend");
719 testLineEndings("LF", "graph LR\nsubgraph LF\nA --> B\nend");
720 testLineEndings("CRLF", "graph LR\r\nsubgraph CRLF\r\nA --> B\r\nend");
721 </script>
722</body>
723</html>