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 TD
12      A-->B
13      A-->C
14      A-->Z
15      A-->Y
16      B-->Y
17      Z-->Y
18      Y-->A
19  </div>
20  <div class="mermaid">
21    graph LR
2247(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget)
2337(SAM.CommonFA.BudgetSubserviceLineVolume)-->48(SAM.CommonFA.CommonFAFinanceBudget)
2435(SAM.CommonFA.PopulationFME)-->47(SAM.CommonFA.FMESummary)
2541(SAM.CommonFA.MetricCost)-->47(SAM.CommonFA.FMESummary)
2644(SAM.CommonFA.MetricOutliers)-->47(SAM.CommonFA.FMESummary)
2746(SAM.CommonFA.MetricOpportunity)-->47(SAM.CommonFA.FMESummary)
2840(SAM.CommonFA.OPVisits)-->47(SAM.CommonFA.FMESummary)
2938(SAM.CommonFA.CommonFAFinanceRefund)-->47(SAM.CommonFA.FMESummary)
3043(SAM.CommonFA.CommonFAFinancePicuDays)-->47(SAM.CommonFA.FMESummary)
3142(SAM.CommonFA.CommonFAFinanceNurseryDays)-->47(SAM.CommonFA.FMESummary)
3245(SAM.CommonFA.MetricPreOpportunity)-->46(SAM.CommonFA.MetricOpportunity)
3335(SAM.CommonFA.PopulationFME)-->45(SAM.CommonFA.MetricPreOpportunity)
3441(SAM.CommonFA.MetricCost)-->45(SAM.CommonFA.MetricPreOpportunity)
3541(SAM.CommonFA.MetricCost)-->44(SAM.CommonFA.MetricOutliers)
3639(SAM.CommonFA.ChargeDetails)-->43(SAM.CommonFA.CommonFAFinancePicuDays)
3739(SAM.CommonFA.ChargeDetails)-->42(SAM.CommonFA.CommonFAFinanceNurseryDays)
3839(SAM.CommonFA.ChargeDetails)-->41(SAM.CommonFA.MetricCost)
3939(SAM.CommonFA.ChargeDetails)-->40(SAM.CommonFA.OPVisits)
4035(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
4136(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
42  </div>
43  <div class="mermaid">
44      graph TD
45      9e122290_1ec3_e711_8c5a_005056ad0002("fa:fa-creative-commons My System | Test Environment")
46      82072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 1")
47      db052290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 2")
48      4e112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Report Server:Service 1")
49      30122290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Report Server:Service 2")
50      5e112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Dedicated Test Business Logic Server:Service 1")
51      c1112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Dedicated Test Business Logic Server:Service 2")
52      b7042290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[SupportDb]")
53      8f102290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[DevelopmentDb]")
54      0e102290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[TestDb]")
55      07132290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[SharedReportingDb]")
56      c7072290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Shared Business Logic Server")
57      ca122290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Shared Report Server")
58      68102290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Dedicated Test Business Logic Server")
59      f4112290_1ec3_e711_8c5a_005056ad0002("fa:fa-database [DBServer\SharedDbInstance]")
60      d6072290_1ec3_e711_8c5a_005056ad0002("fa:fa-server DBServer")
61      71082290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:MSSQLSERVER")
62      c0102290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:SQLAgent")
63      9a072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:SQLBrowser")
64      1d0a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost1")
65      200a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost2")
66      1c0a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost3")
67      9e122290_1ec3_e711_8c5a_005056ad0002-->82072290_1ec3_e711_8c5a_005056ad0002
68      9e122290_1ec3_e711_8c5a_005056ad0002-->db052290_1ec3_e711_8c5a_005056ad0002
69      9e122290_1ec3_e711_8c5a_005056ad0002-->4e112290_1ec3_e711_8c5a_005056ad0002
70      9e122290_1ec3_e711_8c5a_005056ad0002-->30122290_1ec3_e711_8c5a_005056ad0002
71      9e122290_1ec3_e711_8c5a_005056ad0002-->5e112290_1ec3_e711_8c5a_005056ad0002
72      9e122290_1ec3_e711_8c5a_005056ad0002-->c1112290_1ec3_e711_8c5a_005056ad0002
73      82072290_1ec3_e711_8c5a_005056ad0002-->b7042290_1ec3_e711_8c5a_005056ad0002
74      82072290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
75      82072290_1ec3_e711_8c5a_005056ad0002-->0e102290_1ec3_e711_8c5a_005056ad0002
76      82072290_1ec3_e711_8c5a_005056ad0002-->c7072290_1ec3_e711_8c5a_005056ad0002
77      db052290_1ec3_e711_8c5a_005056ad0002-->c7072290_1ec3_e711_8c5a_005056ad0002
78      db052290_1ec3_e711_8c5a_005056ad0002-->82072290_1ec3_e711_8c5a_005056ad0002
79      4e112290_1ec3_e711_8c5a_005056ad0002-->b7042290_1ec3_e711_8c5a_005056ad0002
80      4e112290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
81      4e112290_1ec3_e711_8c5a_005056ad0002-->0e102290_1ec3_e711_8c5a_005056ad0002
82      4e112290_1ec3_e711_8c5a_005056ad0002-->07132290_1ec3_e711_8c5a_005056ad0002
83      4e112290_1ec3_e711_8c5a_005056ad0002-->ca122290_1ec3_e711_8c5a_005056ad0002
84      30122290_1ec3_e711_8c5a_005056ad0002-->ca122290_1ec3_e711_8c5a_005056ad0002
85      30122290_1ec3_e711_8c5a_005056ad0002-->4e112290_1ec3_e711_8c5a_005056ad0002
86      5e112290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
87      5e112290_1ec3_e711_8c5a_005056ad0002-->68102290_1ec3_e711_8c5a_005056ad0002
88      c1112290_1ec3_e711_8c5a_005056ad0002-->68102290_1ec3_e711_8c5a_005056ad0002
89      c1112290_1ec3_e711_8c5a_005056ad0002-->5e112290_1ec3_e711_8c5a_005056ad0002
90      b7042290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
91      8f102290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
92      0e102290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
93      07132290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
94      c7072290_1ec3_e711_8c5a_005056ad0002-->1d0a2290_1ec3_e711_8c5a_005056ad0002
95      ca122290_1ec3_e711_8c5a_005056ad0002-->200a2290_1ec3_e711_8c5a_005056ad0002
96      68102290_1ec3_e711_8c5a_005056ad0002-->1c0a2290_1ec3_e711_8c5a_005056ad0002
97      f4112290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
98      f4112290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
99      f4112290_1ec3_e711_8c5a_005056ad0002-->c0102290_1ec3_e711_8c5a_005056ad0002
100      f4112290_1ec3_e711_8c5a_005056ad0002-->9a072290_1ec3_e711_8c5a_005056ad0002
101      d6072290_1ec3_e711_8c5a_005056ad0002-->1c0a2290_1ec3_e711_8c5a_005056ad0002
102      71082290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
103      c0102290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
104      c0102290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
105      9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
106      9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
107  </div>
108  <div class="mermaid">
109graph TB
110	subgraph One
111		a1-->a2
112	end
113  </div>
114  <div class="mermaid">
115      graph LR
116      456ac9b0d15a8b7f1e71073221059886[1051 AAA fa:fa-check]
117      f7f580e11d00a75814d2ded41fe8e8fe[1141 BBB fa:fa-check]
118      81dc9bdb52d04dc20036dbd8313ed055[1234 CCC fa:fa-check]
119      456ac9b0d15a8b7f1e71073221059886 -->|Node| f7f580e11d00a75814d2ded41fe8e8fe
120      f7f580e11d00a75814d2ded41fe8e8fe -->|Node| 81dc9bdb52d04dc20036dbd8313ed055
121      click 456ac9b0d15a8b7f1e71073221059886 "/admin/user/view?id=1051" "AAA
122      6000"
123      click f7f580e11d00a75814d2ded41fe8e8fe "/admin/user/view?id=1141" "BBB
124      600"
125      click 81dc9bdb52d04dc20036dbd8313ed055 "/admin/user/view?id=1234" "CCC
126      3000"
127      style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
128  </div>
129  <div class="mermaid">
130graph TD
131A[Christmas] -->|Get money| B(Go shopping)
132B --> C{Let me think}
133C -->|One| D[Laptop]
134C -->|Two| E[iPhone]
135C -->|Three| F[Car]
136click A "index.html#link-clicked" "link test"
137click B testClick "click test"
138classDef someclass fill:#f96;
139class A someclass;
140  </div>
141
142  <hr/>
143
144  <div class="mermaid">
145sequenceDiagram
146Alice ->> Bob: Hello Bob, how are you?
147Bob-->>John: How about you John?
148Bob--x Alice: I am good thanks!
149Bob-x John: I am good thanks!
150Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
151Bob-->Alice: Checking with John...
152alt either this
153Alice->>John: Yes
154else or this
155Alice->>John: No
156else or this will happen
157Alice->John: Maybe
158end
159par this happens in parallel
160Alice -->> Bob: Parallel message 1
161and
162Alice -->> John: Parallel message 2
163end
164  </div>
165
166  <hr/>
167
168  <div class="mermaid">
169gantt
170dateFormat  YYYY-MM-DD
171axisFormat  %d/%m
172title Adding GANTT diagram to mermaid
173
174section A section
175Completed task            :done,    des1, 2014-01-06,2014-01-08
176Active task               :active,  des2, 2014-01-09, 3d
177Future task               :         des3, after des2, 5d
178Future task2               :         des4, after des3, 5d
179
180section Critical tasks
181Completed task in the critical line :crit, done, 2014-01-06,24h
182Implement parser and jison          :crit, done, after des1, 2d
183Create tests for parser             :crit, active, 3d
184Future task in critical line        :crit, 5d
185Create tests for renderer           :2d
186Add to mermaid                      :1d
187
188section Documentation
189Describe gantt syntax               :active, a1, after des1, 3d
190Add gantt diagram to demo page      :after a1  , 20h
191Add another diagram to demo page    :doc1, after a1  , 48h
192
193section Last section
194Describe gantt syntax               :after doc1, 3d
195Add gantt diagram to demo page      : 20h
196Add another diagram to demo page    : 48h
197  </div>
198
199  <hr/>
200
201  <div class="mermaid">
202gitGraph:
203options
204{
205    "nodeSpacing": 150,
206    "nodeRadius": 10
207}
208end
209commit
210branch newbranch
211checkout newbranch
212commit
213commit
214checkout master
215commit
216commit
217merge newbranch
218  </div>
219
220  <hr/>
221
222  <div class="mermaid">
223classDiagram
224Class01 <|-- AveryLongClass : Cool
225Class03 *-- Class04
226Class05 o-- Class06
227Class07 .. Class08
228Class09 --> C2 : Where am i?
229Class09 --* C3
230Class09 --|> Class07
231Class07 : equals()
232Class07 : Object[] elementData
233Class01 : size()
234Class01 : int chimp
235Class01 : int gorilla
236Class08 <--> C2: Cool label
237  </div>
238  <script src="./mermaid.js"></script>
239  <script>
240    mermaid.initialize({
241      theme: 'forest',
242      // themeCSS: '.node rect { fill: red; }',
243      logLevel: 3,
244      flowchart: { curve: 'linear' },
245      gantt: { axisFormat: '%m/%d/%Y' },
246      sequence: { actorMargin: 50 },
247      // sequenceDiagram: { actorMargin: 300 } // deprecated
248    });
249  </script>
250  <script>
251    function testClick(nodeId) {
252      console.log("clicked", nodeId)
253      var originalBgColor = document.querySelector('body').style.backgroundColor
254      document.querySelector('body').style.backgroundColor = 'yellow'
255      setTimeout(function() {
256        document.querySelector('body').style.backgroundColor = originalBgColor
257      }, 100)
258    }
259  </script>
260</body>
261</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 TD`
12	`A-->B`
13	`A-->C`
14	`A-->Z`
15	`A-->Y`
16	`B-->Y`
17	`Z-->Y`
18	`Y-->A`
19	`</div>`
20	`<div class="mermaid">`
21	`graph LR`
22	`47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget)`
23	`37(SAM.CommonFA.BudgetSubserviceLineVolume)-->48(SAM.CommonFA.CommonFAFinanceBudget)`
24	`35(SAM.CommonFA.PopulationFME)-->47(SAM.CommonFA.FMESummary)`
25	`41(SAM.CommonFA.MetricCost)-->47(SAM.CommonFA.FMESummary)`
26	`44(SAM.CommonFA.MetricOutliers)-->47(SAM.CommonFA.FMESummary)`
27	`46(SAM.CommonFA.MetricOpportunity)-->47(SAM.CommonFA.FMESummary)`
28	`40(SAM.CommonFA.OPVisits)-->47(SAM.CommonFA.FMESummary)`
29	`38(SAM.CommonFA.CommonFAFinanceRefund)-->47(SAM.CommonFA.FMESummary)`
30	`43(SAM.CommonFA.CommonFAFinancePicuDays)-->47(SAM.CommonFA.FMESummary)`
31	`42(SAM.CommonFA.CommonFAFinanceNurseryDays)-->47(SAM.CommonFA.FMESummary)`
32	`45(SAM.CommonFA.MetricPreOpportunity)-->46(SAM.CommonFA.MetricOpportunity)`
33	`35(SAM.CommonFA.PopulationFME)-->45(SAM.CommonFA.MetricPreOpportunity)`
34	`41(SAM.CommonFA.MetricCost)-->45(SAM.CommonFA.MetricPreOpportunity)`
35	`41(SAM.CommonFA.MetricCost)-->44(SAM.CommonFA.MetricOutliers)`
36	`39(SAM.CommonFA.ChargeDetails)-->43(SAM.CommonFA.CommonFAFinancePicuDays)`
37	`39(SAM.CommonFA.ChargeDetails)-->42(SAM.CommonFA.CommonFAFinanceNurseryDays)`
38	`39(SAM.CommonFA.ChargeDetails)-->41(SAM.CommonFA.MetricCost)`
39	`39(SAM.CommonFA.ChargeDetails)-->40(SAM.CommonFA.OPVisits)`
40	`35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)`
41	`36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)`
42	`</div>`
43	`<div class="mermaid">`
44	`graph TD`
45	`9e122290_1ec3_e711_8c5a_005056ad0002("fa:fa-creative-commons My System \| Test Environment")`
46	`82072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 1")`
47	`db052290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 2")`
48	`4e112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Report Server:Service 1")`
49	`30122290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Report Server:Service 2")`
50	`5e112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Dedicated Test Business Logic Server:Service 1")`
51	`c1112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Dedicated Test Business Logic Server:Service 2")`
52	`b7042290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[SupportDb]")`
53	`8f102290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[DevelopmentDb]")`
54	`0e102290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[TestDb]")`
55	`07132290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[SharedReportingDb]")`
56	`c7072290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Shared Business Logic Server")`
57	`ca122290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Shared Report Server")`
58	`68102290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Dedicated Test Business Logic Server")`
59	`f4112290_1ec3_e711_8c5a_005056ad0002("fa:fa-database [DBServer\SharedDbInstance]")`
60	`d6072290_1ec3_e711_8c5a_005056ad0002("fa:fa-server DBServer")`
61	`71082290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:MSSQLSERVER")`
62	`c0102290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:SQLAgent")`
63	`9a072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:SQLBrowser")`
64	`1d0a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost1")`
65	`200a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost2")`
66	`1c0a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost3")`
67	`9e122290_1ec3_e711_8c5a_005056ad0002-->82072290_1ec3_e711_8c5a_005056ad0002`
68	`9e122290_1ec3_e711_8c5a_005056ad0002-->db052290_1ec3_e711_8c5a_005056ad0002`
69	`9e122290_1ec3_e711_8c5a_005056ad0002-->4e112290_1ec3_e711_8c5a_005056ad0002`
70	`9e122290_1ec3_e711_8c5a_005056ad0002-->30122290_1ec3_e711_8c5a_005056ad0002`
71	`9e122290_1ec3_e711_8c5a_005056ad0002-->5e112290_1ec3_e711_8c5a_005056ad0002`
72	`9e122290_1ec3_e711_8c5a_005056ad0002-->c1112290_1ec3_e711_8c5a_005056ad0002`
73	`82072290_1ec3_e711_8c5a_005056ad0002-->b7042290_1ec3_e711_8c5a_005056ad0002`
74	`82072290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002`
75	`82072290_1ec3_e711_8c5a_005056ad0002-->0e102290_1ec3_e711_8c5a_005056ad0002`
76	`82072290_1ec3_e711_8c5a_005056ad0002-->c7072290_1ec3_e711_8c5a_005056ad0002`
77	`db052290_1ec3_e711_8c5a_005056ad0002-->c7072290_1ec3_e711_8c5a_005056ad0002`
78	`db052290_1ec3_e711_8c5a_005056ad0002-->82072290_1ec3_e711_8c5a_005056ad0002`
79	`4e112290_1ec3_e711_8c5a_005056ad0002-->b7042290_1ec3_e711_8c5a_005056ad0002`
80	`4e112290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002`
81	`4e112290_1ec3_e711_8c5a_005056ad0002-->0e102290_1ec3_e711_8c5a_005056ad0002`
82	`4e112290_1ec3_e711_8c5a_005056ad0002-->07132290_1ec3_e711_8c5a_005056ad0002`
83	`4e112290_1ec3_e711_8c5a_005056ad0002-->ca122290_1ec3_e711_8c5a_005056ad0002`
84	`30122290_1ec3_e711_8c5a_005056ad0002-->ca122290_1ec3_e711_8c5a_005056ad0002`
85	`30122290_1ec3_e711_8c5a_005056ad0002-->4e112290_1ec3_e711_8c5a_005056ad0002`
86	`5e112290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002`
87	`5e112290_1ec3_e711_8c5a_005056ad0002-->68102290_1ec3_e711_8c5a_005056ad0002`
88	`c1112290_1ec3_e711_8c5a_005056ad0002-->68102290_1ec3_e711_8c5a_005056ad0002`
89	`c1112290_1ec3_e711_8c5a_005056ad0002-->5e112290_1ec3_e711_8c5a_005056ad0002`
90	`b7042290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002`
91	`8f102290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002`
92	`0e102290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002`
93	`07132290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002`
94	`c7072290_1ec3_e711_8c5a_005056ad0002-->1d0a2290_1ec3_e711_8c5a_005056ad0002`
95	`ca122290_1ec3_e711_8c5a_005056ad0002-->200a2290_1ec3_e711_8c5a_005056ad0002`
96	`68102290_1ec3_e711_8c5a_005056ad0002-->1c0a2290_1ec3_e711_8c5a_005056ad0002`
97	`f4112290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002`
98	`f4112290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002`
99	`f4112290_1ec3_e711_8c5a_005056ad0002-->c0102290_1ec3_e711_8c5a_005056ad0002`
100	`f4112290_1ec3_e711_8c5a_005056ad0002-->9a072290_1ec3_e711_8c5a_005056ad0002`
101	`d6072290_1ec3_e711_8c5a_005056ad0002-->1c0a2290_1ec3_e711_8c5a_005056ad0002`
102	`71082290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002`
103	`c0102290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002`
104	`c0102290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002`
105	`9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002`
106	`9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002`
107	`</div>`
108	`<div class="mermaid">`
109	`graph TB`
110	`subgraph One`
111	`a1-->a2`
112	`end`
113	`</div>`
114	`<div class="mermaid">`
115	`graph LR`
116	`456ac9b0d15a8b7f1e71073221059886[1051 AAA fa:fa-check]`
117	`f7f580e11d00a75814d2ded41fe8e8fe[1141 BBB fa:fa-check]`
118	`81dc9bdb52d04dc20036dbd8313ed055[1234 CCC fa:fa-check]`
119	`456ac9b0d15a8b7f1e71073221059886 -->\|Node\| f7f580e11d00a75814d2ded41fe8e8fe`
120	`f7f580e11d00a75814d2ded41fe8e8fe -->\|Node\| 81dc9bdb52d04dc20036dbd8313ed055`
121	`click 456ac9b0d15a8b7f1e71073221059886 "/admin/user/view?id=1051" "AAA`
122	`6000"`
123	`click f7f580e11d00a75814d2ded41fe8e8fe "/admin/user/view?id=1141" "BBB`
124	`600"`
125	`click 81dc9bdb52d04dc20036dbd8313ed055 "/admin/user/view?id=1234" "CCC`
126	`3000"`
127	`style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px`
128	`</div>`
129	`<div class="mermaid">`
130	`graph TD`
131	`A[Christmas] -->\|Get money\| B(Go shopping)`
132	`B --> C{Let me think}`
133	`C -->\|One\| D[Laptop]`
134	`C -->\|Two\| E[iPhone]`
135	`C -->\|Three\| F[Car]`
136	`click A "index.html#link-clicked" "link test"`
137	`click B testClick "click test"`
138	`classDef someclass fill:#f96;`
139	`class A someclass;`
140	`</div>`
141
142	`<hr/>`
143
144	`<div class="mermaid">`
145	`sequenceDiagram`
146	`Alice ->> Bob: Hello Bob, how are you?`
147	`Bob-->>John: How about you John?`
148	`Bob--x Alice: I am good thanks!`
149	`Bob-x John: I am good thanks!`
150	`Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.`
151	`Bob-->Alice: Checking with John...`
152	`alt either this`
153	`Alice->>John: Yes`
154	`else or this`
155	`Alice->>John: No`
156	`else or this will happen`
157	`Alice->John: Maybe`
158	`end`
159	`par this happens in parallel`
160	`Alice -->> Bob: Parallel message 1`
161	`and`
162	`Alice -->> John: Parallel message 2`
163	`end`
164	`</div>`
165
166	`<hr/>`
167
168	`<div class="mermaid">`
169	`gantt`
170	`dateFormat YYYY-MM-DD`
171	`axisFormat %d/%m`
172	`title Adding GANTT diagram to mermaid`
173
174	`section A section`
175	`Completed task :done, des1, 2014-01-06,2014-01-08`
176	`Active task :active, des2, 2014-01-09, 3d`
177	`Future task : des3, after des2, 5d`
178	`Future task2 : des4, after des3, 5d`
179
180	`section Critical tasks`
181	`Completed task in the critical line :crit, done, 2014-01-06,24h`
182	`Implement parser and jison :crit, done, after des1, 2d`
183	`Create tests for parser :crit, active, 3d`
184	`Future task in critical line :crit, 5d`
185	`Create tests for renderer :2d`
186	`Add to mermaid :1d`
187
188	`section Documentation`
189	`Describe gantt syntax :active, a1, after des1, 3d`
190	`Add gantt diagram to demo page :after a1 , 20h`
191	`Add another diagram to demo page :doc1, after a1 , 48h`
192
193	`section Last section`
194	`Describe gantt syntax :after doc1, 3d`
195	`Add gantt diagram to demo page : 20h`
196	`Add another diagram to demo page : 48h`
197	`</div>`
198
199	`<hr/>`
200
201	`<div class="mermaid">`
202	`gitGraph:`
203	`options`
204	`{`
205	`"nodeSpacing": 150,`
206	`"nodeRadius": 10`
207	`}`
208	`end`
209	`commit`
210	`branch newbranch`
211	`checkout newbranch`
212	`commit`
213	`commit`
214	`checkout master`
215	`commit`
216	`commit`
217	`merge newbranch`
218	`</div>`
219
220	`<hr/>`
221
222	`<div class="mermaid">`
223	`classDiagram`
224	`Class01 <\|-- AveryLongClass : Cool`
225	`Class03 *-- Class04`
226	`Class05 o-- Class06`
227	`Class07 .. Class08`
228	`Class09 --> C2 : Where am i?`
229	`Class09 --* C3`
230	`Class09 --\|> Class07`
231	`Class07 : equals()`
232	`Class07 : Object[] elementData`
233	`Class01 : size()`
234	`Class01 : int chimp`
235	`Class01 : int gorilla`
236	`Class08 <--> C2: Cool label`
237	`</div>`
238	`<script src="./mermaid.js"></script>`
239	`<script>`
240	`mermaid.initialize({`
241	`theme: 'forest',`
242	`// themeCSS: '.node rect { fill: red; }',`
243	`logLevel: 3,`
244	`flowchart: { curve: 'linear' },`
245	`gantt: { axisFormat: '%m/%d/%Y' },`
246	`sequence: { actorMargin: 50 },`
247	`// sequenceDiagram: { actorMargin: 300 } // deprecated`
248	`});`
249	`</script>`
250	`<script>`
251	`function testClick(nodeId) {`
252	`console.log("clicked", nodeId)`
253	`var originalBgColor = document.querySelector('body').style.backgroundColor`
254	`document.querySelector('body').style.backgroundColor = 'yellow'`
255	`setTimeout(function() {`
256	`document.querySelector('body').style.backgroundColor = originalBgColor`
257	`}, 100)`
258	`}`
259	`</script>`
260	`</body>`
261	`</html>`