mermaid

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Mermaid Quick 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> <div 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; </div> <h3>flowchart</h3> <div 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; </div> <hr/> <h2>Sample 2</h2> <h3>graph</h3> <div 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] </div> <h3>flowchart</h3> <div class="mermaid"> flowchart 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] </div> <hr/> <h2>Sample 3</h2> <h3>graph</h3> <div 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] </div> <h3>flowchart</h3> <div 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] </div> <hr/> <h2>Sample 4</h2> <h3>graph</h3> <div 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) </div> <h3>flowchart</h3> <div 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) </div> <hr/> <h2>Sample 5</h2> <h3>graph</h3> <div 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 </div> <h3>flowchart</h3> <div 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 </div> <hr/> <h2>Sample 6</h2> <h3>graph</h3> <div class="mermaid"> graph TB subgraph One a1-->a2 end </div> <h3>flowchart</h3> <div class="mermaid"> flowchart TB subgraph One a1-->a2 end </div> <hr/> <h2>Sample 7</h2> <h3>graph</h3> <div 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 </div> <h3>flowchart</h3> <div 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 </div> <hr/> <h2>Sample 8</h2> <h3>graph</h3> <div 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 </div> <h3>flowchart</h3> <div 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 </div> <hr/> <h2>Sample 9</h2> <h3>graph</h3> <div 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; </div> <h3>flowchart</h3> <div 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; </div> <hr/> <h2>Sample 10</h2> <h3>graph</h3> <div 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; </div> <h3>flowchart</h3> <div 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; </div> <hr/> <h2>Sample 11</h2> <h3>graph</h3> <div 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; </div> <h3>flowchart</h3> <div 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; </div> <hr/> <h2>Sample 12</h2> <h3>graph</h3> <div 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; </div> <h3>flowchart</h3> <div 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; </div> <hr/> <h2>Sample 13</h2> <h3>graph</h3> <div 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 </div> <h3>flowchart</h3> <div 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 </div> <hr/> <h2>Sample 14</h2> <h3>graph</h3> <div 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 </div> <h3>flowchart</h3> <div 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 </div> <hr/> <h2>Sample 15</h2> <h3>graph</h3> <div 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" </div> <h3>flowchart</h3> <div 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" </div> <hr/> <h2>Sample 16</h2> <h3>graph</h3> <div 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" </div> <h3>flowchart</h3> <div 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" </div> <hr/> <h2>Sample 17</h2> <h3>graph</h3> <div 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 </div> <h3>flowchart</h3> <div 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 </div> <hr/> <h2>Sample 18</h2> <h3>graph</h3> <div 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 </div> <h3>flowchart</h3> <div 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 </div> <hr/> <h2>Sample 19</h2> <h3>graph</h3> <div 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 </div> <h3>flowchart</h3> <div 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] 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 </div> <hr/> <h1 id="link-clicked">Anchor for "link-clicked" test</h1> <script src="./mermaid.js"></script> <script> mermaid.initialize({ theme: 'forest', logLevel: 3, securityLevel: 'loose', flowchart: { curve: 'basis' } }); </script> <script> function testClick(nodeId) { console.log("clicked", nodeId) var originalBgColor = document.querySelector('body').style.backgroundColor document.querySelector('body').style.backgroundColor = 'yellow' setTimeout(function() { document.querySelector('body').style.backgroundColor = originalBgColor }, 100) } </script> </body> </html>