UNPKG

mermaid/dist/index.html

Version:

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

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