Merge branch 'mermaid-js:develop' into develop

2025-10-31 10:54:15 +01:00 · 2022-10-06 09:47:10 +05:30
parent fdbd38ed5f d8af97c152
commit dc9ddc77ea
13 changed files with 143 additions and 146 deletions
--- a/demos/c4context.html
+++ b/demos/c4context.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>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>
--- a/demos/classchart.html
+++ b/demos/classchart.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,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
--- a/demos/dataflowchart.html
+++ b/demos/dataflowchart.html
@@ -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
--- a/demos/er.html
+++ b/demos/er.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" />
@@ -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',

--- a/demos/flowchart.html
+++ b/demos/flowchart.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,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>

--- a/demos/gantt.html
+++ b/demos/gantt.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" />
@@ -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({
--- a/demos/git.html
+++ b/demos/git.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>Git diagram demo</h1>
    <pre class="mermaid">
    gitGraph:
    options
--- a/demos/index.html
+++ b/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>
--- a/demos/journey.html
+++ b/demos/journey.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
--- a/demos/pie.html
+++ b/demos/pie.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>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; }',
--- a/demos/requirements.html
+++ b/demos/requirements.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>Requirement diagram demos</h1>
    <pre class="mermaid">
 	requirementDiagram
 	  accTitle: Requirments demo in black and white
--- a/demos/sequence.html
+++ b/demos/sequence.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>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>
--- a/demos/state.html
+++ b/demos/state.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>State diagram demos</h1>
    <pre class="mermaid">
 		stateDiagram
 		  accTitle: This is the accessible title