flowchart.html

66.8 KB1644 lines

1	<!doctype html>
2	<html lang="en">
3	<head>
4	<meta charset="utf-8" />
5	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6	<title>Mermaid Quick Flowchart Test Page</title>
7	<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
8	<style>
9	div.mermaid {
10	/* font-family: 'trebuchet ms', verdana, arial; */
11	font-family: 'Courier New', Courier, monospace !important;
12	}
13	</style>
14	</head>
15	<body>
16	<h1>Comparison "graph vs. flowchart"</h1>
17	<h2>Sample 1</h2>
18	<h3>graph</h3>
19	<pre class="mermaid">
20	---
21	title: This is a complicated flow
22	---
23	graph LR
24	accTitle: This is a complicated flow
25	accDescr: This is the description for the complicated flow.
26
27	sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
28
29	提交申请
30	熊大
31	"];
32	class sid-B3655226-6C29-4D00-B685-3D5C734DC7E1 node-executed;
33	sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A["
34	负责人审批
35	强子
36	"];
37	class sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A node-executed;
38	sid-E27C0367-E6D6-497F-9736-3CDC21FDE221["
39	DBA审批
40	强子
41	"];
42	class sid-E27C0367-E6D6-497F-9736-3CDC21FDE221 node-executed;
43	sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD["
44	SA审批
45	阿美
46	"];
47	class sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD node-executed;
48	sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7["
49	主管审批
50	光头强
51	"];
52	class sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7 node-executed;
53	sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89["
54	DBA确认
55	强子
56	"];
57	class sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89 node-executed;
58	sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937["
59	SA确认
60	阿美
61	"];
62	class sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937 node-executed;
63	sid-4FC27B48-A6F9-460A-A675-021F5854FE22["
64	结束
65	"];
66	class sid-4FC27B48-A6F9-460A-A675-021F5854FE22 node-executed;
67	sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E["
68	SA执行1
69	强子
70	"];
71	class sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E node-executed;
72	sid-6C2120F3-D940-4958-A067-0903DCE879C4["
73	SA执行2
74	强子
75	"];
76	class sid-6C2120F3-D940-4958-A067-0903DCE879C4 node-executed;
77	sid-9180E2A0-5C4B-435F-B42F-0D152470A338["
78	DBA执行1
79	强子
80	"];
81	class sid-9180E2A0-5C4B-435F-B42F-0D152470A338 node-executed;
82	sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD["
83	DBA执行3
84	强子
85	"];
86	class sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD node-executed;
87	sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756["
88	DBA执行2
89	强子
90	"];
91	class sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756 node-executed;
92	sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93["
93	DBA执行4
94	强子
95	"];
96	class sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93 node-executed;
97	sid-1897B30A-9C5C-4D5B-B80B-76A038785070["
98	负责人确认
99	梁静茹
100	"];
101	class sid-1897B30A-9C5C-4D5B-B80B-76A038785070 node-executed;
102	sid-B3655226-6C29-4D00-B685-3D5C734DC7E1-->sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7;
103	sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A-->sid-1897B30A-9C5C-4D5B-B80B-76A038785070;
104	sid-E27C0367-E6D6-497F-9736-3CDC21FDE221-->sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89;
105	sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD-->sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937;
106	sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E-->sid-6C2120F3-D940-4958-A067-0903DCE879C4;
107	sid-9180E2A0-5C4B-435F-B42F-0D152470A338-->sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756;
108	sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD-->sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93;
109	sid-6C2120F3-D940-4958-A067-0903DCE879C4-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
110	sid-1897B30A-9C5C-4D5B-B80B-76A038785070-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
111	sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E;
112	sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89-->sid-9180E2A0-5C4B-435F-B42F-0D152470A338;
113	sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89-->sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD;
114	sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
115	sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
116	sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD;
117	sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-E27C0367-E6D6-497F-9736-3CDC21FDE221;
118	sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-6C2120F3-D940-4958-A067-0903DCE879C4;
119	sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
120	sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
121	</pre>
122	<hr />
123
124	<h3>flowchart</h3>
125	<pre class="mermaid">
126	---
127	title: This is another complicated flow
128	config:
129	theme: base
130	flowchart:
131	curve: cardinal
132	---
133	flowchart LR
134	sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
135
136	提交申请
137	熊大
138	"];
139	class sid-B3655226-6C29-4D00-B685-3D5C734DC7E1 node-executed;
140	sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A["
141	负责人审批
142	强子
143	"];
144	class sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A node-executed;
145	sid-E27C0367-E6D6-497F-9736-3CDC21FDE221["
146	DBA审批
147	强子
148	"];
149	class sid-E27C0367-E6D6-497F-9736-3CDC21FDE221 node-executed;
150	sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD["
151	SA审批
152	阿美
153	"];
154	class sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD node-executed;
155	sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7["
156	主管审批
157	光头强
158	"];
159	class sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7 node-executed;
160	sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89["
161	DBA确认
162	强子
163	"];
164	class sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89 node-executed;
165	sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937["
166	SA确认
167	阿美
168	"];
169	class sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937 node-executed;
170	sid-4FC27B48-A6F9-460A-A675-021F5854FE22["
171	结束
172	"];
173	class sid-4FC27B48-A6F9-460A-A675-021F5854FE22 node-executed;
174	sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E["
175	SA执行1
176	强子
177	"];
178	class sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E node-executed;
179	sid-6C2120F3-D940-4958-A067-0903DCE879C4["
180	SA执行2
181	强子
182	"];
183	class sid-6C2120F3-D940-4958-A067-0903DCE879C4 node-executed;
184	sid-9180E2A0-5C4B-435F-B42F-0D152470A338["
185	DBA执行1
186	强子
187	"];
188	class sid-9180E2A0-5C4B-435F-B42F-0D152470A338 node-executed;
189	sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD["
190	DBA执行3
191	强子
192	"];
193	class sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD node-executed;
194	sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756["
195	DBA执行2
196	强子
197	"];
198	class sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756 node-executed;
199	sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93["
200	DBA执行4
201	强子
202	"];
203	class sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93 node-executed;
204	sid-1897B30A-9C5C-4D5B-B80B-76A038785070["
205	负责人确认
206	梁静茹
207	"];
208	class sid-1897B30A-9C5C-4D5B-B80B-76A038785070 node-executed;
209	sid-B3655226-6C29-4D00-B685-3D5C734DC7E1-->sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7;
210	sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A-->sid-1897B30A-9C5C-4D5B-B80B-76A038785070;
211	sid-E27C0367-E6D6-497F-9736-3CDC21FDE221-->sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89;
212	sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD-->sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937;
213	sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E-->sid-6C2120F3-D940-4958-A067-0903DCE879C4;
214	sid-9180E2A0-5C4B-435F-B42F-0D152470A338-->sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756;
215	sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD-->sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93;
216	sid-6C2120F3-D940-4958-A067-0903DCE879C4-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
217	sid-1897B30A-9C5C-4D5B-B80B-76A038785070-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
218	sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E;
219	sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89-->sid-9180E2A0-5C4B-435F-B42F-0D152470A338;
220	sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89-->sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD;
221	sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
222	sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
223	sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD;
224	sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-E27C0367-E6D6-497F-9736-3CDC21FDE221;
225	sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-6C2120F3-D940-4958-A067-0903DCE879C4;
226	sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
227	sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
228	</pre>
229	<hr />
230
231	<h2>Sample 2</h2>
232	<h3>graph</h3>
233	<pre class="mermaid">
234	---
235	title: What to buy
236	---
237	graph TD
238	accTitle: What to buy
239	accDescr: Options of what to buy with Christmas money
240	A[Christmas] -->\|Get money\| B(Go shopping)
241	B --> C{Let me thinksssssx<br/>sssssssssssssssssssuuu<br />tttsssssssssssssssssssssss}
242	C -->\|One\| D[Laptop]
243	C -->\|Two\| E[iPhone]
244	C -->\|Three\| F[Car]
245	</pre>
246	<hr />
247
248	<h3>flowchart</h3>
249	<pre class="mermaid">
250	flowchart TD
251	accTitle: What to buy
252	accDescr: Options of what to buy with Christmas money
253	A[Christmas] -->\|Get money\| B(Go shopping)
254	B --> C{Let me thinksssssx<br/>sssssssssssssssssssuuu<br />tttsssssssssssssssssssssss}
255	C -->\|One\| D[Laptop]
256	C -->\|Two\| E[iPhone]
257	C -->\|Three\| F[Car]
258	</pre>
259	<hr />
260
261	<h2>Sample 3</h2>
262	<h3>graph</h3>
263	<pre class="mermaid">
264	graph TD
265	A[/Christmas\]
266	A -->\|Get money\| B[\Go shopping/]
267	B --> C{Let me thinksssss<br/>ssssssssssssssssssssss<br/>sssssssssssssssssssssssssss}
268	C -->\|One\| D[/Laptop/]
269	C -->\|Two\| E[\iPhone\]
270	C -->\|Three\| F[Car]
271	</pre>
272	<hr />
273
274	<h3>flowchart</h3>
275	<pre class="mermaid">
276	flowchart TD
277	A[/Christmas\]
278	A -->\|Get money\| B[\Go shopping/]
279	B --> C{Let me thinksssss<br/>ssssssssssssssssssssss<br/>sssssssssssssssssssssssssss}
280	C -->\|One\| D[/Laptop/]
281	C -->\|Two\| E[\iPhone\]
282	C -->\|Three\| F[Car]
283	</pre>
284	<hr />
285
286	<h2>Sample 4</h2>
287	<h3>graph</h3>
288	<pre class="mermaid">
289	graph LR
290	47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget)
291	37(SAM.CommonFA.BudgetSubserviceLineVolume)-->48(SAM.CommonFA.CommonFAFinanceBudget)
292	35(SAM.CommonFA.PopulationFME)-->47(SAM.CommonFA.FMESummary)
293	41(SAM.CommonFA.MetricCost)-->47(SAM.CommonFA.FMESummary)
294	44(SAM.CommonFA.MetricOutliers)-->47(SAM.CommonFA.FMESummary)
295	46(SAM.CommonFA.MetricOpportunity)-->47(SAM.CommonFA.FMESummary)
296	40(SAM.CommonFA.OPVisits)-->47(SAM.CommonFA.FMESummary)
297	38(SAM.CommonFA.CommonFAFinanceRefund)-->47(SAM.CommonFA.FMESummary)
298	43(SAM.CommonFA.CommonFAFinancePicuDays)-->47(SAM.CommonFA.FMESummary)
299	42(SAM.CommonFA.CommonFAFinanceNurseryDays)-->47(SAM.CommonFA.FMESummary)
300	45(SAM.CommonFA.MetricPreOpportunity)-->46(SAM.CommonFA.MetricOpportunity)
301	35(SAM.CommonFA.PopulationFME)-->45(SAM.CommonFA.MetricPreOpportunity)
302	41(SAM.CommonFA.MetricCost)-->45(SAM.CommonFA.MetricPreOpportunity)
303	41(SAM.CommonFA.MetricCost)-->44(SAM.CommonFA.MetricOutliers)
304	39(SAM.CommonFA.ChargeDetails)-->43(SAM.CommonFA.CommonFAFinancePicuDays)
305	39(SAM.CommonFA.ChargeDetails)-->42(SAM.CommonFA.CommonFAFinanceNurseryDays)
306	39(SAM.CommonFA.ChargeDetails)-->41(SAM.CommonFA.MetricCost)
307	39(SAM.CommonFA.ChargeDetails)-->40(SAM.CommonFA.OPVisits)
308	35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
309	36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
310	</pre>
311	<hr />
312
313	<h3>flowchart</h3>
314	<pre class="mermaid">
315	flowchart LR
316	47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget)
317	37(SAM.CommonFA.BudgetSubserviceLineVolume)-->48(SAM.CommonFA.CommonFAFinanceBudget)
318	35(SAM.CommonFA.PopulationFME)-->47(SAM.CommonFA.FMESummary)
319	41(SAM.CommonFA.MetricCost)-->47(SAM.CommonFA.FMESummary)
320	44(SAM.CommonFA.MetricOutliers)-->47(SAM.CommonFA.FMESummary)
321	46(SAM.CommonFA.MetricOpportunity)-->47(SAM.CommonFA.FMESummary)
322	40(SAM.CommonFA.OPVisits)-->47(SAM.CommonFA.FMESummary)
323	38(SAM.CommonFA.CommonFAFinanceRefund)-->47(SAM.CommonFA.FMESummary)
324	43(SAM.CommonFA.CommonFAFinancePicuDays)-->47(SAM.CommonFA.FMESummary)
325	42(SAM.CommonFA.CommonFAFinanceNurseryDays)-->47(SAM.CommonFA.FMESummary)
326	45(SAM.CommonFA.MetricPreOpportunity)-->46(SAM.CommonFA.MetricOpportunity)
327	35(SAM.CommonFA.PopulationFME)-->45(SAM.CommonFA.MetricPreOpportunity)
328	41(SAM.CommonFA.MetricCost)-->45(SAM.CommonFA.MetricPreOpportunity)
329	41(SAM.CommonFA.MetricCost)-->44(SAM.CommonFA.MetricOutliers)
330	39(SAM.CommonFA.ChargeDetails)-->43(SAM.CommonFA.CommonFAFinancePicuDays)
331	39(SAM.CommonFA.ChargeDetails)-->42(SAM.CommonFA.CommonFAFinanceNurseryDays)
332	39(SAM.CommonFA.ChargeDetails)-->41(SAM.CommonFA.MetricCost)
333	39(SAM.CommonFA.ChargeDetails)-->40(SAM.CommonFA.OPVisits)
334	35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
335	36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
336	</pre>
337	<hr />
338
339	<h2>Sample 5</h2>
340	<h3>graph</h3>
341	<pre class="mermaid">
342	graph TD
343	9e122290_1ec3_e711_8c5a_005056ad0002("fa:fa-creative-commons My System \| Test Environment")
344	82072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 1")
345	db052290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 2")
346	4e112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Report Server:Service 1")
347	30122290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Report Server:Service 2")
348	5e112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Dedicated Test Business Logic Server:Service 1")
349	c1112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Dedicated Test Business Logic Server:Service 2")
350	b7042290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[SupportDb]")
351	8f102290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[DevelopmentDb]")
352	0e102290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[TestDb]")
353	07132290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[SharedReportingDb]")
354	c7072290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Shared Business Logic Server")
355	ca122290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Shared Report Server")
356	68102290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Dedicated Test Business Logic Server")
357	f4112290_1ec3_e711_8c5a_005056ad0002("fa:fa-database [DBServer\SharedDbInstance]")
358	d6072290_1ec3_e711_8c5a_005056ad0002("fa:fa-server DBServer")
359	71082290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:MSSQLSERVER")
360	c0102290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:SQLAgent")
361	9a072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:SQLBrowser")
362	1d0a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost1")
363	200a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost2")
364	1c0a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost3")
365	9e122290_1ec3_e711_8c5a_005056ad0002-->82072290_1ec3_e711_8c5a_005056ad0002
366	9e122290_1ec3_e711_8c5a_005056ad0002-->db052290_1ec3_e711_8c5a_005056ad0002
367	9e122290_1ec3_e711_8c5a_005056ad0002-->4e112290_1ec3_e711_8c5a_005056ad0002
368	9e122290_1ec3_e711_8c5a_005056ad0002-->30122290_1ec3_e711_8c5a_005056ad0002
369	9e122290_1ec3_e711_8c5a_005056ad0002-->5e112290_1ec3_e711_8c5a_005056ad0002
370	9e122290_1ec3_e711_8c5a_005056ad0002-->c1112290_1ec3_e711_8c5a_005056ad0002
371	82072290_1ec3_e711_8c5a_005056ad0002-->b7042290_1ec3_e711_8c5a_005056ad0002
372	82072290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
373	82072290_1ec3_e711_8c5a_005056ad0002-->0e102290_1ec3_e711_8c5a_005056ad0002
374	82072290_1ec3_e711_8c5a_005056ad0002-->c7072290_1ec3_e711_8c5a_005056ad0002
375	db052290_1ec3_e711_8c5a_005056ad0002-->c7072290_1ec3_e711_8c5a_005056ad0002
376	db052290_1ec3_e711_8c5a_005056ad0002-->82072290_1ec3_e711_8c5a_005056ad0002
377	4e112290_1ec3_e711_8c5a_005056ad0002-->b7042290_1ec3_e711_8c5a_005056ad0002
378	4e112290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
379	4e112290_1ec3_e711_8c5a_005056ad0002-->0e102290_1ec3_e711_8c5a_005056ad0002
380	4e112290_1ec3_e711_8c5a_005056ad0002-->07132290_1ec3_e711_8c5a_005056ad0002
381	4e112290_1ec3_e711_8c5a_005056ad0002-->ca122290_1ec3_e711_8c5a_005056ad0002
382	30122290_1ec3_e711_8c5a_005056ad0002-->ca122290_1ec3_e711_8c5a_005056ad0002
383	30122290_1ec3_e711_8c5a_005056ad0002-->4e112290_1ec3_e711_8c5a_005056ad0002
384	5e112290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
385	5e112290_1ec3_e711_8c5a_005056ad0002-->68102290_1ec3_e711_8c5a_005056ad0002
386	c1112290_1ec3_e711_8c5a_005056ad0002-->68102290_1ec3_e711_8c5a_005056ad0002
387	c1112290_1ec3_e711_8c5a_005056ad0002-->5e112290_1ec3_e711_8c5a_005056ad0002
388	b7042290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
389	8f102290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
390	0e102290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
391	07132290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
392	c7072290_1ec3_e711_8c5a_005056ad0002-->1d0a2290_1ec3_e711_8c5a_005056ad0002
393	ca122290_1ec3_e711_8c5a_005056ad0002-->200a2290_1ec3_e711_8c5a_005056ad0002
394	68102290_1ec3_e711_8c5a_005056ad0002-->1c0a2290_1ec3_e711_8c5a_005056ad0002
395	f4112290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
396	f4112290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
397	f4112290_1ec3_e711_8c5a_005056ad0002-->c0102290_1ec3_e711_8c5a_005056ad0002
398	f4112290_1ec3_e711_8c5a_005056ad0002-->9a072290_1ec3_e711_8c5a_005056ad0002
399	d6072290_1ec3_e711_8c5a_005056ad0002-->1c0a2290_1ec3_e711_8c5a_005056ad0002
400	71082290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
401	c0102290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
402	c0102290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
403	9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
404	9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
405	</pre>
406	<hr />
407
408	<h3>flowchart</h3>
409	<pre class="mermaid">
410	flowchart TD
411	9e122290_1ec3_e711_8c5a_005056ad0002("fa:fa-creative-commons My System \| Test Environment")
412	82072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 1")
413	db052290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 2")
414	4e112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Report Server:Service 1")
415	30122290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Report Server:Service 2")
416	5e112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Dedicated Test Business Logic Server:Service 1")
417	c1112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Dedicated Test Business Logic Server:Service 2")
418	b7042290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[SupportDb]")
419	8f102290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[DevelopmentDb]")
420	0e102290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[TestDb]")
421	07132290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[SharedReportingDb]")
422	c7072290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Shared Business Logic Server")
423	ca122290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Shared Report Server")
424	68102290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Dedicated Test Business Logic Server")
425	f4112290_1ec3_e711_8c5a_005056ad0002("fa:fa-database [DBServer\SharedDbInstance]")
426	d6072290_1ec3_e711_8c5a_005056ad0002("fa:fa-server DBServer")
427	71082290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:MSSQLSERVER")
428	c0102290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:SQLAgent")
429	9a072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:SQLBrowser")
430	1d0a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost1")
431	200a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost2")
432	1c0a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost3")
433	9e122290_1ec3_e711_8c5a_005056ad0002-->82072290_1ec3_e711_8c5a_005056ad0002
434	9e122290_1ec3_e711_8c5a_005056ad0002-->db052290_1ec3_e711_8c5a_005056ad0002
435	9e122290_1ec3_e711_8c5a_005056ad0002-->4e112290_1ec3_e711_8c5a_005056ad0002
436	9e122290_1ec3_e711_8c5a_005056ad0002-->30122290_1ec3_e711_8c5a_005056ad0002
437	9e122290_1ec3_e711_8c5a_005056ad0002-->5e112290_1ec3_e711_8c5a_005056ad0002
438	9e122290_1ec3_e711_8c5a_005056ad0002-->c1112290_1ec3_e711_8c5a_005056ad0002
439	82072290_1ec3_e711_8c5a_005056ad0002-->b7042290_1ec3_e711_8c5a_005056ad0002
440	82072290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
441	82072290_1ec3_e711_8c5a_005056ad0002-->0e102290_1ec3_e711_8c5a_005056ad0002
442	82072290_1ec3_e711_8c5a_005056ad0002-->c7072290_1ec3_e711_8c5a_005056ad0002
443	db052290_1ec3_e711_8c5a_005056ad0002-->c7072290_1ec3_e711_8c5a_005056ad0002
444	db052290_1ec3_e711_8c5a_005056ad0002-->82072290_1ec3_e711_8c5a_005056ad0002
445	4e112290_1ec3_e711_8c5a_005056ad0002-->b7042290_1ec3_e711_8c5a_005056ad0002
446	4e112290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
447	4e112290_1ec3_e711_8c5a_005056ad0002-->0e102290_1ec3_e711_8c5a_005056ad0002
448	4e112290_1ec3_e711_8c5a_005056ad0002-->07132290_1ec3_e711_8c5a_005056ad0002
449	4e112290_1ec3_e711_8c5a_005056ad0002-->ca122290_1ec3_e711_8c5a_005056ad0002
450	30122290_1ec3_e711_8c5a_005056ad0002-->ca122290_1ec3_e711_8c5a_005056ad0002
451	30122290_1ec3_e711_8c5a_005056ad0002-->4e112290_1ec3_e711_8c5a_005056ad0002
452	5e112290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
453	5e112290_1ec3_e711_8c5a_005056ad0002-->68102290_1ec3_e711_8c5a_005056ad0002
454	c1112290_1ec3_e711_8c5a_005056ad0002-->68102290_1ec3_e711_8c5a_005056ad0002
455	c1112290_1ec3_e711_8c5a_005056ad0002-->5e112290_1ec3_e711_8c5a_005056ad0002
456	b7042290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
457	8f102290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
458	0e102290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
459	07132290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
460	c7072290_1ec3_e711_8c5a_005056ad0002-->1d0a2290_1ec3_e711_8c5a_005056ad0002
461	ca122290_1ec3_e711_8c5a_005056ad0002-->200a2290_1ec3_e711_8c5a_005056ad0002
462	68102290_1ec3_e711_8c5a_005056ad0002-->1c0a2290_1ec3_e711_8c5a_005056ad0002
463	f4112290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
464	f4112290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
465	f4112290_1ec3_e711_8c5a_005056ad0002-->c0102290_1ec3_e711_8c5a_005056ad0002
466	f4112290_1ec3_e711_8c5a_005056ad0002-->9a072290_1ec3_e711_8c5a_005056ad0002
467	d6072290_1ec3_e711_8c5a_005056ad0002-->1c0a2290_1ec3_e711_8c5a_005056ad0002
468	71082290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
469	c0102290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
470	c0102290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
471	9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
472	9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
473	</pre>
474	<hr />
475
476	<h2>Sample 6</h2>
477	<h3>graph</h3>
478	<pre class="mermaid">
479	graph TB
480	subgraph One
481	a1-->a2
482	end
483	</pre>
484	<hr />
485
486	<h3>flowchart</h3>
487	<pre class="mermaid">
488	flowchart TB
489	subgraph One
490	a1-->a2
491	end
492	</pre>
493	<hr />
494
495	<h2>Sample 7</h2>
496	<h3>graph</h3>
497	<pre class="mermaid">
498	graph TB
499	A
500	B
501	subgraph foo[Foo SubGraph]
502	C
503	D
504	end
505	subgraph bar[Bar SubGraph]
506	E
507	F
508	end
509	G
510
511	A-->B
512	B-->C
513	C-->D
514	B-->D
515	D-->E
516	E-->A
517	E-->F
518	F-->D
519	F-->G
520	B-->G
521	G-->D
522
523	style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
524	style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
525	</pre>
526	<hr />
527
528	<h3>flowchart</h3>
529	<pre class="mermaid">
530	flowchart TB
531	A
532	B
533	subgraph foo[Foo SubGraph]
534	C
535	D
536	end
537	subgraph bar[Bar SubGraph]
538	E
539	F
540	end
541	G
542
543	A-->B
544	B-->C
545	C-->D
546	B-->D
547	D-->E
548	E-->A
549	E-->F
550	F-->D
551	F-->G
552	B-->G
553	G-->D
554
555	style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
556	style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
557	</pre>
558	<hr />
559
560	<h2>Sample 8</h2>
561	<h3>graph</h3>
562	<pre class="mermaid">
563	graph LR
564	456ac9b0d15a8b7f1e71073221059886[1051 AAA fa:fa-check]
565	f7f580e11d00a75814d2ded41fe8e8fe[1141 BBB fa:fa-check]
566	81dc9bdb52d04dc20036dbd8313ed055[1234 CCC fa:fa-check]
567	456ac9b0d15a8b7f1e71073221059886 -->\|Node\| f7f580e11d00a75814d2ded41fe8e8fe
568	f7f580e11d00a75814d2ded41fe8e8fe -->\|Node\| 81dc9bdb52d04dc20036dbd8313ed055
569	click 456ac9b0d15a8b7f1e71073221059886 "/admin/user/view?id=1051" "AAA
570	6000"
571	click f7f580e11d00a75814d2ded41fe8e8fe "/admin/user/view?id=1141" "BBB
572	600"
573	click 81dc9bdb52d04dc20036dbd8313ed055 "/admin/user/view?id=1234" "CCC
574	3000"
575	style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
576	</pre>
577	<hr />
578
579	<h3>flowchart</h3>
580	<pre class="mermaid">
581	flowchart LR
582	456ac9b0d15a8b7f1e71073221059886[1051 AAA fa:fa-check]
583	f7f580e11d00a75814d2ded41fe8e8fe[1141 BBB fa:fa-check]
584	81dc9bdb52d04dc20036dbd8313ed055[1234 CCC fa:fa-check]
585	456ac9b0d15a8b7f1e71073221059886 -->\|Node\| f7f580e11d00a75814d2ded41fe8e8fe
586	f7f580e11d00a75814d2ded41fe8e8fe -->\|Node\| 81dc9bdb52d04dc20036dbd8313ed055
587	click 456ac9b0d15a8b7f1e71073221059886 "/admin/user/view?id=1051" "AAA
588	6000"
589	click f7f580e11d00a75814d2ded41fe8e8fe "/admin/user/view?id=1141" "BBB
590	600"
591	click 81dc9bdb52d04dc20036dbd8313ed055 "/admin/user/view?id=1234" "CCC
592	3000"
593	style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
594	</pre>
595	<hr />
596
597	<h2>Sample 9</h2>
598	<h3>graph</h3>
599	<pre class="mermaid">
600	graph TD
601	A[Christmas] -->\|Get money\| B(Go shopping)
602	B --> C{{Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?}}
603	C -->\|One\| D[Laptop]
604	C -->\|Two\| E[iPhone]
605	C -->\|Three\| F[Car]
606	click A "flowchart.html#link-clicked" "link test"
607	click B testClick "click test"
608	classDef someclass fill:#f96;
609	class A someclass;
610	class C someclass;
611	</pre>
612	<hr />
613
614	<h3>flowchart</h3>
615	<pre class="mermaid">
616	flowchart TD
617	A[Christmas] -->\|Get money\| B(Go shopping)
618	B --> C{{Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?}}
619	C -->\|One\| D[Laptop]
620	C -->\|Two\| E[iPhone]
621	C -->\|Three\| F[Car]
622	click A "flowchart.html#link-clicked" "link test"
623	click B testClick "click test"
624	classDef someclass fill:#f96;
625	class A someclass;
626	class C someclass;
627	</pre>
628	<hr />
629
630	<h2>Sample 10</h2>
631	<h3>graph</h3>
632	<pre class="mermaid">
633	graph TD
634	A([stadium shape test])
635	A -->\|Get money\| B([Go shopping])
636	B --> C([Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?])
637	C -->\|One\| D([Laptop])
638	C -->\|Two\| E([iPhone])
639	C -->\|Three\| F([Car<br/>wroom wroom])
640	click A "flowchart.html#link-clicked" "link test"
641	click B testClick "click test"
642	classDef someclass fill:#f96;
643	class A someclass;
644	class C someclass;
645	</pre>
646	<hr />
647
648	<h3>flowchart</h3>
649	<pre class="mermaid">
650	flowchart TD
651	A([stadium shape test])
652	A -->\|Get money\| B([Go shopping])
653	B --> C([Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?])
654	C -->\|One\| D([Laptop])
655	C -->\|Two\| E([iPhone])
656	C -->\|Three\| F([Car<br/>wroom wroom])
657	click A "flowchart.html#link-clicked" "link test"
658	click B testClick "click test"
659	classDef someclass fill:#f96;
660	class A someclass;
661	class C someclass;
662	</pre>
663	<hr />
664
665	<h2>Sample 11</h2>
666	<h3>graph</h3>
667	<pre class="mermaid">
668	graph LR
669	A[[subroutine shape test]]
670	A -->\|Get money\| B[[Go shopping]]
671	B --> C[[Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?]]
672	C -->\|One\| D[[Laptop]]
673	C -->\|Two\| E[[iPhone]]
674	C -->\|Three\| F[[Car<br/>wroom wroom]]
675	click A "flowchart.html#link-clicked" "link test"
676	click B testClick "click test"
677	classDef someclass fill:#f96;
678	class A someclass;
679	class C someclass;
680	</pre>
681	<hr />
682
683	<h3>flowchart</h3>
684	<pre class="mermaid">
685	flowchart LR
686	A[[subroutine shape test]]
687	A -->\|Get money\| B[[Go shopping]]
688	B --> C[[Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?]]
689	C -->\|One\| D[[Laptop]]
690	C -->\|Two\| E[[iPhone]]
691	C -->\|Three\| F[[Car<br/>wroom wroom]]
692	click A "flowchart.html#link-clicked" "link test"
693	click B testClick "click test"
694	classDef someclass fill:#f96;
695	class A someclass;
696	class C someclass;
697	</pre>
698	<hr />
699
700	<h2>Sample 12</h2>
701	<h3>graph</h3>
702	<pre class="mermaid">
703	graph LR
704	A[(cylindrical<br />shape<br />test)]
705	A -->\|Get money\| B1[(Go shopping 1)]
706	A -->\|Get money\| B2[(Go shopping 2)]
707	A -->\|Get money\| B3[(Go shopping 3)]
708	C[(Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?)]
709	B1 --> C
710	B2 --> C
711	B3 --> C
712	C -->\|One\| D[(Laptop)]
713	C -->\|Two\| E[(iPhone)]
714	C -->\|Three\| F[(Car)]
715	click A "flowchart.html#link-clicked" "link test"
716	click B testClick "click test"
717	classDef someclass fill:#f96;
718	class A someclass;
719	</pre>
720	<hr />
721
722	<h3>flowchart</h3>
723	<pre class="mermaid">
724	flowchart LR
725	A[(cylindrical<br />shape<br />test)]
726	A -->\|Get money\| B1[(Go shopping 1)]
727	A -->\|Get money\| B2[(Go shopping 2)]
728	A -->\|Get money\| B3[(Go shopping 3)]
729	C[(Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?)]
730	B1 --> C
731	B2 --> C
732	B3 --> C
733	C -->\|One\| D[(Laptop)]
734	C -->\|Two\| E[(iPhone)]
735	C -->\|Three\| F[(Car)]
736	click A "flowchart.html#link-clicked" "link test"
737	click B testClick "click test"
738	classDef someclass fill:#f96;
739	class A someclass;
740	</pre>
741	<hr />
742
743	<h2>Sample 13</h2>
744	<h3>graph</h3>
745	<pre class="mermaid">
746	graph LR
747	A1[Multi<br>Line] -->\|Multi<br>Line\| B1(Multi<br>Line)
748	C1[Multi<br/>Line] -->\|Multi<br/>Line\| D1(Multi<br/>Line)
749	E1[Multi<br />Line] -->\|Multi<br />Line\| F1(Multi<br />Line)
750	A2[Multi<br>Line] -->\|Multi<br>Line\| B2(Multi<br>Line)
751	C2[Multi<br/>Line] -->\|Multi<br/>Line\| D2(Multi<br/>Line)
752	E2[Multi<br />Line] -->\|Multi<br />Line\| F2(Multi<br />Line)
753	linkStyle 0 stroke:DarkGray,stroke-width:2px
754	linkStyle 1 stroke:DarkGray,stroke-width:2px
755	linkStyle 2 stroke:DarkGray,stroke-width:2px
756	</pre>
757	<hr />
758
759	<h3>flowchart</h3>
760	<pre class="mermaid">
761	flowchart LR
762	A1[Multi<br>Line] -->\|Multi<br>Line\| B1(Multi<br>Line)
763	C1[Multi<br/>Line] -->\|Multi<br/>Line\| D1(Multi<br/>Line)
764	E1[Multi<br />Line] -->\|Multi<br />Line\| F1(Multi<br />Line)
765	A2[Multi<br>Line] -->\|Multi<br>Line\| B2(Multi<br>Line)
766	C2[Multi<br/>Line] -->\|Multi<br/>Line\| D2(Multi<br/>Line)
767	E2[Multi<br />Line] -->\|Multi<br />Line\| F2(Multi<br />Line)
768	linkStyle 0 stroke:DarkGray,stroke-width:2px
769	linkStyle 1 stroke:DarkGray,stroke-width:2px
770	linkStyle 2 stroke:DarkGray,stroke-width:2px
771	</pre>
772	<hr />
773
774	<h2>Sample 14</h2>
775	<h3>graph</h3>
776	<pre class="mermaid">
777	graph LR
778	A(( )) -->\|step 1\| B(( ))
779	B(( )) -->\|step 2\| C(( ))
780	C(( )) -->\|step 3\| D(( ))
781	linkStyle 1 stroke:greenyellow,stroke-width:2px
782	style C fill:greenyellow,stroke:green,stroke-width:4px
783	</pre>
784	<hr />
785
786	<h3>flowchart</h3>
787	<pre class="mermaid">
788	flowchart LR
789	A(( )) -->\|step 1\| B(( ))
790	B(( )) -->\|step 2\| C(( ))
791	C(( )) -->\|step 3\| D(( ))
792	linkStyle 1 stroke:greenyellow,stroke-width:2px
793	style C fill:greenyellow,stroke:green,stroke-width:4px
794	</pre>
795	<hr />
796
797	<h2>Sample 15</h2>
798	<h3>graph</h3>
799	<pre class="mermaid">
800	graph TB
801	TITLE["Link Click Events<br>(click the nodes below)"]
802	A["link test (open in same tab)"]
803	B["link test (open in new tab)"]
804	C[anchor test]
805	D[mailto test]
806	E[other protocol test]
807	F[script test]
808	TITLE --> A & B & C & D & E & F
809	click A "https://mermaid-js.github.io/mermaid/#/" "link test (open in same tab)"
810	click B "https://mermaid-js.github.io/mermaid/#/" "link test (open in new tab)" _blank
811	click C "#link-clicked"
812	click D "mailto:user@user.user" "mailto test"
813	click E "notes://do-your-thing/id" "other protocol test"
814	click F "javascript:alert('test')" "script test"
815	</pre>
816	<hr />
817
818	<h3>flowchart</h3>
819	<pre class="mermaid">
820	flowchart TB
821	TITLE["Link Click Events<br>(click the nodes below)"]
822	A["link test (open in same tab)"]
823	B["link test (open in new tab)"]
824	C[anchor test]
825	D[mailto test]
826	E[other protocol test]
827	F[script test]
828	TITLE --> A & B & C & D & E & F
829	click A "https://mermaid-js.github.io/mermaid/#/" "link test (open in same tab)"
830	click B "https://mermaid-js.github.io/mermaid/#/" "link test (open in new tab)" _blank
831	click C "#link-clicked"
832	click D "mailto:user@user.user" "mailto test"
833	click E "notes://do-your-thing/id" "other protocol test"
834	click F "javascript:alert('test')" "script test"
835	</pre>
836	<hr />
837
838	<h2>Sample 16</h2>
839	<h3>graph</h3>
840	<pre class="mermaid">
841	graph LR
842	A[red<br>text] -->\|red<br>text\| B(blue<br>text)
843	C[/red<br/>text/] -->\|blue<br/>text\| D{blue<br/>text}
844	E{{default<br />style}} -->\|default<br />style\| F([default<br />style])
845	linkStyle default color:Sienna;
846	linkStyle 0 color:red;
847	linkStyle 1 stroke:DarkGray,stroke-width:2px,color:#0000ff
848	style A color:red;
849	style B color:blue;
850	style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
851	style D stroke:#0000ff,fill:#ccccff,color:#0000ff
852	click B "flowchart.html#link-clicked" "link test"
853	click D testClick "click test"
854	</pre>
855	<hr />
856
857	<h3>flowchart</h3>
858	<pre class="mermaid">
859	flowchart LR
860	A[red<br>text] -->\|red<br>text\| B(blue<br>text)
861	C[/red<br/>text/] -->\|blue<br/>text\| D{blue<br/>text}
862	E{{default<br />style}} -->\|default<br />style\| F([default<br />style])
863	linkStyle default color:Sienna;
864	linkStyle 0 color:red;
865	linkStyle 1 stroke:DarkGray,stroke-width:2px,color:#0000ff
866	style A color:red;
867	style B color:blue;
868	style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
869	style D stroke:#0000ff,fill:#ccccff,color:#0000ff
870	click B "flowchart.html#link-clicked" "link test"
871	click D testClick "click test"
872	</pre>
873	<hr />
874
875	<h2>Sample 17</h2>
876	<h3>graph</h3>
877	<pre class="mermaid">
878	graph TD
879	A[myClass1] --> B[default] & C[default]
880	B[default] & C[default] --> D[myClass2]
881	classDef default stroke-width:2px,fill:none,stroke:silver
882	classDef node color:red
883	classDef myClass1 color:#0000ff
884	classDef myClass2 stroke:#0000ff,fill:#ccccff
885	class A myClass1
886	class D myClass2
887	</pre>
888	<hr />
889
890	<h3>flowchart</h3>
891	<pre class="mermaid">
892	flowchart TD
893	A[myClass1] --> B[default] & C[default]
894	B[default] & C[default] --> D[myClass2]
895	classDef default stroke-width:2px,fill:none,stroke:silver
896	classDef node color:red
897	classDef myClass1 color:#0000ff
898	classDef myClass2 stroke:#0000ff,fill:#ccccff
899	class A myClass1
900	class D myClass2
901	</pre>
902	<hr />
903
904	<h2>Sample 18</h2>
905	<h3>graph</h3>
906	<pre class="mermaid">
907	graph LR
908	A1[red text] -->\|default style\| A2[blue text]
909	B1(red text) -->\|default style\| B2(blue text)
910	C1([red text]) -->\|default style\| C2([blue text])
911	D1[[red text]] -->\|default style\| D2[[blue text]]
912	E1[(red text)] -->\|default style\| E2[(blue text)]
913	F1((red text)) -->\|default style\| F2((blue text))
914	G1>red text] -->\|default style\| G2>blue text]
915	H1{red text} -->\|default style\| H2{blue text}
916	I1{{red text}} -->\|default style\| I2{{blue text}}
917	J1[/red text/] -->\|default style\| J2[/blue text/]
918	K1[\red text\] -->\|default style\| K2[\blue text\]
919	L1[/red text\] -->\|default style\| L2[/blue text\]
920	M1[\red text/] -->\|default style\| M2[\blue text/]
921	N1[red text] -->\|default style\| N2[blue text]
922	linkStyle default color:Sienna;
923	style A1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
924	style B1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
925	style C1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
926	style D1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
927	style E1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
928	style F1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
929	style G1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
930	style H1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
931	style I1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
932	style J1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
933	style K1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
934	style L1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
935	style M1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
936	style N1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
937	style A2 stroke:#0000ff,fill:#ccccff,color:#0000ff
938	style B2 stroke:#0000ff,fill:#ccccff,color:#0000ff
939	style C2 stroke:#0000ff,fill:#ccccff,color:#0000ff
940	style D2 stroke:#0000ff,fill:#ccccff,color:#0000ff
941	style E2 stroke:#0000ff,fill:#ccccff,color:#0000ff
942	style F2 stroke:#0000ff,fill:#ccccff,color:#0000ff
943	style G2 stroke:#0000ff,fill:#ccccff,color:#0000ff
944	style H2 stroke:#0000ff,fill:#ccccff,color:#0000ff
945	style I2 stroke:#0000ff,fill:#ccccff,color:#0000ff
946	style J2 stroke:#0000ff,fill:#ccccff,color:#0000ff
947	style K2 stroke:#0000ff,fill:#ccccff,color:#0000ff
948	style L2 stroke:#0000ff,fill:#ccccff,color:#0000ff
949	style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
950	style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
951	</pre>
952	<hr />
953
954	<h3>flowchart</h3>
955	<pre class="mermaid">
956	flowchart LR
957	A1[red text] <-->\|default style\| A2[blue text]
958	B1(red text) <-->\|default style\| B2(blue text)
959	C1([red text]) <-->\|default style\| C2([blue text])
960	D1[[red text]] <-->\|default style\| D2[[blue text]]
961	E1[(red text)] <-->\|default style\| E2[(blue text)]
962	F1((red text)) <-->\|default style\| F2((blue text))
963	G1>red text] <-->\|default style\| G2>blue text]
964	H1{red text} <-->\|default style\| H2{blue text}
965	I1{{red text}} <-->\|default style\| I2{{blue text}}
966	J1[/red text/] <-->\|default style\| J2[/blue text/]
967	K1[\red text\] <-->\|default style\| K2[\blue text\]
968	L1[/red text\] <-->\|default style\| L2[/blue text\]
969	M1[\red text/] <-->\|default style\| M2[\blue text/]
970	N1[red text] <-->\|default style\| N2[blue text]
971	linkStyle default color:Sienna;
972	style A1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
973	style B1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
974	style C1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
975	style D1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
976	style E1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
977	style F1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
978	style G1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
979	style H1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
980	style I1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
981	style J1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
982	style K1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
983	style L1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
984	style M1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
985	style N1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
986	style A2 stroke:#0000ff,fill:#ccccff,color:#0000ff
987	style B2 stroke:#0000ff,fill:#ccccff,color:#0000ff
988	style C2 stroke:#0000ff,fill:#ccccff,color:#0000ff
989	style D2 stroke:#0000ff,fill:#ccccff,color:#0000ff
990	style E2 stroke:#0000ff,fill:#ccccff,color:#0000ff
991	style F2 stroke:#0000ff,fill:#ccccff,color:#0000ff
992	style G2 stroke:#0000ff,fill:#ccccff,color:#0000ff
993	style H2 stroke:#0000ff,fill:#ccccff,color:#0000ff
994	style I2 stroke:#0000ff,fill:#ccccff,color:#0000ff
995	style J2 stroke:#0000ff,fill:#ccccff,color:#0000ff
996	style K2 stroke:#0000ff,fill:#ccccff,color:#0000ff
997	style L2 stroke:#0000ff,fill:#ccccff,color:#0000ff
998	style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
999	style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
1000	</pre>
1001	<hr />
1002
1003	<h2>Sample 19</h2>
1004	<h3>graph</h3>
1005	<pre class="mermaid">
1006	graph TB
1007	A1[red text] -->\|default style\| A2[blue text]
1008	B1(red text) -->\|default style\| B2(blue text)
1009	C1([red text]) -->\|default style\| C2([blue text])
1010	D1[[red text]] -->\|default style\| D2[[blue text]]
1011	E1[(red text)] -->\|default style\| E2[(blue text)]
1012	F1((red text)) -->\|default style\| F2((blue text))
1013	G1>red text] -->\|default style\| G2>blue text]
1014	H1{red text} -->\|default style\| H2{blue text}
1015	I1{{red text}} -->\|default style\| I2{{blue text}}
1016	J1[/red text/] -->\|default style\| J2[/blue text/]
1017	K1[\red text\] -->\|default style\| K2[\blue text\]
1018	L1[/red text\] -->\|default style\| L2[/blue text\]
1019	M1[\red text/] -->\|default style\| M2[\blue text/]
1020	N1[red text] -->\|default style\| N2[blue text]
1021	linkStyle default color:Sienna;
1022	style A1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
1023	style B1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
1024	style C1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
1025	style D1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
1026	style E1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
1027	style F1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
1028	style G1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
1029	style H1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
1030	style I1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
1031	style J1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
1032	style K1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
1033	style L1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
1034	style M1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
1035	style N1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
1036	style A2 stroke:#0000ff,fill:#ccccff,color:#0000ff
1037	style B2 stroke:#0000ff,fill:#ccccff,color:#0000ff
1038	style C2 stroke:#0000ff,fill:#ccccff,color:#0000ff
1039	style D2 stroke:#0000ff,fill:#ccccff,color:#0000ff
1040	style E2 stroke:#0000ff,fill:#ccccff,color:#0000ff
1041	style F2 stroke:#0000ff,fill:#ccccff,color:#0000ff
1042	style G2 stroke:#0000ff,fill:#ccccff,color:#0000ff
1043	style H2 stroke:#0000ff,fill:#ccccff,color:#0000ff
1044	style I2 stroke:#0000ff,fill:#ccccff,color:#0000ff
1045	style J2 stroke:#0000ff,fill:#ccccff,color:#0000ff
1046	style K2 stroke:#0000ff,fill:#ccccff,color:#0000ff
1047	style L2 stroke:#0000ff,fill:#ccccff,color:#0000ff
1048	style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
1049	style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
1050	</pre>
1051	<hr />
1052
1053	<h3>flowchart</h3>
1054	<pre class="mermaid">
1055	flowchart TB
1056	A1[red text] <-->\|default style\| A2[blue text]
1057	B1(red text) <-->\|default style\| B2(blue text)
1058	C1([red text]) <-->\|default style\| C2([blue text])
1059	D1[[red text]] <-->\|default style\| D2[[blue text]]
1060	E1[(red text)] <-->\|default style\| E2[(blue text)]
1061	F1((red text)) <-->\|default style\| F2((blue text))
1062	G1>red text] <-->\|default style\| G2>blue text]
1063	H1{red text} <-->\|default style\| H2{blue text}
1064	I1{{red text}} <-->\|default style\| I2{{blue text}}
1065	J1[/red text/] <-->\|default style\| J2[/blue text/]
1066	K1[\red text\] <-->\|default style\| K2[\blue text\]
1067	L1[/red text\] <-->\|default style\| L2[/blue text\]
1068	M1[\red text/] <-->\|default style\| M2[\blue text/]
1069	N1[red text] <-->\|default style\| N2[blue text]
1070	O1(((red text))) <-->\|default style\| O2(((blue text)))
1071	linkStyle default color:Sienna;
1072	style A1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
1073	style B1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
1074	style C1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
1075	style D1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
1076	style E1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
1077	style F1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
1078	style G1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
1079	style H1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
1080	style I1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
1081	style J1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
1082	style K1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
1083	style L1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
1084	style M1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
1085	style N1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
1086	style O1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
1087	style A2 stroke:#0000ff,fill:#ccccff,color:#0000ff
1088	style B2 stroke:#0000ff,fill:#ccccff,color:#0000ff
1089	style C2 stroke:#0000ff,fill:#ccccff,color:#0000ff
1090	style D2 stroke:#0000ff,fill:#ccccff,color:#0000ff
1091	style E2 stroke:#0000ff,fill:#ccccff,color:#0000ff
1092	style F2 stroke:#0000ff,fill:#ccccff,color:#0000ff
1093	style G2 stroke:#0000ff,fill:#ccccff,color:#0000ff
1094	style H2 stroke:#0000ff,fill:#ccccff,color:#0000ff
1095	style I2 stroke:#0000ff,fill:#ccccff,color:#0000ff
1096	style J2 stroke:#0000ff,fill:#ccccff,color:#0000ff
1097	style K2 stroke:#0000ff,fill:#ccccff,color:#0000ff
1098	style L2 stroke:#0000ff,fill:#ccccff,color:#0000ff
1099	style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
1100	style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
1101	style O2 stroke:#0000ff,fill:#ccccff,color:#0000ff
1102	</pre>
1103	<hr />
1104
1105	<h2>Sample 20</h2>
1106	<h3>graph</h3>
1107	<pre class="mermaid">
1108	graph LR
1109	A["$$f(\relax{x}) = \int_{-\infty}^\infty \hat{f}(\xi)\,e^{2 \pi i \xi x}\,d\xi$$"] -->\|"$$\Bigg(\bigg(\Big(\big((\frac{-b\pm\sqrt{b^2-4ac}}{2a})\big)\Big)\bigg)\Bigg)$$"\| B("$$1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots}}}}$$")
1110	A -->\|"$$\overbrace{a+b+c}^{\text{note}}$$"\| C("$$\phase{-78^\circ}$$")
1111	B --> D("$$x = \begin{cases} a &\text{if } b \\ c &\text{if } d \end{cases}$$")
1112	C --> E("$$x(t)=c_1\begin{bmatrix}-\cos{t}+\sin{t}\\ 2\cos{t} \end{bmatrix}e^{2t}$$")
1113	</pre>
1114	<hr />
1115
1116	<h3>flowchart</h3>
1117	<pre class="mermaid">
1118	flowchart LR
1119	A["$$f(\relax{x}) = \int_{-\infty}^\infty \hat{f}(\xi)\,e^{2 \pi i \xi x}\,d\xi$$"] -->\|"$$\Bigg(\bigg(\Big(\big((\frac{-b\pm\sqrt{b^2-4ac}}{2a})\big)\Big)\bigg)\Bigg)$$"\| B("$$1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots}}}}$$")
1120	A -->\|"$$\overbrace{a+b+c}^{\text{note}}$$"\| C("$$\phase{-78^\circ}$$")
1121	B --> D("$$x = \begin{cases} a &\text{if } b \\ c &\text{if } d \end{cases}$$")
1122	C --> E("$$x(t)=c_1\begin{bmatrix}-\cos{t}+\sin{t}\\ 2\cos{t} \end{bmatrix}e^{2t}$$")
1123	</pre>
1124	<hr />
1125
1126	<h2>Sample 21</h2>
1127	<h3>graph</h3>
1128	<pre class="mermaid">
1129	graph LR
1130	A["$$\alpha\beta\gamma\delta\epsilon\zeta\eta\theta\iota\kappa\lambda\mu\nu\xi\omicron\pi\rho\sigma\tau\upsilon\phi\chi\psi\omega$$"] --> B["$$\Alpha\Beta\Gamma\Delta\Epsilon\Zeta\Eta\Theta\Iota\Kappa\Lambda\Mu\Nu\Xi\Omicron\Pi\Rho\Sigma\Tau\Upsilon\Phi\Chi\Psi\Omega$$"]
1131	</pre>
1132	<hr />
1133
1134	<h3>flowchart</h3>
1135	<pre class="mermaid">
1136	graph LR
1137	A["$$\alpha\beta\gamma\delta\epsilon\zeta\eta\theta\iota\kappa\lambda\mu\nu\xi\omicron\pi\rho\sigma\tau\upsilon\phi\chi\psi\omega$$"] --> B["$$\Alpha\Beta\Gamma\Delta\Epsilon\Zeta\Eta\Theta\Iota\Kappa\Lambda\Mu\Nu\Xi\Omicron\Pi\Rho\Sigma\Tau\Upsilon\Phi\Chi\Psi\Omega$$"]
1138	</pre>
1139	<hr />
1140
1141	<h2>Sample 22</h2>
1142	<h3>graph</h3>
1143	<pre class="mermaid">
1144	graph LR
1145	A["$$\forall\complement\therefore\emptyset\exists\subset\because\empty\exist\supset\mapsto\varnothing\nexists\mid\to\implies\in\land\gets\impliedby\isin\lor\leftrightarrow\iff\notin\ni\notni\lnot$$"] --> B["$$\nabla\Im\Reals\jmath\partial\image\wp\aleph\Game\weierp\alef\Finv\N\Z\alefsym\cnums\natnums\beth\Complex\R\gimel\ell\Re\daleth\hbar\real\eth\hslash\reals$$"]
1146	</pre>
1147	<hr />
1148
1149	<h3>flowchart</h3>
1150	<pre class="mermaid">
1151	graph LR
1152	A["$$\forall\complement\therefore\emptyset\exists\subset\because\empty\exist\supset\mapsto\varnothing\nexists\mid\to\implies\in\land\gets\impliedby\isin\lor\leftrightarrow\iff\notin\ni\notni\lnot$$"] --> B["$$\nabla\Im\Reals\jmath\partial\image\wp\aleph\Game\weierp\alef\Finv\N\Z\alefsym\cnums\natnums\beth\Complex\R\gimel\ell\Re\daleth\hbar\real\eth\hslash\reals$$"]
1153	</pre>
1154	<hr />
1155
1156	<hr />
1157
1158	<pre class="mermaid">
1159	graph LR
1160	sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
1161
1162	提交申请
1163	熊大
1164	"];
1165	class sid-B3655226-6C29-4D00-B685-3D5C734DC7E1 node-executed;
1166	sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A["
1167	负责人审批
1168	强子
1169	"];
1170	class sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A node-executed;
1171	sid-E27C0367-E6D6-497F-9736-3CDC21FDE221["
1172	DBA审批
1173	强子
1174	"];
1175	class sid-E27C0367-E6D6-497F-9736-3CDC21FDE221 node-executed;
1176	sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD["
1177	SA审批
1178	阿美
1179	"];
1180	class sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD node-executed;
1181	sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7["
1182	主管审批
1183	光头强
1184	"];
1185	class sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7 node-executed;
1186	sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89["
1187	DBA确认
1188	强子
1189	"];
1190	class sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89 node-executed;
1191	sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937["
1192	SA确认
1193	阿美
1194	"];
1195	class sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937 node-executed;
1196	sid-4FC27B48-A6F9-460A-A675-021F5854FE22["
1197	结束
1198	"];
1199	class sid-4FC27B48-A6F9-460A-A675-021F5854FE22 node-executed;
1200	sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E["
1201	SA执行1
1202	强子
1203	"];
1204	class sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E node-executed;
1205	sid-6C2120F3-D940-4958-A067-0903DCE879C4["
1206	SA执行2
1207	强子
1208	"];
1209	class sid-6C2120F3-D940-4958-A067-0903DCE879C4 node-executed;
1210	sid-9180E2A0-5C4B-435F-B42F-0D152470A338["
1211	DBA执行1
1212	强子
1213	"];
1214	class sid-9180E2A0-5C4B-435F-B42F-0D152470A338 node-executed;
1215	sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD["
1216	DBA执行3
1217	强子
1218	"];
1219	class sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD node-executed;
1220	sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756["
1221	DBA执行2
1222	强子
1223	"];
1224	class sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756 node-executed;
1225	sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93["
1226	DBA执行4
1227	强子
1228	"];
1229	class sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93 node-executed;
1230	sid-1897B30A-9C5C-4D5B-B80B-76A038785070["
1231	负责人确认
1232	梁静茹
1233	"];
1234	class sid-1897B30A-9C5C-4D5B-B80B-76A038785070 node-executed;
1235	sid-B3655226-6C29-4D00-B685-3D5C734DC7E1-->sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7;
1236	sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A-->sid-1897B30A-9C5C-4D5B-B80B-76A038785070;
1237	sid-E27C0367-E6D6-497F-9736-3CDC21FDE221-->sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89;
1238	sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD-->sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937;
1239	sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E-->sid-6C2120F3-D940-4958-A067-0903DCE879C4;
1240	sid-9180E2A0-5C4B-435F-B42F-0D152470A338-->sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756;
1241	sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD-->sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93;
1242	sid-6C2120F3-D940-4958-A067-0903DCE879C4-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
1243	sid-1897B30A-9C5C-4D5B-B80B-76A038785070-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
1244	sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E;
1245	sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89-->sid-9180E2A0-5C4B-435F-B42F-0D152470A338;
1246	sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89-->sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD;
1247	sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
1248	sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
1249	sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD;
1250	sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-E27C0367-E6D6-497F-9736-3CDC21FDE221;
1251	sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-6C2120F3-D940-4958-A067-0903DCE879C4;
1252	sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
1253	sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
1254	</pre>
1255	<hr />
1256
1257	<pre class="mermaid">
1258	graph TD
1259	A[Christmas] -->\|Get money\| B(Go shopping)
1260	B --> C{Let me thinksssssx<br />sssssssssssssssssssuuu<br />tttsssssssssssssssssssssss}
1261	C -->\|One\| D[Laptop]
1262	C -->\|Two\| E[iPhone]
1263	C -->\|Three\| F[Car]
1264	</pre>
1265	<hr />
1266
1267	<pre class="mermaid">
1268	graph TD
1269	A[/Christmas\]
1270	A -->\|Get money\| B[\Go shopping/]
1271	B --> C{Let me thinksssss<br />ssssssssssssssssssssss<br />sssssssssssssssssssssssssss}
1272	C -->\|One\| D[/Laptop/]
1273	C -->\|Two\| E[\iPhone\]
1274	C -->\|Three\| F[Car]
1275	</pre>
1276	<hr />
1277
1278	<pre class="mermaid">
1279	graph LR
1280	47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget)
1281	37(SAM.CommonFA.BudgetSubserviceLineVolume)-->48(SAM.CommonFA.CommonFAFinanceBudget)
1282	35(SAM.CommonFA.PopulationFME)-->47(SAM.CommonFA.FMESummary)
1283	41(SAM.CommonFA.MetricCost)-->47(SAM.CommonFA.FMESummary)
1284	44(SAM.CommonFA.MetricOutliers)-->47(SAM.CommonFA.FMESummary)
1285	46(SAM.CommonFA.MetricOpportunity)-->47(SAM.CommonFA.FMESummary)
1286	40(SAM.CommonFA.OPVisits)-->47(SAM.CommonFA.FMESummary)
1287	38(SAM.CommonFA.CommonFAFinanceRefund)-->47(SAM.CommonFA.FMESummary)
1288	43(SAM.CommonFA.CommonFAFinancePicuDays)-->47(SAM.CommonFA.FMESummary)
1289	42(SAM.CommonFA.CommonFAFinanceNurseryDays)-->47(SAM.CommonFA.FMESummary)
1290	45(SAM.CommonFA.MetricPreOpportunity)-->46(SAM.CommonFA.MetricOpportunity)
1291	35(SAM.CommonFA.PopulationFME)-->45(SAM.CommonFA.MetricPreOpportunity)
1292	41(SAM.CommonFA.MetricCost)-->45(SAM.CommonFA.MetricPreOpportunity)
1293	41(SAM.CommonFA.MetricCost)-->44(SAM.CommonFA.MetricOutliers)
1294	39(SAM.CommonFA.ChargeDetails)-->43(SAM.CommonFA.CommonFAFinancePicuDays)
1295	39(SAM.CommonFA.ChargeDetails)-->42(SAM.CommonFA.CommonFAFinanceNurseryDays)
1296	39(SAM.CommonFA.ChargeDetails)-->41(SAM.CommonFA.MetricCost)
1297	39(SAM.CommonFA.ChargeDetails)-->40(SAM.CommonFA.OPVisits)
1298	35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
1299	36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
1300	</pre>
1301	<hr />
1302
1303	<pre class="mermaid">
1304	graph TD
1305	9e122290_1ec3_e711_8c5a_005056ad0002("fa:fa-creative-commons My System \| Test Environment")
1306	82072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 1")
1307	db052290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 2")
1308	4e112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Report Server:Service 1")
1309	30122290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Report Server:Service 2")
1310	5e112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Dedicated Test Business Logic Server:Service 1")
1311	c1112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Dedicated Test Business Logic Server:Service 2")
1312	b7042290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[SupportDb]")
1313	8f102290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[DevelopmentDb]")
1314	0e102290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[TestDb]")
1315	07132290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[SharedReportingDb]")
1316	c7072290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Shared Business Logic Server")
1317	ca122290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Shared Report Server")
1318	68102290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Dedicated Test Business Logic Server")
1319	f4112290_1ec3_e711_8c5a_005056ad0002("fa:fa-database [DBServer\SharedDbInstance]")
1320	d6072290_1ec3_e711_8c5a_005056ad0002("fa:fa-server DBServer")
1321	71082290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:MSSQLSERVER")
1322	c0102290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:SQLAgent")
1323	9a072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:SQLBrowser")
1324	1d0a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost1")
1325	200a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost2")
1326	1c0a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost3")
1327	9e122290_1ec3_e711_8c5a_005056ad0002-->82072290_1ec3_e711_8c5a_005056ad0002
1328	9e122290_1ec3_e711_8c5a_005056ad0002-->db052290_1ec3_e711_8c5a_005056ad0002
1329	9e122290_1ec3_e711_8c5a_005056ad0002-->4e112290_1ec3_e711_8c5a_005056ad0002
1330	9e122290_1ec3_e711_8c5a_005056ad0002-->30122290_1ec3_e711_8c5a_005056ad0002
1331	9e122290_1ec3_e711_8c5a_005056ad0002-->5e112290_1ec3_e711_8c5a_005056ad0002
1332	9e122290_1ec3_e711_8c5a_005056ad0002-->c1112290_1ec3_e711_8c5a_005056ad0002
1333	82072290_1ec3_e711_8c5a_005056ad0002-->b7042290_1ec3_e711_8c5a_005056ad0002
1334	82072290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
1335	82072290_1ec3_e711_8c5a_005056ad0002-->0e102290_1ec3_e711_8c5a_005056ad0002
1336	82072290_1ec3_e711_8c5a_005056ad0002-->c7072290_1ec3_e711_8c5a_005056ad0002
1337	db052290_1ec3_e711_8c5a_005056ad0002-->c7072290_1ec3_e711_8c5a_005056ad0002
1338	db052290_1ec3_e711_8c5a_005056ad0002-->82072290_1ec3_e711_8c5a_005056ad0002
1339	4e112290_1ec3_e711_8c5a_005056ad0002-->b7042290_1ec3_e711_8c5a_005056ad0002
1340	4e112290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
1341	4e112290_1ec3_e711_8c5a_005056ad0002-->0e102290_1ec3_e711_8c5a_005056ad0002
1342	4e112290_1ec3_e711_8c5a_005056ad0002-->07132290_1ec3_e711_8c5a_005056ad0002
1343	4e112290_1ec3_e711_8c5a_005056ad0002-->ca122290_1ec3_e711_8c5a_005056ad0002
1344	30122290_1ec3_e711_8c5a_005056ad0002-->ca122290_1ec3_e711_8c5a_005056ad0002
1345	30122290_1ec3_e711_8c5a_005056ad0002-->4e112290_1ec3_e711_8c5a_005056ad0002
1346	5e112290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
1347	5e112290_1ec3_e711_8c5a_005056ad0002-->68102290_1ec3_e711_8c5a_005056ad0002
1348	c1112290_1ec3_e711_8c5a_005056ad0002-->68102290_1ec3_e711_8c5a_005056ad0002
1349	c1112290_1ec3_e711_8c5a_005056ad0002-->5e112290_1ec3_e711_8c5a_005056ad0002
1350	b7042290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
1351	8f102290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
1352	0e102290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
1353	07132290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
1354	c7072290_1ec3_e711_8c5a_005056ad0002-->1d0a2290_1ec3_e711_8c5a_005056ad0002
1355	ca122290_1ec3_e711_8c5a_005056ad0002-->200a2290_1ec3_e711_8c5a_005056ad0002
1356	68102290_1ec3_e711_8c5a_005056ad0002-->1c0a2290_1ec3_e711_8c5a_005056ad0002
1357	f4112290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
1358	f4112290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
1359	f4112290_1ec3_e711_8c5a_005056ad0002-->c0102290_1ec3_e711_8c5a_005056ad0002
1360	f4112290_1ec3_e711_8c5a_005056ad0002-->9a072290_1ec3_e711_8c5a_005056ad0002
1361	d6072290_1ec3_e711_8c5a_005056ad0002-->1c0a2290_1ec3_e711_8c5a_005056ad0002
1362	71082290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
1363	c0102290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
1364	c0102290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
1365	9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
1366	9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
1367	</pre>
1368	<hr />
1369
1370	<pre class="mermaid">
1371	graph TB
1372	subgraph One
1373	a1-->a2
1374	end
1375	</pre>
1376	<hr />
1377
1378	<pre class="mermaid">
1379	graph TB
1380	A
1381	B
1382	subgraph foo[Foo SubGraph]
1383	C
1384	D
1385	end
1386	subgraph bar[Bar SubGraph]
1387	E
1388	F
1389	end
1390	G
1391
1392	A-->B
1393	B-->C
1394	C-->D
1395	B-->D
1396	D-->E
1397	E-->A
1398	E-->F
1399	F-->D
1400	F-->G
1401	B-->G
1402	G-->D
1403
1404	style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
1405	style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
1406	</pre>
1407	<hr />
1408
1409	<pre class="mermaid">
1410	graph LR
1411	456ac9b0d15a8b7f1e71073221059886[1051 AAA fa:fa-check]
1412	f7f580e11d00a75814d2ded41fe8e8fe[1141 BBB fa:fa-check]
1413	81dc9bdb52d04dc20036dbd8313ed055[1234 CCC fa:fa-check]
1414	456ac9b0d15a8b7f1e71073221059886 -->\|Node\| f7f580e11d00a75814d2ded41fe8e8fe
1415	f7f580e11d00a75814d2ded41fe8e8fe -->\|Node\| 81dc9bdb52d04dc20036dbd8313ed055
1416	click 456ac9b0d15a8b7f1e71073221059886 "/admin/user/view?id=1051" "AAA
1417	6000"
1418	click f7f580e11d00a75814d2ded41fe8e8fe "/admin/user/view?id=1141" "BBB
1419	600"
1420	click 81dc9bdb52d04dc20036dbd8313ed055 "/admin/user/view?id=1234" "CCC
1421	3000"
1422	style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
1423	</pre>
1424	<hr />
1425
1426	<pre class="mermaid">
1427	graph TD
1428	A[Christmas] -->\|Get money\| B(Go shopping)
1429	B --> C{{Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?}}
1430	C -->\|One\| D[Laptop]
1431	C -->\|Two\| E[iPhone]
1432	C -->\|Three\| F[Car]
1433	click A "index.html#link-clicked" "link test"
1434	click B testClick "click test"
1435	classDef someclass fill:#f96;
1436	class A someclass;
1437	class C someclass;
1438	</pre>
1439	<hr />
1440
1441	<pre class="mermaid">
1442	graph TD
1443	A([stadium shape test])
1444	A -->\|Get money\| B([Go shopping])
1445	B --> C([Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?])
1446	C -->\|One\| D([Laptop])
1447	C -->\|Two\| E([iPhone])
1448	C -->\|Three\| F([Car<br />wroom wroom])
1449	click A "index.html#link-clicked" "link test"
1450	click B testClick "click test"
1451	classDef someclass fill:#f96;
1452	class A someclass;
1453	class C someclass;
1454	</pre>
1455	<hr />
1456
1457	<pre class="mermaid">
1458	graph LR
1459	A[[subroutine shape test]]
1460	A -->\|Get money\| B[[Go shopping]]
1461	B --> C[[Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?]]
1462	C -->\|One\| D[[Laptop]]
1463	C -->\|Two\| E[[iPhone]]
1464	C -->\|Three\| F[[Car<br />wroom wroom]]
1465	click A "index.html#link-clicked" "link test"
1466	click B testClick "click test"
1467	classDef someclass fill:#f96;
1468	class A someclass;
1469	class C someclass;
1470	</pre>
1471	<hr />
1472
1473	<pre class="mermaid">
1474	graph LR
1475	A[(cylindrical<br />shape<br />test)]
1476	A -->\|Get money\| B1[(Go shopping 1)]
1477	A -->\|Get money\| B2[(Go shopping 2)]
1478	A -->\|Get money\| B3[(Go shopping 3)]
1479	C[(Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?)]
1480	B1 --> C
1481	B2 --> C
1482	B3 --> C
1483	C -->\|One\| D[(Laptop)]
1484	C -->\|Two\| E[(iPhone)]
1485	C -->\|Three\| F[(Car)]
1486	click A "index.html#link-clicked" "link test"
1487	click B testClick "click test"
1488	classDef someclass fill:#f96;
1489	class A someclass;
1490	</pre>
1491	<hr />
1492
1493	<pre class="mermaid">
1494	graph LR
1495	A1[Multi<br>Line] -->\|Multi<br>Line\| B1(Multi<br>Line)
1496	C1[Multi<br />Line] -->\|Multi<br />Line\| D1(Multi<br />Line)
1497	E1[Multi<br />Line] -->\|Multi<br />Line\| F1(Multi<br />Line)
1498	A2[Multi<br>Line] -->\|Multi<br>Line\| B2(Multi<br>Line)
1499	C2[Multi<br />Line] -->\|Multi<br />Line\| D2(Multi<br />Line)
1500	E2[Multi<br />Line] -->\|Multi<br />Line\| F2(Multi<br />Line)
1501	linkStyle 0 stroke:DarkGray,stroke-width:2px
1502	linkStyle 1 stroke:DarkGray,stroke-width:2px
1503	linkStyle 2 stroke:DarkGray,stroke-width:2px
1504	</pre>
1505	<hr />
1506
1507	<pre class="mermaid">
1508	graph LR
1509	A(( )) -->\|step 1\| B(( ))
1510	B(( )) -->\|step 2\| C(( ))
1511	C(( )) -->\|step 3\| D(( ))
1512	linkStyle 1 stroke:greenyellow,stroke-width:2px
1513	style C fill:greenyellow,stroke:green,stroke-width:4px
1514	</pre>
1515	<hr />
1516
1517	<pre class="mermaid">
1518	graph TB
1519	TITLE["Link Click Events<br>(click the nodes below)"]
1520	A["link test (open in same tab)"]
1521	B["link test (open in new tab)"]
1522	C[anchor test]
1523	D[mailto test]
1524	E[other protocol test]
1525	F[script test]
1526	TITLE --> A & B & C & D & E & F
1527	click A "https://mermaid-js.github.io/mermaid/#/" "link test (open in same tab)"
1528	click B "https://mermaid-js.github.io/mermaid/#/" "link test (open in new tab)" _blank
1529	click C "#link-clicked"
1530	click D "mailto:user@user.user" "mailto test"
1531	click E "notes://do-your-thing/id" "other protocol test"
1532	click F "javascript:alert('test')" "script test"
1533	</pre>
1534	<hr />
1535
1536	<pre class="mermaid">
1537	graph LR
1538	A[red<br>text] -->\|red<br>text\| B(blue<br>text)
1539	C[/red<br />text/] -->\|blue<br />text\| D{blue<br />text}
1540	E{{default<br />style}} -->\|default<br />style\| F([default<br />style])
1541	linkStyle default color:Sienna;
1542	linkStyle 0 color:red;
1543	linkStyle 1 stroke:DarkGray,stroke-width:2px,color:#0000ff
1544	style A color:red;
1545	style B color:blue;
1546	style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
1547	style D stroke:#0000ff,fill:#ccccff,color:#0000ff
1548	click B "index.html#link-clicked" "link test"
1549	click D testClick "click test"
1550	</pre>
1551	<hr />
1552
1553	<pre class="mermaid">
1554	graph TD
1555	A[myClass1] --> B[default] & C[default]
1556	B[default] & C[default] --> D[myClass2]
1557	classDef default stroke-width:2px,fill:none,stroke:silver
1558	classDef node color:red
1559	classDef myClass1 color:#0000ff
1560	classDef myClass2 stroke:#0000ff,fill:#ccccff
1561	class A myClass1
1562	class D myClass2
1563	</pre>
1564	<hr />
1565
1566	<pre class="mermaid">
1567	graph TD
1568	A([Start]) ==> B[Step 1]
1569	B ==> C{Flow 1}
1570	C -- Choice 1.1 --> D[Step 2.1]
1571	C -- Choice 1.3 --> I[Step 2.3]
1572	C == Choice 1.2 ==> E[Step 2.2]
1573	D --> F{Flow 2}
1574	E ==> F{Flow 2}
1575	F{Flow 2} == Choice 2.1 ==> H[Feedback node]
1576	H[Feedback node] ==> B[Step 1]
1577	F{Flow 2} == Choice 2.2 ==> G((Finish))
1578
1579	linkStyle 0,1,4,6,7,8,9 stroke:gold, stroke-width:4px
1580
1581	classDef active_node fill:#0CF,stroke:#09F,stroke-width:6px
1582	classDef unactive_node fill:#e0e0e0,stroke:#bdbdbd,stroke-width:3px
1583	classDef bugged_node fill:#F88,stroke:#F22,stroke-width:3px
1584	classDef start_node,finish_node fill:#3B1,stroke:#391,stroke-width:8px
1585
1586	class A start_node;
1587	class B,C,E,F,H active_node;
1588	class D unactive_node;
1589	class G finish_node;
1590	class I bugged_node
1591	</pre>
1592	<hr />
1593
1594	<pre class="mermaid">
1595	---
1596	title: Subgraph nodeSpacing and rankSpacing example
1597	config:
1598	flowchart:
1599	nodeSpacing: 1
1600	rankSpacing: 1
1601	---
1602
1603	flowchart LR
1604
1605	X --> Y
1606
1607	subgraph X
1608	direction LR
1609	A
1610	C
1611	end
1612
1613	subgraph Y
1614	direction LR
1615	B
1616	D
1617	end
1618	</pre>
1619	<hr />
1620
1621	<h1 id="link-clicked">Anchor for "link-clicked" test</h1>
1622
1623	<script type="module">
1624	import mermaid from './mermaid.esm.mjs';
1625	mermaid.initialize({
1626	theme: 'forest',
1627	logLevel: 3,
1628	securityLevel: 'loose',
1629	flowchart: { curve: 'basis' },
1630	});
1631	</script>
1632	<script>
1633	function testClick(nodeId) {
1634	console.log('clicked', nodeId);
1635	let originalBgColor = document.querySelector('body').style.backgroundColor;
1636	document.querySelector('body').style.backgroundColor = 'yellow';
1637	setTimeout(function () {
1638	document.querySelector('body').style.backgroundColor = originalBgColor;
1639	}, 100);
1640	}
1641	</script>
1642	</body>
1643	</html>
1644