Merge pull request #3545 from weedySeaDragon/chore/update-demo-files-packages
chore: Update demo diagrams for monorepo
This commit is contained in:
Alois Klink
GitHub
commit
d8af97c152
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
|
|
@ -14,6 +14,7 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<h1>C4 context diagram demos</h1>
|
||||
<pre class="mermaid">
|
||||
C4Context
|
||||
accTitle: C4 context demo
|
||||
|
|
@ -62,6 +63,7 @@
|
|||
|
||||
UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
C4Container
|
||||
|
|
@ -101,6 +103,7 @@
|
|||
Rel(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS")
|
||||
UpdateRelStyle(backend_api, banking_system, $offsetY="-50", $offsetX="-140")
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
C4Component
|
||||
|
|
@ -140,6 +143,7 @@
|
|||
UpdateRelStyle(security, db, $offsetY="-40")
|
||||
UpdateRelStyle(mbsfacade, mbs, $offsetY="-40")
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
C4Dynamic
|
||||
|
|
@ -159,6 +163,7 @@
|
|||
UpdateRelStyle(c2, c3, $textColor="red", $offsetX="-40", $offsetY="60")
|
||||
UpdateRelStyle(c3, c4, $textColor="red", $offsetY="-40", $offsetX="10")
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
C4Deployment
|
||||
|
|
@ -210,7 +215,6 @@
|
|||
UpdateRelStyle(api, db2, $offsetX="-40", $offsetY="-20")
|
||||
UpdateRelStyle(db, db2, $offsetY="-10")
|
||||
</pre>
|
||||
|
||||
<hr />
|
||||
|
||||
<script src="./mermaid.js"></script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
|
|
@ -14,6 +14,8 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Class diagram demos</h1>
|
||||
|
||||
<pre class="mermaid">
|
||||
classDiagram
|
||||
accTitle: Demo Class Diagram
|
||||
|
|
@ -42,8 +44,8 @@
|
|||
}
|
||||
|
||||
</pre>
|
||||
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
classDiagram
|
||||
Class01 <|-- AveryLongClass : Cool
|
||||
|
|
@ -68,6 +70,7 @@
|
|||
}
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
classDiagram
|
||||
class Class01~T~
|
||||
|
|
@ -81,6 +84,7 @@
|
|||
}
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
classDiagram
|
||||
Class01~T~ <|-- AveryLongClass : Cool
|
||||
|
|
@ -104,11 +108,13 @@
|
|||
}
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
classDiagram
|
||||
Interface1 ()-- Interface1Impl
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
classDiagram
|
||||
direction LR
|
||||
|
|
@ -117,6 +123,7 @@
|
|||
Dog : species()
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
classDiagram
|
||||
direction RL
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<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=" />
|
||||
<style>
|
||||
div.mermaid {
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Data Flow Diagram Example</h2>
|
||||
<h1>Data Flow Diagram demos</h1>
|
||||
<pre class="mermaid">
|
||||
flowchart LR
|
||||
accTitle: A simple linear flowchart.
|
||||
|
|
@ -21,6 +21,8 @@
|
|||
DataStore[|borders:tb|Database] -->|input| Process((System)) -->|output| Entity[Customer];
|
||||
</pre>
|
||||
|
||||
<hr />
|
||||
|
||||
<h2>Borders Example</h2>
|
||||
<pre class="mermaid">
|
||||
flowchart TD
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
|
|
@ -10,6 +10,10 @@
|
|||
/* font-family: 'trebuchet ms', verdana, arial; */
|
||||
font-family: 'Courier New', Courier, monospace !important;
|
||||
}
|
||||
.diagram-title {
|
||||
fill: red;
|
||||
font-size: 24pt;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
|
@ -51,8 +55,8 @@ erDiagram
|
|||
}
|
||||
</pre>
|
||||
|
||||
<script src="./mermaid.js"></script>
|
||||
<script type="module">
|
||||
import mermaid from '../src/mermaid';
|
||||
mermaid.initialize({
|
||||
theme: 'default',
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
|
|
@ -15,7 +15,6 @@
|
|||
<body>
|
||||
<h1>Comparison "graph vs. flowchart"</h1>
|
||||
<h2>Sample 1</h2>
|
||||
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
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-4FC27B48-A6F9-460A-A675-021F5854FE22;
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<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-4FC27B48-A6F9-460A-A675-021F5854FE22;
|
||||
</pre>
|
||||
|
||||
<hr />
|
||||
|
||||
<h2>Sample 2</h2>
|
||||
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
graph TD
|
||||
|
|
@ -231,6 +230,7 @@
|
|||
C -->|Two| E[iPhone]
|
||||
C -->|Three| F[Car]
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<pre class="mermaid">
|
||||
|
|
@ -243,10 +243,9 @@
|
|||
C -->|Two| E[iPhone]
|
||||
C -->|Three| F[Car]
|
||||
</pre>
|
||||
|
||||
<hr />
|
||||
|
||||
<h2>Sample 3</h2>
|
||||
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
graph TD
|
||||
|
|
@ -257,6 +256,7 @@
|
|||
C -->|Two| E[\iPhone\]
|
||||
C -->|Three| F[Car]
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<pre class="mermaid">
|
||||
|
|
@ -268,10 +268,9 @@
|
|||
C -->|Two| E[\iPhone\]
|
||||
C -->|Three| F[Car]
|
||||
</pre>
|
||||
|
||||
<hr />
|
||||
|
||||
<h2>Sample 4</h2>
|
||||
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
graph LR
|
||||
|
|
@ -296,6 +295,7 @@
|
|||
35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
|
||||
36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<pre class="mermaid">
|
||||
|
|
@ -321,10 +321,9 @@
|
|||
35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
|
||||
36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
|
||||
</pre>
|
||||
|
||||
<hr />
|
||||
|
||||
<h2>Sample 5</h2>
|
||||
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
graph TD
|
||||
|
|
@ -391,6 +390,7 @@
|
|||
9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
|
||||
9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<pre class="mermaid">
|
||||
|
|
@ -458,10 +458,9 @@
|
|||
9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
|
||||
9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
|
||||
</pre>
|
||||
|
||||
<hr />
|
||||
|
||||
<h2>Sample 6</h2>
|
||||
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
graph TB
|
||||
|
|
@ -469,6 +468,7 @@
|
|||
a1-->a2
|
||||
end
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<pre class="mermaid">
|
||||
|
|
@ -477,10 +477,9 @@
|
|||
a1-->a2
|
||||
end
|
||||
</pre>
|
||||
|
||||
<hr />
|
||||
|
||||
<h2>Sample 7</h2>
|
||||
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
graph TB
|
||||
|
|
@ -511,6 +510,7 @@
|
|||
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
|
||||
style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<pre class="mermaid">
|
||||
|
|
@ -542,10 +542,9 @@
|
|||
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
|
||||
style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
|
||||
</pre>
|
||||
|
||||
<hr />
|
||||
|
||||
<h2>Sample 8</h2>
|
||||
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
graph LR
|
||||
|
|
@ -562,6 +561,7 @@
|
|||
3000"
|
||||
style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<pre class="mermaid">
|
||||
|
|
@ -579,10 +579,9 @@
|
|||
3000"
|
||||
style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
|
||||
</pre>
|
||||
|
||||
<hr />
|
||||
|
||||
<h2>Sample 9</h2>
|
||||
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
graph TD
|
||||
|
|
@ -597,6 +596,7 @@
|
|||
class A someclass;
|
||||
class C someclass;
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<pre class="mermaid">
|
||||
|
|
@ -612,10 +612,9 @@
|
|||
class A someclass;
|
||||
class C someclass;
|
||||
</pre>
|
||||
|
||||
<hr />
|
||||
|
||||
<h2>Sample 10</h2>
|
||||
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
graph TD
|
||||
|
|
@ -631,6 +630,7 @@
|
|||
class A someclass;
|
||||
class C someclass;
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<pre class="mermaid">
|
||||
|
|
@ -647,10 +647,9 @@
|
|||
class A someclass;
|
||||
class C someclass;
|
||||
</pre>
|
||||
|
||||
<hr />
|
||||
|
||||
<h2>Sample 11</h2>
|
||||
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
graph LR
|
||||
|
|
@ -666,6 +665,7 @@
|
|||
class A someclass;
|
||||
class C someclass;
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<pre class="mermaid">
|
||||
|
|
@ -682,10 +682,9 @@
|
|||
class A someclass;
|
||||
class C someclass;
|
||||
</pre>
|
||||
|
||||
<hr />
|
||||
|
||||
<h2>Sample 12</h2>
|
||||
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
graph LR
|
||||
|
|
@ -705,6 +704,7 @@
|
|||
classDef someclass fill:#f96;
|
||||
class A someclass;
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<pre class="mermaid">
|
||||
|
|
@ -725,10 +725,9 @@
|
|||
classDef someclass fill:#f96;
|
||||
class A someclass;
|
||||
</pre>
|
||||
|
||||
<hr />
|
||||
|
||||
<h2>Sample 13</h2>
|
||||
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
graph LR
|
||||
|
|
@ -742,6 +741,7 @@
|
|||
linkStyle 1 stroke:DarkGray,stroke-width:2px
|
||||
linkStyle 2 stroke:DarkGray,stroke-width:2px
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<pre class="mermaid">
|
||||
|
|
@ -756,10 +756,9 @@
|
|||
linkStyle 1 stroke:DarkGray,stroke-width:2px
|
||||
linkStyle 2 stroke:DarkGray,stroke-width:2px
|
||||
</pre>
|
||||
|
||||
<hr />
|
||||
|
||||
<h2>Sample 14</h2>
|
||||
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
graph LR
|
||||
|
|
@ -769,6 +768,7 @@
|
|||
linkStyle 1 stroke:greenyellow,stroke-width:2px
|
||||
style C fill:greenyellow,stroke:green,stroke-width:4px
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<pre class="mermaid">
|
||||
|
|
@ -779,10 +779,9 @@
|
|||
linkStyle 1 stroke:greenyellow,stroke-width:2px
|
||||
style C fill:greenyellow,stroke:green,stroke-width:4px
|
||||
</pre>
|
||||
|
||||
<hr />
|
||||
<h2>Sample 15</h2>
|
||||
|
||||
<h2>Sample 15</h2>
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
graph TB
|
||||
|
|
@ -801,6 +800,7 @@
|
|||
click E "notes://do-your-thing/id" "other protocol test"
|
||||
click F "javascript:alert('test')" "script test"
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<pre class="mermaid">
|
||||
|
|
@ -820,10 +820,9 @@
|
|||
click E "notes://do-your-thing/id" "other protocol test"
|
||||
click F "javascript:alert('test')" "script test"
|
||||
</pre>
|
||||
|
||||
<hr />
|
||||
<h2>Sample 16</h2>
|
||||
|
||||
<h2>Sample 16</h2>
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
graph LR
|
||||
|
|
@ -840,6 +839,7 @@
|
|||
click B "flowchart.html#link-clicked" "link test"
|
||||
click D testClick "click test"
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<pre class="mermaid">
|
||||
|
|
@ -857,10 +857,9 @@
|
|||
click B "flowchart.html#link-clicked" "link test"
|
||||
click D testClick "click test"
|
||||
</pre>
|
||||
|
||||
<hr />
|
||||
<h2>Sample 17</h2>
|
||||
|
||||
<h2>Sample 17</h2>
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
graph TD
|
||||
|
|
@ -873,6 +872,7 @@
|
|||
class A myClass1
|
||||
class D myClass2
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<pre class="mermaid">
|
||||
|
|
@ -886,10 +886,9 @@
|
|||
class A myClass1
|
||||
class D myClass2
|
||||
</pre>
|
||||
|
||||
<hr />
|
||||
<h2>Sample 18</h2>
|
||||
|
||||
<h2>Sample 18</h2>
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
graph LR
|
||||
|
|
@ -937,6 +936,7 @@
|
|||
style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<pre class="mermaid">
|
||||
|
|
@ -985,10 +985,9 @@
|
|||
style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
</pre>
|
||||
|
||||
<hr />
|
||||
<h2>Sample 19</h2>
|
||||
|
||||
<h2>Sample 19</h2>
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
graph TB
|
||||
|
|
@ -1036,6 +1035,7 @@
|
|||
style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<pre class="mermaid">
|
||||
|
|
@ -1087,7 +1087,6 @@
|
|||
style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style O2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
</pre>
|
||||
|
||||
<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-4FC27B48-A6F9-460A-A675-021F5854FE22;
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
graph TD
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
|
|
@ -1197,6 +1198,8 @@
|
|||
C -->|Two| E[iPhone]
|
||||
C -->|Three| F[Car]
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
graph TD
|
||||
A[/Christmas\]
|
||||
|
|
@ -1206,6 +1209,8 @@
|
|||
C -->|Two| E[\iPhone\]
|
||||
C -->|Three| F[Car]
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
graph LR
|
||||
47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget)
|
||||
|
|
@ -1229,6 +1234,8 @@
|
|||
35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
|
||||
36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
graph TD
|
||||
9e122290_1ec3_e711_8c5a_005056ad0002("fa:fa-creative-commons My System | Test Environment")
|
||||
|
|
@ -1294,12 +1301,16 @@
|
|||
9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
|
||||
9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
graph TB
|
||||
subgraph One
|
||||
a1-->a2
|
||||
end
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
graph TB
|
||||
A
|
||||
|
|
@ -1329,6 +1340,8 @@
|
|||
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
|
||||
style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
graph LR
|
||||
456ac9b0d15a8b7f1e71073221059886[1051 AAA fa:fa-check]
|
||||
|
|
@ -1344,6 +1357,8 @@
|
|||
3000"
|
||||
style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
graph TD
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
|
|
@ -1357,6 +1372,8 @@
|
|||
class A someclass;
|
||||
class C someclass;
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
graph TD
|
||||
A([stadium shape test])
|
||||
|
|
@ -1371,6 +1388,8 @@
|
|||
class A someclass;
|
||||
class C someclass;
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
graph LR
|
||||
A[[subroutine shape test]]
|
||||
|
|
@ -1385,6 +1404,8 @@
|
|||
class A someclass;
|
||||
class C someclass;
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
graph LR
|
||||
A[(cylindrical<br />shape<br />test)]
|
||||
|
|
@ -1403,6 +1424,8 @@
|
|||
classDef someclass fill:#f96;
|
||||
class A someclass;
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
graph LR
|
||||
A1[Multi<br>Line] -->|Multi<br>Line| B1(Multi<br>Line)
|
||||
|
|
@ -1415,6 +1438,8 @@
|
|||
linkStyle 1 stroke:DarkGray,stroke-width:2px
|
||||
linkStyle 2 stroke:DarkGray,stroke-width:2px
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
graph LR
|
||||
A(( )) -->|step 1| B(( ))
|
||||
|
|
@ -1423,6 +1448,8 @@
|
|||
linkStyle 1 stroke:greenyellow,stroke-width:2px
|
||||
style C fill:greenyellow,stroke:green,stroke-width:4px
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
graph TB
|
||||
TITLE["Link Click Events<br>(click the nodes below)"]
|
||||
|
|
@ -1441,6 +1468,7 @@
|
|||
click F "javascript:alert('test')" "script test"
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
graph LR
|
||||
A[red<br>text] -->|red<br>text| B(blue<br>text)
|
||||
|
|
@ -1456,6 +1484,8 @@
|
|||
click B "index.html#link-clicked" "link test"
|
||||
click D testClick "click test"
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
graph TD
|
||||
A[myClass1] --> B[default] & C[default]
|
||||
|
|
@ -1467,6 +1497,7 @@
|
|||
class A myClass1
|
||||
class D myClass2
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<h1 id="link-clicked">Anchor for "link-clicked" test</h1>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
|
|
@ -13,6 +13,7 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Gantt chart diagram demos</h1>
|
||||
<!-- accDescription Tasks for Q4 -->
|
||||
<pre class="mermaid">
|
||||
gantt
|
||||
|
|
@ -27,6 +28,7 @@
|
|||
Task in sec :2014-01-12 , 12d
|
||||
another task : 24d
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
gantt
|
||||
|
|
@ -44,6 +46,8 @@
|
|||
开发 :a, 2021-10-09, 4d
|
||||
测试 :after a, 4d
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
gantt
|
||||
title Exclusive end dates (Manual date should end on 3d)
|
||||
|
|
@ -53,6 +57,8 @@
|
|||
2 Days: 1, 2019-01-01,2d
|
||||
Manual Date: 2, 2019-01-01,2019-01-03
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
gantt
|
||||
title Inclusive end dates (Manual date should end on 4th)
|
||||
|
|
@ -63,6 +69,8 @@
|
|||
2 Days: 1, 2019-01-01,2d
|
||||
Manual Date: 2, 2019-01-01,2019-01-03
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
gantt
|
||||
title Hide today marker (vertical line should not be visible)
|
||||
|
|
@ -72,6 +80,8 @@
|
|||
section Section1
|
||||
Today: 1, -1h
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
gantt
|
||||
title Style today marker (vertical line should be 5px wide and half-transparent blue)
|
||||
|
|
@ -81,6 +91,7 @@
|
|||
section Section1
|
||||
Today: 1, -1h
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
gantt
|
||||
|
|
@ -120,6 +131,8 @@
|
|||
Add gantt diagram to demo page : 20h
|
||||
Add another diagram to demo page : 48h
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
gantt
|
||||
dateFormat YYYY-MM-DD
|
||||
|
|
@ -151,6 +164,7 @@
|
|||
Add gantt diagram to demo page : 20h
|
||||
Add another diagram to demo page : 48h
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<script>
|
||||
function ganttTestClick(a, b, c) {
|
||||
|
|
@ -167,6 +181,7 @@
|
|||
}, 100);
|
||||
}
|
||||
</script>
|
||||
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.initialize({
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
|
|
@ -14,6 +14,7 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Git diagram demo</h1>
|
||||
<pre class="mermaid">
|
||||
gitGraph:
|
||||
options
|
||||
|
|
|
|||
100
demos/index.html
100
demos/index.html
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
|
|
@ -15,6 +15,13 @@
|
|||
|
||||
<body>
|
||||
<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>
|
||||
<li>
|
||||
|
|
@ -26,6 +33,9 @@
|
|||
<li>
|
||||
<h2><a href="./dataflowchart.html">Data flow charts</a></h2>
|
||||
</li>
|
||||
<li>
|
||||
<h2><a href="./er.html">Entity Relation diagram</a></h2>
|
||||
</li>
|
||||
<li>
|
||||
<h2><a href="./flowchart.html">Flow charts</a></h2>
|
||||
</li>
|
||||
|
|
@ -51,93 +61,5 @@
|
|||
<h2><a href="./state.html">State</a></h2>
|
||||
</li>
|
||||
</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>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
|
|
@ -14,6 +14,7 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Journey diagram demo</h1>
|
||||
<pre class="mermaid">
|
||||
journey
|
||||
title My working day
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
|
|
@ -14,6 +14,7 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Pie chart demos</h1>
|
||||
<pre class="mermaid">
|
||||
pie title Pets adopted by volunteers
|
||||
accTitle: simple pie char demo
|
||||
|
|
@ -23,6 +24,7 @@
|
|||
"Rats" : 15
|
||||
</pre>
|
||||
|
||||
<hr />
|
||||
<pre class="mermaid">
|
||||
pie
|
||||
title Key elements in Product X
|
||||
|
|
@ -35,7 +37,7 @@
|
|||
</pre>
|
||||
|
||||
<script type="module">
|
||||
import mermaid from '../src/mermaid';
|
||||
import mermaid from '../packages/mermaid';
|
||||
mermaid.initialize({
|
||||
theme: 'forest',
|
||||
// themeCSS: '.node rect { fill: red; }',
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
|
|
@ -14,6 +14,7 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Requirement diagram demos</h1>
|
||||
<pre class="mermaid">
|
||||
requirementDiagram
|
||||
accTitle: Requirments demo in black and white
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
|
|
@ -14,6 +14,7 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Sequence diagram demos</h1>
|
||||
<pre class="mermaid">
|
||||
sequenceDiagram
|
||||
accTitle: test the accTitle
|
||||
|
|
@ -59,7 +60,7 @@
|
|||
Alice -->> John: Parallel message 2
|
||||
end
|
||||
</pre>
|
||||
|
||||
<hr />
|
||||
<pre class="mermaid">
|
||||
sequenceDiagram
|
||||
accTitle: Sequence diagram title is here
|
||||
|
|
@ -96,6 +97,8 @@
|
|||
Alice -->> John: Parallel message 2
|
||||
end
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
sequenceDiagram
|
||||
participant 1 as multiline<br>using #lt;br#gt;
|
||||
|
|
@ -111,6 +114,8 @@
|
|||
4->>1: multiline<br />using #lt;br /#gt;
|
||||
note right of 1: multiline<br />using #lt;br /#gt;
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
sequenceDiagram
|
||||
autonumber
|
||||
|
|
@ -121,6 +126,7 @@
|
|||
autonumber off
|
||||
John-->>Alice: I feel great!
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
|
|
@ -14,6 +14,7 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<h1>State diagram demos</h1>
|
||||
<pre class="mermaid">
|
||||
stateDiagram
|
||||
accTitle: This is the accessible title
|
||||
|
|
|
|||
Loading…
Reference in New Issue