UNPKG

17.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 gantt
18 title Exclusive end dates (Manual date should end on 3d)
19 dateFormat YYYY-MM-DD
20 axisFormat %d
21 section Section1
22 2 Days: 1, 2019-01-01,2d
23 Manual Date: 2, 2019-01-01,2019-01-03
24 </div>
25
26 <div class="mermaid">
27 gantt
28 title Inclusive end dates (Manual date should end on 4th)
29 dateFormat YYYY-MM-DD
30 axisFormat %d
31 inclusiveEndDates
32 section Section1
33 2 Days: 1, 2019-01-01,2d
34 Manual Date: 2, 2019-01-01,2019-01-03
35 </div>
36 <div class="mermaid">
37 graph LR
38 sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
39
40 提交申请
41 熊大
42 "];
43 class sid-B3655226-6C29-4D00-B685-3D5C734DC7E1 node-executed;
44 sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A["
45 负责人审批
46 强子
47 "];
48 class sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A node-executed;
49 sid-E27C0367-E6D6-497F-9736-3CDC21FDE221["
50 DBA审批
51 强子
52 "];
53 class sid-E27C0367-E6D6-497F-9736-3CDC21FDE221 node-executed;
54 sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD["
55 SA审批
56 阿美
57 "];
58 class sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD node-executed;
59 sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7["
60 主管审批
61 光头强
62 "];
63 class sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7 node-executed;
64 sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89["
65 DBA确认
66 强子
67 "];
68 class sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89 node-executed;
69 sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937["
70 SA确认
71 阿美
72 "];
73 class sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937 node-executed;
74 sid-4FC27B48-A6F9-460A-A675-021F5854FE22["
75 结束
76 "];
77 class sid-4FC27B48-A6F9-460A-A675-021F5854FE22 node-executed;
78 sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E["
79 SA执行1
80 强子
81 "];
82 class sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E node-executed;
83 sid-6C2120F3-D940-4958-A067-0903DCE879C4["
84 SA执行2
85 强子
86 "];
87 class sid-6C2120F3-D940-4958-A067-0903DCE879C4 node-executed;
88 sid-9180E2A0-5C4B-435F-B42F-0D152470A338["
89 DBA执行1
90 强子
91 "];
92 class sid-9180E2A0-5C4B-435F-B42F-0D152470A338 node-executed;
93 sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD["
94 DBA执行3
95 强子
96 "];
97 class sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD node-executed;
98 sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756["
99 DBA执行2
100 强子
101 "];
102 class sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756 node-executed;
103 sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93["
104 DBA执行4
105 强子
106 "];
107 class sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93 node-executed;
108 sid-1897B30A-9C5C-4D5B-B80B-76A038785070["
109 负责人确认
110 梁静茹
111 "];
112 class sid-1897B30A-9C5C-4D5B-B80B-76A038785070 node-executed;
113 sid-B3655226-6C29-4D00-B685-3D5C734DC7E1-->sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7;
114 sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A-->sid-1897B30A-9C5C-4D5B-B80B-76A038785070;
115 sid-E27C0367-E6D6-497F-9736-3CDC21FDE221-->sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89;
116 sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD-->sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937;
117 sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E-->sid-6C2120F3-D940-4958-A067-0903DCE879C4;
118 sid-9180E2A0-5C4B-435F-B42F-0D152470A338-->sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756;
119 sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD-->sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93;
120 sid-6C2120F3-D940-4958-A067-0903DCE879C4-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
121 sid-1897B30A-9C5C-4D5B-B80B-76A038785070-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
122 sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E;
123 sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89-->sid-9180E2A0-5C4B-435F-B42F-0D152470A338;
124 sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89-->sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD;
125 sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
126 sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
127 sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD;
128 sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-E27C0367-E6D6-497F-9736-3CDC21FDE221;
129 sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-6C2120F3-D940-4958-A067-0903DCE879C4;
130 sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
131 sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
132 </div>
133 <div class="mermaid">
134 graph TD
135 A[Christmas] -->|Get money| B(Go shopping)
136 B --> C{Let me thinksssssx<br/>sssssssssssssssssssuuu<br />tttsssssssssssssssssssssss}
137 C -->|One| D[Laptop]
138 C -->|Two| E[iPhone]
139 C -->|Three| F[Car]
140 </div>
141 <div class="mermaid">
142 graph TD
143 A[/Christmas\]
144 A -->|Get money| B[\Go shopping/]
145 B --> C{Let me thinksssss<br/>ssssssssssssssssssssss<br/>sssssssssssssssssssssssssss}
146 C -->|One| D[/Laptop/]
147 C -->|Two| E[\iPhone\]
148 C -->|Three| F[Car]
149 </div>
150 <div class="mermaid">
151 graph LR
15247(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget)
15337(SAM.CommonFA.BudgetSubserviceLineVolume)-->48(SAM.CommonFA.CommonFAFinanceBudget)
15435(SAM.CommonFA.PopulationFME)-->47(SAM.CommonFA.FMESummary)
15541(SAM.CommonFA.MetricCost)-->47(SAM.CommonFA.FMESummary)
15644(SAM.CommonFA.MetricOutliers)-->47(SAM.CommonFA.FMESummary)
15746(SAM.CommonFA.MetricOpportunity)-->47(SAM.CommonFA.FMESummary)
15840(SAM.CommonFA.OPVisits)-->47(SAM.CommonFA.FMESummary)
15938(SAM.CommonFA.CommonFAFinanceRefund)-->47(SAM.CommonFA.FMESummary)
16043(SAM.CommonFA.CommonFAFinancePicuDays)-->47(SAM.CommonFA.FMESummary)
16142(SAM.CommonFA.CommonFAFinanceNurseryDays)-->47(SAM.CommonFA.FMESummary)
16245(SAM.CommonFA.MetricPreOpportunity)-->46(SAM.CommonFA.MetricOpportunity)
16335(SAM.CommonFA.PopulationFME)-->45(SAM.CommonFA.MetricPreOpportunity)
16441(SAM.CommonFA.MetricCost)-->45(SAM.CommonFA.MetricPreOpportunity)
16541(SAM.CommonFA.MetricCost)-->44(SAM.CommonFA.MetricOutliers)
16639(SAM.CommonFA.ChargeDetails)-->43(SAM.CommonFA.CommonFAFinancePicuDays)
16739(SAM.CommonFA.ChargeDetails)-->42(SAM.CommonFA.CommonFAFinanceNurseryDays)
16839(SAM.CommonFA.ChargeDetails)-->41(SAM.CommonFA.MetricCost)
16939(SAM.CommonFA.ChargeDetails)-->40(SAM.CommonFA.OPVisits)
17035(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
17136(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
172 </div>
173 <div class="mermaid">
174 graph TD
175 9e122290_1ec3_e711_8c5a_005056ad0002("fa:fa-creative-commons My System | Test Environment")
176 82072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 1")
177 db052290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 2")
178 4e112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Report Server:Service 1")
179 30122290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Report Server:Service 2")
180 5e112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Dedicated Test Business Logic Server:Service 1")
181 c1112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Dedicated Test Business Logic Server:Service 2")
182 b7042290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[SupportDb]")
183 8f102290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[DevelopmentDb]")
184 0e102290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[TestDb]")
185 07132290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[SharedReportingDb]")
186 c7072290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Shared Business Logic Server")
187 ca122290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Shared Report Server")
188 68102290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Dedicated Test Business Logic Server")
189 f4112290_1ec3_e711_8c5a_005056ad0002("fa:fa-database [DBServer\SharedDbInstance]")
190 d6072290_1ec3_e711_8c5a_005056ad0002("fa:fa-server DBServer")
191 71082290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:MSSQLSERVER")
192 c0102290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:SQLAgent")
193 9a072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:SQLBrowser")
194 1d0a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost1")
195 200a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost2")
196 1c0a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost3")
197 9e122290_1ec3_e711_8c5a_005056ad0002-->82072290_1ec3_e711_8c5a_005056ad0002
198 9e122290_1ec3_e711_8c5a_005056ad0002-->db052290_1ec3_e711_8c5a_005056ad0002
199 9e122290_1ec3_e711_8c5a_005056ad0002-->4e112290_1ec3_e711_8c5a_005056ad0002
200 9e122290_1ec3_e711_8c5a_005056ad0002-->30122290_1ec3_e711_8c5a_005056ad0002
201 9e122290_1ec3_e711_8c5a_005056ad0002-->5e112290_1ec3_e711_8c5a_005056ad0002
202 9e122290_1ec3_e711_8c5a_005056ad0002-->c1112290_1ec3_e711_8c5a_005056ad0002
203 82072290_1ec3_e711_8c5a_005056ad0002-->b7042290_1ec3_e711_8c5a_005056ad0002
204 82072290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
205 82072290_1ec3_e711_8c5a_005056ad0002-->0e102290_1ec3_e711_8c5a_005056ad0002
206 82072290_1ec3_e711_8c5a_005056ad0002-->c7072290_1ec3_e711_8c5a_005056ad0002
207 db052290_1ec3_e711_8c5a_005056ad0002-->c7072290_1ec3_e711_8c5a_005056ad0002
208 db052290_1ec3_e711_8c5a_005056ad0002-->82072290_1ec3_e711_8c5a_005056ad0002
209 4e112290_1ec3_e711_8c5a_005056ad0002-->b7042290_1ec3_e711_8c5a_005056ad0002
210 4e112290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
211 4e112290_1ec3_e711_8c5a_005056ad0002-->0e102290_1ec3_e711_8c5a_005056ad0002
212 4e112290_1ec3_e711_8c5a_005056ad0002-->07132290_1ec3_e711_8c5a_005056ad0002
213 4e112290_1ec3_e711_8c5a_005056ad0002-->ca122290_1ec3_e711_8c5a_005056ad0002
214 30122290_1ec3_e711_8c5a_005056ad0002-->ca122290_1ec3_e711_8c5a_005056ad0002
215 30122290_1ec3_e711_8c5a_005056ad0002-->4e112290_1ec3_e711_8c5a_005056ad0002
216 5e112290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
217 5e112290_1ec3_e711_8c5a_005056ad0002-->68102290_1ec3_e711_8c5a_005056ad0002
218 c1112290_1ec3_e711_8c5a_005056ad0002-->68102290_1ec3_e711_8c5a_005056ad0002
219 c1112290_1ec3_e711_8c5a_005056ad0002-->5e112290_1ec3_e711_8c5a_005056ad0002
220 b7042290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
221 8f102290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
222 0e102290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
223 07132290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
224 c7072290_1ec3_e711_8c5a_005056ad0002-->1d0a2290_1ec3_e711_8c5a_005056ad0002
225 ca122290_1ec3_e711_8c5a_005056ad0002-->200a2290_1ec3_e711_8c5a_005056ad0002
226 68102290_1ec3_e711_8c5a_005056ad0002-->1c0a2290_1ec3_e711_8c5a_005056ad0002
227 f4112290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
228 f4112290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
229 f4112290_1ec3_e711_8c5a_005056ad0002-->c0102290_1ec3_e711_8c5a_005056ad0002
230 f4112290_1ec3_e711_8c5a_005056ad0002-->9a072290_1ec3_e711_8c5a_005056ad0002
231 d6072290_1ec3_e711_8c5a_005056ad0002-->1c0a2290_1ec3_e711_8c5a_005056ad0002
232 71082290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
233 c0102290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
234 c0102290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
235 9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
236 9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
237 </div>
238 <div class="mermaid">
239graph TB
240 subgraph One
241 a1-->a2
242 end
243 </div>
244 <div class="mermaid">
245 graph TB
246 A
247 B
248 subgraph foo[Foo SubGraph]
249 C
250 D
251 end
252 subgraph bar[Bar SubGraph]
253 E
254 F
255 end
256 G
257
258 A-->B
259 B-->C
260 C-->D
261 B-->D
262 D-->E
263 E-->A
264 E-->F
265 F-->D
266 F-->G
267 B-->G
268 G-->D
269
270 style foo fill:#F99,stroke-width:2px,stroke:#F0F
271 style bar fill:#999,stroke-width:10px,stroke:#0F0
272 </div>
273 <div class="mermaid">
274 graph LR
275 456ac9b0d15a8b7f1e71073221059886[1051 AAA fa:fa-check]
276 f7f580e11d00a75814d2ded41fe8e8fe[1141 BBB fa:fa-check]
277 81dc9bdb52d04dc20036dbd8313ed055[1234 CCC fa:fa-check]
278 456ac9b0d15a8b7f1e71073221059886 -->|Node| f7f580e11d00a75814d2ded41fe8e8fe
279 f7f580e11d00a75814d2ded41fe8e8fe -->|Node| 81dc9bdb52d04dc20036dbd8313ed055
280 click 456ac9b0d15a8b7f1e71073221059886 "/admin/user/view?id=1051" "AAA
281 6000"
282 click f7f580e11d00a75814d2ded41fe8e8fe "/admin/user/view?id=1141" "BBB
283 600"
284 click 81dc9bdb52d04dc20036dbd8313ed055 "/admin/user/view?id=1234" "CCC
285 3000"
286 style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
287 </div>
288 <div class="mermaid">
289graph TD
290A[Christmas] -->|Get money| B(Go shopping)
291B --> C{Let me think}
292C -->|One| D[Laptop]
293C -->|Two| E[iPhone]
294C -->|Three| F[Car]
295click A "index.html#link-clicked" "link test"
296click B testClick "click test"
297classDef someclass fill:#f96;
298class A someclass;
299 </div>
300
301 <hr/>
302
303 <div class="mermaid">
304sequenceDiagram
305participant Alice
306participant Bob
307participant John as John<br/>Second Line
308Alice ->> Bob: Hello Bob, how are you?
309Bob-->>John: How about you John?
310Bob--x Alice: I am good thanks!
311Bob-x John: I am good thanks!
312Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
313Bob-->Alice: Checking with John...
314alt either this
315Alice->>John: Yes
316else or this
317Alice->>John: No
318else or this will happen
319Alice->John: Maybe
320end
321par this happens in parallel
322Alice -->> Bob: Parallel message 1
323and
324Alice -->> John: Parallel message 2
325end
326 </div>
327
328 <hr/>
329
330 <div class="mermaid">
331gantt
332dateFormat YYYY-MM-DD
333axisFormat %d/%m
334title Adding GANTT diagram to mermaid
335excludes weekdays 2014-01-10
336
337section A section
338Completed task :done, des1, 2014-01-06,2014-01-08
339Active task :active, des2, 2014-01-09, 3d
340Future task : des3, after des2, 5d
341Future task2 : des4, after des3, 5d
342
343section Critical tasks
344Completed task in the critical line :crit, done, 2014-01-06,24h
345Implement parser and jison :crit, done, after des1, 2d
346Create tests for parser :crit, active, 3d
347Future task in critical line :crit, 5d
348Create tests for renderer :2d
349Add to mermaid :1d
350
351section Documentation
352Describe gantt syntax :active, a1, after des1, 3d
353Add gantt diagram to demo page :after a1 , 20h
354Add another diagram to demo page :doc1, after a1 , 48h
355
356section Clickable
357Visit mermaidjs :active, cl1, 2014-01-07,2014-01-10
358Calling a Callback (look at the console log) :cl2, after cl1, 3d
359
360click cl1 href "https://mermaidjs.github.io/"
361click cl2 call ganttTestClick("test", test, test)
362
363section Last section
364Describe gantt syntax :after doc1, 3d
365Add gantt diagram to demo page : 20h
366Add another diagram to demo page : 48h
367 </div>
368
369 <hr/>
370
371 <div class="mermaid">
372gitGraph:
373options
374{
375 "nodeSpacing": 150,
376 "nodeRadius": 10
377}
378end
379commit
380branch newbranch
381checkout newbranch
382commit
383commit
384checkout master
385commit
386commit
387merge newbranch
388 </div>
389
390 <hr/>
391
392 <div class="mermaid">
393classDiagram
394Class01 <|-- AveryLongClass : Cool
395Class03 "0" *-- "0..n" Class04
396Class05 "1" o-- "many" Class06
397Class07 .. Class08
398Class09 "many" --> "1" C2 : Where am i?
399Class09 "0" --* "1..n" C3
400Class09 --|> Class07
401Class07 : equals()
402Class07 : Object[] elementData
403Class01 : size()
404Class01 : int chimp
405Class01 : int gorilla
406Class08 <--> C2: Cool label
407 </div>
408 <script src="./mermaid.js"></script>
409 <script>
410 mermaid.initialize({
411 theme: 'forest',
412 // themeCSS: '.node rect { fill: red; }',
413 logLevel: 3,
414 flowchart: { curve: 'linear' },
415 gantt: { axisFormat: '%m/%d/%Y' },
416 sequence: { actorMargin: 50 },
417 // sequenceDiagram: { actorMargin: 300 } // deprecated
418 });
419 </script>
420 <script>
421 function ganttTestClick(a, b, c){
422 console.log("a:", a)
423 console.log("b:", b)
424 console.log("c:", c)
425 }
426 function testClick(nodeId) {
427 console.log("clicked", nodeId)
428 var originalBgColor = document.querySelector('body').style.backgroundColor
429 document.querySelector('body').style.backgroundColor = 'yellow'
430 setTimeout(function() {
431 document.querySelector('body').style.backgroundColor = originalBgColor
432 }, 100)
433 }
434 </script>
435</body>
436</html>