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 LR
211      456ac9b0d15a8b7f1e71073221059886[1051 AAA fa:fa-check]
212      f7f580e11d00a75814d2ded41fe8e8fe[1141 BBB fa:fa-check]
213      81dc9bdb52d04dc20036dbd8313ed055[1234 CCC fa:fa-check]
214      456ac9b0d15a8b7f1e71073221059886 -->|Node| f7f580e11d00a75814d2ded41fe8e8fe
215      f7f580e11d00a75814d2ded41fe8e8fe -->|Node| 81dc9bdb52d04dc20036dbd8313ed055
216      click 456ac9b0d15a8b7f1e71073221059886 "/admin/user/view?id=1051" "AAA
217      6000"
218      click f7f580e11d00a75814d2ded41fe8e8fe "/admin/user/view?id=1141" "BBB
219      600"
220      click 81dc9bdb52d04dc20036dbd8313ed055 "/admin/user/view?id=1234" "CCC
221      3000"
222      style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
223  </div>
224  <div class="mermaid">
225graph TD
226A[Christmas] -->|Get money| B(Go shopping)
227B --> C{Let me think}
228C -->|One| D[Laptop]
229C -->|Two| E[iPhone]
230C -->|Three| F[Car]
231click A "index.html#link-clicked" "link test"
232click B testClick "click test"
233classDef someclass fill:#f96;
234class A someclass;
235  </div>
236
237  <hr/>
238
239  <div class="mermaid">
240sequenceDiagram
241participant Alice
242participant Bob
243participant John as John<br/>Second Line
244Alice ->> Bob: Hello Bob, how are you?
245Bob-->>John: How about you John?
246Bob--x Alice: I am good thanks!
247Bob-x John: I am good thanks!
248Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
249Bob-->Alice: Checking with John...
250alt either this
251Alice->>John: Yes
252else or this
253Alice->>John: No
254else or this will happen
255Alice->John: Maybe
256end
257par this happens in parallel
258Alice -->> Bob: Parallel message 1
259and
260Alice -->> John: Parallel message 2
261end
262  </div>
263
264  <hr/>
265
266  <div class="mermaid">
267gantt
268dateFormat  YYYY-MM-DD
269axisFormat  %d/%m
270title Adding GANTT diagram to mermaid
271
272section A section
273Completed task            :done,    des1, 2014-01-06,2014-01-08
274Active task               :active,  des2, 2014-01-09, 3d
275Future task               :         des3, after des2, 5d
276Future task2               :         des4, after des3, 5d
277
278section Critical tasks
279Completed task in the critical line :crit, done, 2014-01-06,24h
280Implement parser and jison          :crit, done, after des1, 2d
281Create tests for parser             :crit, active, 3d
282Future task in critical line        :crit, 5d
283Create tests for renderer           :2d
284Add to mermaid                      :1d
285
286section Documentation
287Describe gantt syntax               :active, a1, after des1, 3d
288Add gantt diagram to demo page      :after a1  , 20h
289Add another diagram to demo page    :doc1, after a1  , 48h
290
291section Last section
292Describe gantt syntax               :after doc1, 3d
293Add gantt diagram to demo page      : 20h
294Add another diagram to demo page    : 48h
295  </div>
296
297  <hr/>
298
299  <div class="mermaid">
300gitGraph:
301options
302{
303    "nodeSpacing": 150,
304    "nodeRadius": 10
305}
306end
307commit
308branch newbranch
309checkout newbranch
310commit
311commit
312checkout master
313commit
314commit
315merge newbranch
316  </div>
317
318  <hr/>
319
320  <div class="mermaid">
321classDiagram
322Class01 <|-- AveryLongClass : Cool
323Class03 *-- Class04
324Class05 o-- Class06
325Class07 .. Class08
326Class09 --> C2 : Where am i?
327Class09 --* C3
328Class09 --|> Class07
329Class07 : equals()
330Class07 : Object[] elementData
331Class01 : size()
332Class01 : int chimp
333Class01 : int gorilla
334Class08 <--> C2: Cool label
335  </div>
336  <script src="./mermaid.js"></script>
337  <script>
338    mermaid.initialize({
339      theme: 'forest',
340      // themeCSS: '.node rect { fill: red; }',
341      logLevel: 3,
342      flowchart: { curve: 'linear' },
343      gantt: { axisFormat: '%m/%d/%Y' },
344      sequence: { actorMargin: 50 },
345      // sequenceDiagram: { actorMargin: 300 } // deprecated
346    });
347  </script>
348  <script>
349    function testClick(nodeId) {
350      console.log("clicked", nodeId)
351      var originalBgColor = document.querySelector('body').style.backgroundColor
352      document.querySelector('body').style.backgroundColor = 'yellow'
353      setTimeout(function() {
354        document.querySelector('body').style.backgroundColor = originalBgColor
355      }, 100)
356    }
357  </script>
358</body>
359</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 LR`
211	`456ac9b0d15a8b7f1e71073221059886[1051 AAA fa:fa-check]`
212	`f7f580e11d00a75814d2ded41fe8e8fe[1141 BBB fa:fa-check]`
213	`81dc9bdb52d04dc20036dbd8313ed055[1234 CCC fa:fa-check]`
214	`456ac9b0d15a8b7f1e71073221059886 -->\|Node\| f7f580e11d00a75814d2ded41fe8e8fe`
215	`f7f580e11d00a75814d2ded41fe8e8fe -->\|Node\| 81dc9bdb52d04dc20036dbd8313ed055`
216	`click 456ac9b0d15a8b7f1e71073221059886 "/admin/user/view?id=1051" "AAA`
217	`6000"`
218	`click f7f580e11d00a75814d2ded41fe8e8fe "/admin/user/view?id=1141" "BBB`
219	`600"`
220	`click 81dc9bdb52d04dc20036dbd8313ed055 "/admin/user/view?id=1234" "CCC`
221	`3000"`
222	`style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px`
223	`</div>`
224	`<div class="mermaid">`
225	`graph TD`
226	`A[Christmas] -->\|Get money\| B(Go shopping)`
227	`B --> C{Let me think}`
228	`C -->\|One\| D[Laptop]`
229	`C -->\|Two\| E[iPhone]`
230	`C -->\|Three\| F[Car]`
231	`click A "index.html#link-clicked" "link test"`
232	`click B testClick "click test"`
233	`classDef someclass fill:#f96;`
234	`class A someclass;`
235	`</div>`
236
237	`<hr/>`
238
239	`<div class="mermaid">`
240	`sequenceDiagram`
241	`participant Alice`
242	`participant Bob`
243	`participant John as John<br/>Second Line`
244	`Alice ->> Bob: Hello Bob, how are you?`
245	`Bob-->>John: How about you John?`
246	`Bob--x Alice: I am good thanks!`
247	`Bob-x John: I am good thanks!`
248	`Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.`
249	`Bob-->Alice: Checking with John...`
250	`alt either this`
251	`Alice->>John: Yes`
252	`else or this`
253	`Alice->>John: No`
254	`else or this will happen`
255	`Alice->John: Maybe`
256	`end`
257	`par this happens in parallel`
258	`Alice -->> Bob: Parallel message 1`
259	`and`
260	`Alice -->> John: Parallel message 2`
261	`end`
262	`</div>`
263
264	`<hr/>`
265
266	`<div class="mermaid">`
267	`gantt`
268	`dateFormat YYYY-MM-DD`
269	`axisFormat %d/%m`
270	`title Adding GANTT diagram to mermaid`
271
272	`section A section`
273	`Completed task :done, des1, 2014-01-06,2014-01-08`
274	`Active task :active, des2, 2014-01-09, 3d`
275	`Future task : des3, after des2, 5d`
276	`Future task2 : des4, after des3, 5d`
277
278	`section Critical tasks`
279	`Completed task in the critical line :crit, done, 2014-01-06,24h`
280	`Implement parser and jison :crit, done, after des1, 2d`
281	`Create tests for parser :crit, active, 3d`
282	`Future task in critical line :crit, 5d`
283	`Create tests for renderer :2d`
284	`Add to mermaid :1d`
285
286	`section Documentation`
287	`Describe gantt syntax :active, a1, after des1, 3d`
288	`Add gantt diagram to demo page :after a1 , 20h`
289	`Add another diagram to demo page :doc1, after a1 , 48h`
290
291	`section Last section`
292	`Describe gantt syntax :after doc1, 3d`
293	`Add gantt diagram to demo page : 20h`
294	`Add another diagram to demo page : 48h`
295	`</div>`
296
297	`<hr/>`
298
299	`<div class="mermaid">`
300	`gitGraph:`
301	`options`
302	`{`
303	`"nodeSpacing": 150,`
304	`"nodeRadius": 10`
305	`}`
306	`end`
307	`commit`
308	`branch newbranch`
309	`checkout newbranch`
310	`commit`
311	`commit`
312	`checkout master`
313	`commit`
314	`commit`
315	`merge newbranch`
316	`</div>`
317
318	`<hr/>`
319
320	`<div class="mermaid">`
321	`classDiagram`
322	`Class01 <\|-- AveryLongClass : Cool`
323	`Class03 *-- Class04`
324	`Class05 o-- Class06`
325	`Class07 .. Class08`
326	`Class09 --> C2 : Where am i?`
327	`Class09 --* C3`
328	`Class09 --\|> Class07`
329	`Class07 : equals()`
330	`Class07 : Object[] elementData`
331	`Class01 : size()`
332	`Class01 : int chimp`
333	`Class01 : int gorilla`
334	`Class08 <--> C2: Cool label`
335	`</div>`
336	`<script src="./mermaid.js"></script>`
337	`<script>`
338	`mermaid.initialize({`
339	`theme: 'forest',`
340	`// themeCSS: '.node rect { fill: red; }',`
341	`logLevel: 3,`
342	`flowchart: { curve: 'linear' },`
343	`gantt: { axisFormat: '%m/%d/%Y' },`
344	`sequence: { actorMargin: 50 },`
345	`// sequenceDiagram: { actorMargin: 300 } // deprecated`
346	`});`
347	`</script>`
348	`<script>`
349	`function testClick(nodeId) {`
350	`console.log("clicked", nodeId)`
351	`var originalBgColor = document.querySelector('body').style.backgroundColor`
352	`document.querySelector('body').style.backgroundColor = 'yellow'`
353	`setTimeout(function() {`
354	`document.querySelector('body').style.backgroundColor = originalBgColor`
355	`}, 100)`
356	`}`
357	`</script>`
358	`</body>`
359	`</html>`