mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-01-14 06:43:25 +08:00
bfa76af434
* develop: (783 commits) chore(deps): update all minor dependencies chore: Run codecov based on E2E test status change REAMDME.md coverage from coveralls into codecov Add codecov.yaml Upload E2E set normal mode for vitest coverage Fix path name Add codecov to unit tests Add codecov to E2E chore: Add coverage scripts chore: add excludes chore: update deps Merge coverages Add coverage paths Rebuild chore: update pnpm Add coverage for E2E tests rename plugin variable into info in infoDetector.ts remove cypress/platform/index.html update pnpm-lock.yaml ...
1559 lines
63 KiB
HTML
1559 lines
63 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<title>Mermaid Quick Flowchart Test Page</title>
|
|
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
|
|
<style>
|
|
div.mermaid {
|
|
/* font-family: 'trebuchet ms', verdana, arial; */
|
|
font-family: 'Courier New', Courier, monospace !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Comparison "graph vs. flowchart"</h1>
|
|
<h2>Sample 1</h2>
|
|
<h3>graph</h3>
|
|
<pre class="mermaid">
|
|
---
|
|
title: This is a complicated flow
|
|
---
|
|
graph LR
|
|
accTitle: This is a complicated flow
|
|
accDescr: This is the descriptoin for the complicated flow.
|
|
|
|
sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
|
|
|
|
提交申请
|
|
熊大
|
|
"];
|
|
class sid-B3655226-6C29-4D00-B685-3D5C734DC7E1 node-executed;
|
|
sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A["
|
|
负责人审批
|
|
强子
|
|
"];
|
|
class sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A node-executed;
|
|
sid-E27C0367-E6D6-497F-9736-3CDC21FDE221["
|
|
DBA审批
|
|
强子
|
|
"];
|
|
class sid-E27C0367-E6D6-497F-9736-3CDC21FDE221 node-executed;
|
|
sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD["
|
|
SA审批
|
|
阿美
|
|
"];
|
|
class sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD node-executed;
|
|
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7["
|
|
主管审批
|
|
光头强
|
|
"];
|
|
class sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7 node-executed;
|
|
sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89["
|
|
DBA确认
|
|
强子
|
|
"];
|
|
class sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89 node-executed;
|
|
sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937["
|
|
SA确认
|
|
阿美
|
|
"];
|
|
class sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937 node-executed;
|
|
sid-4FC27B48-A6F9-460A-A675-021F5854FE22["
|
|
结束
|
|
"];
|
|
class sid-4FC27B48-A6F9-460A-A675-021F5854FE22 node-executed;
|
|
sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E["
|
|
SA执行1
|
|
强子
|
|
"];
|
|
class sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E node-executed;
|
|
sid-6C2120F3-D940-4958-A067-0903DCE879C4["
|
|
SA执行2
|
|
强子
|
|
"];
|
|
class sid-6C2120F3-D940-4958-A067-0903DCE879C4 node-executed;
|
|
sid-9180E2A0-5C4B-435F-B42F-0D152470A338["
|
|
DBA执行1
|
|
强子
|
|
"];
|
|
class sid-9180E2A0-5C4B-435F-B42F-0D152470A338 node-executed;
|
|
sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD["
|
|
DBA执行3
|
|
强子
|
|
"];
|
|
class sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD node-executed;
|
|
sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756["
|
|
DBA执行2
|
|
强子
|
|
"];
|
|
class sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756 node-executed;
|
|
sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93["
|
|
DBA执行4
|
|
强子
|
|
"];
|
|
class sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93 node-executed;
|
|
sid-1897B30A-9C5C-4D5B-B80B-76A038785070["
|
|
负责人确认
|
|
梁静茹
|
|
"];
|
|
class sid-1897B30A-9C5C-4D5B-B80B-76A038785070 node-executed;
|
|
sid-B3655226-6C29-4D00-B685-3D5C734DC7E1-->sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7;
|
|
sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A-->sid-1897B30A-9C5C-4D5B-B80B-76A038785070;
|
|
sid-E27C0367-E6D6-497F-9736-3CDC21FDE221-->sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89;
|
|
sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD-->sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937;
|
|
sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E-->sid-6C2120F3-D940-4958-A067-0903DCE879C4;
|
|
sid-9180E2A0-5C4B-435F-B42F-0D152470A338-->sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756;
|
|
sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD-->sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93;
|
|
sid-6C2120F3-D940-4958-A067-0903DCE879C4-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
|
|
sid-1897B30A-9C5C-4D5B-B80B-76A038785070-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
|
|
sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E;
|
|
sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89-->sid-9180E2A0-5C4B-435F-B42F-0D152470A338;
|
|
sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89-->sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD;
|
|
sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
|
|
sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
|
|
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD;
|
|
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-E27C0367-E6D6-497F-9736-3CDC21FDE221;
|
|
sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-6C2120F3-D940-4958-A067-0903DCE879C4;
|
|
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
|
|
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
|
|
</pre>
|
|
<hr />
|
|
|
|
<h3>flowchart</h3>
|
|
<pre class="mermaid">
|
|
flowchart LR
|
|
sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
|
|
|
|
提交申请
|
|
熊大
|
|
"];
|
|
class sid-B3655226-6C29-4D00-B685-3D5C734DC7E1 node-executed;
|
|
sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A["
|
|
负责人审批
|
|
强子
|
|
"];
|
|
class sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A node-executed;
|
|
sid-E27C0367-E6D6-497F-9736-3CDC21FDE221["
|
|
DBA审批
|
|
强子
|
|
"];
|
|
class sid-E27C0367-E6D6-497F-9736-3CDC21FDE221 node-executed;
|
|
sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD["
|
|
SA审批
|
|
阿美
|
|
"];
|
|
class sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD node-executed;
|
|
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7["
|
|
主管审批
|
|
光头强
|
|
"];
|
|
class sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7 node-executed;
|
|
sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89["
|
|
DBA确认
|
|
强子
|
|
"];
|
|
class sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89 node-executed;
|
|
sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937["
|
|
SA确认
|
|
阿美
|
|
"];
|
|
class sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937 node-executed;
|
|
sid-4FC27B48-A6F9-460A-A675-021F5854FE22["
|
|
结束
|
|
"];
|
|
class sid-4FC27B48-A6F9-460A-A675-021F5854FE22 node-executed;
|
|
sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E["
|
|
SA执行1
|
|
强子
|
|
"];
|
|
class sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E node-executed;
|
|
sid-6C2120F3-D940-4958-A067-0903DCE879C4["
|
|
SA执行2
|
|
强子
|
|
"];
|
|
class sid-6C2120F3-D940-4958-A067-0903DCE879C4 node-executed;
|
|
sid-9180E2A0-5C4B-435F-B42F-0D152470A338["
|
|
DBA执行1
|
|
强子
|
|
"];
|
|
class sid-9180E2A0-5C4B-435F-B42F-0D152470A338 node-executed;
|
|
sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD["
|
|
DBA执行3
|
|
强子
|
|
"];
|
|
class sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD node-executed;
|
|
sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756["
|
|
DBA执行2
|
|
强子
|
|
"];
|
|
class sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756 node-executed;
|
|
sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93["
|
|
DBA执行4
|
|
强子
|
|
"];
|
|
class sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93 node-executed;
|
|
sid-1897B30A-9C5C-4D5B-B80B-76A038785070["
|
|
负责人确认
|
|
梁静茹
|
|
"];
|
|
class sid-1897B30A-9C5C-4D5B-B80B-76A038785070 node-executed;
|
|
sid-B3655226-6C29-4D00-B685-3D5C734DC7E1-->sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7;
|
|
sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A-->sid-1897B30A-9C5C-4D5B-B80B-76A038785070;
|
|
sid-E27C0367-E6D6-497F-9736-3CDC21FDE221-->sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89;
|
|
sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD-->sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937;
|
|
sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E-->sid-6C2120F3-D940-4958-A067-0903DCE879C4;
|
|
sid-9180E2A0-5C4B-435F-B42F-0D152470A338-->sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756;
|
|
sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD-->sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93;
|
|
sid-6C2120F3-D940-4958-A067-0903DCE879C4-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
|
|
sid-1897B30A-9C5C-4D5B-B80B-76A038785070-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
|
|
sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E;
|
|
sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89-->sid-9180E2A0-5C4B-435F-B42F-0D152470A338;
|
|
sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89-->sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD;
|
|
sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
|
|
sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
|
|
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD;
|
|
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-E27C0367-E6D6-497F-9736-3CDC21FDE221;
|
|
sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-6C2120F3-D940-4958-A067-0903DCE879C4;
|
|
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
|
|
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
|
|
</pre>
|
|
<hr />
|
|
|
|
<h2>Sample 2</h2>
|
|
<h3>graph</h3>
|
|
<pre class="mermaid">
|
|
---
|
|
title: What to buy
|
|
---
|
|
graph TD
|
|
accTitle: What to buy
|
|
accDescr: Options of what to buy with Christmas money
|
|
A[Christmas] -->|Get money| B(Go shopping)
|
|
B --> C{Let me thinksssssx<br/>sssssssssssssssssssuuu<br />tttsssssssssssssssssssssss}
|
|
C -->|One| D[Laptop]
|
|
C -->|Two| E[iPhone]
|
|
C -->|Three| F[Car]
|
|
</pre>
|
|
<hr />
|
|
|
|
<h3>flowchart</h3>
|
|
<pre class="mermaid">
|
|
flowchart TD
|
|
accTitle: What to buy
|
|
accDescr: Options of what to buy with Christmas money
|
|
A[Christmas] -->|Get money| B(Go shopping)
|
|
B --> C{Let me thinksssssx<br/>sssssssssssssssssssuuu<br />tttsssssssssssssssssssssss}
|
|
C -->|One| D[Laptop]
|
|
C -->|Two| E[iPhone]
|
|
C -->|Three| F[Car]
|
|
</pre>
|
|
<hr />
|
|
|
|
<h2>Sample 3</h2>
|
|
<h3>graph</h3>
|
|
<pre class="mermaid">
|
|
graph TD
|
|
A[/Christmas\]
|
|
A -->|Get money| B[\Go shopping/]
|
|
B --> C{Let me thinksssss<br/>ssssssssssssssssssssss<br/>sssssssssssssssssssssssssss}
|
|
C -->|One| D[/Laptop/]
|
|
C -->|Two| E[\iPhone\]
|
|
C -->|Three| F[Car]
|
|
</pre>
|
|
<hr />
|
|
|
|
<h3>flowchart</h3>
|
|
<pre class="mermaid">
|
|
flowchart TD
|
|
A[/Christmas\]
|
|
A -->|Get money| B[\Go shopping/]
|
|
B --> C{Let me thinksssss<br/>ssssssssssssssssssssss<br/>sssssssssssssssssssssssssss}
|
|
C -->|One| D[/Laptop/]
|
|
C -->|Two| E[\iPhone\]
|
|
C -->|Three| F[Car]
|
|
</pre>
|
|
<hr />
|
|
|
|
<h2>Sample 4</h2>
|
|
<h3>graph</h3>
|
|
<pre class="mermaid">
|
|
graph LR
|
|
47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget)
|
|
37(SAM.CommonFA.BudgetSubserviceLineVolume)-->48(SAM.CommonFA.CommonFAFinanceBudget)
|
|
35(SAM.CommonFA.PopulationFME)-->47(SAM.CommonFA.FMESummary)
|
|
41(SAM.CommonFA.MetricCost)-->47(SAM.CommonFA.FMESummary)
|
|
44(SAM.CommonFA.MetricOutliers)-->47(SAM.CommonFA.FMESummary)
|
|
46(SAM.CommonFA.MetricOpportunity)-->47(SAM.CommonFA.FMESummary)
|
|
40(SAM.CommonFA.OPVisits)-->47(SAM.CommonFA.FMESummary)
|
|
38(SAM.CommonFA.CommonFAFinanceRefund)-->47(SAM.CommonFA.FMESummary)
|
|
43(SAM.CommonFA.CommonFAFinancePicuDays)-->47(SAM.CommonFA.FMESummary)
|
|
42(SAM.CommonFA.CommonFAFinanceNurseryDays)-->47(SAM.CommonFA.FMESummary)
|
|
45(SAM.CommonFA.MetricPreOpportunity)-->46(SAM.CommonFA.MetricOpportunity)
|
|
35(SAM.CommonFA.PopulationFME)-->45(SAM.CommonFA.MetricPreOpportunity)
|
|
41(SAM.CommonFA.MetricCost)-->45(SAM.CommonFA.MetricPreOpportunity)
|
|
41(SAM.CommonFA.MetricCost)-->44(SAM.CommonFA.MetricOutliers)
|
|
39(SAM.CommonFA.ChargeDetails)-->43(SAM.CommonFA.CommonFAFinancePicuDays)
|
|
39(SAM.CommonFA.ChargeDetails)-->42(SAM.CommonFA.CommonFAFinanceNurseryDays)
|
|
39(SAM.CommonFA.ChargeDetails)-->41(SAM.CommonFA.MetricCost)
|
|
39(SAM.CommonFA.ChargeDetails)-->40(SAM.CommonFA.OPVisits)
|
|
35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
|
|
36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
|
|
</pre>
|
|
<hr />
|
|
|
|
<h3>flowchart</h3>
|
|
<pre class="mermaid">
|
|
flowchart LR
|
|
47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget)
|
|
37(SAM.CommonFA.BudgetSubserviceLineVolume)-->48(SAM.CommonFA.CommonFAFinanceBudget)
|
|
35(SAM.CommonFA.PopulationFME)-->47(SAM.CommonFA.FMESummary)
|
|
41(SAM.CommonFA.MetricCost)-->47(SAM.CommonFA.FMESummary)
|
|
44(SAM.CommonFA.MetricOutliers)-->47(SAM.CommonFA.FMESummary)
|
|
46(SAM.CommonFA.MetricOpportunity)-->47(SAM.CommonFA.FMESummary)
|
|
40(SAM.CommonFA.OPVisits)-->47(SAM.CommonFA.FMESummary)
|
|
38(SAM.CommonFA.CommonFAFinanceRefund)-->47(SAM.CommonFA.FMESummary)
|
|
43(SAM.CommonFA.CommonFAFinancePicuDays)-->47(SAM.CommonFA.FMESummary)
|
|
42(SAM.CommonFA.CommonFAFinanceNurseryDays)-->47(SAM.CommonFA.FMESummary)
|
|
45(SAM.CommonFA.MetricPreOpportunity)-->46(SAM.CommonFA.MetricOpportunity)
|
|
35(SAM.CommonFA.PopulationFME)-->45(SAM.CommonFA.MetricPreOpportunity)
|
|
41(SAM.CommonFA.MetricCost)-->45(SAM.CommonFA.MetricPreOpportunity)
|
|
41(SAM.CommonFA.MetricCost)-->44(SAM.CommonFA.MetricOutliers)
|
|
39(SAM.CommonFA.ChargeDetails)-->43(SAM.CommonFA.CommonFAFinancePicuDays)
|
|
39(SAM.CommonFA.ChargeDetails)-->42(SAM.CommonFA.CommonFAFinanceNurseryDays)
|
|
39(SAM.CommonFA.ChargeDetails)-->41(SAM.CommonFA.MetricCost)
|
|
39(SAM.CommonFA.ChargeDetails)-->40(SAM.CommonFA.OPVisits)
|
|
35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
|
|
36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
|
|
</pre>
|
|
<hr />
|
|
|
|
<h2>Sample 5</h2>
|
|
<h3>graph</h3>
|
|
<pre class="mermaid">
|
|
graph TD
|
|
9e122290_1ec3_e711_8c5a_005056ad0002("fa:fa-creative-commons My System | Test Environment")
|
|
82072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 1")
|
|
db052290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 2")
|
|
4e112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Report Server:Service 1")
|
|
30122290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Report Server:Service 2")
|
|
5e112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Dedicated Test Business Logic Server:Service 1")
|
|
c1112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Dedicated Test Business Logic Server:Service 2")
|
|
b7042290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[SupportDb]")
|
|
8f102290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[DevelopmentDb]")
|
|
0e102290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[TestDb]")
|
|
07132290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[SharedReportingDb]")
|
|
c7072290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Shared Business Logic Server")
|
|
ca122290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Shared Report Server")
|
|
68102290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Dedicated Test Business Logic Server")
|
|
f4112290_1ec3_e711_8c5a_005056ad0002("fa:fa-database [DBServer\SharedDbInstance]")
|
|
d6072290_1ec3_e711_8c5a_005056ad0002("fa:fa-server DBServer")
|
|
71082290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:MSSQLSERVER")
|
|
c0102290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:SQLAgent")
|
|
9a072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:SQLBrowser")
|
|
1d0a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost1")
|
|
200a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost2")
|
|
1c0a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost3")
|
|
9e122290_1ec3_e711_8c5a_005056ad0002-->82072290_1ec3_e711_8c5a_005056ad0002
|
|
9e122290_1ec3_e711_8c5a_005056ad0002-->db052290_1ec3_e711_8c5a_005056ad0002
|
|
9e122290_1ec3_e711_8c5a_005056ad0002-->4e112290_1ec3_e711_8c5a_005056ad0002
|
|
9e122290_1ec3_e711_8c5a_005056ad0002-->30122290_1ec3_e711_8c5a_005056ad0002
|
|
9e122290_1ec3_e711_8c5a_005056ad0002-->5e112290_1ec3_e711_8c5a_005056ad0002
|
|
9e122290_1ec3_e711_8c5a_005056ad0002-->c1112290_1ec3_e711_8c5a_005056ad0002
|
|
82072290_1ec3_e711_8c5a_005056ad0002-->b7042290_1ec3_e711_8c5a_005056ad0002
|
|
82072290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
|
|
82072290_1ec3_e711_8c5a_005056ad0002-->0e102290_1ec3_e711_8c5a_005056ad0002
|
|
82072290_1ec3_e711_8c5a_005056ad0002-->c7072290_1ec3_e711_8c5a_005056ad0002
|
|
db052290_1ec3_e711_8c5a_005056ad0002-->c7072290_1ec3_e711_8c5a_005056ad0002
|
|
db052290_1ec3_e711_8c5a_005056ad0002-->82072290_1ec3_e711_8c5a_005056ad0002
|
|
4e112290_1ec3_e711_8c5a_005056ad0002-->b7042290_1ec3_e711_8c5a_005056ad0002
|
|
4e112290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
|
|
4e112290_1ec3_e711_8c5a_005056ad0002-->0e102290_1ec3_e711_8c5a_005056ad0002
|
|
4e112290_1ec3_e711_8c5a_005056ad0002-->07132290_1ec3_e711_8c5a_005056ad0002
|
|
4e112290_1ec3_e711_8c5a_005056ad0002-->ca122290_1ec3_e711_8c5a_005056ad0002
|
|
30122290_1ec3_e711_8c5a_005056ad0002-->ca122290_1ec3_e711_8c5a_005056ad0002
|
|
30122290_1ec3_e711_8c5a_005056ad0002-->4e112290_1ec3_e711_8c5a_005056ad0002
|
|
5e112290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
|
|
5e112290_1ec3_e711_8c5a_005056ad0002-->68102290_1ec3_e711_8c5a_005056ad0002
|
|
c1112290_1ec3_e711_8c5a_005056ad0002-->68102290_1ec3_e711_8c5a_005056ad0002
|
|
c1112290_1ec3_e711_8c5a_005056ad0002-->5e112290_1ec3_e711_8c5a_005056ad0002
|
|
b7042290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
|
|
8f102290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
|
|
0e102290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
|
|
07132290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
|
|
c7072290_1ec3_e711_8c5a_005056ad0002-->1d0a2290_1ec3_e711_8c5a_005056ad0002
|
|
ca122290_1ec3_e711_8c5a_005056ad0002-->200a2290_1ec3_e711_8c5a_005056ad0002
|
|
68102290_1ec3_e711_8c5a_005056ad0002-->1c0a2290_1ec3_e711_8c5a_005056ad0002
|
|
f4112290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
|
|
f4112290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
|
|
f4112290_1ec3_e711_8c5a_005056ad0002-->c0102290_1ec3_e711_8c5a_005056ad0002
|
|
f4112290_1ec3_e711_8c5a_005056ad0002-->9a072290_1ec3_e711_8c5a_005056ad0002
|
|
d6072290_1ec3_e711_8c5a_005056ad0002-->1c0a2290_1ec3_e711_8c5a_005056ad0002
|
|
71082290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
|
|
c0102290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
|
|
c0102290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
|
|
9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
|
|
9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
|
|
</pre>
|
|
<hr />
|
|
|
|
<h3>flowchart</h3>
|
|
<pre class="mermaid">
|
|
flowchart TD
|
|
9e122290_1ec3_e711_8c5a_005056ad0002("fa:fa-creative-commons My System | Test Environment")
|
|
82072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 1")
|
|
db052290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 2")
|
|
4e112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Report Server:Service 1")
|
|
30122290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Report Server:Service 2")
|
|
5e112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Dedicated Test Business Logic Server:Service 1")
|
|
c1112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Dedicated Test Business Logic Server:Service 2")
|
|
b7042290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[SupportDb]")
|
|
8f102290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[DevelopmentDb]")
|
|
0e102290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[TestDb]")
|
|
07132290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[SharedReportingDb]")
|
|
c7072290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Shared Business Logic Server")
|
|
ca122290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Shared Report Server")
|
|
68102290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Dedicated Test Business Logic Server")
|
|
f4112290_1ec3_e711_8c5a_005056ad0002("fa:fa-database [DBServer\SharedDbInstance]")
|
|
d6072290_1ec3_e711_8c5a_005056ad0002("fa:fa-server DBServer")
|
|
71082290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:MSSQLSERVER")
|
|
c0102290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:SQLAgent")
|
|
9a072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:SQLBrowser")
|
|
1d0a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost1")
|
|
200a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost2")
|
|
1c0a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost3")
|
|
9e122290_1ec3_e711_8c5a_005056ad0002-->82072290_1ec3_e711_8c5a_005056ad0002
|
|
9e122290_1ec3_e711_8c5a_005056ad0002-->db052290_1ec3_e711_8c5a_005056ad0002
|
|
9e122290_1ec3_e711_8c5a_005056ad0002-->4e112290_1ec3_e711_8c5a_005056ad0002
|
|
9e122290_1ec3_e711_8c5a_005056ad0002-->30122290_1ec3_e711_8c5a_005056ad0002
|
|
9e122290_1ec3_e711_8c5a_005056ad0002-->5e112290_1ec3_e711_8c5a_005056ad0002
|
|
9e122290_1ec3_e711_8c5a_005056ad0002-->c1112290_1ec3_e711_8c5a_005056ad0002
|
|
82072290_1ec3_e711_8c5a_005056ad0002-->b7042290_1ec3_e711_8c5a_005056ad0002
|
|
82072290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
|
|
82072290_1ec3_e711_8c5a_005056ad0002-->0e102290_1ec3_e711_8c5a_005056ad0002
|
|
82072290_1ec3_e711_8c5a_005056ad0002-->c7072290_1ec3_e711_8c5a_005056ad0002
|
|
db052290_1ec3_e711_8c5a_005056ad0002-->c7072290_1ec3_e711_8c5a_005056ad0002
|
|
db052290_1ec3_e711_8c5a_005056ad0002-->82072290_1ec3_e711_8c5a_005056ad0002
|
|
4e112290_1ec3_e711_8c5a_005056ad0002-->b7042290_1ec3_e711_8c5a_005056ad0002
|
|
4e112290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
|
|
4e112290_1ec3_e711_8c5a_005056ad0002-->0e102290_1ec3_e711_8c5a_005056ad0002
|
|
4e112290_1ec3_e711_8c5a_005056ad0002-->07132290_1ec3_e711_8c5a_005056ad0002
|
|
4e112290_1ec3_e711_8c5a_005056ad0002-->ca122290_1ec3_e711_8c5a_005056ad0002
|
|
30122290_1ec3_e711_8c5a_005056ad0002-->ca122290_1ec3_e711_8c5a_005056ad0002
|
|
30122290_1ec3_e711_8c5a_005056ad0002-->4e112290_1ec3_e711_8c5a_005056ad0002
|
|
5e112290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
|
|
5e112290_1ec3_e711_8c5a_005056ad0002-->68102290_1ec3_e711_8c5a_005056ad0002
|
|
c1112290_1ec3_e711_8c5a_005056ad0002-->68102290_1ec3_e711_8c5a_005056ad0002
|
|
c1112290_1ec3_e711_8c5a_005056ad0002-->5e112290_1ec3_e711_8c5a_005056ad0002
|
|
b7042290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
|
|
8f102290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
|
|
0e102290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
|
|
07132290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
|
|
c7072290_1ec3_e711_8c5a_005056ad0002-->1d0a2290_1ec3_e711_8c5a_005056ad0002
|
|
ca122290_1ec3_e711_8c5a_005056ad0002-->200a2290_1ec3_e711_8c5a_005056ad0002
|
|
68102290_1ec3_e711_8c5a_005056ad0002-->1c0a2290_1ec3_e711_8c5a_005056ad0002
|
|
f4112290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
|
|
f4112290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
|
|
f4112290_1ec3_e711_8c5a_005056ad0002-->c0102290_1ec3_e711_8c5a_005056ad0002
|
|
f4112290_1ec3_e711_8c5a_005056ad0002-->9a072290_1ec3_e711_8c5a_005056ad0002
|
|
d6072290_1ec3_e711_8c5a_005056ad0002-->1c0a2290_1ec3_e711_8c5a_005056ad0002
|
|
71082290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
|
|
c0102290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
|
|
c0102290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
|
|
9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
|
|
9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
|
|
</pre>
|
|
<hr />
|
|
|
|
<h2>Sample 6</h2>
|
|
<h3>graph</h3>
|
|
<pre class="mermaid">
|
|
graph TB
|
|
subgraph One
|
|
a1-->a2
|
|
end
|
|
</pre>
|
|
<hr />
|
|
|
|
<h3>flowchart</h3>
|
|
<pre class="mermaid">
|
|
flowchart TB
|
|
subgraph One
|
|
a1-->a2
|
|
end
|
|
</pre>
|
|
<hr />
|
|
|
|
<h2>Sample 7</h2>
|
|
<h3>graph</h3>
|
|
<pre class="mermaid">
|
|
graph TB
|
|
A
|
|
B
|
|
subgraph foo[Foo SubGraph]
|
|
C
|
|
D
|
|
end
|
|
subgraph bar[Bar SubGraph]
|
|
E
|
|
F
|
|
end
|
|
G
|
|
|
|
A-->B
|
|
B-->C
|
|
C-->D
|
|
B-->D
|
|
D-->E
|
|
E-->A
|
|
E-->F
|
|
F-->D
|
|
F-->G
|
|
B-->G
|
|
G-->D
|
|
|
|
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
|
|
style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
|
|
</pre>
|
|
<hr />
|
|
|
|
<h3>flowchart</h3>
|
|
<pre class="mermaid">
|
|
flowchart TB
|
|
A
|
|
B
|
|
subgraph foo[Foo SubGraph]
|
|
C
|
|
D
|
|
end
|
|
subgraph bar[Bar SubGraph]
|
|
E
|
|
F
|
|
end
|
|
G
|
|
|
|
A-->B
|
|
B-->C
|
|
C-->D
|
|
B-->D
|
|
D-->E
|
|
E-->A
|
|
E-->F
|
|
F-->D
|
|
F-->G
|
|
B-->G
|
|
G-->D
|
|
|
|
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
|
|
style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
|
|
</pre>
|
|
<hr />
|
|
|
|
<h2>Sample 8</h2>
|
|
<h3>graph</h3>
|
|
<pre class="mermaid">
|
|
graph LR
|
|
456ac9b0d15a8b7f1e71073221059886[1051 AAA fa:fa-check]
|
|
f7f580e11d00a75814d2ded41fe8e8fe[1141 BBB fa:fa-check]
|
|
81dc9bdb52d04dc20036dbd8313ed055[1234 CCC fa:fa-check]
|
|
456ac9b0d15a8b7f1e71073221059886 -->|Node| f7f580e11d00a75814d2ded41fe8e8fe
|
|
f7f580e11d00a75814d2ded41fe8e8fe -->|Node| 81dc9bdb52d04dc20036dbd8313ed055
|
|
click 456ac9b0d15a8b7f1e71073221059886 "/admin/user/view?id=1051" "AAA
|
|
6000"
|
|
click f7f580e11d00a75814d2ded41fe8e8fe "/admin/user/view?id=1141" "BBB
|
|
600"
|
|
click 81dc9bdb52d04dc20036dbd8313ed055 "/admin/user/view?id=1234" "CCC
|
|
3000"
|
|
style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
|
|
</pre>
|
|
<hr />
|
|
|
|
<h3>flowchart</h3>
|
|
<pre class="mermaid">
|
|
flowchart LR
|
|
456ac9b0d15a8b7f1e71073221059886[1051 AAA fa:fa-check]
|
|
f7f580e11d00a75814d2ded41fe8e8fe[1141 BBB fa:fa-check]
|
|
81dc9bdb52d04dc20036dbd8313ed055[1234 CCC fa:fa-check]
|
|
456ac9b0d15a8b7f1e71073221059886 -->|Node| f7f580e11d00a75814d2ded41fe8e8fe
|
|
f7f580e11d00a75814d2ded41fe8e8fe -->|Node| 81dc9bdb52d04dc20036dbd8313ed055
|
|
click 456ac9b0d15a8b7f1e71073221059886 "/admin/user/view?id=1051" "AAA
|
|
6000"
|
|
click f7f580e11d00a75814d2ded41fe8e8fe "/admin/user/view?id=1141" "BBB
|
|
600"
|
|
click 81dc9bdb52d04dc20036dbd8313ed055 "/admin/user/view?id=1234" "CCC
|
|
3000"
|
|
style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
|
|
</pre>
|
|
<hr />
|
|
|
|
<h2>Sample 9</h2>
|
|
<h3>graph</h3>
|
|
<pre class="mermaid">
|
|
graph TD
|
|
A[Christmas] -->|Get money| B(Go shopping)
|
|
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?}}
|
|
C -->|One| D[Laptop]
|
|
C -->|Two| E[iPhone]
|
|
C -->|Three| F[Car]
|
|
click A "flowchart.html#link-clicked" "link test"
|
|
click B testClick "click test"
|
|
classDef someclass fill:#f96;
|
|
class A someclass;
|
|
class C someclass;
|
|
</pre>
|
|
<hr />
|
|
|
|
<h3>flowchart</h3>
|
|
<pre class="mermaid">
|
|
flowchart TD
|
|
A[Christmas] -->|Get money| B(Go shopping)
|
|
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?}}
|
|
C -->|One| D[Laptop]
|
|
C -->|Two| E[iPhone]
|
|
C -->|Three| F[Car]
|
|
click A "flowchart.html#link-clicked" "link test"
|
|
click B testClick "click test"
|
|
classDef someclass fill:#f96;
|
|
class A someclass;
|
|
class C someclass;
|
|
</pre>
|
|
<hr />
|
|
|
|
<h2>Sample 10</h2>
|
|
<h3>graph</h3>
|
|
<pre class="mermaid">
|
|
graph TD
|
|
A([stadium shape test])
|
|
A -->|Get money| B([Go shopping])
|
|
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?])
|
|
C -->|One| D([Laptop])
|
|
C -->|Two| E([iPhone])
|
|
C -->|Three| F([Car<br/>wroom wroom])
|
|
click A "flowchart.html#link-clicked" "link test"
|
|
click B testClick "click test"
|
|
classDef someclass fill:#f96;
|
|
class A someclass;
|
|
class C someclass;
|
|
</pre>
|
|
<hr />
|
|
|
|
<h3>flowchart</h3>
|
|
<pre class="mermaid">
|
|
flowchart TD
|
|
A([stadium shape test])
|
|
A -->|Get money| B([Go shopping])
|
|
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?])
|
|
C -->|One| D([Laptop])
|
|
C -->|Two| E([iPhone])
|
|
C -->|Three| F([Car<br/>wroom wroom])
|
|
click A "flowchart.html#link-clicked" "link test"
|
|
click B testClick "click test"
|
|
classDef someclass fill:#f96;
|
|
class A someclass;
|
|
class C someclass;
|
|
</pre>
|
|
<hr />
|
|
|
|
<h2>Sample 11</h2>
|
|
<h3>graph</h3>
|
|
<pre class="mermaid">
|
|
graph LR
|
|
A[[subroutine shape test]]
|
|
A -->|Get money| B[[Go shopping]]
|
|
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?]]
|
|
C -->|One| D[[Laptop]]
|
|
C -->|Two| E[[iPhone]]
|
|
C -->|Three| F[[Car<br/>wroom wroom]]
|
|
click A "flowchart.html#link-clicked" "link test"
|
|
click B testClick "click test"
|
|
classDef someclass fill:#f96;
|
|
class A someclass;
|
|
class C someclass;
|
|
</pre>
|
|
<hr />
|
|
|
|
<h3>flowchart</h3>
|
|
<pre class="mermaid">
|
|
flowchart LR
|
|
A[[subroutine shape test]]
|
|
A -->|Get money| B[[Go shopping]]
|
|
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?]]
|
|
C -->|One| D[[Laptop]]
|
|
C -->|Two| E[[iPhone]]
|
|
C -->|Three| F[[Car<br/>wroom wroom]]
|
|
click A "flowchart.html#link-clicked" "link test"
|
|
click B testClick "click test"
|
|
classDef someclass fill:#f96;
|
|
class A someclass;
|
|
class C someclass;
|
|
</pre>
|
|
<hr />
|
|
|
|
<h2>Sample 12</h2>
|
|
<h3>graph</h3>
|
|
<pre class="mermaid">
|
|
graph LR
|
|
A[(cylindrical<br />shape<br />test)]
|
|
A -->|Get money| B1[(Go shopping 1)]
|
|
A -->|Get money| B2[(Go shopping 2)]
|
|
A -->|Get money| B3[(Go shopping 3)]
|
|
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?)]
|
|
B1 --> C
|
|
B2 --> C
|
|
B3 --> C
|
|
C -->|One| D[(Laptop)]
|
|
C -->|Two| E[(iPhone)]
|
|
C -->|Three| F[(Car)]
|
|
click A "flowchart.html#link-clicked" "link test"
|
|
click B testClick "click test"
|
|
classDef someclass fill:#f96;
|
|
class A someclass;
|
|
</pre>
|
|
<hr />
|
|
|
|
<h3>flowchart</h3>
|
|
<pre class="mermaid">
|
|
flowchart LR
|
|
A[(cylindrical<br />shape<br />test)]
|
|
A -->|Get money| B1[(Go shopping 1)]
|
|
A -->|Get money| B2[(Go shopping 2)]
|
|
A -->|Get money| B3[(Go shopping 3)]
|
|
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?)]
|
|
B1 --> C
|
|
B2 --> C
|
|
B3 --> C
|
|
C -->|One| D[(Laptop)]
|
|
C -->|Two| E[(iPhone)]
|
|
C -->|Three| F[(Car)]
|
|
click A "flowchart.html#link-clicked" "link test"
|
|
click B testClick "click test"
|
|
classDef someclass fill:#f96;
|
|
class A someclass;
|
|
</pre>
|
|
<hr />
|
|
|
|
<h2>Sample 13</h2>
|
|
<h3>graph</h3>
|
|
<pre class="mermaid">
|
|
graph LR
|
|
A1[Multi<br>Line] -->|Multi<br>Line| B1(Multi<br>Line)
|
|
C1[Multi<br/>Line] -->|Multi<br/>Line| D1(Multi<br/>Line)
|
|
E1[Multi<br />Line] -->|Multi<br />Line| F1(Multi<br />Line)
|
|
A2[Multi<br>Line] -->|Multi<br>Line| B2(Multi<br>Line)
|
|
C2[Multi<br/>Line] -->|Multi<br/>Line| D2(Multi<br/>Line)
|
|
E2[Multi<br />Line] -->|Multi<br />Line| F2(Multi<br />Line)
|
|
linkStyle 0 stroke:DarkGray,stroke-width:2px
|
|
linkStyle 1 stroke:DarkGray,stroke-width:2px
|
|
linkStyle 2 stroke:DarkGray,stroke-width:2px
|
|
</pre>
|
|
<hr />
|
|
|
|
<h3>flowchart</h3>
|
|
<pre class="mermaid">
|
|
flowchart LR
|
|
A1[Multi<br>Line] -->|Multi<br>Line| B1(Multi<br>Line)
|
|
C1[Multi<br/>Line] -->|Multi<br/>Line| D1(Multi<br/>Line)
|
|
E1[Multi<br />Line] -->|Multi<br />Line| F1(Multi<br />Line)
|
|
A2[Multi<br>Line] -->|Multi<br>Line| B2(Multi<br>Line)
|
|
C2[Multi<br/>Line] -->|Multi<br/>Line| D2(Multi<br/>Line)
|
|
E2[Multi<br />Line] -->|Multi<br />Line| F2(Multi<br />Line)
|
|
linkStyle 0 stroke:DarkGray,stroke-width:2px
|
|
linkStyle 1 stroke:DarkGray,stroke-width:2px
|
|
linkStyle 2 stroke:DarkGray,stroke-width:2px
|
|
</pre>
|
|
<hr />
|
|
|
|
<h2>Sample 14</h2>
|
|
<h3>graph</h3>
|
|
<pre class="mermaid">
|
|
graph LR
|
|
A(( )) -->|step 1| B(( ))
|
|
B(( )) -->|step 2| C(( ))
|
|
C(( )) -->|step 3| D(( ))
|
|
linkStyle 1 stroke:greenyellow,stroke-width:2px
|
|
style C fill:greenyellow,stroke:green,stroke-width:4px
|
|
</pre>
|
|
<hr />
|
|
|
|
<h3>flowchart</h3>
|
|
<pre class="mermaid">
|
|
flowchart LR
|
|
A(( )) -->|step 1| B(( ))
|
|
B(( )) -->|step 2| C(( ))
|
|
C(( )) -->|step 3| D(( ))
|
|
linkStyle 1 stroke:greenyellow,stroke-width:2px
|
|
style C fill:greenyellow,stroke:green,stroke-width:4px
|
|
</pre>
|
|
<hr />
|
|
|
|
<h2>Sample 15</h2>
|
|
<h3>graph</h3>
|
|
<pre class="mermaid">
|
|
graph TB
|
|
TITLE["Link Click Events<br>(click the nodes below)"]
|
|
A["link test (open in same tab)"]
|
|
B["link test (open in new tab)"]
|
|
C[anchor test]
|
|
D[mailto test]
|
|
E[other protocol test]
|
|
F[script test]
|
|
TITLE --> A & B & C & D & E & F
|
|
click A "https://mermaid-js.github.io/mermaid/#/" "link test (open in same tab)"
|
|
click B "https://mermaid-js.github.io/mermaid/#/" "link test (open in new tab)" _blank
|
|
click C "#link-clicked"
|
|
click D "mailto:user@user.user" "mailto test"
|
|
click E "notes://do-your-thing/id" "other protocol test"
|
|
click F "javascript:alert('test')" "script test"
|
|
</pre>
|
|
<hr />
|
|
|
|
<h3>flowchart</h3>
|
|
<pre class="mermaid">
|
|
flowchart TB
|
|
TITLE["Link Click Events<br>(click the nodes below)"]
|
|
A["link test (open in same tab)"]
|
|
B["link test (open in new tab)"]
|
|
C[anchor test]
|
|
D[mailto test]
|
|
E[other protocol test]
|
|
F[script test]
|
|
TITLE --> A & B & C & D & E & F
|
|
click A "https://mermaid-js.github.io/mermaid/#/" "link test (open in same tab)"
|
|
click B "https://mermaid-js.github.io/mermaid/#/" "link test (open in new tab)" _blank
|
|
click C "#link-clicked"
|
|
click D "mailto:user@user.user" "mailto test"
|
|
click E "notes://do-your-thing/id" "other protocol test"
|
|
click F "javascript:alert('test')" "script test"
|
|
</pre>
|
|
<hr />
|
|
|
|
<h2>Sample 16</h2>
|
|
<h3>graph</h3>
|
|
<pre class="mermaid">
|
|
graph LR
|
|
A[red<br>text] -->|red<br>text| B(blue<br>text)
|
|
C[/red<br/>text/] -->|blue<br/>text| D{blue<br/>text}
|
|
E{{default<br />style}} -->|default<br />style| F([default<br />style])
|
|
linkStyle default color:Sienna;
|
|
linkStyle 0 color:red;
|
|
linkStyle 1 stroke:DarkGray,stroke-width:2px,color:#0000ff
|
|
style A color:red;
|
|
style B color:blue;
|
|
style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style D stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
click B "flowchart.html#link-clicked" "link test"
|
|
click D testClick "click test"
|
|
</pre>
|
|
<hr />
|
|
|
|
<h3>flowchart</h3>
|
|
<pre class="mermaid">
|
|
flowchart LR
|
|
A[red<br>text] -->|red<br>text| B(blue<br>text)
|
|
C[/red<br/>text/] -->|blue<br/>text| D{blue<br/>text}
|
|
E{{default<br />style}} -->|default<br />style| F([default<br />style])
|
|
linkStyle default color:Sienna;
|
|
linkStyle 0 color:red;
|
|
linkStyle 1 stroke:DarkGray,stroke-width:2px,color:#0000ff
|
|
style A color:red;
|
|
style B color:blue;
|
|
style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style D stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
click B "flowchart.html#link-clicked" "link test"
|
|
click D testClick "click test"
|
|
</pre>
|
|
<hr />
|
|
|
|
<h2>Sample 17</h2>
|
|
<h3>graph</h3>
|
|
<pre class="mermaid">
|
|
graph TD
|
|
A[myClass1] --> B[default] & C[default]
|
|
B[default] & C[default] --> D[myClass2]
|
|
classDef default stroke-width:2px,fill:none,stroke:silver
|
|
classDef node color:red
|
|
classDef myClass1 color:#0000ff
|
|
classDef myClass2 stroke:#0000ff,fill:#ccccff
|
|
class A myClass1
|
|
class D myClass2
|
|
</pre>
|
|
<hr />
|
|
|
|
<h3>flowchart</h3>
|
|
<pre class="mermaid">
|
|
flowchart TD
|
|
A[myClass1] --> B[default] & C[default]
|
|
B[default] & C[default] --> D[myClass2]
|
|
classDef default stroke-width:2px,fill:none,stroke:silver
|
|
classDef node color:red
|
|
classDef myClass1 color:#0000ff
|
|
classDef myClass2 stroke:#0000ff,fill:#ccccff
|
|
class A myClass1
|
|
class D myClass2
|
|
</pre>
|
|
<hr />
|
|
|
|
<h2>Sample 18</h2>
|
|
<h3>graph</h3>
|
|
<pre class="mermaid">
|
|
graph LR
|
|
A1[red text] -->|default style| A2[blue text]
|
|
B1(red text) -->|default style| B2(blue text)
|
|
C1([red text]) -->|default style| C2([blue text])
|
|
D1[[red text]] -->|default style| D2[[blue text]]
|
|
E1[(red text)] -->|default style| E2[(blue text)]
|
|
F1((red text)) -->|default style| F2((blue text))
|
|
G1>red text] -->|default style| G2>blue text]
|
|
H1{red text} -->|default style| H2{blue text}
|
|
I1{{red text}} -->|default style| I2{{blue text}}
|
|
J1[/red text/] -->|default style| J2[/blue text/]
|
|
K1[\red text\] -->|default style| K2[\blue text\]
|
|
L1[/red text\] -->|default style| L2[/blue text\]
|
|
M1[\red text/] -->|default style| M2[\blue text/]
|
|
N1[red text] -->|default style| N2[blue text]
|
|
linkStyle default color:Sienna;
|
|
style A1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style B1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style C1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style D1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style E1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style F1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style G1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style H1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style I1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style J1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style K1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style L1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style M1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style N1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style A2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
style B2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
style C2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
style D2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
style E2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
style F2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
style G2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
style H2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
style I2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
style J2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
style K2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
style L2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
</pre>
|
|
<hr />
|
|
|
|
<h3>flowchart</h3>
|
|
<pre class="mermaid">
|
|
flowchart LR
|
|
A1[red text] <-->|default style| A2[blue text]
|
|
B1(red text) <-->|default style| B2(blue text)
|
|
C1([red text]) <-->|default style| C2([blue text])
|
|
D1[[red text]] <-->|default style| D2[[blue text]]
|
|
E1[(red text)] <-->|default style| E2[(blue text)]
|
|
F1((red text)) <-->|default style| F2((blue text))
|
|
G1>red text] <-->|default style| G2>blue text]
|
|
H1{red text} <-->|default style| H2{blue text}
|
|
I1{{red text}} <-->|default style| I2{{blue text}}
|
|
J1[/red text/] <-->|default style| J2[/blue text/]
|
|
K1[\red text\] <-->|default style| K2[\blue text\]
|
|
L1[/red text\] <-->|default style| L2[/blue text\]
|
|
M1[\red text/] <-->|default style| M2[\blue text/]
|
|
N1[red text] <-->|default style| N2[blue text]
|
|
linkStyle default color:Sienna;
|
|
style A1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style B1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style C1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style D1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style E1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style F1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style G1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style H1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style I1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style J1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style K1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style L1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style M1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style N1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style A2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
style B2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
style C2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
style D2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
style E2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
style F2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
style G2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
style H2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
style I2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
style J2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
style K2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
style L2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
</pre>
|
|
<hr />
|
|
|
|
<h2>Sample 19</h2>
|
|
<h3>graph</h3>
|
|
<pre class="mermaid">
|
|
graph TB
|
|
A1[red text] -->|default style| A2[blue text]
|
|
B1(red text) -->|default style| B2(blue text)
|
|
C1([red text]) -->|default style| C2([blue text])
|
|
D1[[red text]] -->|default style| D2[[blue text]]
|
|
E1[(red text)] -->|default style| E2[(blue text)]
|
|
F1((red text)) -->|default style| F2((blue text))
|
|
G1>red text] -->|default style| G2>blue text]
|
|
H1{red text} -->|default style| H2{blue text}
|
|
I1{{red text}} -->|default style| I2{{blue text}}
|
|
J1[/red text/] -->|default style| J2[/blue text/]
|
|
K1[\red text\] -->|default style| K2[\blue text\]
|
|
L1[/red text\] -->|default style| L2[/blue text\]
|
|
M1[\red text/] -->|default style| M2[\blue text/]
|
|
N1[red text] -->|default style| N2[blue text]
|
|
linkStyle default color:Sienna;
|
|
style A1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style B1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style C1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style D1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style E1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style F1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style G1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style H1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style I1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style J1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style K1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style L1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style M1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style N1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style A2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
style B2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
style C2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
style D2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
style E2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
style F2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
style G2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
style H2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
style I2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
style J2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
style K2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
style L2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
</pre>
|
|
<hr />
|
|
|
|
<h3>flowchart</h3>
|
|
<pre class="mermaid">
|
|
flowchart TB
|
|
A1[red text] <-->|default style| A2[blue text]
|
|
B1(red text) <-->|default style| B2(blue text)
|
|
C1([red text]) <-->|default style| C2([blue text])
|
|
D1[[red text]] <-->|default style| D2[[blue text]]
|
|
E1[(red text)] <-->|default style| E2[(blue text)]
|
|
F1((red text)) <-->|default style| F2((blue text))
|
|
G1>red text] <-->|default style| G2>blue text]
|
|
H1{red text} <-->|default style| H2{blue text}
|
|
I1{{red text}} <-->|default style| I2{{blue text}}
|
|
J1[/red text/] <-->|default style| J2[/blue text/]
|
|
K1[\red text\] <-->|default style| K2[\blue text\]
|
|
L1[/red text\] <-->|default style| L2[/blue text\]
|
|
M1[\red text/] <-->|default style| M2[\blue text/]
|
|
N1[red text] <-->|default style| N2[blue text]
|
|
O1(((red text))) <-->|default style| O2(((blue text)))
|
|
linkStyle default color:Sienna;
|
|
style A1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style B1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style C1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style D1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style E1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style F1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style G1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style H1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style I1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style J1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style K1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style L1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style M1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style N1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style O1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style A2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
style B2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
style C2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
style D2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
style E2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
style F2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
style G2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
style H2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
style I2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
style J2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
style K2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
style L2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
style O2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
</pre>
|
|
<hr />
|
|
|
|
<hr />
|
|
|
|
<pre class="mermaid">
|
|
graph LR
|
|
sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
|
|
|
|
提交申请
|
|
熊大
|
|
"];
|
|
class sid-B3655226-6C29-4D00-B685-3D5C734DC7E1 node-executed;
|
|
sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A["
|
|
负责人审批
|
|
强子
|
|
"];
|
|
class sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A node-executed;
|
|
sid-E27C0367-E6D6-497F-9736-3CDC21FDE221["
|
|
DBA审批
|
|
强子
|
|
"];
|
|
class sid-E27C0367-E6D6-497F-9736-3CDC21FDE221 node-executed;
|
|
sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD["
|
|
SA审批
|
|
阿美
|
|
"];
|
|
class sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD node-executed;
|
|
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7["
|
|
主管审批
|
|
光头强
|
|
"];
|
|
class sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7 node-executed;
|
|
sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89["
|
|
DBA确认
|
|
强子
|
|
"];
|
|
class sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89 node-executed;
|
|
sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937["
|
|
SA确认
|
|
阿美
|
|
"];
|
|
class sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937 node-executed;
|
|
sid-4FC27B48-A6F9-460A-A675-021F5854FE22["
|
|
结束
|
|
"];
|
|
class sid-4FC27B48-A6F9-460A-A675-021F5854FE22 node-executed;
|
|
sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E["
|
|
SA执行1
|
|
强子
|
|
"];
|
|
class sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E node-executed;
|
|
sid-6C2120F3-D940-4958-A067-0903DCE879C4["
|
|
SA执行2
|
|
强子
|
|
"];
|
|
class sid-6C2120F3-D940-4958-A067-0903DCE879C4 node-executed;
|
|
sid-9180E2A0-5C4B-435F-B42F-0D152470A338["
|
|
DBA执行1
|
|
强子
|
|
"];
|
|
class sid-9180E2A0-5C4B-435F-B42F-0D152470A338 node-executed;
|
|
sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD["
|
|
DBA执行3
|
|
强子
|
|
"];
|
|
class sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD node-executed;
|
|
sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756["
|
|
DBA执行2
|
|
强子
|
|
"];
|
|
class sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756 node-executed;
|
|
sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93["
|
|
DBA执行4
|
|
强子
|
|
"];
|
|
class sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93 node-executed;
|
|
sid-1897B30A-9C5C-4D5B-B80B-76A038785070["
|
|
负责人确认
|
|
梁静茹
|
|
"];
|
|
class sid-1897B30A-9C5C-4D5B-B80B-76A038785070 node-executed;
|
|
sid-B3655226-6C29-4D00-B685-3D5C734DC7E1-->sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7;
|
|
sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A-->sid-1897B30A-9C5C-4D5B-B80B-76A038785070;
|
|
sid-E27C0367-E6D6-497F-9736-3CDC21FDE221-->sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89;
|
|
sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD-->sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937;
|
|
sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E-->sid-6C2120F3-D940-4958-A067-0903DCE879C4;
|
|
sid-9180E2A0-5C4B-435F-B42F-0D152470A338-->sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756;
|
|
sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD-->sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93;
|
|
sid-6C2120F3-D940-4958-A067-0903DCE879C4-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
|
|
sid-1897B30A-9C5C-4D5B-B80B-76A038785070-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
|
|
sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E;
|
|
sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89-->sid-9180E2A0-5C4B-435F-B42F-0D152470A338;
|
|
sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89-->sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD;
|
|
sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
|
|
sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
|
|
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD;
|
|
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-E27C0367-E6D6-497F-9736-3CDC21FDE221;
|
|
sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-6C2120F3-D940-4958-A067-0903DCE879C4;
|
|
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
|
|
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
|
|
</pre>
|
|
<hr />
|
|
|
|
<pre class="mermaid">
|
|
graph TD
|
|
A[Christmas] -->|Get money| B(Go shopping)
|
|
B --> C{Let me thinksssssx<br />sssssssssssssssssssuuu<br />tttsssssssssssssssssssssss}
|
|
C -->|One| D[Laptop]
|
|
C -->|Two| E[iPhone]
|
|
C -->|Three| F[Car]
|
|
</pre>
|
|
<hr />
|
|
|
|
<pre class="mermaid">
|
|
graph TD
|
|
A[/Christmas\]
|
|
A -->|Get money| B[\Go shopping/]
|
|
B --> C{Let me thinksssss<br />ssssssssssssssssssssss<br />sssssssssssssssssssssssssss}
|
|
C -->|One| D[/Laptop/]
|
|
C -->|Two| E[\iPhone\]
|
|
C -->|Three| F[Car]
|
|
</pre>
|
|
<hr />
|
|
|
|
<pre class="mermaid">
|
|
graph LR
|
|
47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget)
|
|
37(SAM.CommonFA.BudgetSubserviceLineVolume)-->48(SAM.CommonFA.CommonFAFinanceBudget)
|
|
35(SAM.CommonFA.PopulationFME)-->47(SAM.CommonFA.FMESummary)
|
|
41(SAM.CommonFA.MetricCost)-->47(SAM.CommonFA.FMESummary)
|
|
44(SAM.CommonFA.MetricOutliers)-->47(SAM.CommonFA.FMESummary)
|
|
46(SAM.CommonFA.MetricOpportunity)-->47(SAM.CommonFA.FMESummary)
|
|
40(SAM.CommonFA.OPVisits)-->47(SAM.CommonFA.FMESummary)
|
|
38(SAM.CommonFA.CommonFAFinanceRefund)-->47(SAM.CommonFA.FMESummary)
|
|
43(SAM.CommonFA.CommonFAFinancePicuDays)-->47(SAM.CommonFA.FMESummary)
|
|
42(SAM.CommonFA.CommonFAFinanceNurseryDays)-->47(SAM.CommonFA.FMESummary)
|
|
45(SAM.CommonFA.MetricPreOpportunity)-->46(SAM.CommonFA.MetricOpportunity)
|
|
35(SAM.CommonFA.PopulationFME)-->45(SAM.CommonFA.MetricPreOpportunity)
|
|
41(SAM.CommonFA.MetricCost)-->45(SAM.CommonFA.MetricPreOpportunity)
|
|
41(SAM.CommonFA.MetricCost)-->44(SAM.CommonFA.MetricOutliers)
|
|
39(SAM.CommonFA.ChargeDetails)-->43(SAM.CommonFA.CommonFAFinancePicuDays)
|
|
39(SAM.CommonFA.ChargeDetails)-->42(SAM.CommonFA.CommonFAFinanceNurseryDays)
|
|
39(SAM.CommonFA.ChargeDetails)-->41(SAM.CommonFA.MetricCost)
|
|
39(SAM.CommonFA.ChargeDetails)-->40(SAM.CommonFA.OPVisits)
|
|
35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
|
|
36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
|
|
</pre>
|
|
<hr />
|
|
|
|
<pre class="mermaid">
|
|
graph TD
|
|
9e122290_1ec3_e711_8c5a_005056ad0002("fa:fa-creative-commons My System | Test Environment")
|
|
82072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 1")
|
|
db052290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 2")
|
|
4e112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Report Server:Service 1")
|
|
30122290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Report Server:Service 2")
|
|
5e112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Dedicated Test Business Logic Server:Service 1")
|
|
c1112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Dedicated Test Business Logic Server:Service 2")
|
|
b7042290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[SupportDb]")
|
|
8f102290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[DevelopmentDb]")
|
|
0e102290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[TestDb]")
|
|
07132290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[SharedReportingDb]")
|
|
c7072290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Shared Business Logic Server")
|
|
ca122290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Shared Report Server")
|
|
68102290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Dedicated Test Business Logic Server")
|
|
f4112290_1ec3_e711_8c5a_005056ad0002("fa:fa-database [DBServer\SharedDbInstance]")
|
|
d6072290_1ec3_e711_8c5a_005056ad0002("fa:fa-server DBServer")
|
|
71082290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:MSSQLSERVER")
|
|
c0102290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:SQLAgent")
|
|
9a072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:SQLBrowser")
|
|
1d0a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost1")
|
|
200a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost2")
|
|
1c0a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost3")
|
|
9e122290_1ec3_e711_8c5a_005056ad0002-->82072290_1ec3_e711_8c5a_005056ad0002
|
|
9e122290_1ec3_e711_8c5a_005056ad0002-->db052290_1ec3_e711_8c5a_005056ad0002
|
|
9e122290_1ec3_e711_8c5a_005056ad0002-->4e112290_1ec3_e711_8c5a_005056ad0002
|
|
9e122290_1ec3_e711_8c5a_005056ad0002-->30122290_1ec3_e711_8c5a_005056ad0002
|
|
9e122290_1ec3_e711_8c5a_005056ad0002-->5e112290_1ec3_e711_8c5a_005056ad0002
|
|
9e122290_1ec3_e711_8c5a_005056ad0002-->c1112290_1ec3_e711_8c5a_005056ad0002
|
|
82072290_1ec3_e711_8c5a_005056ad0002-->b7042290_1ec3_e711_8c5a_005056ad0002
|
|
82072290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
|
|
82072290_1ec3_e711_8c5a_005056ad0002-->0e102290_1ec3_e711_8c5a_005056ad0002
|
|
82072290_1ec3_e711_8c5a_005056ad0002-->c7072290_1ec3_e711_8c5a_005056ad0002
|
|
db052290_1ec3_e711_8c5a_005056ad0002-->c7072290_1ec3_e711_8c5a_005056ad0002
|
|
db052290_1ec3_e711_8c5a_005056ad0002-->82072290_1ec3_e711_8c5a_005056ad0002
|
|
4e112290_1ec3_e711_8c5a_005056ad0002-->b7042290_1ec3_e711_8c5a_005056ad0002
|
|
4e112290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
|
|
4e112290_1ec3_e711_8c5a_005056ad0002-->0e102290_1ec3_e711_8c5a_005056ad0002
|
|
4e112290_1ec3_e711_8c5a_005056ad0002-->07132290_1ec3_e711_8c5a_005056ad0002
|
|
4e112290_1ec3_e711_8c5a_005056ad0002-->ca122290_1ec3_e711_8c5a_005056ad0002
|
|
30122290_1ec3_e711_8c5a_005056ad0002-->ca122290_1ec3_e711_8c5a_005056ad0002
|
|
30122290_1ec3_e711_8c5a_005056ad0002-->4e112290_1ec3_e711_8c5a_005056ad0002
|
|
5e112290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
|
|
5e112290_1ec3_e711_8c5a_005056ad0002-->68102290_1ec3_e711_8c5a_005056ad0002
|
|
c1112290_1ec3_e711_8c5a_005056ad0002-->68102290_1ec3_e711_8c5a_005056ad0002
|
|
c1112290_1ec3_e711_8c5a_005056ad0002-->5e112290_1ec3_e711_8c5a_005056ad0002
|
|
b7042290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
|
|
8f102290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
|
|
0e102290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
|
|
07132290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
|
|
c7072290_1ec3_e711_8c5a_005056ad0002-->1d0a2290_1ec3_e711_8c5a_005056ad0002
|
|
ca122290_1ec3_e711_8c5a_005056ad0002-->200a2290_1ec3_e711_8c5a_005056ad0002
|
|
68102290_1ec3_e711_8c5a_005056ad0002-->1c0a2290_1ec3_e711_8c5a_005056ad0002
|
|
f4112290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
|
|
f4112290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
|
|
f4112290_1ec3_e711_8c5a_005056ad0002-->c0102290_1ec3_e711_8c5a_005056ad0002
|
|
f4112290_1ec3_e711_8c5a_005056ad0002-->9a072290_1ec3_e711_8c5a_005056ad0002
|
|
d6072290_1ec3_e711_8c5a_005056ad0002-->1c0a2290_1ec3_e711_8c5a_005056ad0002
|
|
71082290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
|
|
c0102290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
|
|
c0102290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
|
|
9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
|
|
9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
|
|
</pre>
|
|
<hr />
|
|
|
|
<pre class="mermaid">
|
|
graph TB
|
|
subgraph One
|
|
a1-->a2
|
|
end
|
|
</pre>
|
|
<hr />
|
|
|
|
<pre class="mermaid">
|
|
graph TB
|
|
A
|
|
B
|
|
subgraph foo[Foo SubGraph]
|
|
C
|
|
D
|
|
end
|
|
subgraph bar[Bar SubGraph]
|
|
E
|
|
F
|
|
end
|
|
G
|
|
|
|
A-->B
|
|
B-->C
|
|
C-->D
|
|
B-->D
|
|
D-->E
|
|
E-->A
|
|
E-->F
|
|
F-->D
|
|
F-->G
|
|
B-->G
|
|
G-->D
|
|
|
|
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
|
|
style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
|
|
</pre>
|
|
<hr />
|
|
|
|
<pre class="mermaid">
|
|
graph LR
|
|
456ac9b0d15a8b7f1e71073221059886[1051 AAA fa:fa-check]
|
|
f7f580e11d00a75814d2ded41fe8e8fe[1141 BBB fa:fa-check]
|
|
81dc9bdb52d04dc20036dbd8313ed055[1234 CCC fa:fa-check]
|
|
456ac9b0d15a8b7f1e71073221059886 -->|Node| f7f580e11d00a75814d2ded41fe8e8fe
|
|
f7f580e11d00a75814d2ded41fe8e8fe -->|Node| 81dc9bdb52d04dc20036dbd8313ed055
|
|
click 456ac9b0d15a8b7f1e71073221059886 "/admin/user/view?id=1051" "AAA
|
|
6000"
|
|
click f7f580e11d00a75814d2ded41fe8e8fe "/admin/user/view?id=1141" "BBB
|
|
600"
|
|
click 81dc9bdb52d04dc20036dbd8313ed055 "/admin/user/view?id=1234" "CCC
|
|
3000"
|
|
style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
|
|
</pre>
|
|
<hr />
|
|
|
|
<pre class="mermaid">
|
|
graph TD
|
|
A[Christmas] -->|Get money| B(Go shopping)
|
|
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?}}
|
|
C -->|One| D[Laptop]
|
|
C -->|Two| E[iPhone]
|
|
C -->|Three| F[Car]
|
|
click A "index.html#link-clicked" "link test"
|
|
click B testClick "click test"
|
|
classDef someclass fill:#f96;
|
|
class A someclass;
|
|
class C someclass;
|
|
</pre>
|
|
<hr />
|
|
|
|
<pre class="mermaid">
|
|
graph TD
|
|
A([stadium shape test])
|
|
A -->|Get money| B([Go shopping])
|
|
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?])
|
|
C -->|One| D([Laptop])
|
|
C -->|Two| E([iPhone])
|
|
C -->|Three| F([Car<br />wroom wroom])
|
|
click A "index.html#link-clicked" "link test"
|
|
click B testClick "click test"
|
|
classDef someclass fill:#f96;
|
|
class A someclass;
|
|
class C someclass;
|
|
</pre>
|
|
<hr />
|
|
|
|
<pre class="mermaid">
|
|
graph LR
|
|
A[[subroutine shape test]]
|
|
A -->|Get money| B[[Go shopping]]
|
|
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?]]
|
|
C -->|One| D[[Laptop]]
|
|
C -->|Two| E[[iPhone]]
|
|
C -->|Three| F[[Car<br />wroom wroom]]
|
|
click A "index.html#link-clicked" "link test"
|
|
click B testClick "click test"
|
|
classDef someclass fill:#f96;
|
|
class A someclass;
|
|
class C someclass;
|
|
</pre>
|
|
<hr />
|
|
|
|
<pre class="mermaid">
|
|
graph LR
|
|
A[(cylindrical<br />shape<br />test)]
|
|
A -->|Get money| B1[(Go shopping 1)]
|
|
A -->|Get money| B2[(Go shopping 2)]
|
|
A -->|Get money| B3[(Go shopping 3)]
|
|
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?)]
|
|
B1 --> C
|
|
B2 --> C
|
|
B3 --> C
|
|
C -->|One| D[(Laptop)]
|
|
C -->|Two| E[(iPhone)]
|
|
C -->|Three| F[(Car)]
|
|
click A "index.html#link-clicked" "link test"
|
|
click B testClick "click test"
|
|
classDef someclass fill:#f96;
|
|
class A someclass;
|
|
</pre>
|
|
<hr />
|
|
|
|
<pre class="mermaid">
|
|
graph LR
|
|
A1[Multi<br>Line] -->|Multi<br>Line| B1(Multi<br>Line)
|
|
C1[Multi<br />Line] -->|Multi<br />Line| D1(Multi<br />Line)
|
|
E1[Multi<br />Line] -->|Multi<br />Line| F1(Multi<br />Line)
|
|
A2[Multi<br>Line] -->|Multi<br>Line| B2(Multi<br>Line)
|
|
C2[Multi<br />Line] -->|Multi<br />Line| D2(Multi<br />Line)
|
|
E2[Multi<br />Line] -->|Multi<br />Line| F2(Multi<br />Line)
|
|
linkStyle 0 stroke:DarkGray,stroke-width:2px
|
|
linkStyle 1 stroke:DarkGray,stroke-width:2px
|
|
linkStyle 2 stroke:DarkGray,stroke-width:2px
|
|
</pre>
|
|
<hr />
|
|
|
|
<pre class="mermaid">
|
|
graph LR
|
|
A(( )) -->|step 1| B(( ))
|
|
B(( )) -->|step 2| C(( ))
|
|
C(( )) -->|step 3| D(( ))
|
|
linkStyle 1 stroke:greenyellow,stroke-width:2px
|
|
style C fill:greenyellow,stroke:green,stroke-width:4px
|
|
</pre>
|
|
<hr />
|
|
|
|
<pre class="mermaid">
|
|
graph TB
|
|
TITLE["Link Click Events<br>(click the nodes below)"]
|
|
A["link test (open in same tab)"]
|
|
B["link test (open in new tab)"]
|
|
C[anchor test]
|
|
D[mailto test]
|
|
E[other protocol test]
|
|
F[script test]
|
|
TITLE --> A & B & C & D & E & F
|
|
click A "https://mermaid-js.github.io/mermaid/#/" "link test (open in same tab)"
|
|
click B "https://mermaid-js.github.io/mermaid/#/" "link test (open in new tab)" _blank
|
|
click C "#link-clicked"
|
|
click D "mailto:user@user.user" "mailto test"
|
|
click E "notes://do-your-thing/id" "other protocol test"
|
|
click F "javascript:alert('test')" "script test"
|
|
</pre>
|
|
<hr />
|
|
|
|
<pre class="mermaid">
|
|
graph LR
|
|
A[red<br>text] -->|red<br>text| B(blue<br>text)
|
|
C[/red<br />text/] -->|blue<br />text| D{blue<br />text}
|
|
E{{default<br />style}} -->|default<br />style| F([default<br />style])
|
|
linkStyle default color:Sienna;
|
|
linkStyle 0 color:red;
|
|
linkStyle 1 stroke:DarkGray,stroke-width:2px,color:#0000ff
|
|
style A color:red;
|
|
style B color:blue;
|
|
style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
|
style D stroke:#0000ff,fill:#ccccff,color:#0000ff
|
|
click B "index.html#link-clicked" "link test"
|
|
click D testClick "click test"
|
|
</pre>
|
|
<hr />
|
|
|
|
<pre class="mermaid">
|
|
graph TD
|
|
A[myClass1] --> B[default] & C[default]
|
|
B[default] & C[default] --> D[myClass2]
|
|
classDef default stroke-width:2px,fill:none,stroke:silver
|
|
classDef node color:red
|
|
classDef myClass1 color:#0000ff
|
|
classDef myClass2 stroke:#0000ff,fill:#ccccff
|
|
class A myClass1
|
|
class D myClass2
|
|
</pre>
|
|
<hr />
|
|
|
|
<pre class="mermaid">
|
|
graph TD
|
|
A([Start]) ==> B[Step 1]
|
|
B ==> C{Flow 1}
|
|
C -- Choice 1.1 --> D[Step 2.1]
|
|
C -- Choice 1.3 --> I[Step 2.3]
|
|
C == Choice 1.2 ==> E[Step 2.2]
|
|
D --> F{Flow 2}
|
|
E ==> F{Flow 2}
|
|
F{Flow 2} == Choice 2.1 ==> H[Feedback node]
|
|
H[Feedback node] ==> B[Step 1]
|
|
F{Flow 2} == Choice 2.2 ==> G((Finish))
|
|
|
|
linkStyle 0,1,4,6,7,8,9 stroke:gold, stroke-width:4px
|
|
|
|
classDef active_node fill:#0CF,stroke:#09F,stroke-width:6px
|
|
classDef unactive_node fill:#e0e0e0,stroke:#bdbdbd,stroke-width:3px
|
|
classDef bugged_node fill:#F88,stroke:#F22,stroke-width:3px
|
|
classDef start_node,finish_node fill:#3B1,stroke:#391,stroke-width:8px
|
|
|
|
class A start_node;
|
|
class B,C,E,F,H active_node;
|
|
class D unactive_node;
|
|
class G finish_node;
|
|
class I bugged_node
|
|
</pre>
|
|
<hr />
|
|
|
|
<h1 id="link-clicked">Anchor for "link-clicked" test</h1>
|
|
|
|
<script type="module">
|
|
import mermaid from './mermaid.esm.mjs';
|
|
mermaid.initialize({
|
|
theme: 'forest',
|
|
logLevel: 3,
|
|
securityLevel: 'loose',
|
|
flowchart: { curve: 'basis' },
|
|
});
|
|
</script>
|
|
<script>
|
|
function testClick(nodeId) {
|
|
console.log('clicked', nodeId);
|
|
let originalBgColor = document.querySelector('body').style.backgroundColor;
|
|
document.querySelector('body').style.backgroundColor = 'yellow';
|
|
setTimeout(function () {
|
|
document.querySelector('body').style.backgroundColor = originalBgColor;
|
|
}, 100);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|