UNPKG

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