diff --git a/demos/c4context.html b/demos/c4context.html
index 1485d42d8..ec7197b98 100644
--- 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>
diff --git a/demos/classchart.html b/demos/classchart.html
index e15495b95..5979152d6 100644
--- 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
diff --git a/demos/dataflowchart.html b/demos/dataflowchart.html
index 34011b5fe..dc7fe05af 100644
--- 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
diff --git a/demos/er.html b/demos/er.html
index 68aaf18a2..4c1a72c20 100644
--- 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',
 
diff --git a/demos/flowchart.html b/demos/flowchart.html
index d8556356c..a3c139c6b 100644
--- 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>
 
diff --git a/demos/gantt.html b/demos/gantt.html
index 52fe568df..f53dae279 100644
--- 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({
diff --git a/demos/git.html b/demos/git.html
index f6ea12031..15b4401db 100644
--- 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
diff --git a/demos/index.html b/demos/index.html
index f0ddb6ac3..a65681ddf 100644
--- 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>
diff --git a/demos/journey.html b/demos/journey.html
index dc1c379d3..c5c6c25e8 100644
--- 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
diff --git a/demos/pie.html b/demos/pie.html
index 3232d2534..333ef9491 100644
--- 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; }',
diff --git a/demos/requirements.html b/demos/requirements.html
index cebaf7e02..b63846583 100644
--- 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
diff --git a/demos/sequence.html b/demos/sequence.html
index 934f9b110..2000d489a 100644
--- 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>
diff --git a/demos/state.html b/demos/state.html
index 90c6efb8b..7f85fceb1 100644
--- 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
