marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-23 09:20:03 +02:00
Code Issues Packages Projects Releases Wiki Activity

update demo diagrams to have lang, hr tags, src = mermaid.js where needed.

Browse Source
This commit is contained in:
Ashley Engelund (weedySeaDragon @ github)
2022-10-02 13:51:25 -07:00
parent 03190c1dec
commit fdb81be0a0
13 changed files with 143 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
demos/c4context.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -14,6 +14,7 @@
</head> </head>
<body> <body>
<h1>C4 context diagram demos</h1>
<pre class="mermaid"> <pre class="mermaid">
C4Context C4Context
accTitle: C4 context demo accTitle: C4 context demo
@@ -62,6 +63,7 @@
UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1") UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
</pre> </pre>
<hr />
<pre class="mermaid"> <pre class="mermaid">
C4Container C4Container
@@ -101,6 +103,7 @@
Rel(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS") Rel(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS")
UpdateRelStyle(backend_api, banking_system, $offsetY="-50", $offsetX="-140") UpdateRelStyle(backend_api, banking_system, $offsetY="-50", $offsetX="-140")
</pre> </pre>
<hr />
<pre class="mermaid"> <pre class="mermaid">
C4Component C4Component
@@ -140,6 +143,7 @@
UpdateRelStyle(security, db, $offsetY="-40") UpdateRelStyle(security, db, $offsetY="-40")
UpdateRelStyle(mbsfacade, mbs, $offsetY="-40") UpdateRelStyle(mbsfacade, mbs, $offsetY="-40")
</pre> </pre>
<hr />
<pre class="mermaid"> <pre class="mermaid">
C4Dynamic C4Dynamic
@@ -159,6 +163,7 @@
UpdateRelStyle(c2, c3, $textColor="red", $offsetX="-40", $offsetY="60") UpdateRelStyle(c2, c3, $textColor="red", $offsetX="-40", $offsetY="60")
UpdateRelStyle(c3, c4, $textColor="red", $offsetY="-40", $offsetX="10") UpdateRelStyle(c3, c4, $textColor="red", $offsetY="-40", $offsetX="10")
</pre> </pre>
<hr />
<pre class="mermaid"> <pre class="mermaid">
C4Deployment C4Deployment
@@ -210,7 +215,6 @@
UpdateRelStyle(api, db2, $offsetX="-40", $offsetY="-20") UpdateRelStyle(api, db2, $offsetX="-40", $offsetY="-20")
UpdateRelStyle(db, db2, $offsetY="-10") UpdateRelStyle(db, db2, $offsetY="-10")
</pre> </pre>
<hr /> <hr />
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>

11
demos/classchart.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -14,6 +14,8 @@
</head> </head>
<body> <body>
<h1>Class diagram demos</h1>
<pre class="mermaid"> <pre class="mermaid">
classDiagram classDiagram
accTitle: Demo Class Diagram accTitle: Demo Class Diagram
@@ -42,8 +44,8 @@
} }
</pre> </pre>
<hr /> <hr />
<pre class="mermaid"> <pre class="mermaid">
classDiagram classDiagram
Class01 <|-- AveryLongClass : Cool Class01 <|-- AveryLongClass : Cool
@@ -68,6 +70,7 @@
} }
</pre> </pre>
<hr /> <hr />
<pre class="mermaid"> <pre class="mermaid">
classDiagram classDiagram
class Class01~T~ class Class01~T~
@@ -81,6 +84,7 @@
} }
</pre> </pre>
<hr /> <hr />
<pre class="mermaid"> <pre class="mermaid">
classDiagram classDiagram
Class01~T~ <|-- AveryLongClass : Cool Class01~T~ <|-- AveryLongClass : Cool
@@ -104,11 +108,13 @@
} }
</pre> </pre>
<hr /> <hr />
<pre class="mermaid"> <pre class="mermaid">
classDiagram classDiagram
Interface1 ()-- Interface1Impl Interface1 ()-- Interface1Impl
</pre> </pre>
<hr /> <hr />
<pre class="mermaid"> <pre class="mermaid">
classDiagram classDiagram
direction LR direction LR
@@ -117,6 +123,7 @@
Dog : species() Dog : species()
</pre> </pre>
<hr /> <hr />
<pre class="mermaid"> <pre class="mermaid">
classDiagram classDiagram
direction RL direction RL

