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
241Alice ->> Bob: Hello Bob, how are you?
242Bob-->>John: How about you John?
243Bob--x Alice: I am good thanks!
244Bob-x John: I am good thanks!
245Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
246Bob-->Alice: Checking with John...
247alt either this
248Alice->>John: Yes
249else or this
250Alice->>John: No
251else or this will happen
252Alice->John: Maybe
253end
254par this happens in parallel
255Alice -->> Bob: Parallel message 1
256and
257Alice -->> John: Parallel message 2
258end
259  </div>
260
261  <hr/>
262
263  <div class="mermaid">
264gantt
265dateFormat  YYYY-MM-DD
266axisFormat  %d/%m
267title Adding GANTT diagram to mermaid
268
269section A section
270Completed task            :done,    des1, 2014-01-06,2014-01-08
271Active task               :active,  des2, 2014-01-09, 3d
272Future task               :         des3, after des2, 5d
273Future task2               :         des4, after des3, 5d
274
275section Critical tasks
276Completed task in the critical line :crit, done, 2014-01-06,24h
277Implement parser and jison          :crit, done, after des1, 2d
278Create tests for parser             :crit, active, 3d
279Future task in critical line        :crit, 5d
280Create tests for renderer           :2d
281Add to mermaid                      :1d
282
283section Documentation
284Describe gantt syntax               :active, a1, after des1, 3d
285Add gantt diagram to demo page      :after a1  , 20h
286Add another diagram to demo page    :doc1, after a1  , 48h
287
288section Last section
289Describe gantt syntax               :after doc1, 3d
290Add gantt diagram to demo page      : 20h
291Add another diagram to demo page    : 48h
292  </div>
293
294  <hr/>
295
296  <div class="mermaid">
297gitGraph:
298options
299{
300    "nodeSpacing": 150,
301    "nodeRadius": 10
302}
303end
304commit
305branch newbranch
306checkout newbranch
307commit
308commit
309checkout master
310commit
311commit
312merge newbranch
313  </div>
314
315  <hr/>
316
317  <div class="mermaid">
318classDiagram
319Class01 <|-- AveryLongClass : Cool
320Class03 *-- Class04
321Class05 o-- Class06
322Class07 .. Class08
323Class09 --> C2 : Where am i?
324Class09 --* C3
325Class09 --|> Class07
326Class07 : equals()
327Class07 : Object[] elementData
328Class01 : size()
329Class01 : int chimp
330Class01 : int gorilla
331Class08 <--> C2: Cool label
332  </div>
333  <script src="./mermaid.js"></script>
334  <script>
335    mermaid.initialize({
336      theme: 'forest',
337      // themeCSS: '.node rect { fill: red; }',
338      logLevel: 3,
339      flowchart: { curve: 'linear' },
340      gantt: { axisFormat: '%m/%d/%Y' },
341      sequence: { actorMargin: 50 },
342      // sequenceDiagram: { actorMargin: 300 } // deprecated
343    });
344  </script>
345  <script>
346    function testClick(nodeId) {
347      console.log("clicked", nodeId)
348      var originalBgColor = document.querySelector('body').style.backgroundColor
349      document.querySelector('body').style.backgroundColor = 'yellow'
350      setTimeout(function() {
351        document.querySelector('body').style.backgroundColor = originalBgColor
352      }, 100)
353    }
354  </script>
355</body>
356</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	`Alice ->> Bob: Hello Bob, how are you?`
242	`Bob-->>John: How about you John?`
243	`Bob--x Alice: I am good thanks!`
244	`Bob-x John: I am good thanks!`
245	`Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.`
246	`Bob-->Alice: Checking with John...`
247	`alt either this`
248	`Alice->>John: Yes`
249	`else or this`
250	`Alice->>John: No`
251	`else or this will happen`
252	`Alice->John: Maybe`
253	`end`
254	`par this happens in parallel`
255	`Alice -->> Bob: Parallel message 1`
256	`and`
257	`Alice -->> John: Parallel message 2`
258	`end`
259	`</div>`
260
261	`<hr/>`
262
263	`<div class="mermaid">`
264	`gantt`
265	`dateFormat YYYY-MM-DD`
266	`axisFormat %d/%m`
267	`title Adding GANTT diagram to mermaid`
268
269	`section A section`
270	`Completed task :done, des1, 2014-01-06,2014-01-08`
271	`Active task :active, des2, 2014-01-09, 3d`
272	`Future task : des3, after des2, 5d`
273	`Future task2 : des4, after des3, 5d`
274
275	`section Critical tasks`
276	`Completed task in the critical line :crit, done, 2014-01-06,24h`
277	`Implement parser and jison :crit, done, after des1, 2d`
278	`Create tests for parser :crit, active, 3d`
279	`Future task in critical line :crit, 5d`
280	`Create tests for renderer :2d`
281	`Add to mermaid :1d`
282
283	`section Documentation`
284	`Describe gantt syntax :active, a1, after des1, 3d`
285	`Add gantt diagram to demo page :after a1 , 20h`
286	`Add another diagram to demo page :doc1, after a1 , 48h`
287
288	`section Last section`
289	`Describe gantt syntax :after doc1, 3d`
290	`Add gantt diagram to demo page : 20h`
291	`Add another diagram to demo page : 48h`
292	`</div>`
293
294	`<hr/>`
295
296	`<div class="mermaid">`
297	`gitGraph:`
298	`options`
299	`{`
300	`"nodeSpacing": 150,`
301	`"nodeRadius": 10`
302	`}`
303	`end`
304	`commit`
305	`branch newbranch`
306	`checkout newbranch`
307	`commit`
308	`commit`
309	`checkout master`
310	`commit`
311	`commit`
312	`merge newbranch`
313	`</div>`
314
315	`<hr/>`
316
317	`<div class="mermaid">`
318	`classDiagram`
319	`Class01 <\|-- AveryLongClass : Cool`
320	`Class03 *-- Class04`
321	`Class05 o-- Class06`
322	`Class07 .. Class08`
323	`Class09 --> C2 : Where am i?`
324	`Class09 --* C3`
325	`Class09 --\|> Class07`
326	`Class07 : equals()`
327	`Class07 : Object[] elementData`
328	`Class01 : size()`
329	`Class01 : int chimp`
330	`Class01 : int gorilla`
331	`Class08 <--> C2: Cool label`
332	`</div>`
333	`<script src="./mermaid.js"></script>`
334	`<script>`
335	`mermaid.initialize({`
336	`theme: 'forest',`
337	`// themeCSS: '.node rect { fill: red; }',`
338	`logLevel: 3,`
339	`flowchart: { curve: 'linear' },`
340	`gantt: { axisFormat: '%m/%d/%Y' },`
341	`sequence: { actorMargin: 50 },`
342	`// sequenceDiagram: { actorMargin: 300 } // deprecated`
343	`});`
344	`</script>`
345	`<script>`
346	`function testClick(nodeId) {`
347	`console.log("clicked", nodeId)`
348	`var originalBgColor = document.querySelector('body').style.backgroundColor`
349	`document.querySelector('body').style.backgroundColor = 'yellow'`
350	`setTimeout(function() {`
351	`document.querySelector('body').style.backgroundColor = originalBgColor`
352	`}, 100)`
353	`}`
354	`</script>`
355	`</body>`
356	`</html>`