UNPKG

26.2 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]
397 B[anchor test]
398 C[mailto test]
399 D[other protocol test]
400 E[script test]
401 TITLE --> A & B & C & D & E
402 click A "https://mermaid-js.github.io/mermaid/#/" "link test"
403 click B "#link-clicked" "anchor test"
404 click C "mailto:user@user.user" "mailto test"
405 click D "notes://do-your-thing/id" "other protocol test"
406 click E "javascript:alert('test')" "script test"
407 </div>
408 <hr/>
409 <div class="mermaid">
410 graph LR
411 A[red<br>text] -->|red<br>text| B(blue<br>text)
412 C[/red<br/>text/] -->|blue<br/>text| D{blue<br/>text}
413 E{{default<br />style}} -->|default<br />style| F([default<br />style])
414 linkStyle default color:Sienna;
415 linkStyle 0 color:red;
416 linkStyle 1 stroke:DarkGray,stroke-width:2px,color:#0000ff
417 style A color:red;
418 style B color:blue;
419 style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
420 style D stroke:#0000ff,fill:#ccccff,color:#0000ff
421 click B "index.html#link-clicked" "link test"
422 click D testClick "click test"
423 </div>
424 <div class="mermaid">
425 graph TD
426 A[myClass1] --> B[default] & C[default]
427 B[default] & C[default] --> D[myClass2]
428 classDef default stroke-width:2px,fill:none,stroke:silver
429 classDef node color:red
430 classDef myClass1 color:#0000ff
431 classDef myClass2 stroke:#0000ff,fill:#ccccff
432 class A myClass1
433 class D myClass2
434 </div>
435
436 <hr/>
437
438 <div class="mermaid">
439sequenceDiagram
440participant Alice
441participant Bob
442participant John as John<br/>Second Line
443rect rgb(200, 220, 100)
444rect rgb(200, 255, 200)
445Alice ->> Bob: Hello Bob, how are you?
446Bob-->>John: How about you John?
447end
448Bob--x Alice: I am good thanks!
449Bob-x John: I am good thanks!
450Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
451Bob-->Alice: Checking with John...
452end
453alt either this
454Alice->>John: Yes
455else or this
456Alice->>John: No
457else or this will happen
458Alice->John: Maybe
459end
460par this happens in parallel
461Alice -->> Bob: Parallel message 1
462and
463Alice -->> John: Parallel message 2
464end
465 </div>
466 <div class="mermaid">
467 sequenceDiagram
468 participant 1 as multiline<br>using #lt;br#gt;
469 participant 2 as multiline<br/>using #lt;br/#gt;
470 participant 3 as multiline<br />using #lt;br /#gt;
471 participant 4 as multiline<br />using #lt;br /#gt;
472 1->>2: multiline<br>using #lt;br#gt;
473 note right of 2: multiline<br>using #lt;br#gt;
474 2->>3: multiline<br/>using #lt;br/#gt;
475 note right of 3: multiline<br/>using #lt;br/#gt;
476 3->>4: multiline<br />using #lt;br /#gt;
477 note right of 4: multiline<br />using #lt;br /#gt;
478 4->>1: multiline<br />using #lt;br /#gt;
479 note right of 1: multiline<br />using #lt;br /#gt;
480 </div>
481 <div class="mermaid">
482 sequenceDiagram
483 autonumber
484 Alice->>John: Hello John,<br>how are you?
485 Alice->>John: John,<br/>can you hear me?
486 John-->>Alice: Hi Alice,<br />I can hear you!
487 John-->>Alice: I feel great!
488 </div>
489
490 <hr/>
491
492 <div class="mermaid">
493gantt
494dateFormat YYYY-MM-DD
495axisFormat %d/%m
496title Adding GANTT diagram to mermaid
497excludes weekdays 2014-01-10
498
499section A section
500Completed task :done, des1, 2014-01-06,2014-01-08
501Active task :active, des2, 2014-01-09, 3d
502Future task : des3, after des2, 5d
503Future task2 : des4, after des3, 5d
504
505section Critical tasks
506Completed task in the critical line :crit, done, 2014-01-06,24h
507Implement parser and jison :crit, done, after des1, 2d
508Create tests for parser :crit, active, 3d
509Future task in critical line :crit, 5d
510Create tests for renderer :2d
511Add to mermaid :1d
512
513section Documentation
514Describe gantt syntax :active, a1, after des1, 3d
515Add gantt diagram to demo page :after a1 , 20h
516Add another diagram to demo page :doc1, after a1 , 48h
517
518section Clickable
519Visit mermaidjs :active, cl1, 2014-01-07,2014-01-10
520Calling a Callback (look at the console log) :cl2, after cl1, 3d
521
522click cl1 href "https://mermaidjs.github.io/"
523click cl2 call ganttTestClick("test", test, test)
524
525section Last section
526Describe gantt syntax :after doc1, 3d
527Add gantt diagram to demo page : 20h
528Add another diagram to demo page : 48h
529 </div>
530 <div class="mermaid">
531 gantt
532 dateFormat YYYY-MM-DD
533 axisFormat %d/%m
534 title GANTT diagram with multiline section titles
535 excludes weekdays 2014-01-10
536
537 section A section<br>multiline
538 Completed task : done, des1, 2014-01-06,2014-01-08
539 Active task : active, des2, 2014-01-09, 3d
540 Future task : des3, after des2, 5d
541 Future task2 : des4, after des3, 5d
542
543 section Critical tasks<br/>multiline
544 Completed task in the critical line : crit, done, 2014-01-06, 24h
545 Implement parser and jison : crit, done, after des1, 2d
546 Create tests for parser : crit, active, 3d
547 Future task in critical line : crit, 5d
548 Create tests for renderer : 2d
549 Add to mermaid : 1d
550
551 section Documentation<br />multiline
552 Describe gantt syntax : active, a1, after des1, 3d
553 Add gantt diagram to demo page : after a1, 20h
554 Add another diagram to demo page : doc1, after a1, 48h
555
556 section Last section<br />multiline
557 Describe gantt syntax : after doc1, 3d
558 Add gantt diagram to demo page : 20h
559 Add another diagram to demo page : 48h
560 </div>
561
562 <hr/>
563
564 <div class="mermaid">
565gitGraph:
566options
567{
568 "nodeSpacing": 150,
569 "nodeRadius": 10
570}
571end
572commit
573branch newbranch
574checkout newbranch
575commit
576commit
577checkout master
578commit
579commit
580merge newbranch
581 </div>
582
583 <hr/>
584
585 <div class="mermaid">
586classDiagram
587Class01 <|-- AveryLongClass : Cool
588&lt;&lt;interface&gt;&gt; Class01
589Class03 "0" *-- "0..n" Class04
590Class05 "1" o-- "many" Class06
591Class07 .. Class08
592Class09 "many" --> "1" C2 : Where am i?
593Class09 "0" --* "1..n" C3
594Class09 --|> Class07
595Class07 : equals()
596Class07 : Object[] elementData
597Class01 : #size()
598Class01 : -int chimp
599Class01 : +int gorilla
600Class08 <--> C2: Cool label
601class Class10 {
602 &lt;&lt;service&gt;&gt;
603 int id
604 size()
605}
606 </div>
607
608 <div class="mermaid">
609 classDiagram
610 class Class01~T~
611 Class01 : #size()
612 Class01 : -int chimp
613 Class01 : +int gorilla
614 class Class10~T~ {
615 &lt;&lt;service&gt;&gt;
616 int id
617 size()
618 }
619 </div>
620
621 <div class="mermaid">
622 classDiagram
623 Class01~T~ <|-- AveryLongClass : Cool
624 &lt;&lt;interface&gt;&gt; Class01
625 Class03~T~ "0" *-- "0..n" Class04
626 Class05 "1" o-- "many" Class06
627 Class07~T~ .. Class08
628 Class09 "many" --> "1" C2 : Where am i?
629 Class09 "0" --* "1..n" C3
630 Class09 --|> Class07
631 Class07 : equals()
632 Class07 : Object[] elementData
633 Class01 : #size()
634 Class01 : -int chimp
635 Class01 : +int gorilla
636 Class08 <--> C2: Cool label
637 class Class10 {
638 &lt;&lt;service&gt;&gt;
639 int id
640 size()
641 }
642 </div>
643
644 <div class="mermaid">
645 stateDiagram
646 State1
647 </div>
648
649 <hr>
650
651 <div class="mermaid">
652 stateDiagram
653 [*] --> First
654 state First {
655 [*] --> second
656 second --> [*]
657 }
658 </div>
659 <div class="mermaid">
660 stateDiagram
661 State1: The state with a note
662 note right of State1
663 Important information! You can write
664 notes.
665 end note
666 State1 --> State2
667 note left of State2 : This is the note to the left.
668 </div>
669 <div class="mermaid">
670 stateDiagram
671 State1
672 note right of State1
673 Line1<br>Line2<br/>Line3<br />Line4<br />Line5
674 end note
675 </div>
676
677 <h1 id="link-clicked">Anchor for "link-clicked" test</h1>
678
679 <script src="./mermaid.js"></script>
680 <script>
681 mermaid.initialize({
682 theme: 'forest',
683 // themeCSS: '.node rect { fill: red; }',
684 logLevel: 3,
685 securityLevel: 'loose',
686 flowchart: { curve: 'basis' },
687 gantt: { axisFormat: '%m/%d/%Y' },
688 sequence: { actorMargin: 50 },
689 // sequenceDiagram: { actorMargin: 300 } // deprecated
690 });
691 </script>
692 <script>
693 function ganttTestClick(a, b, c){
694 console.log("a:", a)
695 console.log("b:", b)
696 console.log("c:", c)
697 }
698 function testClick(nodeId) {
699 console.log("clicked", nodeId)
700 var originalBgColor = document.querySelector('body').style.backgroundColor
701 document.querySelector('body').style.backgroundColor = 'yellow'
702 setTimeout(function() {
703 document.querySelector('body').style.backgroundColor = originalBgColor
704 }, 100)
705 }
706 </script>
707 <script>
708 const testLineEndings = (test, input) => {
709 try {
710 mermaid.render(test, input, () => {});
711 } catch (err) {
712 console.error("Error in %s:\n\n%s", test, err);
713 }
714 };
715
716 testLineEndings("CR", "graph LR\rsubgraph CR\rA --> B\rend");
717 testLineEndings("LF", "graph LR\nsubgraph LF\nA --> B\nend");
718 testLineEndings("CRLF", "graph LR\r\nsubgraph CRLF\r\nA --> B\r\nend");
719 </script>
720</body>
721</html>