8
demos/dataflowchart.html
View File

@@ -1,9 +1,9 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Mermaid Quick Test Page</title> <title>Data Flow Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" /> <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<style> <style>
div.mermaid { div.mermaid {
@@ -13,7 +13,7 @@
</style> </style>
</head> </head>
<body> <body>
<h2>Data Flow Diagram Example</h2> <h1>Data Flow Diagram demos</h1>
<pre class="mermaid"> <pre class="mermaid">
flowchart LR flowchart LR
accTitle: A simple linear flowchart. accTitle: A simple linear flowchart.
@@ -21,6 +21,8 @@
DataStore[|borders:tb|Database] -->|input| Process((System)) -->|output| Entity[Customer]; DataStore[|borders:tb|Database] -->|input| Process((System)) -->|output| Entity[Customer];
</pre> </pre>
<hr />
<h2>Borders Example</h2> <h2>Borders Example</h2>
<pre class="mermaid"> <pre class="mermaid">
flowchart TD flowchart TD

8
demos/er.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -10,6 +10,10 @@
/* font-family: 'trebuchet ms', verdana, arial; */ /* font-family: 'trebuchet ms', verdana, arial; */
font-family: 'Courier New', Courier, monospace !important; font-family: 'Courier New', Courier, monospace !important;
} }
.diagram-title {
fill: red;
font-size: 24pt;
}
</style> </style>
</head> </head>
@@ -51,8 +55,8 @@ erDiagram
} }
</pre> </pre>
<script src="./mermaid.js"></script>
<script type="module"> <script type="module">
import mermaid from '../src/mermaid';
mermaid.initialize({ mermaid.initialize({
theme: 'default', theme: 'default',

109
demos/flowchart.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -15,7 +15,6 @@
<body> <body>
<h1>Comparison "graph vs. flowchart"</h1> <h1>Comparison "graph vs. flowchart"</h1>
<h2>Sample 1</h2> <h2>Sample 1</h2>
<h3>graph</h3> <h3>graph</h3>
<pre class="mermaid"> <pre class="mermaid">
graph LR graph LR
@@ -117,6 +116,7 @@
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A; sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22; sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
</pre> </pre>
<hr />
<h3>flowchart</h3> <h3>flowchart</h3>
<pre class="mermaid"> <pre class="mermaid">
@@ -216,10 +216,9 @@
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A; sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22; sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
</pre> </pre>
<hr /> <hr />
<h2>Sample 2</h2> <h2>Sample 2</h2>
<h3>graph</h3> <h3>graph</h3>
<pre class="mermaid"> <pre class="mermaid">
graph TD graph TD
@@ -231,6 +230,7 @@
C -->|Two| E[iPhone] C -->|Two| E[iPhone]
C -->|Three| F[Car] C -->|Three| F[Car]
</pre> </pre>
<hr />
<h3>flowchart</h3> <h3>flowchart</h3>
<pre class="mermaid"> <pre class="mermaid">
@@ -243,10 +243,9 @@
C -->|Two| E[iPhone] C -->|Two| E[iPhone]
C -->|Three| F[Car] C -->|Three| F[Car]
</pre> </pre>
<hr /> <hr />
<h2>Sample 3</h2> <h2>Sample 3</h2>
<h3>graph</h3> <h3>graph</h3>
<pre class="mermaid"> <pre class="mermaid">
graph TD graph TD
@@ -257,6 +256,7 @@
C -->|Two| E[\iPhone\] C -->|Two| E[\iPhone\]
C -->|Three| F[Car] C -->|Three| F[Car]
</pre> </pre>
<hr />
<h3>flowchart</h3> <h3>flowchart</h3>
<pre class="mermaid"> <pre class="mermaid">
@@ -268,10 +268,9 @@
C -->|Two| E[\iPhone\] C -->|Two| E[\iPhone\]
C -->|Three| F[Car] C -->|Three| F[Car]
</pre> </pre>
<hr /> <hr />
<h2>Sample 4</h2> <h2>Sample 4</h2>
<h3>graph</h3> <h3>graph</h3>
<pre class="mermaid"> <pre class="mermaid">
graph LR graph LR
@@ -296,6 +295,7 @@
35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails) 35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails) 36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
</pre> </pre>
<hr />
<h3>flowchart</h3> <h3>flowchart</h3>
<pre class="mermaid"> <pre class="mermaid">
@@ -321,10 +321,9 @@
35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails) 35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails) 36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
</pre> </pre>
<hr /> <hr />
<h2>Sample 5</h2> <h2>Sample 5</h2>
<h3>graph</h3> <h3>graph</h3>
<pre class="mermaid"> <pre class="mermaid">
graph TD graph TD
@@ -391,6 +390,7 @@
9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002 9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002 9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
</pre> </pre>
<hr />
<h3>flowchart</h3> <h3>flowchart</h3>
<pre class="mermaid"> <pre class="mermaid">
@@ -458,10 +458,9 @@
9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002 9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002 9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
</pre> </pre>
<hr /> <hr />
<h2>Sample 6</h2> <h2>Sample 6</h2>
<h3>graph</h3> <h3>graph</h3>
<pre class="mermaid"> <pre class="mermaid">
graph TB graph TB
@@ -469,6 +468,7 @@
a1-->a2 a1-->a2
end end
</pre> </pre>
<hr />
<h3>flowchart</h3> <h3>flowchart</h3>
<pre class="mermaid"> <pre class="mermaid">
@@ -477,10 +477,9 @@
a1-->a2 a1-->a2
end end
</pre> </pre>
<hr /> <hr />
<h2>Sample 7</h2> <h2>Sample 7</h2>
<h3>graph</h3> <h3>graph</h3>
<pre class="mermaid"> <pre class="mermaid">
graph TB graph TB
@@ -511,6 +510,7 @@
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
</pre> </pre>
<hr />
<h3>flowchart</h3> <h3>flowchart</h3>
<pre class="mermaid"> <pre class="mermaid">
@@ -542,10 +542,9 @@
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
</pre> </pre>
<hr /> <hr />
<h2>Sample 8</h2> <h2>Sample 8</h2>
<h3>graph</h3> <h3>graph</h3>
<pre class="mermaid"> <pre class="mermaid">
graph LR graph LR
@@ -562,6 +561,7 @@
3000" 3000"
style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
</pre> </pre>
<hr />
<h3>flowchart</h3> <h3>flowchart</h3>
<pre class="mermaid"> <pre class="mermaid">
@@ -579,10 +579,9 @@
3000" 3000"
style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
</pre> </pre>
<hr /> <hr />
<h2>Sample 9</h2> <h2>Sample 9</h2>
<h3>graph</h3> <h3>graph</h3>
<pre class="mermaid"> <pre class="mermaid">
graph TD graph TD
@@ -597,6 +596,7 @@
class A someclass; class A someclass;
class C someclass; class C someclass;
</pre> </pre>
<hr />
<h3>flowchart</h3> <h3>flowchart</h3>
<pre class="mermaid"> <pre class="mermaid">
@@ -612,10 +612,9 @@
class A someclass; class A someclass;
class C someclass; class C someclass;
</pre> </pre>
<hr /> <hr />
<h2>Sample 10</h2> <h2>Sample 10</h2>
<h3>graph</h3> <h3>graph</h3>
<pre class="mermaid"> <pre class="mermaid">
graph TD graph TD
@@ -631,6 +630,7 @@
class A someclass; class A someclass;
class C someclass; class C someclass;
</pre> </pre>
<hr />
<h3>flowchart</h3> <h3>flowchart</h3>
<pre class="mermaid"> <pre class="mermaid">
@@ -647,10 +647,9 @@
class A someclass; class A someclass;
class C someclass; class C someclass;
</pre> </pre>
<hr /> <hr />
<h2>Sample 11</h2> <h2>Sample 11</h2>
<h3>graph</h3> <h3>graph</h3>
<pre class="mermaid"> <pre class="mermaid">
graph LR graph LR
@@ -666,6 +665,7 @@
class A someclass; class A someclass;
class C someclass; class C someclass;
</pre> </pre>
<hr />
<h3>flowchart</h3> <h3>flowchart</h3>
<pre class="mermaid"> <pre class="mermaid">
@@ -682,10 +682,9 @@
class A someclass; class A someclass;
class C someclass; class C someclass;
</pre> </pre>
<hr /> <hr />
<h2>Sample 12</h2> <h2>Sample 12</h2>
<h3>graph</h3> <h3>graph</h3>
<pre class="mermaid"> <pre class="mermaid">
graph LR graph LR
@@ -705,6 +704,7 @@
classDef someclass fill:#f96; classDef someclass fill:#f96;
class A someclass; class A someclass;
</pre> </pre>
<hr />
<h3>flowchart</h3> <h3>flowchart</h3>
<pre class="mermaid"> <pre class="mermaid">
@@ -725,10 +725,9 @@
classDef someclass fill:#f96; classDef someclass fill:#f96;
class A someclass; class A someclass;
</pre> </pre>
<hr /> <hr />
<h2>Sample 13</h2> <h2>Sample 13</h2>
<h3>graph</h3> <h3>graph</h3>
<pre class="mermaid"> <pre class="mermaid">
graph LR graph LR
@@ -742,6 +741,7 @@
linkStyle 1 stroke:DarkGray,stroke-width:2px linkStyle 1 stroke:DarkGray,stroke-width:2px
linkStyle 2 stroke:DarkGray,stroke-width:2px linkStyle 2 stroke:DarkGray,stroke-width:2px
</pre> </pre>
<hr />
<h3>flowchart</h3> <h3>flowchart</h3>
<pre class="mermaid"> <pre class="mermaid">
@@ -756,10 +756,9 @@
linkStyle 1 stroke:DarkGray,stroke-width:2px linkStyle 1 stroke:DarkGray,stroke-width:2px
linkStyle 2 stroke:DarkGray,stroke-width:2px linkStyle 2 stroke:DarkGray,stroke-width:2px
</pre> </pre>
<hr /> <hr />
<h2>Sample 14</h2> <h2>Sample 14</h2>
<h3>graph</h3> <h3>graph</h3>
<pre class="mermaid"> <pre class="mermaid">
graph LR graph LR
@@ -769,6 +768,7 @@
linkStyle 1 stroke:greenyellow,stroke-width:2px linkStyle 1 stroke:greenyellow,stroke-width:2px
style C fill:greenyellow,stroke:green,stroke-width:4px style C fill:greenyellow,stroke:green,stroke-width:4px
</pre> </pre>
<hr />
<h3>flowchart</h3> <h3>flowchart</h3>
<pre class="mermaid"> <pre class="mermaid">
@@ -779,10 +779,9 @@
linkStyle 1 stroke:greenyellow,stroke-width:2px linkStyle 1 stroke:greenyellow,stroke-width:2px
style C fill:greenyellow,stroke:green,stroke-width:4px style C fill:greenyellow,stroke:green,stroke-width:4px
</pre> </pre>
<hr /> <hr />
<h2>Sample 15</h2>
<h2>Sample 15</h2>
<h3>graph</h3> <h3>graph</h3>
<pre class="mermaid"> <pre class="mermaid">
graph TB graph TB
@@ -801,6 +800,7 @@
click E "notes://do-your-thing/id" "other protocol test" click E "notes://do-your-thing/id" "other protocol test"
click F "javascript:alert('test')" "script test" click F "javascript:alert('test')" "script test"
</pre> </pre>
<hr />
<h3>flowchart</h3> <h3>flowchart</h3>
<pre class="mermaid"> <pre class="mermaid">
@@ -820,10 +820,9 @@
click E "notes://do-your-thing/id" "other protocol test" click E "notes://do-your-thing/id" "other protocol test"
click F "javascript:alert('test')" "script test" click F "javascript:alert('test')" "script test"
</pre> </pre>
<hr /> <hr />
<h2>Sample 16</h2>
<h2>Sample 16</h2>
<h3>graph</h3> <h3>graph</h3>
<pre class="mermaid"> <pre class="mermaid">
graph LR graph LR
@@ -840,6 +839,7 @@
click B "flowchart.html#link-clicked" "link test" click B "flowchart.html#link-clicked" "link test"
click D testClick "click test" click D testClick "click test"
</pre> </pre>
<hr />
<h3>flowchart</h3> <h3>flowchart</h3>
<pre class="mermaid"> <pre class="mermaid">
@@ -857,10 +857,9 @@
click B "flowchart.html#link-clicked" "link test" click B "flowchart.html#link-clicked" "link test"
click D testClick "click test" click D testClick "click test"
</pre> </pre>
<hr /> <hr />
<h2>Sample 17</h2>
<h2>Sample 17</h2>
<h3>graph</h3> <h3>graph</h3>
<pre class="mermaid"> <pre class="mermaid">
graph TD graph TD
@@ -873,6 +872,7 @@
class A myClass1 class A myClass1
class D myClass2 class D myClass2
</pre> </pre>
<hr />
<h3>flowchart</h3> <h3>flowchart</h3>
<pre class="mermaid"> <pre class="mermaid">
@@ -886,10 +886,9 @@
class A myClass1 class A myClass1
class D myClass2 class D myClass2
</pre> </pre>
<hr /> <hr />
<h2>Sample 18</h2>
<h2>Sample 18</h2>
<h3>graph</h3> <h3>graph</h3>
<pre class="mermaid"> <pre class="mermaid">
graph LR graph LR
@@ -937,6 +936,7 @@
style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
</pre> </pre>
<hr />
<h3>flowchart</h3> <h3>flowchart</h3>
<pre class="mermaid"> <pre class="mermaid">
@@ -985,10 +985,9 @@
style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
</pre> </pre>
<hr /> <hr />
<h2>Sample 19</h2>
<h2>Sample 19</h2>
<h3>graph</h3> <h3>graph</h3>
<pre class="mermaid"> <pre class="mermaid">
graph TB graph TB
@@ -1036,6 +1035,7 @@
style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
</pre> </pre>
<hr />
<h3>flowchart</h3> <h3>flowchart</h3>
<pre class="mermaid"> <pre class="mermaid">
@@ -1087,7 +1087,6 @@
style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
style O2 stroke:#0000ff,fill:#ccccff,color:#0000ff style O2 stroke:#0000ff,fill:#ccccff,color:#0000ff
</pre> </pre>
<hr /> <hr />
<hr /> <hr />
@@ -1189,6 +1188,8 @@
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A; sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22; sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
</pre> </pre>
<hr />
<pre class="mermaid"> <pre class="mermaid">
graph TD graph TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
@@ -1197,6 +1198,8 @@
C -->|Two| E[iPhone] C -->|Two| E[iPhone]
C -->|Three| F[Car] C -->|Three| F[Car]
</pre> </pre>
<hr />
<pre class="mermaid"> <pre class="mermaid">
graph TD graph TD
A[/Christmas\] A[/Christmas\]
@@ -1206,6 +1209,8 @@
C -->|Two| E[\iPhone\] C -->|Two| E[\iPhone\]
C -->|Three| F[Car] C -->|Three| F[Car]
</pre> </pre>
<hr />
<pre class="mermaid"> <pre class="mermaid">
graph LR graph LR
47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget) 47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget)
@@ -1229,6 +1234,8 @@
35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails) 35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails) 36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
</pre> </pre>
<hr />
<pre class="mermaid"> <pre class="mermaid">
graph TD graph TD
9e122290_1ec3_e711_8c5a_005056ad0002("fa:fa-creative-commons My System | Test Environment") 9e122290_1ec3_e711_8c5a_005056ad0002("fa:fa-creative-commons My System | Test Environment")
@@ -1294,12 +1301,16 @@
9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002 9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002 9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
</pre> </pre>
<hr />
<pre class="mermaid"> <pre class="mermaid">
graph TB graph TB
subgraph One subgraph One
a1-->a2 a1-->a2
end end
</pre> </pre>
<hr />
<pre class="mermaid"> <pre class="mermaid">
graph TB graph TB
A A
@@ -1329,6 +1340,8 @@
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
</pre> </pre>
<hr />
<pre class="mermaid"> <pre class="mermaid">
graph LR graph LR
456ac9b0d15a8b7f1e71073221059886[1051 AAA fa:fa-check] 456ac9b0d15a8b7f1e71073221059886[1051 AAA fa:fa-check]
@@ -1344,6 +1357,8 @@
3000" 3000"
style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
</pre> </pre>
<hr />
<pre class="mermaid"> <pre class="mermaid">
graph TD graph TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
@@ -1357,6 +1372,8 @@
class A someclass; class A someclass;
class C someclass; class C someclass;
</pre> </pre>
<hr />
<pre class="mermaid"> <pre class="mermaid">
graph TD graph TD
A([stadium shape test]) A([stadium shape test])
@@ -1371,6 +1388,8 @@
class A someclass; class A someclass;
class C someclass; class C someclass;
</pre> </pre>
<hr />
<pre class="mermaid"> <pre class="mermaid">
graph LR graph LR
A[[subroutine shape test]] A[[subroutine shape test]]
@@ -1385,6 +1404,8 @@
class A someclass; class A someclass;
class C someclass; class C someclass;
</pre> </pre>
<hr />
<pre class="mermaid"> <pre class="mermaid">
graph LR graph LR
A[(cylindrical<br />shape<br />test)] A[(cylindrical<br />shape<br />test)]
@@ -1403,6 +1424,8 @@
classDef someclass fill:#f96; classDef someclass fill:#f96;
class A someclass; class A someclass;
</pre> </pre>
<hr />
<pre class="mermaid"> <pre class="mermaid">
graph LR graph LR
A1[Multi<br>Line] -->|Multi<br>Line| B1(Multi<br>Line) A1[Multi<br>Line] -->|Multi<br>Line| B1(Multi<br>Line)
@@ -1415,6 +1438,8 @@
linkStyle 1 stroke:DarkGray,stroke-width:2px linkStyle 1 stroke:DarkGray,stroke-width:2px
linkStyle 2 stroke:DarkGray,stroke-width:2px linkStyle 2 stroke:DarkGray,stroke-width:2px
</pre> </pre>
<hr />
<pre class="mermaid"> <pre class="mermaid">
graph LR graph LR
A(( )) -->|step 1| B(( )) A(( )) -->|step 1| B(( ))
@@ -1423,6 +1448,8 @@
linkStyle 1 stroke:greenyellow,stroke-width:2px linkStyle 1 stroke:greenyellow,stroke-width:2px
style C fill:greenyellow,stroke:green,stroke-width:4px style C fill:greenyellow,stroke:green,stroke-width:4px
</pre> </pre>
<hr />
<pre class="mermaid"> <pre class="mermaid">
graph TB graph TB
TITLE["Link Click Events<br>(click the nodes below)"] TITLE["Link Click Events<br>(click the nodes below)"]
@@ -1441,6 +1468,7 @@
click F "javascript:alert('test')" "script test" click F "javascript:alert('test')" "script test"
</pre> </pre>
<hr /> <hr />
<pre class="mermaid"> <pre class="mermaid">
graph LR graph LR
A[red<br>text] -->|red<br>text| B(blue<br>text) A[red<br>text] -->|red<br>text| B(blue<br>text)
@@ -1456,6 +1484,8 @@
click B "index.html#link-clicked" "link test" click B "index.html#link-clicked" "link test"
click D testClick "click test" click D testClick "click test"
</pre> </pre>
<hr />
<pre class="mermaid"> <pre class="mermaid">
graph TD graph TD
A[myClass1] --> B[default] & C[default] A[myClass1] --> B[default] & C[default]
@@ -1467,6 +1497,7 @@
class A myClass1 class A myClass1
class D myClass2 class D myClass2
</pre> </pre>
<hr />
<h1 id="link-clicked">Anchor for "link-clicked" test</h1> <h1 id="link-clicked">Anchor for "link-clicked" test</h1>

