Merge remote-tracking branch 'origin/develop' into lazy-load-import

CODE_OF_CONDUCT.md

@@ -0,0 +1,128 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, religion, or sexual identity
+and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our
+community include:
+
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+- Focusing on what is best not just for us as individuals, but for the
+  overall community
+
+Examples of unacceptable behavior include:
+
+- The use of sexualized language or imagery, and sexual attention or
+  advances of any kind
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or email
+  address, without their explicit permission
+- Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official e-mail address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported to the community leaders responsible for enforcement at security@mermaid.live
+.
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series
+of actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or
+permanent ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior, harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within
+the community.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.0, available at
+https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
+
+Community Impact Guidelines were inspired by [Mozilla's code of conduct
+enforcement ladder](https://github.com/mozilla/diversity).
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see the FAQ at
+https://www.contributor-covenant.org/faq. Translations are available at
+https://www.contributor-covenant.org/translations.

cypress/platform/render-after-error.html

@@ -14,15 +14,16 @@
       mermaid.init({ startOnLoad: false });
 
       mermaid.mermaidAPI.initialize({ securityLevel: 'strict' });
+      (async () => {
+        try {
+          console.log('rendering');
+          await mermaid.mermaidAPI.render('graphDiv', `>`);
+        } catch (e) {}
 
-      try {
+        await mermaid.mermaidAPI.render('graphDiv', `graph LR\n a --> b`, (html) => {
-        console.log('rendering');
+          document.getElementById('graph').innerHTML = html;
-        mermaid.mermaidAPI.render('graphDiv', `>`);
+        });
-      } catch (e) {}
+      })();
-
-      mermaid.mermaidAPI.render('graphDiv', `graph LR\n a --> b`, (html) => {
-        document.getElementById('graph').innerHTML = html;
-      });
     </script>
   </body>
 </html>

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>

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

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

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',
 

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>
 

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({

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

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>

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

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; }',

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

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>

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

package.json

@@ -7,7 +7,7 @@
   "module": "dist/mermaid.core.mjs",
   "types": "dist/mermaid.d.ts",
   "type": "module",
-  "packageManager": "pnpm@7.12.2",
+  "packageManager": "pnpm@7.13.2",
   "exports": {
     ".": {
       "require": "./dist/mermaid.min.js",
@@ -71,8 +71,8 @@
   },
   "dependencies": {
     "@braintree/sanitize-url": "^6.0.0",
-    "@types/uuid": "^8.3.4",
     "@types/node": "^18.8.1",
+    "@types/uuid": "^8.3.4",
     "d3": "^7.0.0",
     "dagre": "^0.8.5",
     "dagre-d3": "^0.6.4",
@@ -107,8 +107,8 @@
     "coveralls": "^3.1.1",
     "cypress": "^10.0.0",
     "cypress-image-snapshot": "^4.0.1",
-    "esbuild": "^0.15.10",
     "documentation": "13.2.0",
+    "esbuild": "^0.15.10",
     "eslint": "^8.24.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-cypress": "^2.12.1",
@@ -128,6 +128,7 @@
     "markdown-it": "^13.0.1",
     "moment": "^2.23.0",
     "path-browserify": "^1.0.1",
+    "pnpm": "^7.13.2",
     "prettier": "^2.7.1",
     "prettier-plugin-jsdoc": "^0.4.2",
     "remark": "^14.0.2",
@@ -136,10 +137,10 @@
     "ts-node": "^10.9.1",
     "typescript": "^4.8.4",
     "unist-util-flatmap": "^1.0.0",
+    "vite": "^3.1.4",
     "vitepress": "^1.0.0-alpha.19",
     "vitepress-plugin-mermaid": "^2.0.8",
     "vitepress-plugin-search": "^1.0.4-alpha.11",
-    "vite": "^3.1.4",
     "vitest": "^0.23.4"
   },
   "resolutions": {

packages/mermaid-example-diagram/package.json

@@ -29,10 +29,6 @@
     "lint": "eslint --cache --ignore-path .gitignore . && yarn lint:jison && prettier --check .",
     "lint:fix": "eslint --fix --ignore-path .gitignore . && prettier --write .",
     "lint:jison": "ts-node-esm src/jison/lint.mts",
-    "ci": "vitest run",
-    "test": "yarn lint && vitest run",
-    "test:watch": "vitest --coverage --watch",
-    "todo-prepublishOnly": "yarn build && yarn test",
     "todo-prepare": "concurrently \"husky install ../../.husky\" \"yarn build\"",
     "todo-pre-commit": "lint-staged"
   },

packages/mermaid-mindmap/package.json

@@ -29,10 +29,6 @@
     "lint": "eslint --cache --ignore-path .gitignore . && yarn lint:jison && prettier --check .",
     "lint:fix": "eslint --fix --ignore-path .gitignore . && prettier --write .",
     "lint:jison": "ts-node-esm src/jison/lint.mts",
-    "ci": "vitest run",
-    "test": "yarn lint && vitest run",
-    "test:watch": "vitest --coverage --watch",
-    "todo-prepublishOnly": "yarn build && yarn test",
     "todo-prepare": "concurrently \"husky install ../../.husky\" \"yarn build\"",
     "todo-pre-commit": "lint-staged"
   },

packages/mermaid/package.json

@@ -41,10 +41,6 @@
     "cypress": "cypress run",
     "cypress:open": "cypress open",
     "e2e": "start-server-and-test dev http://localhost:9000/ cypress",
-    "ci": "vitest run",
-    "test": "yarn lint && vitest run",
-    "test:watch": "vitest --coverage --watch",
-    "prepublishOnly": "yarn build && yarn test",
     "todo-prepare": "concurrently \"husky install\" \"yarn build\"",
     "pre-commit": "lint-staged"
   },
@@ -92,8 +88,6 @@
     "@types/stylis": "^4.0.2",
     "@typescript-eslint/eslint-plugin": "^5.37.0",
     "@typescript-eslint/parser": "^5.37.0",
-    "@vitest/coverage-c8": "^0.23.2",
-    "@vitest/ui": "^0.23.2",
     "concurrently": "^7.4.0",
     "coveralls": "^3.1.1",
     "cypress": "^10.0.0",
@@ -125,8 +119,7 @@
     "start-server-and-test": "^1.12.6",
     "ts-node": "^10.9.1",
     "typescript": "^4.8.3",
-    "unist-util-flatmap": "^1.0.0",
+    "unist-util-flatmap": "^1.0.0"
-    "vitest": "^0.23.1"
   },
   "resolutions": {
     "d3": "^7.0.0"

packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts

@@ -1,7 +1,6 @@
 // @ts-nocheck TODO: Fix TS
 import moment from 'moment-mini';
 import ganttDb from './ganttDb';
-import { it, describe } from 'vitest';
 import { convert } from '../../tests/util';
 
 describe('when using the ganttDb', function () {

packages/mermaid/src/mermaid.spec.ts

@@ -1,7 +1,6 @@
 import mermaid from './mermaid';
 import { mermaidAPI } from './mermaidAPI';
 import './diagram-api/diagram-orchestration';
-import { vi, describe, it, beforeEach, afterEach, expect } from 'vitest';
 const spyOn = vi.spyOn;
 
 vi.mock('./mermaidAPI');

packages/mermaid/src/utils.spec.js

@@ -1,4 +1,4 @@
-import { vi, describe, it, expect, beforeEach } from 'vitest';
+import { vi } from 'vitest';
 import utils from './utils';
 import assignWithDepth from './assignWithDepth';
 import { detectType } from './diagram-api/detectType';

pnpm-lock.yaml

@@ -60,6 +60,7 @@ importers:
       moment-mini: ^2.24.0
       non-layered-tidy-tree-layout: ^2.0.2
       path-browserify: ^1.0.1
+      pnpm: ^7.13.2
       prettier: ^2.7.1
       prettier-plugin-jsdoc: ^0.4.2
       remark: ^14.0.2
@@ -134,6 +135,7 @@ importers:
       markdown-it: 13.0.1
       moment: 2.29.4
       path-browserify: 1.0.1
+      pnpm: 7.13.2
       prettier: 2.7.1
       prettier-plugin-jsdoc: 0.4.2_prettier@2.7.1
       remark: 14.0.2
@@ -164,8 +166,6 @@ importers:
       '@types/stylis': ^4.0.2
       '@typescript-eslint/eslint-plugin': ^5.37.0
       '@typescript-eslint/parser': ^5.37.0
-      '@vitest/coverage-c8': ^0.23.2
-      '@vitest/ui': ^0.23.2
       concurrently: ^7.4.0
       coveralls: ^3.1.1
       cypress: ^10.0.0
@@ -209,7 +209,6 @@ importers:
       ts-node: ^10.9.1
       typescript: ^4.8.3
       unist-util-flatmap: ^1.0.0
-      vitest: ^0.23.1
     dependencies:
       '@braintree/sanitize-url': 6.0.0
       d3: 7.6.1
@@ -237,8 +236,6 @@ importers:
       '@types/stylis': 4.0.2
       '@typescript-eslint/eslint-plugin': 5.38.0_wsb62dxj2oqwgas4kadjymcmry
       '@typescript-eslint/parser': 5.38.0_irgkl5vooow2ydyo6aokmferha
-      '@vitest/coverage-c8': 0.23.4_y2hohvmcqnhseytaw4yjcnsnkm
-      '@vitest/ui': 0.23.4
       concurrently: 7.4.0
       coveralls: 3.1.1
       cypress: 10.8.0
@@ -271,7 +268,6 @@ importers:
       ts-node: 10.9.1_typescript@4.8.3
       typescript: 4.8.3
       unist-util-flatmap: 1.0.0
-      vitest: 0.23.4_y2hohvmcqnhseytaw4yjcnsnkm
 
   packages/mermaid-example-diagram:
     specifiers:
@@ -3582,24 +3578,6 @@ packages:
       - terser
     dev: true
 
-  /@vitest/coverage-c8/0.23.4_y2hohvmcqnhseytaw4yjcnsnkm:
-    resolution: {integrity: sha512-jmD00a5DQH9gu9K+YdvVhcMuv2CzHvU4gCnySS40Ec5hKlXtlCzRfNHl00VnhfuBeaQUmaQYe60BLT413HyDdg==}
-    dependencies:
-      c8: 7.12.0
-      vitest: 0.23.4_y2hohvmcqnhseytaw4yjcnsnkm
-    transitivePeerDependencies:
-      - '@edge-runtime/vm'
-      - '@vitest/browser'
-      - '@vitest/ui'
-      - happy-dom
-      - jsdom
-      - less
-      - sass
-      - stylus
-      - supports-color
-      - terser
-    dev: true
-
   /@vitest/ui/0.23.4:
     resolution: {integrity: sha512-lNZVTTrkHThGAwNQ1ah1qCNnm70r7OLB5LCUdSqboStve/1eKTrtt27QfDSSUTG8AVJQzU0eaN/j8UocH+CqfA==}
     dependencies:
@@ -10753,6 +10731,12 @@ packages:
     engines: {node: '>=12.13.0'}
     dev: true
 
+  /pnpm/7.13.2:
+    resolution: {integrity: sha512-lOQRBcCWycLK1PB9KptqTd6iyiH7m4GRuS4G2j4b74yDx/XvRXtP/weYz8e0/ia7HX1pMF1vJCF48ssklq0TJQ==}
+    engines: {node: '>=14.6'}
+    hasBin: true
+    dev: true
+
   /posix-character-classes/0.1.1:
     resolution: {integrity: sha512-xTgYBc3fuo7Yt7JbiuFxSYGToMoz8fLoE6TC9Wx1P/u+LfeThMOAqmuyECnlBaaJb+u1m9hHiXUEtwW4OzfUJg==}
     engines: {node: '>=0.10.0'}
@@ -13187,49 +13171,6 @@ packages:
       - terser
     dev: true
 
-  /vitest/0.23.4_y2hohvmcqnhseytaw4yjcnsnkm:
-    resolution: {integrity: sha512-iukBNWqQAv8EKDBUNntspLp9SfpaVFbmzmM0sNcnTxASQZMzRw3PsM6DMlsHiI+I6GeO5/sYDg3ecpC+SNFLrQ==}
-    engines: {node: '>=v14.16.0'}
-    hasBin: true
-    peerDependencies:
-      '@edge-runtime/vm': '*'
-      '@vitest/browser': '*'
-      '@vitest/ui': '*'
-      happy-dom: '*'
-      jsdom: '*'
-    peerDependenciesMeta:
-      '@edge-runtime/vm':
-        optional: true
-      '@vitest/browser':
-        optional: true
-      '@vitest/ui':
-        optional: true
-      happy-dom:
-        optional: true
-      jsdom:
-        optional: true
-    dependencies:
-      '@types/chai': 4.3.3
-      '@types/chai-subset': 1.3.3
-      '@types/node': 18.7.21
-      '@vitest/ui': 0.23.4
-      chai: 4.3.6
-      debug: 4.3.4
-      jsdom: 20.0.0
-      local-pkg: 0.4.2
-      strip-literal: 0.4.2
-      tinybench: 2.1.5
-      tinypool: 0.3.0
-      tinyspy: 1.0.2
-      vite: 3.1.3
-    transitivePeerDependencies:
-      - less
-      - sass
-      - stylus
-      - supports-color
-      - terser
-    dev: true
-
   /vm2/3.9.11:
     resolution: {integrity: sha512-PFG8iJRSjvvBdisowQ7iVF580DXb1uCIiGaXgm7tynMR1uTBlv7UJlB1zdv5KJ+Tmq1f0Upnj3fayoEOPpCBKg==}
     engines: {node: '>=6.0'}