UNPKG

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