17
demos/gantt.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -13,6 +13,7 @@
</head> </head>
<body> <body>
<h1>Gantt chart diagram demos</h1>
<!-- accDescription Tasks for Q4 --> <!-- accDescription Tasks for Q4 -->
<pre class="mermaid"> <pre class="mermaid">
gantt gantt
@@ -27,6 +28,7 @@
Task in sec :2014-01-12 , 12d Task in sec :2014-01-12 , 12d
another task : 24d another task : 24d
</pre> </pre>
<hr />
<pre class="mermaid"> <pre class="mermaid">
gantt gantt
@@ -44,6 +46,8 @@
开发 :a, 2021-10-09, 4d 开发 :a, 2021-10-09, 4d
测试 :after a, 4d 测试 :after a, 4d
</pre> </pre>
<hr />
<pre class="mermaid"> <pre class="mermaid">
gantt gantt
title Exclusive end dates (Manual date should end on 3d) title Exclusive end dates (Manual date should end on 3d)
@@ -53,6 +57,8 @@
2 Days: 1, 2019-01-01,2d 2 Days: 1, 2019-01-01,2d
Manual Date: 2, 2019-01-01,2019-01-03 Manual Date: 2, 2019-01-01,2019-01-03
</pre> </pre>
<hr />
<pre class="mermaid"> <pre class="mermaid">
gantt gantt
title Inclusive end dates (Manual date should end on 4th) title Inclusive end dates (Manual date should end on 4th)
@@ -63,6 +69,8 @@
2 Days: 1, 2019-01-01,2d 2 Days: 1, 2019-01-01,2d
Manual Date: 2, 2019-01-01,2019-01-03 Manual Date: 2, 2019-01-01,2019-01-03
</pre> </pre>
<hr />
<pre class="mermaid"> <pre class="mermaid">
gantt gantt
title Hide today marker (vertical line should not be visible) title Hide today marker (vertical line should not be visible)
@@ -72,6 +80,8 @@
section Section1 section Section1
Today: 1, -1h Today: 1, -1h
</pre> </pre>
<hr />
<pre class="mermaid"> <pre class="mermaid">
gantt gantt
title Style today marker (vertical line should be 5px wide and half-transparent blue) title Style today marker (vertical line should be 5px wide and half-transparent blue)
@@ -81,6 +91,7 @@
section Section1 section Section1
Today: 1, -1h Today: 1, -1h
</pre> </pre>
<hr />
<pre class="mermaid"> <pre class="mermaid">
gantt gantt
@@ -120,6 +131,8 @@
Add gantt diagram to demo page : 20h Add gantt diagram to demo page : 20h
Add another diagram to demo page : 48h Add another diagram to demo page : 48h
</pre> </pre>
<hr />
<pre class="mermaid"> <pre class="mermaid">
gantt gantt
dateFormat YYYY-MM-DD dateFormat YYYY-MM-DD
@@ -151,6 +164,7 @@
Add gantt diagram to demo page : 20h Add gantt diagram to demo page : 20h
Add another diagram to demo page : 48h Add another diagram to demo page : 48h
</pre> </pre>
<hr />
<script> <script>
function ganttTestClick(a, b, c) { function ganttTestClick(a, b, c) {
@@ -167,6 +181,7 @@
}, 100); }, 100);
} }
</script> </script>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
mermaid.initialize({ mermaid.initialize({

3
demos/git.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -14,6 +14,7 @@
</head> </head>
<body> <body>
<h1>Git diagram demo</h1>
<pre class="mermaid"> <pre class="mermaid">
gitGraph: gitGraph:
options options

100
demos/index.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -15,6 +15,13 @@
<body> <body>
<h1>Mermaid quick test and demo pages</h1> <h1>Mermaid quick test and demo pages</h1>
<p>
Some of these pages have duplicates; some are slow to load because they have so many graphs.
</p>
<p>
If you'd like to clean up one of the pages, please feel free to
<a href="https://github.com/mermaid-js/mermaid/pulls">submit a pull request (PR).</a>
</p>
<ul> <ul>
<li> <li>
@@ -26,6 +33,9 @@
<li> <li>
<h2><a href="./dataflowchart.html">Data flow charts</a></h2> <h2><a href="./dataflowchart.html">Data flow charts</a></h2>
</li> </li>
<li>
<h2><a href="./er.html">Entity Relation diagram</a></h2>
</li>
<li> <li>
<h2><a href="./flowchart.html">Flow charts</a></h2> <h2><a href="./flowchart.html">Flow charts</a></h2>
</li> </li>
@@ -51,93 +61,5 @@
<h2><a href="./state.html">State</a></h2> <h2><a href="./state.html">State</a></h2>
</li> </li>
</ul> </ul>
<script src="./mermaid.js"></script>
<script>
const ALLOWED_TAGS = [
'a',
'b',
'blockquote',
'br',
'dd',
'div',
'dl',
'dt',
'em',
'foreignObject',
'h1',
'h2',
'h3',
'h4',
'h5',
'h6',
'h7',
'h8',
'hr',
'i',
'li',
'ul',
'ol',
'p',
'pre',
'span',
'strike',
'strong',
'table',
'tbody',
'td',
'tfoot',
'th',
'thead',
'tr',
];
mermaid.initialize({
theme: 'forest',
// themeCSS: '.node rect { fill: red; }',
logLevel: 3,
securityLevel: 'loose',
flowchart: { curve: 'basis' },
gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50 },
dompurifyConfig: {
USE_PROFILES: {
svg: true,
},
ADD_TAGS: ALLOWED_TAGS,
ADD_ATTR: ['transform-origin'],
},
// sequenceDiagram: { actorMargin: 300 } // deprecated
});
</script>
<script>
function ganttTestClick(a, b, c) {
console.log('a:', a);
console.log('b:', b);
console.log('c:', c);
}
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>
<script>
const testLineEndings = (test, input) => {
try {
mermaid.render(test, input, () => {
//no-op
});
} catch (err) {
console.error('Error in %s:\n\n%s', test, err);
}
};
testLineEndings('CR', 'graph LR\rsubgraph CR\rA --> B\rend');
testLineEndings('LF', 'graph LR\nsubgraph LF\nA --> B\nend');
testLineEndings('CRLF', 'graph LR\r\nsubgraph CRLF\r\nA --> B\r\nend');
</script>
</body> </body>
</html> </html>

3
demos/journey.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -14,6 +14,7 @@
</head> </head>
<body> <body>
<h1>Journey diagram demo</h1>
<pre class="mermaid"> <pre class="mermaid">
journey journey
title My working day title My working day

6
demos/pie.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -14,6 +14,7 @@
</head> </head>
<body> <body>
<h1>Pie chart demos</h1>
<pre class="mermaid"> <pre class="mermaid">
pie title Pets adopted by volunteers pie title Pets adopted by volunteers
accTitle: simple pie char demo accTitle: simple pie char demo
@@ -23,6 +24,7 @@
"Rats" : 15 "Rats" : 15
</pre> </pre>
<hr />
<pre class="mermaid"> <pre class="mermaid">
pie pie
title Key elements in Product X title Key elements in Product X
@@ -35,7 +37,7 @@
</pre> </pre>
<script type="module"> <script type="module">
import mermaid from '../src/mermaid'; import mermaid from '../packages/mermaid';
mermaid.initialize({ mermaid.initialize({
theme: 'forest', theme: 'forest',
// themeCSS: '.node rect { fill: red; }', // themeCSS: '.node rect { fill: red; }',

3
demos/requirements.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -14,6 +14,7 @@
</head> </head>
<body> <body>
<h1>Requirement diagram demos</h1>
<pre class="mermaid"> <pre class="mermaid">
requirementDiagram requirementDiagram
accTitle: Requirments demo in black and white accTitle: Requirments demo in black and white

10
demos/sequence.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -14,6 +14,7 @@
</head> </head>
<body> <body>
<h1>Sequence diagram demos</h1>
<pre class="mermaid"> <pre class="mermaid">
sequenceDiagram sequenceDiagram
accTitle: test the accTitle accTitle: test the accTitle
@@ -59,7 +60,7 @@
Alice -->> John: Parallel message 2 Alice -->> John: Parallel message 2
end end
</pre> </pre>
<hr />
<pre class="mermaid"> <pre class="mermaid">
sequenceDiagram sequenceDiagram
accTitle: Sequence diagram title is here accTitle: Sequence diagram title is here
@@ -96,6 +97,8 @@
Alice -->> John: Parallel message 2 Alice -->> John: Parallel message 2
end end
</pre> </pre>
<hr />
<pre class="mermaid"> <pre class="mermaid">
sequenceDiagram sequenceDiagram
participant 1 as multiline<br>using #lt;br#gt; participant 1 as multiline<br>using #lt;br#gt;
@@ -111,6 +114,8 @@
4->>1: multiline<br />using #lt;br /#gt; 4->>1: multiline<br />using #lt;br /#gt;
note right of 1: multiline<br />using #lt;br /#gt; note right of 1: multiline<br />using #lt;br /#gt;
</pre> </pre>
<hr />
<pre class="mermaid"> <pre class="mermaid">
sequenceDiagram sequenceDiagram
autonumber autonumber
@@ -121,6 +126,7 @@
autonumber off autonumber off
John-->>Alice: I feel great! John-->>Alice: I feel great!
</pre> </pre>
<hr />
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>

3
demos/state.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -14,6 +14,7 @@
</head> </head>
<body> <body>
<h1>State diagram demos</h1>
<pre class="mermaid"> <pre class="mermaid">
stateDiagram stateDiagram
accTitle: This is the accessible title accTitle: This is the accessible title