collab/mermaid/demos/flowchart.htmlblame
View source
6dd74de1<!doctype html>
6dd74de2<html lang="en">
6dd74de3 <head>
6dd74de4 <meta charset="utf-8" />
6dd74de5 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6dd74de6 <title>Mermaid Quick Flowchart Test Page</title>
6dd74de7 <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
6dd74de8 <style>
6dd74de9 div.mermaid {
6dd74de10 /* font-family: 'trebuchet ms', verdana, arial; */
6dd74de11 font-family: 'Courier New', Courier, monospace !important;
6dd74de12 }
6dd74de13 </style>
6dd74de14 </head>
6dd74de15 <body>
6dd74de16 <h1>Comparison "graph vs. flowchart"</h1>
6dd74de17 <h2>Sample 1</h2>
6dd74de18 <h3>graph</h3>
6dd74de19 <pre class="mermaid">
6dd74de20 ---
6dd74de21 title: This is a complicated flow
6dd74de22 ---
6dd74de23 graph LR
6dd74de24 accTitle: This is a complicated flow
6dd74de25 accDescr: This is the description for the complicated flow.
6dd74de26
6dd74de27 sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
6dd74de28
6dd74de29 提交申请
6dd74de30 熊大
6dd74de31 "];
6dd74de32 class sid-B3655226-6C29-4D00-B685-3D5C734DC7E1 node-executed;
6dd74de33 sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A["
6dd74de34 负责人审批
6dd74de35 强子
6dd74de36 "];
6dd74de37 class sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A node-executed;
6dd74de38 sid-E27C0367-E6D6-497F-9736-3CDC21FDE221["
6dd74de39 DBA审批
6dd74de40 强子
6dd74de41 "];
6dd74de42 class sid-E27C0367-E6D6-497F-9736-3CDC21FDE221 node-executed;
6dd74de43 sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD["
6dd74de44 SA审批
6dd74de45 阿美
6dd74de46 "];
6dd74de47 class sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD node-executed;
6dd74de48 sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7["
6dd74de49 主管审批
6dd74de50 光头强
6dd74de51 "];
6dd74de52 class sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7 node-executed;
6dd74de53 sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89["
6dd74de54 DBA确认
6dd74de55 强子
6dd74de56 "];
6dd74de57 class sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89 node-executed;
6dd74de58 sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937["
6dd74de59 SA确认
6dd74de60 阿美
6dd74de61 "];
6dd74de62 class sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937 node-executed;
6dd74de63 sid-4FC27B48-A6F9-460A-A675-021F5854FE22["
6dd74de64 结束
6dd74de65 "];
6dd74de66 class sid-4FC27B48-A6F9-460A-A675-021F5854FE22 node-executed;
6dd74de67 sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E["
6dd74de68 SA执行1
6dd74de69 强子
6dd74de70 "];
6dd74de71 class sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E node-executed;
6dd74de72 sid-6C2120F3-D940-4958-A067-0903DCE879C4["
6dd74de73 SA执行2
6dd74de74 强子
6dd74de75 "];
6dd74de76 class sid-6C2120F3-D940-4958-A067-0903DCE879C4 node-executed;
6dd74de77 sid-9180E2A0-5C4B-435F-B42F-0D152470A338["
6dd74de78 DBA执行1
6dd74de79 强子
6dd74de80 "];
6dd74de81 class sid-9180E2A0-5C4B-435F-B42F-0D152470A338 node-executed;
6dd74de82 sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD["
6dd74de83 DBA执行3
6dd74de84 强子
6dd74de85 "];
6dd74de86 class sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD node-executed;
6dd74de87 sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756["
6dd74de88 DBA执行2
6dd74de89 强子
6dd74de90 "];
6dd74de91 class sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756 node-executed;
6dd74de92 sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93["
6dd74de93 DBA执行4
6dd74de94 强子
6dd74de95 "];
6dd74de96 class sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93 node-executed;
6dd74de97 sid-1897B30A-9C5C-4D5B-B80B-76A038785070["
6dd74de98 负责人确认
6dd74de99 梁静茹
6dd74de100 "];
6dd74de101 class sid-1897B30A-9C5C-4D5B-B80B-76A038785070 node-executed;
6dd74de102 sid-B3655226-6C29-4D00-B685-3D5C734DC7E1-->sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7;
6dd74de103 sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A-->sid-1897B30A-9C5C-4D5B-B80B-76A038785070;
6dd74de104 sid-E27C0367-E6D6-497F-9736-3CDC21FDE221-->sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89;
6dd74de105 sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD-->sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937;
6dd74de106 sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E-->sid-6C2120F3-D940-4958-A067-0903DCE879C4;
6dd74de107 sid-9180E2A0-5C4B-435F-B42F-0D152470A338-->sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756;
6dd74de108 sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD-->sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93;
6dd74de109 sid-6C2120F3-D940-4958-A067-0903DCE879C4-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
6dd74de110 sid-1897B30A-9C5C-4D5B-B80B-76A038785070-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
6dd74de111 sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E;
6dd74de112 sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89-->sid-9180E2A0-5C4B-435F-B42F-0D152470A338;
6dd74de113 sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89-->sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD;
6dd74de114 sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
6dd74de115 sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
6dd74de116 sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD;
6dd74de117 sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-E27C0367-E6D6-497F-9736-3CDC21FDE221;
6dd74de118 sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-6C2120F3-D940-4958-A067-0903DCE879C4;
6dd74de119 sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
6dd74de120 sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
6dd74de121 </pre>
6dd74de122 <hr />
6dd74de123
6dd74de124 <h3>flowchart</h3>
6dd74de125 <pre class="mermaid">
6dd74de126 ---
6dd74de127 title: This is another complicated flow
6dd74de128 config:
6dd74de129 theme: base
6dd74de130 flowchart:
6dd74de131 curve: cardinal
6dd74de132 ---
6dd74de133 flowchart LR
6dd74de134 sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
6dd74de135
6dd74de136 提交申请
6dd74de137 熊大
6dd74de138 "];
6dd74de139 class sid-B3655226-6C29-4D00-B685-3D5C734DC7E1 node-executed;
6dd74de140 sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A["
6dd74de141 负责人审批
6dd74de142 强子
6dd74de143 "];
6dd74de144 class sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A node-executed;
6dd74de145 sid-E27C0367-E6D6-497F-9736-3CDC21FDE221["
6dd74de146 DBA审批
6dd74de147 强子
6dd74de148 "];
6dd74de149 class sid-E27C0367-E6D6-497F-9736-3CDC21FDE221 node-executed;
6dd74de150 sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD["
6dd74de151 SA审批
6dd74de152 阿美
6dd74de153 "];
6dd74de154 class sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD node-executed;
6dd74de155 sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7["
6dd74de156 主管审批
6dd74de157 光头强
6dd74de158 "];
6dd74de159 class sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7 node-executed;
6dd74de160 sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89["
6dd74de161 DBA确认
6dd74de162 强子
6dd74de163 "];
6dd74de164 class sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89 node-executed;
6dd74de165 sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937["
6dd74de166 SA确认
6dd74de167 阿美
6dd74de168 "];
6dd74de169 class sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937 node-executed;
6dd74de170 sid-4FC27B48-A6F9-460A-A675-021F5854FE22["
6dd74de171 结束
6dd74de172 "];
6dd74de173 class sid-4FC27B48-A6F9-460A-A675-021F5854FE22 node-executed;
6dd74de174 sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E["
6dd74de175 SA执行1
6dd74de176 强子
6dd74de177 "];
6dd74de178 class sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E node-executed;
6dd74de179 sid-6C2120F3-D940-4958-A067-0903DCE879C4["
6dd74de180 SA执行2
6dd74de181 强子
6dd74de182 "];
6dd74de183 class sid-6C2120F3-D940-4958-A067-0903DCE879C4 node-executed;
6dd74de184 sid-9180E2A0-5C4B-435F-B42F-0D152470A338["
6dd74de185 DBA执行1
6dd74de186 强子
6dd74de187 "];
6dd74de188 class sid-9180E2A0-5C4B-435F-B42F-0D152470A338 node-executed;
6dd74de189 sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD["
6dd74de190 DBA执行3
6dd74de191 强子
6dd74de192 "];
6dd74de193 class sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD node-executed;
6dd74de194 sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756["
6dd74de195 DBA执行2
6dd74de196 强子
6dd74de197 "];
6dd74de198 class sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756 node-executed;
6dd74de199 sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93["
6dd74de200 DBA执行4
6dd74de201 强子
6dd74de202 "];
6dd74de203 class sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93 node-executed;
6dd74de204 sid-1897B30A-9C5C-4D5B-B80B-76A038785070["
6dd74de205 负责人确认
6dd74de206 梁静茹
6dd74de207 "];
6dd74de208 class sid-1897B30A-9C5C-4D5B-B80B-76A038785070 node-executed;
6dd74de209 sid-B3655226-6C29-4D00-B685-3D5C734DC7E1-->sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7;
6dd74de210 sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A-->sid-1897B30A-9C5C-4D5B-B80B-76A038785070;
6dd74de211 sid-E27C0367-E6D6-497F-9736-3CDC21FDE221-->sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89;
6dd74de212 sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD-->sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937;
6dd74de213 sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E-->sid-6C2120F3-D940-4958-A067-0903DCE879C4;
6dd74de214 sid-9180E2A0-5C4B-435F-B42F-0D152470A338-->sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756;
6dd74de215 sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD-->sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93;
6dd74de216 sid-6C2120F3-D940-4958-A067-0903DCE879C4-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
6dd74de217 sid-1897B30A-9C5C-4D5B-B80B-76A038785070-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
6dd74de218 sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E;
6dd74de219 sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89-->sid-9180E2A0-5C4B-435F-B42F-0D152470A338;
6dd74de220 sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89-->sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD;
6dd74de221 sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
6dd74de222 sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
6dd74de223 sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD;
6dd74de224 sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-E27C0367-E6D6-497F-9736-3CDC21FDE221;
6dd74de225 sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-6C2120F3-D940-4958-A067-0903DCE879C4;
6dd74de226 sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
6dd74de227 sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
6dd74de228 </pre>
6dd74de229 <hr />
6dd74de230
6dd74de231 <h2>Sample 2</h2>
6dd74de232 <h3>graph</h3>
6dd74de233 <pre class="mermaid">
6dd74de234 ---
6dd74de235 title: What to buy
6dd74de236 ---
6dd74de237 graph TD
6dd74de238 accTitle: What to buy
6dd74de239 accDescr: Options of what to buy with Christmas money
6dd74de240 A[Christmas] -->|Get money| B(Go shopping)
6dd74de241 B --> C{Let me thinksssssx<br/>sssssssssssssssssssuuu<br />tttsssssssssssssssssssssss}
6dd74de242 C -->|One| D[Laptop]
6dd74de243 C -->|Two| E[iPhone]
6dd74de244 C -->|Three| F[Car]
6dd74de245 </pre>
6dd74de246 <hr />
6dd74de247
6dd74de248 <h3>flowchart</h3>
6dd74de249 <pre class="mermaid">
6dd74de250 flowchart TD
6dd74de251 accTitle: What to buy
6dd74de252 accDescr: Options of what to buy with Christmas money
6dd74de253 A[Christmas] -->|Get money| B(Go shopping)
6dd74de254 B --> C{Let me thinksssssx<br/>sssssssssssssssssssuuu<br />tttsssssssssssssssssssssss}
6dd74de255 C -->|One| D[Laptop]
6dd74de256 C -->|Two| E[iPhone]
6dd74de257 C -->|Three| F[Car]
6dd74de258 </pre>
6dd74de259 <hr />
6dd74de260
6dd74de261 <h2>Sample 3</h2>
6dd74de262 <h3>graph</h3>
6dd74de263 <pre class="mermaid">
6dd74de264 graph TD
6dd74de265 A[/Christmas\]
6dd74de266 A -->|Get money| B[\Go shopping/]
6dd74de267 B --> C{Let me thinksssss<br/>ssssssssssssssssssssss<br/>sssssssssssssssssssssssssss}
6dd74de268 C -->|One| D[/Laptop/]
6dd74de269 C -->|Two| E[\iPhone\]
6dd74de270 C -->|Three| F[Car]
6dd74de271 </pre>
6dd74de272 <hr />
6dd74de273
6dd74de274 <h3>flowchart</h3>
6dd74de275 <pre class="mermaid">
6dd74de276 flowchart TD
6dd74de277 A[/Christmas\]
6dd74de278 A -->|Get money| B[\Go shopping/]
6dd74de279 B --> C{Let me thinksssss<br/>ssssssssssssssssssssss<br/>sssssssssssssssssssssssssss}
6dd74de280 C -->|One| D[/Laptop/]
6dd74de281 C -->|Two| E[\iPhone\]
6dd74de282 C -->|Three| F[Car]
6dd74de283 </pre>
6dd74de284 <hr />
6dd74de285
6dd74de286 <h2>Sample 4</h2>
6dd74de287 <h3>graph</h3>
6dd74de288 <pre class="mermaid">
6dd74de289 graph LR
6dd74de290 47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget)
6dd74de291 37(SAM.CommonFA.BudgetSubserviceLineVolume)-->48(SAM.CommonFA.CommonFAFinanceBudget)
6dd74de292 35(SAM.CommonFA.PopulationFME)-->47(SAM.CommonFA.FMESummary)
6dd74de293 41(SAM.CommonFA.MetricCost)-->47(SAM.CommonFA.FMESummary)
6dd74de294 44(SAM.CommonFA.MetricOutliers)-->47(SAM.CommonFA.FMESummary)
6dd74de295 46(SAM.CommonFA.MetricOpportunity)-->47(SAM.CommonFA.FMESummary)
6dd74de296 40(SAM.CommonFA.OPVisits)-->47(SAM.CommonFA.FMESummary)
6dd74de297 38(SAM.CommonFA.CommonFAFinanceRefund)-->47(SAM.CommonFA.FMESummary)
6dd74de298 43(SAM.CommonFA.CommonFAFinancePicuDays)-->47(SAM.CommonFA.FMESummary)
6dd74de299 42(SAM.CommonFA.CommonFAFinanceNurseryDays)-->47(SAM.CommonFA.FMESummary)
6dd74de300 45(SAM.CommonFA.MetricPreOpportunity)-->46(SAM.CommonFA.MetricOpportunity)
6dd74de301 35(SAM.CommonFA.PopulationFME)-->45(SAM.CommonFA.MetricPreOpportunity)
6dd74de302 41(SAM.CommonFA.MetricCost)-->45(SAM.CommonFA.MetricPreOpportunity)
6dd74de303 41(SAM.CommonFA.MetricCost)-->44(SAM.CommonFA.MetricOutliers)
6dd74de304 39(SAM.CommonFA.ChargeDetails)-->43(SAM.CommonFA.CommonFAFinancePicuDays)
6dd74de305 39(SAM.CommonFA.ChargeDetails)-->42(SAM.CommonFA.CommonFAFinanceNurseryDays)
6dd74de306 39(SAM.CommonFA.ChargeDetails)-->41(SAM.CommonFA.MetricCost)
6dd74de307 39(SAM.CommonFA.ChargeDetails)-->40(SAM.CommonFA.OPVisits)
6dd74de308 35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
6dd74de309 36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
6dd74de310 </pre>
6dd74de311 <hr />
6dd74de312
6dd74de313 <h3>flowchart</h3>
6dd74de314 <pre class="mermaid">
6dd74de315 flowchart LR
6dd74de316 47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget)
6dd74de317 37(SAM.CommonFA.BudgetSubserviceLineVolume)-->48(SAM.CommonFA.CommonFAFinanceBudget)
6dd74de318 35(SAM.CommonFA.PopulationFME)-->47(SAM.CommonFA.FMESummary)
6dd74de319 41(SAM.CommonFA.MetricCost)-->47(SAM.CommonFA.FMESummary)
6dd74de320 44(SAM.CommonFA.MetricOutliers)-->47(SAM.CommonFA.FMESummary)
6dd74de321 46(SAM.CommonFA.MetricOpportunity)-->47(SAM.CommonFA.FMESummary)
6dd74de322 40(SAM.CommonFA.OPVisits)-->47(SAM.CommonFA.FMESummary)
6dd74de323 38(SAM.CommonFA.CommonFAFinanceRefund)-->47(SAM.CommonFA.FMESummary)
6dd74de324 43(SAM.CommonFA.CommonFAFinancePicuDays)-->47(SAM.CommonFA.FMESummary)
6dd74de325 42(SAM.CommonFA.CommonFAFinanceNurseryDays)-->47(SAM.CommonFA.FMESummary)
6dd74de326 45(SAM.CommonFA.MetricPreOpportunity)-->46(SAM.CommonFA.MetricOpportunity)
6dd74de327 35(SAM.CommonFA.PopulationFME)-->45(SAM.CommonFA.MetricPreOpportunity)
6dd74de328 41(SAM.CommonFA.MetricCost)-->45(SAM.CommonFA.MetricPreOpportunity)
6dd74de329 41(SAM.CommonFA.MetricCost)-->44(SAM.CommonFA.MetricOutliers)
6dd74de330 39(SAM.CommonFA.ChargeDetails)-->43(SAM.CommonFA.CommonFAFinancePicuDays)
6dd74de331 39(SAM.CommonFA.ChargeDetails)-->42(SAM.CommonFA.CommonFAFinanceNurseryDays)
6dd74de332 39(SAM.CommonFA.ChargeDetails)-->41(SAM.CommonFA.MetricCost)
6dd74de333 39(SAM.CommonFA.ChargeDetails)-->40(SAM.CommonFA.OPVisits)
6dd74de334 35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
6dd74de335 36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
6dd74de336 </pre>
6dd74de337 <hr />
6dd74de338
6dd74de339 <h2>Sample 5</h2>
6dd74de340 <h3>graph</h3>
6dd74de341 <pre class="mermaid">
6dd74de342 graph TD
6dd74de343 9e122290_1ec3_e711_8c5a_005056ad0002("fa:fa-creative-commons My System | Test Environment")
6dd74de344 82072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 1")
6dd74de345 db052290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 2")
6dd74de346 4e112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Report Server:Service 1")
6dd74de347 30122290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Report Server:Service 2")
6dd74de348 5e112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Dedicated Test Business Logic Server:Service 1")
6dd74de349 c1112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Dedicated Test Business Logic Server:Service 2")
6dd74de350 b7042290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[SupportDb]")
6dd74de351 8f102290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[DevelopmentDb]")
6dd74de352 0e102290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[TestDb]")
6dd74de353 07132290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[SharedReportingDb]")
6dd74de354 c7072290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Shared Business Logic Server")
6dd74de355 ca122290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Shared Report Server")
6dd74de356 68102290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Dedicated Test Business Logic Server")
6dd74de357 f4112290_1ec3_e711_8c5a_005056ad0002("fa:fa-database [DBServer\SharedDbInstance]")
6dd74de358 d6072290_1ec3_e711_8c5a_005056ad0002("fa:fa-server DBServer")
6dd74de359 71082290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:MSSQLSERVER")
6dd74de360 c0102290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:SQLAgent")
6dd74de361 9a072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:SQLBrowser")
6dd74de362 1d0a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost1")
6dd74de363 200a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost2")
6dd74de364 1c0a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost3")
6dd74de365 9e122290_1ec3_e711_8c5a_005056ad0002-->82072290_1ec3_e711_8c5a_005056ad0002
6dd74de366 9e122290_1ec3_e711_8c5a_005056ad0002-->db052290_1ec3_e711_8c5a_005056ad0002
6dd74de367 9e122290_1ec3_e711_8c5a_005056ad0002-->4e112290_1ec3_e711_8c5a_005056ad0002
6dd74de368 9e122290_1ec3_e711_8c5a_005056ad0002-->30122290_1ec3_e711_8c5a_005056ad0002
6dd74de369 9e122290_1ec3_e711_8c5a_005056ad0002-->5e112290_1ec3_e711_8c5a_005056ad0002
6dd74de370 9e122290_1ec3_e711_8c5a_005056ad0002-->c1112290_1ec3_e711_8c5a_005056ad0002
6dd74de371 82072290_1ec3_e711_8c5a_005056ad0002-->b7042290_1ec3_e711_8c5a_005056ad0002
6dd74de372 82072290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
6dd74de373 82072290_1ec3_e711_8c5a_005056ad0002-->0e102290_1ec3_e711_8c5a_005056ad0002
6dd74de374 82072290_1ec3_e711_8c5a_005056ad0002-->c7072290_1ec3_e711_8c5a_005056ad0002
6dd74de375 db052290_1ec3_e711_8c5a_005056ad0002-->c7072290_1ec3_e711_8c5a_005056ad0002
6dd74de376 db052290_1ec3_e711_8c5a_005056ad0002-->82072290_1ec3_e711_8c5a_005056ad0002
6dd74de377 4e112290_1ec3_e711_8c5a_005056ad0002-->b7042290_1ec3_e711_8c5a_005056ad0002
6dd74de378 4e112290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
6dd74de379 4e112290_1ec3_e711_8c5a_005056ad0002-->0e102290_1ec3_e711_8c5a_005056ad0002
6dd74de380 4e112290_1ec3_e711_8c5a_005056ad0002-->07132290_1ec3_e711_8c5a_005056ad0002
6dd74de381 4e112290_1ec3_e711_8c5a_005056ad0002-->ca122290_1ec3_e711_8c5a_005056ad0002
6dd74de382 30122290_1ec3_e711_8c5a_005056ad0002-->ca122290_1ec3_e711_8c5a_005056ad0002
6dd74de383 30122290_1ec3_e711_8c5a_005056ad0002-->4e112290_1ec3_e711_8c5a_005056ad0002
6dd74de384 5e112290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
6dd74de385 5e112290_1ec3_e711_8c5a_005056ad0002-->68102290_1ec3_e711_8c5a_005056ad0002
6dd74de386 c1112290_1ec3_e711_8c5a_005056ad0002-->68102290_1ec3_e711_8c5a_005056ad0002
6dd74de387 c1112290_1ec3_e711_8c5a_005056ad0002-->5e112290_1ec3_e711_8c5a_005056ad0002
6dd74de388 b7042290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
6dd74de389 8f102290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
6dd74de390 0e102290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
6dd74de391 07132290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
6dd74de392 c7072290_1ec3_e711_8c5a_005056ad0002-->1d0a2290_1ec3_e711_8c5a_005056ad0002
6dd74de393 ca122290_1ec3_e711_8c5a_005056ad0002-->200a2290_1ec3_e711_8c5a_005056ad0002
6dd74de394 68102290_1ec3_e711_8c5a_005056ad0002-->1c0a2290_1ec3_e711_8c5a_005056ad0002
6dd74de395 f4112290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
6dd74de396 f4112290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
6dd74de397 f4112290_1ec3_e711_8c5a_005056ad0002-->c0102290_1ec3_e711_8c5a_005056ad0002
6dd74de398 f4112290_1ec3_e711_8c5a_005056ad0002-->9a072290_1ec3_e711_8c5a_005056ad0002
6dd74de399 d6072290_1ec3_e711_8c5a_005056ad0002-->1c0a2290_1ec3_e711_8c5a_005056ad0002
6dd74de400 71082290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
6dd74de401 c0102290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
6dd74de402 c0102290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
6dd74de403 9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
6dd74de404 9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
6dd74de405 </pre>
6dd74de406 <hr />
6dd74de407
6dd74de408 <h3>flowchart</h3>
6dd74de409 <pre class="mermaid">
6dd74de410 flowchart TD
6dd74de411 9e122290_1ec3_e711_8c5a_005056ad0002("fa:fa-creative-commons My System | Test Environment")
6dd74de412 82072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 1")
6dd74de413 db052290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 2")
6dd74de414 4e112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Report Server:Service 1")
6dd74de415 30122290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Report Server:Service 2")
6dd74de416 5e112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Dedicated Test Business Logic Server:Service 1")
6dd74de417 c1112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Dedicated Test Business Logic Server:Service 2")
6dd74de418 b7042290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[SupportDb]")
6dd74de419 8f102290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[DevelopmentDb]")
6dd74de420 0e102290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[TestDb]")
6dd74de421 07132290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[SharedReportingDb]")
6dd74de422 c7072290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Shared Business Logic Server")
6dd74de423 ca122290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Shared Report Server")
6dd74de424 68102290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Dedicated Test Business Logic Server")
6dd74de425 f4112290_1ec3_e711_8c5a_005056ad0002("fa:fa-database [DBServer\SharedDbInstance]")
6dd74de426 d6072290_1ec3_e711_8c5a_005056ad0002("fa:fa-server DBServer")
6dd74de427 71082290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:MSSQLSERVER")
6dd74de428 c0102290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:SQLAgent")
6dd74de429 9a072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:SQLBrowser")
6dd74de430 1d0a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost1")
6dd74de431 200a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost2")
6dd74de432 1c0a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost3")
6dd74de433 9e122290_1ec3_e711_8c5a_005056ad0002-->82072290_1ec3_e711_8c5a_005056ad0002
6dd74de434 9e122290_1ec3_e711_8c5a_005056ad0002-->db052290_1ec3_e711_8c5a_005056ad0002
6dd74de435 9e122290_1ec3_e711_8c5a_005056ad0002-->4e112290_1ec3_e711_8c5a_005056ad0002
6dd74de436 9e122290_1ec3_e711_8c5a_005056ad0002-->30122290_1ec3_e711_8c5a_005056ad0002
6dd74de437 9e122290_1ec3_e711_8c5a_005056ad0002-->5e112290_1ec3_e711_8c5a_005056ad0002
6dd74de438 9e122290_1ec3_e711_8c5a_005056ad0002-->c1112290_1ec3_e711_8c5a_005056ad0002
6dd74de439 82072290_1ec3_e711_8c5a_005056ad0002-->b7042290_1ec3_e711_8c5a_005056ad0002
6dd74de440 82072290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
6dd74de441 82072290_1ec3_e711_8c5a_005056ad0002-->0e102290_1ec3_e711_8c5a_005056ad0002
6dd74de442 82072290_1ec3_e711_8c5a_005056ad0002-->c7072290_1ec3_e711_8c5a_005056ad0002
6dd74de443 db052290_1ec3_e711_8c5a_005056ad0002-->c7072290_1ec3_e711_8c5a_005056ad0002
6dd74de444 db052290_1ec3_e711_8c5a_005056ad0002-->82072290_1ec3_e711_8c5a_005056ad0002
6dd74de445 4e112290_1ec3_e711_8c5a_005056ad0002-->b7042290_1ec3_e711_8c5a_005056ad0002
6dd74de446 4e112290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
6dd74de447 4e112290_1ec3_e711_8c5a_005056ad0002-->0e102290_1ec3_e711_8c5a_005056ad0002
6dd74de448 4e112290_1ec3_e711_8c5a_005056ad0002-->07132290_1ec3_e711_8c5a_005056ad0002
6dd74de449 4e112290_1ec3_e711_8c5a_005056ad0002-->ca122290_1ec3_e711_8c5a_005056ad0002
6dd74de450 30122290_1ec3_e711_8c5a_005056ad0002-->ca122290_1ec3_e711_8c5a_005056ad0002
6dd74de451 30122290_1ec3_e711_8c5a_005056ad0002-->4e112290_1ec3_e711_8c5a_005056ad0002
6dd74de452 5e112290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
6dd74de453 5e112290_1ec3_e711_8c5a_005056ad0002-->68102290_1ec3_e711_8c5a_005056ad0002
6dd74de454 c1112290_1ec3_e711_8c5a_005056ad0002-->68102290_1ec3_e711_8c5a_005056ad0002
6dd74de455 c1112290_1ec3_e711_8c5a_005056ad0002-->5e112290_1ec3_e711_8c5a_005056ad0002
6dd74de456 b7042290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
6dd74de457 8f102290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
6dd74de458 0e102290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
6dd74de459 07132290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
6dd74de460 c7072290_1ec3_e711_8c5a_005056ad0002-->1d0a2290_1ec3_e711_8c5a_005056ad0002
6dd74de461 ca122290_1ec3_e711_8c5a_005056ad0002-->200a2290_1ec3_e711_8c5a_005056ad0002
6dd74de462 68102290_1ec3_e711_8c5a_005056ad0002-->1c0a2290_1ec3_e711_8c5a_005056ad0002
6dd74de463 f4112290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
6dd74de464 f4112290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
6dd74de465 f4112290_1ec3_e711_8c5a_005056ad0002-->c0102290_1ec3_e711_8c5a_005056ad0002
6dd74de466 f4112290_1ec3_e711_8c5a_005056ad0002-->9a072290_1ec3_e711_8c5a_005056ad0002
6dd74de467 d6072290_1ec3_e711_8c5a_005056ad0002-->1c0a2290_1ec3_e711_8c5a_005056ad0002
6dd74de468 71082290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
6dd74de469 c0102290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
6dd74de470 c0102290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
6dd74de471 9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
6dd74de472 9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
6dd74de473 </pre>
6dd74de474 <hr />
6dd74de475
6dd74de476 <h2>Sample 6</h2>
6dd74de477 <h3>graph</h3>
6dd74de478 <pre class="mermaid">
6dd74de479 graph TB
6dd74de480 subgraph One
6dd74de481 a1-->a2
6dd74de482 end
6dd74de483 </pre>
6dd74de484 <hr />
6dd74de485
6dd74de486 <h3>flowchart</h3>
6dd74de487 <pre class="mermaid">
6dd74de488 flowchart TB
6dd74de489 subgraph One
6dd74de490 a1-->a2
6dd74de491 end
6dd74de492 </pre>
6dd74de493 <hr />
6dd74de494
6dd74de495 <h2>Sample 7</h2>
6dd74de496 <h3>graph</h3>
6dd74de497 <pre class="mermaid">
6dd74de498 graph TB
6dd74de499 A
6dd74de500 B
6dd74de501 subgraph foo[Foo SubGraph]
6dd74de502 C
6dd74de503 D
6dd74de504 end
6dd74de505 subgraph bar[Bar SubGraph]
6dd74de506 E
6dd74de507 F
6dd74de508 end
6dd74de509 G
6dd74de510
6dd74de511 A-->B
6dd74de512 B-->C
6dd74de513 C-->D
6dd74de514 B-->D
6dd74de515 D-->E
6dd74de516 E-->A
6dd74de517 E-->F
6dd74de518 F-->D
6dd74de519 F-->G
6dd74de520 B-->G
6dd74de521 G-->D
6dd74de522
6dd74de523 style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
6dd74de524 style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
6dd74de525 </pre>
6dd74de526 <hr />
6dd74de527
6dd74de528 <h3>flowchart</h3>
6dd74de529 <pre class="mermaid">
6dd74de530 flowchart TB
6dd74de531 A
6dd74de532 B
6dd74de533 subgraph foo[Foo SubGraph]
6dd74de534 C
6dd74de535 D
6dd74de536 end
6dd74de537 subgraph bar[Bar SubGraph]
6dd74de538 E
6dd74de539 F
6dd74de540 end
6dd74de541 G
6dd74de542
6dd74de543 A-->B
6dd74de544 B-->C
6dd74de545 C-->D
6dd74de546 B-->D
6dd74de547 D-->E
6dd74de548 E-->A
6dd74de549 E-->F
6dd74de550 F-->D
6dd74de551 F-->G
6dd74de552 B-->G
6dd74de553 G-->D
6dd74de554
6dd74de555 style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
6dd74de556 style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
6dd74de557 </pre>
6dd74de558 <hr />
6dd74de559
6dd74de560 <h2>Sample 8</h2>
6dd74de561 <h3>graph</h3>
6dd74de562 <pre class="mermaid">
6dd74de563 graph LR
6dd74de564 456ac9b0d15a8b7f1e71073221059886[1051 AAA fa:fa-check]
6dd74de565 f7f580e11d00a75814d2ded41fe8e8fe[1141 BBB fa:fa-check]
6dd74de566 81dc9bdb52d04dc20036dbd8313ed055[1234 CCC fa:fa-check]
6dd74de567 456ac9b0d15a8b7f1e71073221059886 -->|Node| f7f580e11d00a75814d2ded41fe8e8fe
6dd74de568 f7f580e11d00a75814d2ded41fe8e8fe -->|Node| 81dc9bdb52d04dc20036dbd8313ed055
6dd74de569 click 456ac9b0d15a8b7f1e71073221059886 "/admin/user/view?id=1051" "AAA
6dd74de570 6000"
6dd74de571 click f7f580e11d00a75814d2ded41fe8e8fe "/admin/user/view?id=1141" "BBB
6dd74de572 600"
6dd74de573 click 81dc9bdb52d04dc20036dbd8313ed055 "/admin/user/view?id=1234" "CCC
6dd74de574 3000"
6dd74de575 style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
6dd74de576 </pre>
6dd74de577 <hr />
6dd74de578
6dd74de579 <h3>flowchart</h3>
6dd74de580 <pre class="mermaid">
6dd74de581 flowchart LR
6dd74de582 456ac9b0d15a8b7f1e71073221059886[1051 AAA fa:fa-check]
6dd74de583 f7f580e11d00a75814d2ded41fe8e8fe[1141 BBB fa:fa-check]
6dd74de584 81dc9bdb52d04dc20036dbd8313ed055[1234 CCC fa:fa-check]
6dd74de585 456ac9b0d15a8b7f1e71073221059886 -->|Node| f7f580e11d00a75814d2ded41fe8e8fe
6dd74de586 f7f580e11d00a75814d2ded41fe8e8fe -->|Node| 81dc9bdb52d04dc20036dbd8313ed055
6dd74de587 click 456ac9b0d15a8b7f1e71073221059886 "/admin/user/view?id=1051" "AAA
6dd74de588 6000"
6dd74de589 click f7f580e11d00a75814d2ded41fe8e8fe "/admin/user/view?id=1141" "BBB
6dd74de590 600"
6dd74de591 click 81dc9bdb52d04dc20036dbd8313ed055 "/admin/user/view?id=1234" "CCC
6dd74de592 3000"
6dd74de593 style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
6dd74de594 </pre>
6dd74de595 <hr />
6dd74de596
6dd74de597 <h2>Sample 9</h2>
6dd74de598 <h3>graph</h3>
6dd74de599 <pre class="mermaid">
6dd74de600 graph TD
6dd74de601 A[Christmas] -->|Get money| B(Go shopping)
6dd74de602 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?}}
6dd74de603 C -->|One| D[Laptop]
6dd74de604 C -->|Two| E[iPhone]
6dd74de605 C -->|Three| F[Car]
6dd74de606 click A "flowchart.html#link-clicked" "link test"
6dd74de607 click B testClick "click test"
6dd74de608 classDef someclass fill:#f96;
6dd74de609 class A someclass;
6dd74de610 class C someclass;
6dd74de611 </pre>
6dd74de612 <hr />
6dd74de613
6dd74de614 <h3>flowchart</h3>
6dd74de615 <pre class="mermaid">
6dd74de616 flowchart TD
6dd74de617 A[Christmas] -->|Get money| B(Go shopping)
6dd74de618 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?}}
6dd74de619 C -->|One| D[Laptop]
6dd74de620 C -->|Two| E[iPhone]
6dd74de621 C -->|Three| F[Car]
6dd74de622 click A "flowchart.html#link-clicked" "link test"
6dd74de623 click B testClick "click test"
6dd74de624 classDef someclass fill:#f96;
6dd74de625 class A someclass;
6dd74de626 class C someclass;
6dd74de627 </pre>
6dd74de628 <hr />
6dd74de629
6dd74de630 <h2>Sample 10</h2>
6dd74de631 <h3>graph</h3>
6dd74de632 <pre class="mermaid">
6dd74de633 graph TD
6dd74de634 A([stadium shape test])
6dd74de635 A -->|Get money| B([Go shopping])
6dd74de636 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?])
6dd74de637 C -->|One| D([Laptop])
6dd74de638 C -->|Two| E([iPhone])
6dd74de639 C -->|Three| F([Car<br/>wroom wroom])
6dd74de640 click A "flowchart.html#link-clicked" "link test"
6dd74de641 click B testClick "click test"
6dd74de642 classDef someclass fill:#f96;
6dd74de643 class A someclass;
6dd74de644 class C someclass;
6dd74de645 </pre>
6dd74de646 <hr />
6dd74de647
6dd74de648 <h3>flowchart</h3>
6dd74de649 <pre class="mermaid">
6dd74de650 flowchart TD
6dd74de651 A([stadium shape test])
6dd74de652 A -->|Get money| B([Go shopping])
6dd74de653 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?])
6dd74de654 C -->|One| D([Laptop])
6dd74de655 C -->|Two| E([iPhone])
6dd74de656 C -->|Three| F([Car<br/>wroom wroom])
6dd74de657 click A "flowchart.html#link-clicked" "link test"
6dd74de658 click B testClick "click test"
6dd74de659 classDef someclass fill:#f96;
6dd74de660 class A someclass;
6dd74de661 class C someclass;
6dd74de662 </pre>
6dd74de663 <hr />
6dd74de664
6dd74de665 <h2>Sample 11</h2>
6dd74de666 <h3>graph</h3>
6dd74de667 <pre class="mermaid">
6dd74de668 graph LR
6dd74de669 A[[subroutine shape test]]
6dd74de670 A -->|Get money| B[[Go shopping]]
6dd74de671 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?]]
6dd74de672 C -->|One| D[[Laptop]]
6dd74de673 C -->|Two| E[[iPhone]]
6dd74de674 C -->|Three| F[[Car<br/>wroom wroom]]
6dd74de675 click A "flowchart.html#link-clicked" "link test"
6dd74de676 click B testClick "click test"
6dd74de677 classDef someclass fill:#f96;
6dd74de678 class A someclass;
6dd74de679 class C someclass;
6dd74de680 </pre>
6dd74de681 <hr />
6dd74de682
6dd74de683 <h3>flowchart</h3>
6dd74de684 <pre class="mermaid">
6dd74de685 flowchart LR
6dd74de686 A[[subroutine shape test]]
6dd74de687 A -->|Get money| B[[Go shopping]]
6dd74de688 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?]]
6dd74de689 C -->|One| D[[Laptop]]
6dd74de690 C -->|Two| E[[iPhone]]
6dd74de691 C -->|Three| F[[Car<br/>wroom wroom]]
6dd74de692 click A "flowchart.html#link-clicked" "link test"
6dd74de693 click B testClick "click test"
6dd74de694 classDef someclass fill:#f96;
6dd74de695 class A someclass;
6dd74de696 class C someclass;
6dd74de697 </pre>
6dd74de698 <hr />
6dd74de699
6dd74de700 <h2>Sample 12</h2>
6dd74de701 <h3>graph</h3>
6dd74de702 <pre class="mermaid">
6dd74de703 graph LR
6dd74de704 A[(cylindrical<br />shape<br />test)]
6dd74de705 A -->|Get money| B1[(Go shopping 1)]
6dd74de706 A -->|Get money| B2[(Go shopping 2)]
6dd74de707 A -->|Get money| B3[(Go shopping 3)]
6dd74de708 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?)]
6dd74de709 B1 --> C
6dd74de710 B2 --> C
6dd74de711 B3 --> C
6dd74de712 C -->|One| D[(Laptop)]
6dd74de713 C -->|Two| E[(iPhone)]
6dd74de714 C -->|Three| F[(Car)]
6dd74de715 click A "flowchart.html#link-clicked" "link test"
6dd74de716 click B testClick "click test"
6dd74de717 classDef someclass fill:#f96;
6dd74de718 class A someclass;
6dd74de719 </pre>
6dd74de720 <hr />
6dd74de721
6dd74de722 <h3>flowchart</h3>
6dd74de723 <pre class="mermaid">
6dd74de724 flowchart LR
6dd74de725 A[(cylindrical<br />shape<br />test)]
6dd74de726 A -->|Get money| B1[(Go shopping 1)]
6dd74de727 A -->|Get money| B2[(Go shopping 2)]
6dd74de728 A -->|Get money| B3[(Go shopping 3)]
6dd74de729 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?)]
6dd74de730 B1 --> C
6dd74de731 B2 --> C
6dd74de732 B3 --> C
6dd74de733 C -->|One| D[(Laptop)]
6dd74de734 C -->|Two| E[(iPhone)]
6dd74de735 C -->|Three| F[(Car)]
6dd74de736 click A "flowchart.html#link-clicked" "link test"
6dd74de737 click B testClick "click test"
6dd74de738 classDef someclass fill:#f96;
6dd74de739 class A someclass;
6dd74de740 </pre>
6dd74de741 <hr />
6dd74de742
6dd74de743 <h2>Sample 13</h2>
6dd74de744 <h3>graph</h3>
6dd74de745 <pre class="mermaid">
6dd74de746 graph LR
6dd74de747 A1[Multi<br>Line] -->|Multi<br>Line| B1(Multi<br>Line)
6dd74de748 C1[Multi<br/>Line] -->|Multi<br/>Line| D1(Multi<br/>Line)
6dd74de749 E1[Multi<br />Line] -->|Multi<br />Line| F1(Multi<br />Line)
6dd74de750 A2[Multi<br>Line] -->|Multi<br>Line| B2(Multi<br>Line)
6dd74de751 C2[Multi<br/>Line] -->|Multi<br/>Line| D2(Multi<br/>Line)
6dd74de752 E2[Multi<br />Line] -->|Multi<br />Line| F2(Multi<br />Line)
6dd74de753 linkStyle 0 stroke:DarkGray,stroke-width:2px
6dd74de754 linkStyle 1 stroke:DarkGray,stroke-width:2px
6dd74de755 linkStyle 2 stroke:DarkGray,stroke-width:2px
6dd74de756 </pre>
6dd74de757 <hr />
6dd74de758
6dd74de759 <h3>flowchart</h3>
6dd74de760 <pre class="mermaid">
6dd74de761 flowchart LR
6dd74de762 A1[Multi<br>Line] -->|Multi<br>Line| B1(Multi<br>Line)
6dd74de763 C1[Multi<br/>Line] -->|Multi<br/>Line| D1(Multi<br/>Line)
6dd74de764 E1[Multi<br />Line] -->|Multi<br />Line| F1(Multi<br />Line)
6dd74de765 A2[Multi<br>Line] -->|Multi<br>Line| B2(Multi<br>Line)
6dd74de766 C2[Multi<br/>Line] -->|Multi<br/>Line| D2(Multi<br/>Line)
6dd74de767 E2[Multi<br />Line] -->|Multi<br />Line| F2(Multi<br />Line)
6dd74de768 linkStyle 0 stroke:DarkGray,stroke-width:2px
6dd74de769 linkStyle 1 stroke:DarkGray,stroke-width:2px
6dd74de770 linkStyle 2 stroke:DarkGray,stroke-width:2px
6dd74de771 </pre>
6dd74de772 <hr />
6dd74de773
6dd74de774 <h2>Sample 14</h2>
6dd74de775 <h3>graph</h3>
6dd74de776 <pre class="mermaid">
6dd74de777 graph LR
6dd74de778 A(( )) -->|step 1| B(( ))
6dd74de779 B(( )) -->|step 2| C(( ))
6dd74de780 C(( )) -->|step 3| D(( ))
6dd74de781 linkStyle 1 stroke:greenyellow,stroke-width:2px
6dd74de782 style C fill:greenyellow,stroke:green,stroke-width:4px
6dd74de783 </pre>
6dd74de784 <hr />
6dd74de785
6dd74de786 <h3>flowchart</h3>
6dd74de787 <pre class="mermaid">
6dd74de788 flowchart LR
6dd74de789 A(( )) -->|step 1| B(( ))
6dd74de790 B(( )) -->|step 2| C(( ))
6dd74de791 C(( )) -->|step 3| D(( ))
6dd74de792 linkStyle 1 stroke:greenyellow,stroke-width:2px
6dd74de793 style C fill:greenyellow,stroke:green,stroke-width:4px
6dd74de794 </pre>
6dd74de795 <hr />
6dd74de796
6dd74de797 <h2>Sample 15</h2>
6dd74de798 <h3>graph</h3>
6dd74de799 <pre class="mermaid">
6dd74de800 graph TB
6dd74de801 TITLE["Link Click Events<br>(click the nodes below)"]
6dd74de802 A["link test (open in same tab)"]
6dd74de803 B["link test (open in new tab)"]
6dd74de804 C[anchor test]
6dd74de805 D[mailto test]
6dd74de806 E[other protocol test]
6dd74de807 F[script test]
6dd74de808 TITLE --> A & B & C & D & E & F
6dd74de809 click A "https://mermaid-js.github.io/mermaid/#/" "link test (open in same tab)"
6dd74de810 click B "https://mermaid-js.github.io/mermaid/#/" "link test (open in new tab)" _blank
6dd74de811 click C "#link-clicked"
6dd74de812 click D "mailto:user@user.user" "mailto test"
6dd74de813 click E "notes://do-your-thing/id" "other protocol test"
6dd74de814 click F "javascript:alert('test')" "script test"
6dd74de815 </pre>
6dd74de816 <hr />
6dd74de817
6dd74de818 <h3>flowchart</h3>
6dd74de819 <pre class="mermaid">
6dd74de820 flowchart TB
6dd74de821 TITLE["Link Click Events<br>(click the nodes below)"]
6dd74de822 A["link test (open in same tab)"]
6dd74de823 B["link test (open in new tab)"]
6dd74de824 C[anchor test]
6dd74de825 D[mailto test]
6dd74de826 E[other protocol test]
6dd74de827 F[script test]
6dd74de828 TITLE --> A & B & C & D & E & F
6dd74de829 click A "https://mermaid-js.github.io/mermaid/#/" "link test (open in same tab)"
6dd74de830 click B "https://mermaid-js.github.io/mermaid/#/" "link test (open in new tab)" _blank
6dd74de831 click C "#link-clicked"
6dd74de832 click D "mailto:user@user.user" "mailto test"
6dd74de833 click E "notes://do-your-thing/id" "other protocol test"
6dd74de834 click F "javascript:alert('test')" "script test"
6dd74de835 </pre>
6dd74de836 <hr />
6dd74de837
6dd74de838 <h2>Sample 16</h2>
6dd74de839 <h3>graph</h3>
6dd74de840 <pre class="mermaid">
6dd74de841 graph LR
6dd74de842 A[red<br>text] -->|red<br>text| B(blue<br>text)
6dd74de843 C[/red<br/>text/] -->|blue<br/>text| D{blue<br/>text}
6dd74de844 E{{default<br />style}} -->|default<br />style| F([default<br />style])
6dd74de845 linkStyle default color:Sienna;
6dd74de846 linkStyle 0 color:red;
6dd74de847 linkStyle 1 stroke:DarkGray,stroke-width:2px,color:#0000ff
6dd74de848 style A color:red;
6dd74de849 style B color:blue;
6dd74de850 style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de851 style D stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de852 click B "flowchart.html#link-clicked" "link test"
6dd74de853 click D testClick "click test"
6dd74de854 </pre>
6dd74de855 <hr />
6dd74de856
6dd74de857 <h3>flowchart</h3>
6dd74de858 <pre class="mermaid">
6dd74de859 flowchart LR
6dd74de860 A[red<br>text] -->|red<br>text| B(blue<br>text)
6dd74de861 C[/red<br/>text/] -->|blue<br/>text| D{blue<br/>text}
6dd74de862 E{{default<br />style}} -->|default<br />style| F([default<br />style])
6dd74de863 linkStyle default color:Sienna;
6dd74de864 linkStyle 0 color:red;
6dd74de865 linkStyle 1 stroke:DarkGray,stroke-width:2px,color:#0000ff
6dd74de866 style A color:red;
6dd74de867 style B color:blue;
6dd74de868 style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de869 style D stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de870 click B "flowchart.html#link-clicked" "link test"
6dd74de871 click D testClick "click test"
6dd74de872 </pre>
6dd74de873 <hr />
6dd74de874
6dd74de875 <h2>Sample 17</h2>
6dd74de876 <h3>graph</h3>
6dd74de877 <pre class="mermaid">
6dd74de878 graph TD
6dd74de879 A[myClass1] --> B[default] & C[default]
6dd74de880 B[default] & C[default] --> D[myClass2]
6dd74de881 classDef default stroke-width:2px,fill:none,stroke:silver
6dd74de882 classDef node color:red
6dd74de883 classDef myClass1 color:#0000ff
6dd74de884 classDef myClass2 stroke:#0000ff,fill:#ccccff
6dd74de885 class A myClass1
6dd74de886 class D myClass2
6dd74de887 </pre>
6dd74de888 <hr />
6dd74de889
6dd74de890 <h3>flowchart</h3>
6dd74de891 <pre class="mermaid">
6dd74de892 flowchart TD
6dd74de893 A[myClass1] --> B[default] & C[default]
6dd74de894 B[default] & C[default] --> D[myClass2]
6dd74de895 classDef default stroke-width:2px,fill:none,stroke:silver
6dd74de896 classDef node color:red
6dd74de897 classDef myClass1 color:#0000ff
6dd74de898 classDef myClass2 stroke:#0000ff,fill:#ccccff
6dd74de899 class A myClass1
6dd74de900 class D myClass2
6dd74de901 </pre>
6dd74de902 <hr />
6dd74de903
6dd74de904 <h2>Sample 18</h2>
6dd74de905 <h3>graph</h3>
6dd74de906 <pre class="mermaid">
6dd74de907 graph LR
6dd74de908 A1[red text] -->|default style| A2[blue text]
6dd74de909 B1(red text) -->|default style| B2(blue text)
6dd74de910 C1([red text]) -->|default style| C2([blue text])
6dd74de911 D1[[red text]] -->|default style| D2[[blue text]]
6dd74de912 E1[(red text)] -->|default style| E2[(blue text)]
6dd74de913 F1((red text)) -->|default style| F2((blue text))
6dd74de914 G1>red text] -->|default style| G2>blue text]
6dd74de915 H1{red text} -->|default style| H2{blue text}
6dd74de916 I1{{red text}} -->|default style| I2{{blue text}}
6dd74de917 J1[/red text/] -->|default style| J2[/blue text/]
6dd74de918 K1[\red text\] -->|default style| K2[\blue text\]
6dd74de919 L1[/red text\] -->|default style| L2[/blue text\]
6dd74de920 M1[\red text/] -->|default style| M2[\blue text/]
6dd74de921 N1[red text] -->|default style| N2[blue text]
6dd74de922 linkStyle default color:Sienna;
6dd74de923 style A1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de924 style B1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de925 style C1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de926 style D1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de927 style E1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de928 style F1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de929 style G1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de930 style H1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de931 style I1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de932 style J1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de933 style K1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de934 style L1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de935 style M1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de936 style N1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de937 style A2 stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de938 style B2 stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de939 style C2 stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de940 style D2 stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de941 style E2 stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de942 style F2 stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de943 style G2 stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de944 style H2 stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de945 style I2 stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de946 style J2 stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de947 style K2 stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de948 style L2 stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de949 style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de950 style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de951 </pre>
6dd74de952 <hr />
6dd74de953
6dd74de954 <h3>flowchart</h3>
6dd74de955 <pre class="mermaid">
6dd74de956 flowchart LR
6dd74de957 A1[red text] <-->|default style| A2[blue text]
6dd74de958 B1(red text) <-->|default style| B2(blue text)
6dd74de959 C1([red text]) <-->|default style| C2([blue text])
6dd74de960 D1[[red text]] <-->|default style| D2[[blue text]]
6dd74de961 E1[(red text)] <-->|default style| E2[(blue text)]
6dd74de962 F1((red text)) <-->|default style| F2((blue text))
6dd74de963 G1>red text] <-->|default style| G2>blue text]
6dd74de964 H1{red text} <-->|default style| H2{blue text}
6dd74de965 I1{{red text}} <-->|default style| I2{{blue text}}
6dd74de966 J1[/red text/] <-->|default style| J2[/blue text/]
6dd74de967 K1[\red text\] <-->|default style| K2[\blue text\]
6dd74de968 L1[/red text\] <-->|default style| L2[/blue text\]
6dd74de969 M1[\red text/] <-->|default style| M2[\blue text/]
6dd74de970 N1[red text] <-->|default style| N2[blue text]
6dd74de971 linkStyle default color:Sienna;
6dd74de972 style A1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de973 style B1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de974 style C1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de975 style D1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de976 style E1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de977 style F1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de978 style G1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de979 style H1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de980 style I1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de981 style J1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de982 style K1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de983 style L1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de984 style M1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de985 style N1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de986 style A2 stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de987 style B2 stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de988 style C2 stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de989 style D2 stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de990 style E2 stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de991 style F2 stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de992 style G2 stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de993 style H2 stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de994 style I2 stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de995 style J2 stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de996 style K2 stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de997 style L2 stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de998 style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de999 style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de1000 </pre>
6dd74de1001 <hr />
6dd74de1002
6dd74de1003 <h2>Sample 19</h2>
6dd74de1004 <h3>graph</h3>
6dd74de1005 <pre class="mermaid">
6dd74de1006 graph TB
6dd74de1007 A1[red text] -->|default style| A2[blue text]
6dd74de1008 B1(red text) -->|default style| B2(blue text)
6dd74de1009 C1([red text]) -->|default style| C2([blue text])
6dd74de1010 D1[[red text]] -->|default style| D2[[blue text]]
6dd74de1011 E1[(red text)] -->|default style| E2[(blue text)]
6dd74de1012 F1((red text)) -->|default style| F2((blue text))
6dd74de1013 G1>red text] -->|default style| G2>blue text]
6dd74de1014 H1{red text} -->|default style| H2{blue text}
6dd74de1015 I1{{red text}} -->|default style| I2{{blue text}}
6dd74de1016 J1[/red text/] -->|default style| J2[/blue text/]
6dd74de1017 K1[\red text\] -->|default style| K2[\blue text\]
6dd74de1018 L1[/red text\] -->|default style| L2[/blue text\]
6dd74de1019 M1[\red text/] -->|default style| M2[\blue text/]
6dd74de1020 N1[red text] -->|default style| N2[blue text]
6dd74de1021 linkStyle default color:Sienna;
6dd74de1022 style A1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de1023 style B1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de1024 style C1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de1025 style D1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de1026 style E1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de1027 style F1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de1028 style G1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de1029 style H1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de1030 style I1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de1031 style J1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de1032 style K1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de1033 style L1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de1034 style M1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de1035 style N1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de1036 style A2 stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de1037 style B2 stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de1038 style C2 stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de1039 style D2 stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de1040 style E2 stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de1041 style F2 stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de1042 style G2 stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de1043 style H2 stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de1044 style I2 stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de1045 style J2 stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de1046 style K2 stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de1047 style L2 stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de1048 style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de1049 style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de1050 </pre>
6dd74de1051 <hr />
6dd74de1052
6dd74de1053 <h3>flowchart</h3>
6dd74de1054 <pre class="mermaid">
6dd74de1055 flowchart TB
6dd74de1056 A1[red text] <-->|default style| A2[blue text]
6dd74de1057 B1(red text) <-->|default style| B2(blue text)
6dd74de1058 C1([red text]) <-->|default style| C2([blue text])
6dd74de1059 D1[[red text]] <-->|default style| D2[[blue text]]
6dd74de1060 E1[(red text)] <-->|default style| E2[(blue text)]
6dd74de1061 F1((red text)) <-->|default style| F2((blue text))
6dd74de1062 G1>red text] <-->|default style| G2>blue text]
6dd74de1063 H1{red text} <-->|default style| H2{blue text}
6dd74de1064 I1{{red text}} <-->|default style| I2{{blue text}}
6dd74de1065 J1[/red text/] <-->|default style| J2[/blue text/]
6dd74de1066 K1[\red text\] <-->|default style| K2[\blue text\]
6dd74de1067 L1[/red text\] <-->|default style| L2[/blue text\]
6dd74de1068 M1[\red text/] <-->|default style| M2[\blue text/]
6dd74de1069 N1[red text] <-->|default style| N2[blue text]
6dd74de1070 O1(((red text))) <-->|default style| O2(((blue text)))
6dd74de1071 linkStyle default color:Sienna;
6dd74de1072 style A1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de1073 style B1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de1074 style C1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de1075 style D1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de1076 style E1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de1077 style F1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de1078 style G1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de1079 style H1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de1080 style I1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de1081 style J1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de1082 style K1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de1083 style L1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de1084 style M1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de1085 style N1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de1086 style O1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de1087 style A2 stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de1088 style B2 stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de1089 style C2 stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de1090 style D2 stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de1091 style E2 stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de1092 style F2 stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de1093 style G2 stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de1094 style H2 stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de1095 style I2 stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de1096 style J2 stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de1097 style K2 stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de1098 style L2 stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de1099 style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de1100 style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de1101 style O2 stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de1102 </pre>
6dd74de1103 <hr />
6dd74de1104
6dd74de1105 <h2>Sample 20</h2>
6dd74de1106 <h3>graph</h3>
6dd74de1107 <pre class="mermaid">
6dd74de1108 graph LR
6dd74de1109 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}}}}$$")
6dd74de1110 A -->|"$$\overbrace{a+b+c}^{\text{note}}$$"| C("$$\phase{-78^\circ}$$")
6dd74de1111 B --> D("$$x = \begin{cases} a &\text{if } b \\ c &\text{if } d \end{cases}$$")
6dd74de1112 C --> E("$$x(t)=c_1\begin{bmatrix}-\cos{t}+\sin{t}\\ 2\cos{t} \end{bmatrix}e^{2t}$$")
6dd74de1113 </pre>
6dd74de1114 <hr />
6dd74de1115
6dd74de1116 <h3>flowchart</h3>
6dd74de1117 <pre class="mermaid">
6dd74de1118 flowchart LR
6dd74de1119 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}}}}$$")
6dd74de1120 A -->|"$$\overbrace{a+b+c}^{\text{note}}$$"| C("$$\phase{-78^\circ}$$")
6dd74de1121 B --> D("$$x = \begin{cases} a &\text{if } b \\ c &\text{if } d \end{cases}$$")
6dd74de1122 C --> E("$$x(t)=c_1\begin{bmatrix}-\cos{t}+\sin{t}\\ 2\cos{t} \end{bmatrix}e^{2t}$$")
6dd74de1123 </pre>
6dd74de1124 <hr />
6dd74de1125
6dd74de1126 <h2>Sample 21</h2>
6dd74de1127 <h3>graph</h3>
6dd74de1128 <pre class="mermaid">
6dd74de1129 graph LR
6dd74de1130 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$$"]
6dd74de1131 </pre>
6dd74de1132 <hr />
6dd74de1133
6dd74de1134 <h3>flowchart</h3>
6dd74de1135 <pre class="mermaid">
6dd74de1136 graph LR
6dd74de1137 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$$"]
6dd74de1138 </pre>
6dd74de1139 <hr />
6dd74de1140
6dd74de1141 <h2>Sample 22</h2>
6dd74de1142 <h3>graph</h3>
6dd74de1143 <pre class="mermaid">
6dd74de1144 graph LR
6dd74de1145 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$$"]
6dd74de1146 </pre>
6dd74de1147 <hr />
6dd74de1148
6dd74de1149 <h3>flowchart</h3>
6dd74de1150 <pre class="mermaid">
6dd74de1151 graph LR
6dd74de1152 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$$"]
6dd74de1153 </pre>
6dd74de1154 <hr />
6dd74de1155
6dd74de1156 <hr />
6dd74de1157
6dd74de1158 <pre class="mermaid">
6dd74de1159 graph LR
6dd74de1160 sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
6dd74de1161
6dd74de1162 提交申请
6dd74de1163 熊大
6dd74de1164 "];
6dd74de1165 class sid-B3655226-6C29-4D00-B685-3D5C734DC7E1 node-executed;
6dd74de1166 sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A["
6dd74de1167 负责人审批
6dd74de1168 强子
6dd74de1169 "];
6dd74de1170 class sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A node-executed;
6dd74de1171 sid-E27C0367-E6D6-497F-9736-3CDC21FDE221["
6dd74de1172 DBA审批
6dd74de1173 强子
6dd74de1174 "];
6dd74de1175 class sid-E27C0367-E6D6-497F-9736-3CDC21FDE221 node-executed;
6dd74de1176 sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD["
6dd74de1177 SA审批
6dd74de1178 阿美
6dd74de1179 "];
6dd74de1180 class sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD node-executed;
6dd74de1181 sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7["
6dd74de1182 主管审批
6dd74de1183 光头强
6dd74de1184 "];
6dd74de1185 class sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7 node-executed;
6dd74de1186 sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89["
6dd74de1187 DBA确认
6dd74de1188 强子
6dd74de1189 "];
6dd74de1190 class sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89 node-executed;
6dd74de1191 sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937["
6dd74de1192 SA确认
6dd74de1193 阿美
6dd74de1194 "];
6dd74de1195 class sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937 node-executed;
6dd74de1196 sid-4FC27B48-A6F9-460A-A675-021F5854FE22["
6dd74de1197 结束
6dd74de1198 "];
6dd74de1199 class sid-4FC27B48-A6F9-460A-A675-021F5854FE22 node-executed;
6dd74de1200 sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E["
6dd74de1201 SA执行1
6dd74de1202 强子
6dd74de1203 "];
6dd74de1204 class sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E node-executed;
6dd74de1205 sid-6C2120F3-D940-4958-A067-0903DCE879C4["
6dd74de1206 SA执行2
6dd74de1207 强子
6dd74de1208 "];
6dd74de1209 class sid-6C2120F3-D940-4958-A067-0903DCE879C4 node-executed;
6dd74de1210 sid-9180E2A0-5C4B-435F-B42F-0D152470A338["
6dd74de1211 DBA执行1
6dd74de1212 强子
6dd74de1213 "];
6dd74de1214 class sid-9180E2A0-5C4B-435F-B42F-0D152470A338 node-executed;
6dd74de1215 sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD["
6dd74de1216 DBA执行3
6dd74de1217 强子
6dd74de1218 "];
6dd74de1219 class sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD node-executed;
6dd74de1220 sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756["
6dd74de1221 DBA执行2
6dd74de1222 强子
6dd74de1223 "];
6dd74de1224 class sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756 node-executed;
6dd74de1225 sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93["
6dd74de1226 DBA执行4
6dd74de1227 强子
6dd74de1228 "];
6dd74de1229 class sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93 node-executed;
6dd74de1230 sid-1897B30A-9C5C-4D5B-B80B-76A038785070["
6dd74de1231 负责人确认
6dd74de1232 梁静茹
6dd74de1233 "];
6dd74de1234 class sid-1897B30A-9C5C-4D5B-B80B-76A038785070 node-executed;
6dd74de1235 sid-B3655226-6C29-4D00-B685-3D5C734DC7E1-->sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7;
6dd74de1236 sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A-->sid-1897B30A-9C5C-4D5B-B80B-76A038785070;
6dd74de1237 sid-E27C0367-E6D6-497F-9736-3CDC21FDE221-->sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89;
6dd74de1238 sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD-->sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937;
6dd74de1239 sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E-->sid-6C2120F3-D940-4958-A067-0903DCE879C4;
6dd74de1240 sid-9180E2A0-5C4B-435F-B42F-0D152470A338-->sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756;
6dd74de1241 sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD-->sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93;
6dd74de1242 sid-6C2120F3-D940-4958-A067-0903DCE879C4-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
6dd74de1243 sid-1897B30A-9C5C-4D5B-B80B-76A038785070-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
6dd74de1244 sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E;
6dd74de1245 sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89-->sid-9180E2A0-5C4B-435F-B42F-0D152470A338;
6dd74de1246 sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89-->sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD;
6dd74de1247 sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
6dd74de1248 sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
6dd74de1249 sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD;
6dd74de1250 sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-E27C0367-E6D6-497F-9736-3CDC21FDE221;
6dd74de1251 sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-6C2120F3-D940-4958-A067-0903DCE879C4;
6dd74de1252 sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
6dd74de1253 sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
6dd74de1254 </pre>
6dd74de1255 <hr />
6dd74de1256
6dd74de1257 <pre class="mermaid">
6dd74de1258 graph TD
6dd74de1259 A[Christmas] -->|Get money| B(Go shopping)
6dd74de1260 B --> C{Let me thinksssssx<br />sssssssssssssssssssuuu<br />tttsssssssssssssssssssssss}
6dd74de1261 C -->|One| D[Laptop]
6dd74de1262 C -->|Two| E[iPhone]
6dd74de1263 C -->|Three| F[Car]
6dd74de1264 </pre>
6dd74de1265 <hr />
6dd74de1266
6dd74de1267 <pre class="mermaid">
6dd74de1268 graph TD
6dd74de1269 A[/Christmas\]
6dd74de1270 A -->|Get money| B[\Go shopping/]
6dd74de1271 B --> C{Let me thinksssss<br />ssssssssssssssssssssss<br />sssssssssssssssssssssssssss}
6dd74de1272 C -->|One| D[/Laptop/]
6dd74de1273 C -->|Two| E[\iPhone\]
6dd74de1274 C -->|Three| F[Car]
6dd74de1275 </pre>
6dd74de1276 <hr />
6dd74de1277
6dd74de1278 <pre class="mermaid">
6dd74de1279 graph LR
6dd74de1280 47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget)
6dd74de1281 37(SAM.CommonFA.BudgetSubserviceLineVolume)-->48(SAM.CommonFA.CommonFAFinanceBudget)
6dd74de1282 35(SAM.CommonFA.PopulationFME)-->47(SAM.CommonFA.FMESummary)
6dd74de1283 41(SAM.CommonFA.MetricCost)-->47(SAM.CommonFA.FMESummary)
6dd74de1284 44(SAM.CommonFA.MetricOutliers)-->47(SAM.CommonFA.FMESummary)
6dd74de1285 46(SAM.CommonFA.MetricOpportunity)-->47(SAM.CommonFA.FMESummary)
6dd74de1286 40(SAM.CommonFA.OPVisits)-->47(SAM.CommonFA.FMESummary)
6dd74de1287 38(SAM.CommonFA.CommonFAFinanceRefund)-->47(SAM.CommonFA.FMESummary)
6dd74de1288 43(SAM.CommonFA.CommonFAFinancePicuDays)-->47(SAM.CommonFA.FMESummary)
6dd74de1289 42(SAM.CommonFA.CommonFAFinanceNurseryDays)-->47(SAM.CommonFA.FMESummary)
6dd74de1290 45(SAM.CommonFA.MetricPreOpportunity)-->46(SAM.CommonFA.MetricOpportunity)
6dd74de1291 35(SAM.CommonFA.PopulationFME)-->45(SAM.CommonFA.MetricPreOpportunity)
6dd74de1292 41(SAM.CommonFA.MetricCost)-->45(SAM.CommonFA.MetricPreOpportunity)
6dd74de1293 41(SAM.CommonFA.MetricCost)-->44(SAM.CommonFA.MetricOutliers)
6dd74de1294 39(SAM.CommonFA.ChargeDetails)-->43(SAM.CommonFA.CommonFAFinancePicuDays)
6dd74de1295 39(SAM.CommonFA.ChargeDetails)-->42(SAM.CommonFA.CommonFAFinanceNurseryDays)
6dd74de1296 39(SAM.CommonFA.ChargeDetails)-->41(SAM.CommonFA.MetricCost)
6dd74de1297 39(SAM.CommonFA.ChargeDetails)-->40(SAM.CommonFA.OPVisits)
6dd74de1298 35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
6dd74de1299 36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
6dd74de1300 </pre>
6dd74de1301 <hr />
6dd74de1302
6dd74de1303 <pre class="mermaid">
6dd74de1304 graph TD
6dd74de1305 9e122290_1ec3_e711_8c5a_005056ad0002("fa:fa-creative-commons My System | Test Environment")
6dd74de1306 82072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 1")
6dd74de1307 db052290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 2")
6dd74de1308 4e112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Report Server:Service 1")
6dd74de1309 30122290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Report Server:Service 2")
6dd74de1310 5e112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Dedicated Test Business Logic Server:Service 1")
6dd74de1311 c1112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Dedicated Test Business Logic Server:Service 2")
6dd74de1312 b7042290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[SupportDb]")
6dd74de1313 8f102290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[DevelopmentDb]")
6dd74de1314 0e102290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[TestDb]")
6dd74de1315 07132290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[SharedReportingDb]")
6dd74de1316 c7072290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Shared Business Logic Server")
6dd74de1317 ca122290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Shared Report Server")
6dd74de1318 68102290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Dedicated Test Business Logic Server")
6dd74de1319 f4112290_1ec3_e711_8c5a_005056ad0002("fa:fa-database [DBServer\SharedDbInstance]")
6dd74de1320 d6072290_1ec3_e711_8c5a_005056ad0002("fa:fa-server DBServer")
6dd74de1321 71082290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:MSSQLSERVER")
6dd74de1322 c0102290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:SQLAgent")
6dd74de1323 9a072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:SQLBrowser")
6dd74de1324 1d0a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost1")
6dd74de1325 200a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost2")
6dd74de1326 1c0a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost3")
6dd74de1327 9e122290_1ec3_e711_8c5a_005056ad0002-->82072290_1ec3_e711_8c5a_005056ad0002
6dd74de1328 9e122290_1ec3_e711_8c5a_005056ad0002-->db052290_1ec3_e711_8c5a_005056ad0002
6dd74de1329 9e122290_1ec3_e711_8c5a_005056ad0002-->4e112290_1ec3_e711_8c5a_005056ad0002
6dd74de1330 9e122290_1ec3_e711_8c5a_005056ad0002-->30122290_1ec3_e711_8c5a_005056ad0002
6dd74de1331 9e122290_1ec3_e711_8c5a_005056ad0002-->5e112290_1ec3_e711_8c5a_005056ad0002
6dd74de1332 9e122290_1ec3_e711_8c5a_005056ad0002-->c1112290_1ec3_e711_8c5a_005056ad0002
6dd74de1333 82072290_1ec3_e711_8c5a_005056ad0002-->b7042290_1ec3_e711_8c5a_005056ad0002
6dd74de1334 82072290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
6dd74de1335 82072290_1ec3_e711_8c5a_005056ad0002-->0e102290_1ec3_e711_8c5a_005056ad0002
6dd74de1336 82072290_1ec3_e711_8c5a_005056ad0002-->c7072290_1ec3_e711_8c5a_005056ad0002
6dd74de1337 db052290_1ec3_e711_8c5a_005056ad0002-->c7072290_1ec3_e711_8c5a_005056ad0002
6dd74de1338 db052290_1ec3_e711_8c5a_005056ad0002-->82072290_1ec3_e711_8c5a_005056ad0002
6dd74de1339 4e112290_1ec3_e711_8c5a_005056ad0002-->b7042290_1ec3_e711_8c5a_005056ad0002
6dd74de1340 4e112290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
6dd74de1341 4e112290_1ec3_e711_8c5a_005056ad0002-->0e102290_1ec3_e711_8c5a_005056ad0002
6dd74de1342 4e112290_1ec3_e711_8c5a_005056ad0002-->07132290_1ec3_e711_8c5a_005056ad0002
6dd74de1343 4e112290_1ec3_e711_8c5a_005056ad0002-->ca122290_1ec3_e711_8c5a_005056ad0002
6dd74de1344 30122290_1ec3_e711_8c5a_005056ad0002-->ca122290_1ec3_e711_8c5a_005056ad0002
6dd74de1345 30122290_1ec3_e711_8c5a_005056ad0002-->4e112290_1ec3_e711_8c5a_005056ad0002
6dd74de1346 5e112290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
6dd74de1347 5e112290_1ec3_e711_8c5a_005056ad0002-->68102290_1ec3_e711_8c5a_005056ad0002
6dd74de1348 c1112290_1ec3_e711_8c5a_005056ad0002-->68102290_1ec3_e711_8c5a_005056ad0002
6dd74de1349 c1112290_1ec3_e711_8c5a_005056ad0002-->5e112290_1ec3_e711_8c5a_005056ad0002
6dd74de1350 b7042290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
6dd74de1351 8f102290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
6dd74de1352 0e102290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
6dd74de1353 07132290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
6dd74de1354 c7072290_1ec3_e711_8c5a_005056ad0002-->1d0a2290_1ec3_e711_8c5a_005056ad0002
6dd74de1355 ca122290_1ec3_e711_8c5a_005056ad0002-->200a2290_1ec3_e711_8c5a_005056ad0002
6dd74de1356 68102290_1ec3_e711_8c5a_005056ad0002-->1c0a2290_1ec3_e711_8c5a_005056ad0002
6dd74de1357 f4112290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
6dd74de1358 f4112290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
6dd74de1359 f4112290_1ec3_e711_8c5a_005056ad0002-->c0102290_1ec3_e711_8c5a_005056ad0002
6dd74de1360 f4112290_1ec3_e711_8c5a_005056ad0002-->9a072290_1ec3_e711_8c5a_005056ad0002
6dd74de1361 d6072290_1ec3_e711_8c5a_005056ad0002-->1c0a2290_1ec3_e711_8c5a_005056ad0002
6dd74de1362 71082290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
6dd74de1363 c0102290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
6dd74de1364 c0102290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
6dd74de1365 9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
6dd74de1366 9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
6dd74de1367 </pre>
6dd74de1368 <hr />
6dd74de1369
6dd74de1370 <pre class="mermaid">
6dd74de1371 graph TB
6dd74de1372 subgraph One
6dd74de1373 a1-->a2
6dd74de1374 end
6dd74de1375 </pre>
6dd74de1376 <hr />
6dd74de1377
6dd74de1378 <pre class="mermaid">
6dd74de1379 graph TB
6dd74de1380 A
6dd74de1381 B
6dd74de1382 subgraph foo[Foo SubGraph]
6dd74de1383 C
6dd74de1384 D
6dd74de1385 end
6dd74de1386 subgraph bar[Bar SubGraph]
6dd74de1387 E
6dd74de1388 F
6dd74de1389 end
6dd74de1390 G
6dd74de1391
6dd74de1392 A-->B
6dd74de1393 B-->C
6dd74de1394 C-->D
6dd74de1395 B-->D
6dd74de1396 D-->E
6dd74de1397 E-->A
6dd74de1398 E-->F
6dd74de1399 F-->D
6dd74de1400 F-->G
6dd74de1401 B-->G
6dd74de1402 G-->D
6dd74de1403
6dd74de1404 style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
6dd74de1405 style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
6dd74de1406 </pre>
6dd74de1407 <hr />
6dd74de1408
6dd74de1409 <pre class="mermaid">
6dd74de1410 graph LR
6dd74de1411 456ac9b0d15a8b7f1e71073221059886[1051 AAA fa:fa-check]
6dd74de1412 f7f580e11d00a75814d2ded41fe8e8fe[1141 BBB fa:fa-check]
6dd74de1413 81dc9bdb52d04dc20036dbd8313ed055[1234 CCC fa:fa-check]
6dd74de1414 456ac9b0d15a8b7f1e71073221059886 -->|Node| f7f580e11d00a75814d2ded41fe8e8fe
6dd74de1415 f7f580e11d00a75814d2ded41fe8e8fe -->|Node| 81dc9bdb52d04dc20036dbd8313ed055
6dd74de1416 click 456ac9b0d15a8b7f1e71073221059886 "/admin/user/view?id=1051" "AAA
6dd74de1417 6000"
6dd74de1418 click f7f580e11d00a75814d2ded41fe8e8fe "/admin/user/view?id=1141" "BBB
6dd74de1419 600"
6dd74de1420 click 81dc9bdb52d04dc20036dbd8313ed055 "/admin/user/view?id=1234" "CCC
6dd74de1421 3000"
6dd74de1422 style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
6dd74de1423 </pre>
6dd74de1424 <hr />
6dd74de1425
6dd74de1426 <pre class="mermaid">
6dd74de1427 graph TD
6dd74de1428 A[Christmas] -->|Get money| B(Go shopping)
6dd74de1429 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?}}
6dd74de1430 C -->|One| D[Laptop]
6dd74de1431 C -->|Two| E[iPhone]
6dd74de1432 C -->|Three| F[Car]
6dd74de1433 click A "index.html#link-clicked" "link test"
6dd74de1434 click B testClick "click test"
6dd74de1435 classDef someclass fill:#f96;
6dd74de1436 class A someclass;
6dd74de1437 class C someclass;
6dd74de1438 </pre>
6dd74de1439 <hr />
6dd74de1440
6dd74de1441 <pre class="mermaid">
6dd74de1442 graph TD
6dd74de1443 A([stadium shape test])
6dd74de1444 A -->|Get money| B([Go shopping])
6dd74de1445 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?])
6dd74de1446 C -->|One| D([Laptop])
6dd74de1447 C -->|Two| E([iPhone])
6dd74de1448 C -->|Three| F([Car<br />wroom wroom])
6dd74de1449 click A "index.html#link-clicked" "link test"
6dd74de1450 click B testClick "click test"
6dd74de1451 classDef someclass fill:#f96;
6dd74de1452 class A someclass;
6dd74de1453 class C someclass;
6dd74de1454 </pre>
6dd74de1455 <hr />
6dd74de1456
6dd74de1457 <pre class="mermaid">
6dd74de1458 graph LR
6dd74de1459 A[[subroutine shape test]]
6dd74de1460 A -->|Get money| B[[Go shopping]]
6dd74de1461 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?]]
6dd74de1462 C -->|One| D[[Laptop]]
6dd74de1463 C -->|Two| E[[iPhone]]
6dd74de1464 C -->|Three| F[[Car<br />wroom wroom]]
6dd74de1465 click A "index.html#link-clicked" "link test"
6dd74de1466 click B testClick "click test"
6dd74de1467 classDef someclass fill:#f96;
6dd74de1468 class A someclass;
6dd74de1469 class C someclass;
6dd74de1470 </pre>
6dd74de1471 <hr />
6dd74de1472
6dd74de1473 <pre class="mermaid">
6dd74de1474 graph LR
6dd74de1475 A[(cylindrical<br />shape<br />test)]
6dd74de1476 A -->|Get money| B1[(Go shopping 1)]
6dd74de1477 A -->|Get money| B2[(Go shopping 2)]
6dd74de1478 A -->|Get money| B3[(Go shopping 3)]
6dd74de1479 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?)]
6dd74de1480 B1 --> C
6dd74de1481 B2 --> C
6dd74de1482 B3 --> C
6dd74de1483 C -->|One| D[(Laptop)]
6dd74de1484 C -->|Two| E[(iPhone)]
6dd74de1485 C -->|Three| F[(Car)]
6dd74de1486 click A "index.html#link-clicked" "link test"
6dd74de1487 click B testClick "click test"
6dd74de1488 classDef someclass fill:#f96;
6dd74de1489 class A someclass;
6dd74de1490 </pre>
6dd74de1491 <hr />
6dd74de1492
6dd74de1493 <pre class="mermaid">
6dd74de1494 graph LR
6dd74de1495 A1[Multi<br>Line] -->|Multi<br>Line| B1(Multi<br>Line)
6dd74de1496 C1[Multi<br />Line] -->|Multi<br />Line| D1(Multi<br />Line)
6dd74de1497 E1[Multi<br />Line] -->|Multi<br />Line| F1(Multi<br />Line)
6dd74de1498 A2[Multi<br>Line] -->|Multi<br>Line| B2(Multi<br>Line)
6dd74de1499 C2[Multi<br />Line] -->|Multi<br />Line| D2(Multi<br />Line)
6dd74de1500 E2[Multi<br />Line] -->|Multi<br />Line| F2(Multi<br />Line)
6dd74de1501 linkStyle 0 stroke:DarkGray,stroke-width:2px
6dd74de1502 linkStyle 1 stroke:DarkGray,stroke-width:2px
6dd74de1503 linkStyle 2 stroke:DarkGray,stroke-width:2px
6dd74de1504 </pre>
6dd74de1505 <hr />
6dd74de1506
6dd74de1507 <pre class="mermaid">
6dd74de1508 graph LR
6dd74de1509 A(( )) -->|step 1| B(( ))
6dd74de1510 B(( )) -->|step 2| C(( ))
6dd74de1511 C(( )) -->|step 3| D(( ))
6dd74de1512 linkStyle 1 stroke:greenyellow,stroke-width:2px
6dd74de1513 style C fill:greenyellow,stroke:green,stroke-width:4px
6dd74de1514 </pre>
6dd74de1515 <hr />
6dd74de1516
6dd74de1517 <pre class="mermaid">
6dd74de1518 graph TB
6dd74de1519 TITLE["Link Click Events<br>(click the nodes below)"]
6dd74de1520 A["link test (open in same tab)"]
6dd74de1521 B["link test (open in new tab)"]
6dd74de1522 C[anchor test]
6dd74de1523 D[mailto test]
6dd74de1524 E[other protocol test]
6dd74de1525 F[script test]
6dd74de1526 TITLE --> A & B & C & D & E & F
6dd74de1527 click A "https://mermaid-js.github.io/mermaid/#/" "link test (open in same tab)"
6dd74de1528 click B "https://mermaid-js.github.io/mermaid/#/" "link test (open in new tab)" _blank
6dd74de1529 click C "#link-clicked"
6dd74de1530 click D "mailto:user@user.user" "mailto test"
6dd74de1531 click E "notes://do-your-thing/id" "other protocol test"
6dd74de1532 click F "javascript:alert('test')" "script test"
6dd74de1533 </pre>
6dd74de1534 <hr />
6dd74de1535
6dd74de1536 <pre class="mermaid">
6dd74de1537 graph LR
6dd74de1538 A[red<br>text] -->|red<br>text| B(blue<br>text)
6dd74de1539 C[/red<br />text/] -->|blue<br />text| D{blue<br />text}
6dd74de1540 E{{default<br />style}} -->|default<br />style| F([default<br />style])
6dd74de1541 linkStyle default color:Sienna;
6dd74de1542 linkStyle 0 color:red;
6dd74de1543 linkStyle 1 stroke:DarkGray,stroke-width:2px,color:#0000ff
6dd74de1544 style A color:red;
6dd74de1545 style B color:blue;
6dd74de1546 style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
6dd74de1547 style D stroke:#0000ff,fill:#ccccff,color:#0000ff
6dd74de1548 click B "index.html#link-clicked" "link test"
6dd74de1549 click D testClick "click test"
6dd74de1550 </pre>
6dd74de1551 <hr />
6dd74de1552
6dd74de1553 <pre class="mermaid">
6dd74de1554 graph TD
6dd74de1555 A[myClass1] --> B[default] & C[default]
6dd74de1556 B[default] & C[default] --> D[myClass2]
6dd74de1557 classDef default stroke-width:2px,fill:none,stroke:silver
6dd74de1558 classDef node color:red
6dd74de1559 classDef myClass1 color:#0000ff
6dd74de1560 classDef myClass2 stroke:#0000ff,fill:#ccccff
6dd74de1561 class A myClass1
6dd74de1562 class D myClass2
6dd74de1563 </pre>
6dd74de1564 <hr />
6dd74de1565
6dd74de1566 <pre class="mermaid">
6dd74de1567 graph TD
6dd74de1568 A([Start]) ==> B[Step 1]
6dd74de1569 B ==> C{Flow 1}
6dd74de1570 C -- Choice 1.1 --> D[Step 2.1]
6dd74de1571 C -- Choice 1.3 --> I[Step 2.3]
6dd74de1572 C == Choice 1.2 ==> E[Step 2.2]
6dd74de1573 D --> F{Flow 2}
6dd74de1574 E ==> F{Flow 2}
6dd74de1575 F{Flow 2} == Choice 2.1 ==> H[Feedback node]
6dd74de1576 H[Feedback node] ==> B[Step 1]
6dd74de1577 F{Flow 2} == Choice 2.2 ==> G((Finish))
6dd74de1578
6dd74de1579 linkStyle 0,1,4,6,7,8,9 stroke:gold, stroke-width:4px
6dd74de1580
6dd74de1581 classDef active_node fill:#0CF,stroke:#09F,stroke-width:6px
6dd74de1582 classDef unactive_node fill:#e0e0e0,stroke:#bdbdbd,stroke-width:3px
6dd74de1583 classDef bugged_node fill:#F88,stroke:#F22,stroke-width:3px
6dd74de1584 classDef start_node,finish_node fill:#3B1,stroke:#391,stroke-width:8px
6dd74de1585
6dd74de1586 class A start_node;
6dd74de1587 class B,C,E,F,H active_node;
6dd74de1588 class D unactive_node;
6dd74de1589 class G finish_node;
6dd74de1590 class I bugged_node
6dd74de1591 </pre>
6dd74de1592 <hr />
6dd74de1593
6dd74de1594 <pre class="mermaid">
6dd74de1595 ---
6dd74de1596 title: Subgraph nodeSpacing and rankSpacing example
6dd74de1597 config:
6dd74de1598 flowchart:
6dd74de1599 nodeSpacing: 1
6dd74de1600 rankSpacing: 1
6dd74de1601 ---
6dd74de1602
6dd74de1603 flowchart LR
6dd74de1604
6dd74de1605 X --> Y
6dd74de1606
6dd74de1607 subgraph X
6dd74de1608 direction LR
6dd74de1609 A
6dd74de1610 C
6dd74de1611 end
6dd74de1612
6dd74de1613 subgraph Y
6dd74de1614 direction LR
6dd74de1615 B
6dd74de1616 D
6dd74de1617 end
6dd74de1618 </pre>
6dd74de1619 <hr />
6dd74de1620
6dd74de1621 <h1 id="link-clicked">Anchor for "link-clicked" test</h1>
6dd74de1622
6dd74de1623 <script type="module">
6dd74de1624 import mermaid from './mermaid.esm.mjs';
6dd74de1625 mermaid.initialize({
6dd74de1626 theme: 'forest',
6dd74de1627 logLevel: 3,
6dd74de1628 securityLevel: 'loose',
6dd74de1629 flowchart: { curve: 'basis' },
6dd74de1630 });
6dd74de1631 </script>
6dd74de1632 <script>
6dd74de1633 function testClick(nodeId) {
6dd74de1634 console.log('clicked', nodeId);
6dd74de1635 let originalBgColor = document.querySelector('body').style.backgroundColor;
6dd74de1636 document.querySelector('body').style.backgroundColor = 'yellow';
6dd74de1637 setTimeout(function () {
6dd74de1638 document.querySelector('body').style.backgroundColor = originalBgColor;
6dd74de1639 }, 100);
6dd74de1640 }
6dd74de1641 </script>
6dd74de1642 </body>
6dd74de1643</html>