Fix for broken test

fix(tests): E2E

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-yarn pre-commit
+pnpm run pre-commit

.lintstagedrc.json

@@ -1,6 +1,6 @@
 {
-  "src/docs/**": ["yarn docs:build --git"],
-  "src/docs.mts": ["yarn docs:build --git"],
+  "packages/mermaid/src/docs/**": ["pnpm run docs:build --git"],
+  "packages/mermaid/src/docs.mts": ["pnpm run docs:build --git"],
   "*.{ts,js,json,html,md,mts}": ["eslint --fix", "prettier --write"],
-  "*.jison": ["yarn lint:jison"]
+  "*.jison": ["pnpm run lint:jison"]
 }

.vite/build.ts

@@ -22,22 +22,22 @@ const packageOptions = {
   'mermaid-mindmap': {
     name: 'mermaid-mindmap',
     packageName: 'mermaid-mindmap',
-    file: 'add-diagram.ts',
+    file: 'diagram-definition.ts',
   },
   'mermaid-mindmap-detector': {
     name: 'mermaid-mindmap-detector',
     packageName: 'mermaid-mindmap',
-    file: 'registry.ts',
+    file: 'detector.ts',
   },
   'mermaid-example-diagram': {
     name: 'mermaid-example-diagram',
     packageName: 'mermaid-example-diagram',
-    file: 'add-diagram.ts',
+    file: 'diagram-definition.ts',
   },
   'mermaid-example-diagram-detector': {
     name: 'mermaid-example-diagram-detector',
     packageName: 'mermaid-example-diagram',
-    file: 'registry.ts',
+    file: 'detector.ts',
   },
 };
 

.vite/server.ts

@@ -12,8 +12,10 @@ async function createServer() {
     appType: 'custom', // don't include Vite's default HTML handling middlewares
   });
 
-  app.use(vite.middlewares);
   app.use(express.static('./packages/mermaid/dist'));
+  app.use(express.static('./packages/mermaid-example-diagram/dist'));
+  app.use(express.static('./packages/mermaid-mindmap/dist'));
+  app.use(vite.middlewares);
   app.use(express.static('demos'));
   app.use(express.static('cypress/platform'));
 

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.

CONTRIBUTING.md

@@ -11,8 +11,8 @@ Here are a few things to know to get you started on the right path.
 ```bash
 git clone git@github.com:mermaid-js/mermaid.git
 cd mermaid
-yarn
-yarn test
+pnpm install
+pnpm test
 ```
 
 ## Committing code
@@ -103,7 +103,7 @@ This is important so that, if someone else does a change to the grammar that doe
 
 This tests the rendering and visual appearance of the diagram. This ensures that the rendering of that feature in the e2e will be reviewed in the release process going forward. Less chance that it breaks!
 
-To start working with the e2e tests, run `yarn dev` to start the dev server, after that start cypress by running `cypress open` in the mermaid folder. (Make sure you have path to cypress in order, the binary is located in node_modules/.bin).
+To start working with the e2e tests, run `pnpm run dev` to start the dev server, after that start cypress by running `pnpm exec cypress open` in the mermaid folder.
 
 The rendering tests are very straightforward to create. There is a function imgSnapshotTest. This function takes a diagram in text form, the mermaid options and renders that diagram in cypress.
 

README.md

@@ -9,13 +9,13 @@ We are transforming the Mermaid repository to a so called mono-repo. This is a p
 - Make it possible to add diagrams from outside of the Mermaid repository
 - Separate the release flow between different diagrams and the Mermaid core
 
-As such be aware of sime changes..
+As such be aware of some changes..
 
 # We use pnpm now
 
 # The source code has moved
 
-It is now localted in the src forunder for respoective package located as subfoders in packages.
+It is now located in the src folder for each respective package located as subfolders in packages.
 
 English | [简体中文](./README.zh-CN.md)
 

V10-BreakingChanges.md

@@ -0,0 +1,5 @@
+# A collection of updates that change the behaviour
+
+## Lazy loading and asynchronisity
+
+- Invalid dates are rendered as syntax error instead of returning best guess or the current date

cypress/integration/other/interaction.spec.js

@@ -1,266 +1,180 @@
 describe('Interaction', () => {
-  describe('Interaction - security level loose', () => {
-    it('Graph: should handle a click on a node with a bound function', () => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('g#flowchart-Function-4').click();
+  describe('Security level loose', () => {
+    beforeEach(() => {
+      cy.visit('http://localhost:9000/click_security_loose.html');
+    });
 
+    it('Graph: should handle a click on a node with a bound function', () => {
+      cy.contains('FunctionTest1').parents('.node').click();
       cy.get('.created-by-click').should('have.text', 'Clicked By Flow');
     });
+
     it('Graph: should handle a click on a node with a bound function with args', () => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('g#flowchart-FunctionArg-28').click();
-
+      cy.contains('FunctionArgTest2').parents('.node').click();
       cy.get('.created-by-click-2').should('have.text', 'Clicked By Flow: ARGUMENT');
     });
+
     it('Flowchart: should handle a click on a node with a bound function where the node starts with a number', () => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('g[id="flowchart-FunctionArg-34"]').click();
-
+      cy.contains('2FunctionArg').parents('.node').click();
       cy.get('.created-by-click-2').should('have.text', 'Clicked By Flow: ARGUMENT');
     });
-    it('Graph: should handle a click on a node with a bound url', () => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('#flowchart-URL-5').click();
 
-      cy.location().should((location) => {
-        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+    it('Graph: should handle a click on a node with a bound url', () => {
+      // When there is a URL, cy.contains selects the a tag instead of the span. The .node is a child of a, so we have to use find instead of parent.
+      cy.contains('URLTest1').find('.node').click();
+      cy.location().should(({ href }) => {
+        expect(href).to.eq('http://localhost:9000/empty.html');
       });
     });
-    it('Graph: should handle a click on a node with a bound url where the node starts with a number', () => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('g[id="flowchart-2URL-11"]').click();
 
-      cy.location().should((location) => {
-        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+    it('Graph: should handle a click on a node with a bound url where the node starts with a number', () => {
+      cy.contains('2URL').find('.node').click();
+      cy.location().should(({ href }) => {
+        expect(href).to.eq('http://localhost:9000/empty.html');
       });
     });
 
     it('Flowchart-v2: should handle a click on a node with a bound function', () => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('g#flowchart-Function-16').click();
-
+      cy.contains('FunctionTest2').parents('.node').click();
       cy.get('.created-by-click').should('have.text', 'Clicked By Flow');
     });
+
     it('Flowchart-v2: should handle a click on a node with a bound function where the node starts with a number', () => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('g[id="flowchart-1Function-22"]').click();
-
+      cy.contains('10Function').parents('.node').click();
       cy.get('.created-by-click').should('have.text', 'Clicked By Flow');
     });
-    it('Flowchart-v2: should handle a click on a node with a bound url', () => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('#flowchart-URL-17').click();
 
-      cy.location().should((location) => {
-        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+    it('Flowchart-v2: should handle a click on a node with a bound url', () => {
+      cy.contains('URLTest2').find('.node').click();
+      cy.location().should(({ href }) => {
+        expect(href).to.eq('http://localhost:9000/empty.html');
       });
     });
-    it('Flowchart-v2: should handle a click on a node with a bound url where the node starts with a number', () => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('g[id="flowchart-2URL-23"]').click();
 
-      cy.location().should((location) => {
-        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+    it('Flowchart-v2: should handle a click on a node with a bound url where the node starts with a number', () => {
+      cy.contains('20URL').find('.node').click();
+      cy.location().should(({ href }) => {
+        expect(href).to.eq('http://localhost:9000/empty.html');
       });
     });
 
     it('should handle a click on a task with a bound URL clicking on the rect', () => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('rect#cl1').click({ force: true });
-
-      cy.location().should((location) => {
-        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+      cy.get('rect#cl1').click({ force: true });
+      cy.location().should(({ href }) => {
+        expect(href).to.eq('http://localhost:9000/empty.html');
       });
     });
+
     it('should handle a click on a task with a bound URL clicking on the text', () => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('text#cl1-text').click({ force: true });
-
-      cy.location().should((location) => {
-        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+      cy.get('text#cl1-text').click({ force: true });
+      cy.location().should(({ href }) => {
+        expect(href).to.eq('http://localhost:9000/empty.html');
       });
     });
-    it('should handle a click on a task with a bound function without args', () => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('rect#cl2').click({ force: true });
 
+    it('should handle a click on a task with a bound function without args', () => {
+      cy.get('rect#cl2').click({ force: true });
       cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant cl2');
     });
-    it('should handle a click on a task with a bound function with args', () => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('rect#cl3').click({ force: true });
 
+    it('should handle a click on a task with a bound function with args', () => {
+      cy.get('rect#cl3').click({ force: true });
       cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant test1 test2 test3');
     });
 
     it('should handle a click on a task with a bound function without args', () => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('text#cl2-text').click({ force: true });
-
+      cy.get('text#cl2-text').click({ force: true });
       cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant cl2');
     });
-    it('should handle a click on a task with a bound function with args ', () => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('text#cl3-text').click({ force: true });
 
+    it('should handle a click on a task with a bound function with args ', () => {
+      cy.get('text#cl3-text').click({ force: true });
       cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant test1 test2 test3');
     });
   });
 
   describe('Interaction - security level tight', () => {
+    beforeEach(() => {
+      cy.visit('http://localhost:9000/click_security_strict.html');
+    });
     it('should handle a click on a node without a bound function', () => {
-      const url = 'http://localhost:9000/click_security_strict.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('g#flowchart-Function-4').click();
-
+      cy.contains('Function1').parents('.node').click();
       cy.get('.created-by-click').should('not.exist');
-      // cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow');
     });
+
     it('should handle a click on a node with a bound function where the node starts with a number', () => {
-      const url = 'http://localhost:9000/click_security_strict.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('g[id="flowchart-1Function-10"]').click();
-
-      // cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow');
+      cy.contains('1Function').parents('.node').click();
       cy.get('.created-by-click').should('not.exist');
     });
-    it('should handle a click on a node with a bound url', () => {
-      const url = 'http://localhost:9000/click_security_strict.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('g#flowchart-URL-5').click();
 
-      cy.location().should((location) => {
-        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+    it('should handle a click on a node with a bound url', () => {
+      cy.contains('URL1').find('.node').click();
+      cy.location().should(({ href }) => {
+        expect(href).to.eq('http://localhost:9000/empty.html');
       });
     });
-    it('should handle a click on a node with a bound url where the node starts with a number', () => {
-      const url = 'http://localhost:9000/click_security_strict.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('g[id="flowchart-2URL-11"]').click();
 
-      cy.location().should((location) => {
-        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+    it('should handle a click on a node with a bound url where the node starts with a number', () => {
+      cy.contains('2URL').find('.node').click();
+      cy.location().should(({ href }) => {
+        expect(href).to.eq('http://localhost:9000/empty.html');
       });
     });
 
     it('should handle a click on a task with a bound URL clicking on the rect', () => {
-      const url = 'http://localhost:9000/click_security_strict.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('rect#cl1').click({ force: true });
-
-      cy.location().should((location) => {
-        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+      cy.get('rect#cl1').click({ force: true });
+      cy.location().should(({ href }) => {
+        expect(href).to.eq('http://localhost:9000/empty.html');
       });
     });
+
     it('should handle a click on a task with a bound URL clicking on the text', () => {
-      const url = 'http://localhost:9000/click_security_strict.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('text#cl1-text').click({ force: true });
-
-      cy.location().should((location) => {
-        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+      cy.get('text#cl1-text').click({ force: true });
+      cy.location().should(({ href }) => {
+        expect(href).to.eq('http://localhost:9000/empty.html');
       });
     });
-    it('should handle a click on a task with a bound function', () => {
-      const url = 'http://localhost:9000/click_security_strict.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('rect#cl2').click({ force: true });
 
-      // cy.get('.created-by-gant-click').should('not.have.text', 'Clicked By Gant cl2');
+    it('should handle a click on a task with a bound function', () => {
+      cy.get('rect#cl2').click({ force: true });
       cy.get('.created-by-gant-click').should('not.exist');
     });
-    it('should handle a click on a task with a bound function', () => {
-      const url = 'http://localhost:9000/click_security_strict.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('text#cl2-text').click({ force: true });
 
-      // cy.get('.created-by-gant-click').should('not.have.text', 'Clicked By Gant cl2');
+    it('should handle a click on a task with a bound function', () => {
+      cy.get('text#cl2-text').click({ force: true });
       cy.get('.created-by-gant-click').should('not.exist');
     });
   });
 
   describe('Interaction - security level other, missspelling', () => {
+    beforeEach(() => {
+      cy.visit('http://localhost:9000/click_security_other.html');
+    });
+
     it('should handle a click on a node with a bound function', () => {
-      const url = 'http://localhost:9000/click_security_other.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('g#flowchart-Function-4').click();
-
-      // cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow');
+      cy.contains('Function1').parents('.node').click();
       cy.get('.created-by-click').should('not.exist');
     });
+
     it('should handle a click on a node with a bound function where the node starts with a number', () => {
-      const url = 'http://localhost:9000/click_security_other.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('g[id="flowchart-1Function-10"]').click();
-
-      cy.get('.created-by-click').should('not.exist');
+      cy.contains('1Function').parents('.node').click();
       cy.get('.created-by-click').should('not.exist');
     });
-    it('should handle a click on a node with a bound url', () => {
-      const url = 'http://localhost:9000/click_security_other.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('g#flowchart-URL-5').click();
 
-      cy.location().should((location) => {
-        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+    it('should handle a click on a node with a bound url', () => {
+      cy.contains('URL1').find('.node').click();
+      cy.location().should(({ href }) => {
+        expect(href).to.eq('http://localhost:9000/empty.html');
       });
     });
 
     it('should handle a click on a task with a bound function', () => {
-      const url = 'http://localhost:9000/click_security_other.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('rect#cl2').click({ force: true });
-
+      cy.get('rect#cl2').click({ force: true });
       cy.get('.created-by-gant-click').should('not.exist');
     });
-    it('should handle a click on a task with a bound function', () => {
-      const url = 'http://localhost:9000/click_security_other.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('text#cl2-text').click({ force: true });
 
+    it('should handle a click on a task with a bound function', () => {
+      cy.get('text#cl2-text').click({ force: true });
       cy.get('.created-by-gant-click').should('not.exist');
     });
   });

cypress/integration/rendering/gantt.spec.js

@@ -92,7 +92,7 @@ describe('Gantt diagram', () => {
       {}
     );
   });
-  it('should render a gantt chart for issue #1060', () => {
+  it('should FAIL redering a gantt chart for issue #1060 with invalid date', () => {
     imgSnapshotTest(
       `
       gantt

cypress/platform/click_security_loose.html

@@ -13,42 +13,42 @@
   </head>
   <body>
     <div style="display: flex">
-      <pre id="FirstLine" class="mermaid">
+      <pre class="mermaid">
     graph TB
-      Function-->URL
-      click Function clickByFlow "Add a div"
-      click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+      FunctionTest1-->URLTest1
+      click FunctionTest1 clickByFlow "Add a div"
+      click URLTest1 "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
       </pre>
-      <pre id="FirstLine" class="mermaid">
+      <pre class="mermaid">
   graph TB
     1Function--->2URL
     click 1Function clickByFlow "Add a div"
-    click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+    click 2URL "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
       </pre>
-      <pre id="FirstLine" class="mermaid">
+      <pre class="mermaid">
     flowchart TB
-      Function-->URL
-      click Function clickByFlow "Add a div"
-      click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self
+      FunctionTest2-->URLTest2
+      click FunctionTest2 clickByFlow "Add a div"
+      click URLTest2 "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>" _self
       </pre>
-      <pre id="FirstLine" class="mermaid">
+      <pre class="mermaid">
   flowchart TB
-    1Function--->2URL
-    click 1Function clickByFlow "Add a div"
-    click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self
+    10Function--->20URL
+    click 10Function clickByFlow "Add a div"
+    click 20URL "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>" _self
       </pre>
 
-      <pre id="FirstLine" class="mermaid">
+      <pre class="mermaid">
   classDiagram
     class ShapeLink
-    link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
+    link ShapeLink "http://localhost:9000/empty.html" "This is a tooltip for a link"
     class ShapeCallback
     callback ShapeCallback "clickByClass" "This is a tooltip for a callback"
       </pre>
-      <pre id="FirstLine" class="mermaid">
+      <pre class="mermaid">
   classDiagram-v2
     class ShapeLink2
-    link ShapeLink2 "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
+    link ShapeLink2 "http://localhost:9000/empty.html" "This is a tooltip for a link"
     class ShapeCallback2
     callback ShapeCallback2 "clickByClass" "This is a tooltip for a callback"
       </pre>
@@ -85,7 +85,7 @@
     Calling a Callback (look at the console log) :cl2, after cl1, 3d
     Calling a Callback with args :cl3, after cl1, 3d
 
-    click cl1 href "http://localhost:9000/webpackUsage.html"
+    click cl1 href "http://localhost:9000/empty.html"
     click cl2 call clickByGantt()
     click cl3 call clickByGantt("test1", test2, test3)
 
@@ -95,31 +95,31 @@
     Add another diagram to demo page    : 48h
     </pre>
     <div style="display: flex">
-      <pre id="FirstLine" class="mermaid">
+      <pre class="mermaid">
       graph TB
-        FunctionArg-->URL
-        click FunctionArg call clickByFlowArg(ARGUMENT) "Add a div"
-        click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+        FunctionArgTest2-->URL
+        click FunctionArgTest2 call clickByFlowArg(ARGUMENT) "Add a div"
+        click URL "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
       </pre>
-      <pre id="FirstLine" class="mermaid">
+      <pre class="mermaid">
       flowchart TB
-        FunctionArg-->URL
-        click FunctionArg call clickByFlowArg(ARGUMENT) "Add a div"
-        click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+        2FunctionArg-->URL
+        click 2FunctionArg call clickByFlowArg(ARGUMENT) "Add a div"
+        click URL "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
       </pre>
 
-      <pre id="FirstLine" class="mermaid">
+      <pre class="mermaid">
       classDiagram
       class ShapeLink
-      link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
+      link ShapeLink "http://localhost:9000/empty.html" "This is a tooltip for a link"
       class ShapeCallback
       click ShapeCallback call clickByClass(123) "This is a tooltip for a callback"
       </pre>
 
-      <pre id="FirstLine" class="mermaid">
+      <pre class="mermaid">
       classDiagram-v2
         class ShapeLink2
-        link ShapeLink2 "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
+        link ShapeLink2 "http://localhost:9000/empty.html" "This is a tooltip for a link"
         class ShapeCallback2
         click ShapeCallback2 call clickByClass(123) "This is a tooltip for a callback"
       </pre>

cypress/platform/click_security_other.html

@@ -9,15 +9,15 @@
   <body>
     <pre id="FirstLine" class="mermaid">
     graph TB
-      Function-->URL
-      click Function clickByFlow "Add a div"
-      click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+      Function1-->URL1
+      click Function1 clickByFlow "Add a div"
+      click URL1 "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
     </pre>
     <pre id="FirstLine" class="mermaid">
   graph TB
     1Function-->2URL
     click 1Function clickByFlow "Add a div"
-    click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+    click 2URL "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
     </pre>
 
     <pre class="mermaid">
@@ -50,7 +50,7 @@
     Visit mermaidjs               :active, cl1, 2014-01-07,2014-01-10
     Calling a Callback (look at the console log) :cl2, after cl1, 3d
 
-    click cl1 href "http://localhost:9000/webpackUsage.html"
+    click cl1 href "http://localhost:9000/empty.html"
     click cl2 call clickByGantt("test", test, test)
 
     section Last section

cypress/platform/click_security_sandbox.html

@@ -17,38 +17,38 @@
     graph TB
       Function-->URL
       click Function clickByFlow "Add a div"
-      click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+      click URL "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
       </pre>
       <pre id="FirstLine" class="mermaid">
   graph TB
     1Function--->2URL
     click 1Function clickByFlow "Add a div"
-    click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+    click 2URL "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
       </pre>
       <pre id="FirstLine" class="mermaid">
     flowchart TB
       Function-->URL
       click Function clickByFlow "Add a div"
-      click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self
+      click URL "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>" _self
       </pre>
       <pre id="FirstLine" class="mermaid">
   flowchart TB
     1Function--->2URL
     click 1Function clickByFlow "Add a div"
-    click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self
+    click 2URL "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>" _self
       </pre>
 
       <pre id="FirstLine" class="mermaid">
   classDiagram
     class ShapeLink
-    link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
+    link ShapeLink "http://localhost:9000/empty.html" "This is a tooltip for a link"
     class ShapeCallback
     callback ShapeCallback "clickByClass" "This is a tooltip for a callback"
       </pre>
       <pre id="FirstLine" class="mermaid">
   classDiagram-v2
     class ShapeLink2
-    link ShapeLink2 "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
+    link ShapeLink2 "http://localhost:9000/empty.html" "This is a tooltip for a link"
     class ShapeCallback2
     callback ShapeCallback2 "clickByClass" "This is a tooltip for a callback"
       </pre>
@@ -85,7 +85,7 @@
     Calling a Callback (look at the console log) :cl2, after cl1, 3d
     Calling a Callback with args :cl3, after cl1, 3d
 
-    click cl1 href "http://localhost:9000/webpackUsage.html"
+    click cl1 href "http://localhost:9000/empty.html"
     click cl2 call clickByGantt()
     click cl3 call clickByGantt("test1", test2, test3)
 
@@ -99,19 +99,19 @@
       graph TB
         FunctionArg-->URL
         click FunctionArg call clickByFlowArg(ARGUMENT) "Add a div"
-        click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+        click URL "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
       </pre>
       <pre id="FirstLine" class="mermaid">
       flowchart TB
         FunctionArg-->URL
         click FunctionArg call clickByFlowArg(ARGUMENT) "Add a div"
-        click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+        click URL "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
       </pre>
 
       <pre id="FirstLine" class="mermaid">
       classDiagram
       class ShapeLink
-      link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
+      link ShapeLink "http://localhost:9000/empty.html" "This is a tooltip for a link"
       class ShapeCallback
       click ShapeCallback call clickByClass(123) "This is a tooltip for a callback"
       </pre>
@@ -119,7 +119,7 @@
       <pre id="FirstLine" class="mermaid">
       classDiagram-v2
         class ShapeLink2
-        link ShapeLink2 "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
+        link ShapeLink2 "http://localhost:9000/empty.html" "This is a tooltip for a link"
         class ShapeCallback2
         click ShapeCallback2 call clickByClass(123) "This is a tooltip for a callback"
       </pre>

cypress/platform/click_security_strict.html

@@ -9,15 +9,15 @@
   <body>
     <pre id="FirstLine" class="mermaid">
     graph TB
-      Function-->URL
-      click Function clickByFlow "Add a div"
-      click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+      Function1-->URL1
+      click Function1 clickByFlow "Add a div"
+      click URL1 "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
     </pre>
     <pre id="FirstLine" class="mermaid">
   graph TB
     1Function-->2URL
     click 1Function clickByFlow "Add a div"
-    click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+    click 2URL "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
     </pre>
 
     <pre class="mermaid">
@@ -51,7 +51,7 @@
     Calling a Callback (look at the console log) :cl2, after cl1, 3d
     Calling a Callback with args :cl3, after cl1, 3d
 
-    click cl1 href "http://localhost:9000/webpackUsage.html"
+    click cl1 href "http://localhost:9000/empty.html"
     click cl2 call clickByGantt()
     click cl3 call clickByGantt("test1", test2, test3)
 

cypress/platform/empty.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Empty</title>
+  </head>
+  <body></body>
+</html>

cypress/platform/knsv.html

@@ -6,6 +6,10 @@
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
     />
+    <link
+      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
+      rel="stylesheet"
+    />
     <link
       href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
       rel="stylesheet"
@@ -38,7 +42,7 @@
     </style>
   </head>
   <body>
-    <pre class="mermaid" style="width: 50%">
+    <pre class="mermaid2" style="width: 50%">
 flowchart LR
   subgraph one
     direction LR
@@ -364,8 +368,7 @@ flowchart TD
     </pre>
 
     <!-- <script src="./mermaid.js"></script> -->
-    <script src="./packages/mermaid-mindmap/dist/mermaid-mindmap.js"></script>
-    <script src="./packages/mermaid/dist/mermaid.js"></script>
+    <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
@@ -382,6 +385,7 @@ flowchart TD
           htmlLabels: false,
           fontFamily: 'courier',
         },
+        lazyLoadedDiagrams: ['./mermaid-mindmap-detector.js'],
       });
       function callback() {
         alert('It worked');

cypress/platform/knsv2.html

@@ -6,6 +6,10 @@
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
     />
+    <link
+      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
+      rel="stylesheet"
+    />
     <link
       href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
       rel="stylesheet"
@@ -25,6 +29,12 @@
       }
       .mermaid svg {
         /* font-size: 18px !important; */
+        background-color: #eee;
+        background-image: radial-gradient(#fff 1%, transparent 11%),
+          radial-gradient(#fff 1%, transparent 11%);
+        background-size: 20px 20px;
+        background-position: 0 0, 10px 10px;
+        background-repeat: repeat;
       }
       .malware {
         position: fixed;
@@ -46,28 +56,73 @@
   <body>
     <div>Security check</div>
     <pre id="diagram" class="mermaid">
-info
-        </pre
-    >
+classDiagram
+        direction LR
+        class Student {
+          -idCard : IdCard
+        }
+        class IdCard{
+          -id : int
+          -name : string
+        }
+        class Bike{
+          -id : int
+          -name : string
+        }
+        Student "1" --o "1" IdCard : carries
+        Student "1" --o "1" Bike : rides
+    </pre>
     <pre id="diagram" class="mermaid2">
-            mindmap
-          root
-            ch1
-            ch2
-        </pre
-    >
-    <script src="./packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script>
-    <script src="./packages/mermaid-mindmap/dist/mermaid-example-diagram-detector.js"></script>
-    <script src="./packages/mermaid/dist/mermaid.js"></script>
+mindmap
+  root
+    A
+    B
+    C
+    D
+    E
+    A2
+    B2
+    C2
+    D2
+    E2
+    child1((Circle))
+        grandchild 1
+        grandchild 2
+    child2(Round rectangle)
+        grandchild 3
+        grandchild 4
+    child3[Square]
+        grandchild 5
+        ::icon(mdi mdi-fire)
+        gc6((grand<br/>child 6))
+        ::icon(mdi mdi-fire)
+          gc7((grand<br/>grand<br/>child 8))
+        </pre>
+    <pre id="diagram" class="mermaid2">
+      example-diagram
+    </pre>
+
+    <!-- <div id="cy"></div> -->
+    <!-- <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> -->
+    <!-- <script src="./mermaid-example-diagram-detector.js"></script>    -->
+    <!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script> -->
+    <script src="./mermaid.js"></script>
+
     <script>
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };
       mermaid.initialize({
+        theme: 'forest',
         startOnLoad: true,
         logLevel: 0,
-        basePath: './packages/',
-        // themeVariables: {relationLabelColor: 'red'}
+        // basePath: './packages/',
+        // themeVariables: { darkMode: true },
+        lazyLoadedDiagrams: [
+          './mermaid-mindmap-detector.esm.mjs',
+          './mermaid-example-diagram-detector.esm.mjs',
+        ],
+        // lazyLoadedDiagrams: ['../../mermaid-mindmap/registry.ts'],
       });
       function callback() {
         alert('It worked');

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 {
-        console.log('rendering');
-        mermaid.mermaidAPI.render('graphDiv', `>`);
-      } catch (e) {}
-
-      mermaid.mermaidAPI.render('graphDiv', `graph LR\n a --> b`, (html) => {
-        document.getElementById('graph').innerHTML = html;
-      });
+        await mermaid.mermaidAPI.render('graphDiv', `graph LR\n a --> b`, (html) => {
+          document.getElementById('graph').innerHTML = html;
+        });
+      })();
     </script>
   </body>
 </html>

cypress/platform/rerender.html

@@ -17,11 +17,12 @@
       rerender('XMas');
 
       function rerender(text) {
-        var graphText = `graph TD
+        const graphText = `graph TD
         A[${text}] -->|Get money| B(Go shopping)`;
-        var graph = mermaid.mermaidAPI.render('id', graphText);
-        console.log('\x1b[35m%s\x1b[0m', '>> graph', graph);
-        document.getElementById('graph').innerHTML = graph;
+        mermaid.mermaidAPI.render('id', graphText).then((svg) => {
+          console.log('\x1b[35m%s\x1b[0m', '>> graph', svg);
+          document.getElementById('graph').innerHTML = svg;
+        });
       }
     </script>
     <button id="rerender" onclick="rerender('Saturday')">Rerender</button>

cypress/platform/viewer.js

@@ -36,6 +36,8 @@ const contentLoaded = function () {
       document.getElementsByTagName('body')[0].appendChild(div);
     }
 
+    graphObj.mermaid.lazyLoadedDiagrams = ['/mermaid-mindmap-detector.esm.mjs'];
+
     mermaid2.initialize(graphObj.mermaid);
     mermaid2.init();
   }

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

docs/8.6.0_docs.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Version 8.6.0 Changes
 

docs/CHANGELOG.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Change Log
 

docs/Configuration.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Configuration
 

docs/README.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # About Mermaid
 

docs/SUMMARY.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Summary
 

docs/Setup.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 <!-- Generated by documentation.js. Update this documentation by updating the source code. -->
 

docs/Tutorials.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Tutorials
 

docs/_navbar.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 - Getting started
 

docs/_sidebar.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 - 📔 Introduction
 

docs/accessibility.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Accessibility Options
 

docs/breakingChanges.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Breaking changes
 

docs/c4c.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # C4 Diagrams
 

docs/classDiagram.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Class diagrams
 

docs/developer-docs/configuration.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Configuration
 

docs/development.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Development and Contribution 🙌
 
@@ -72,9 +72,8 @@ This tests the rendering and visual appearance of the diagrams. This ensures tha
 
 To start working with the e2e tests:
 
-1.  Run `yarn dev` to start the dev server
-2.  Start **Cypress** by running `cypress open` in the **mermaid** folder.
-    (Make sure you have path to Cypress in order, the binary is located in `node_modules/.bin`).
+1.  Run `pnpm run dev` to start the dev server
+2.  Start **Cypress** by running `pnpm exec cypress open` in the **mermaid** folder.
 
 The rendering tests are very straightforward to create. There is a function `imgSnapshotTest`, which takes a diagram in text form and the mermaid options, and it renders that diagram in Cypress.
 

docs/diagrams-and-syntax-and-examples/flowchart.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 ---
 

docs/directives.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Directives
 

docs/entityRelationshipDiagram.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Entity Relationship Diagrams
 

docs/examples.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Examples
 

docs/faq.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Frequently Asked Questions
 

docs/flowchart.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Flowcharts - Basic Syntax
 

docs/gantt.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Gantt diagrams
 

docs/gitgraph.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Gitgraph Diagrams
 

docs/index.html

@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
-  <!--# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.--><head>
+  <!--# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.--><head>
     <meta charset="UTF-8" />
     <title>
       mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams,

docs/integrations.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Integrations
 

docs/introduction.md

@@ -1 +1 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.

docs/landing/index.html

@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
-  <!--# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.--><head>
+  <!--# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.--><head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />

docs/mermaidCLI.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # mermaid CLI
 

docs/mindmap.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Mindmap
 

docs/n00b-advanced.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Advanced n00b mermaid (Coming soon..)
 

docs/n00b-gettingStarted.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # A Mermaid User-Guide for Beginners
 

docs/n00b-overview.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Overview for Beginners
 

docs/n00b-syntaxReference.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Diagram Syntax
 

docs/newDiagram.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Adding a New Diagram/Chart 📊
 

docs/pie.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Pie chart diagrams
 

docs/requirementDiagram.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Requirement Diagram
 

docs/security.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Security
 

docs/sequenceDiagram.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Sequence diagrams
 

docs/stateDiagram.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # State diagrams
 

docs/theming.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Theme Configuration
 
@@ -157,7 +157,7 @@ Variables that are unique to some diagrams can be affected by changes in Theme V
 ```
 
 | Variable             | Default/Base/Factor value      | Calc | Description                                                                                                                      |
-| -------------------- | ------------------------------ | ---- | -------------------------------------------------------------------------------------------------------------------------------- | --- | --- |
+| -------------------- | ------------------------------ | ---- | -------------------------------------------------------------------------------------------------------------------------------- |
 | darkMode             | false                          |      | Boolean Value that dictates how to calculate colors. "true" will activate darkmode.                                              |
 | background           | #f4f4f4                        |      | Used to calculate color for items that should either be background colored or contrasting to the background.                     |
 | fontFamily           | "trebuchet ms", verdana, arial |      |                                                                                                                                  |
@@ -168,7 +168,7 @@ Variables that are unique to some diagrams can be affected by changes in Theme V
 | secondaryColor       | based on primaryColor          | \*   |                                                                                                                                  |
 | secondaryBorderColor | based on secondaryColor        | \*   | Color to be used as border in nodes using secondaryColor                                                                         |
 | secondaryTextColor   | based on secondaryColor        | \*   | Color to be used as text color in nodes using secondaryColor                                                                     |
-| tertiaryColor        | based on primaryColor          | \*   |                                                                                                                                  |     |     |
+| tertiaryColor        | based on primaryColor          | \*   |                                                                                                                                  |
 | tertiaryBorderColor  | based on tertiaryColor         | \*   | Color to be used as border in nodes using tertiaryColor                                                                          |
 | tertiaryTextColor    | based on tertiaryColor         | \*   | Color to be used as text color in nodes using tertiaryColor                                                                      |
 | noteBkgColor         | #fff5ad                        |      | Color used as background in notes                                                                                                |

docs/upgrading.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Upgrading
 

docs/usage.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # Usage
 

docs/user-journey.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
 
 # User Journey Diagram
 

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",
@@ -37,6 +37,10 @@
     "todo-postbuild": "documentation build src/mermaidAPI.ts src/config.ts src/defaultConfig.ts --shallow -f md --markdown-toc false > src/docs/Setup.md && prettier --write src/docs/Setup.md",
     "release": "pnpm build",
     "lint": "eslint --cache --ignore-path .gitignore . && pnpm lint:jison && prettier --check .",
+    "vdocs:dev": "vitepress dev vdocs",
+    "vdocs:build": "vitepress build vdocs",
+    "vdocs:serve": "vitepress serve vdocs",
+    "postbuild": "echo 'building docs from code here soon'",
     "lint:fix": "eslint --fix --ignore-path .gitignore . && prettier --write .",
     "lint:jison": "ts-node-esm --transpileOnly packages/mermaid/src/jison/lint.mts",
     "cypress": "cypress run",
@@ -46,7 +50,7 @@
     "test": "pnpm lint && vitest run",
     "test:watch": "vitest --coverage --watch",
     "prepublishOnly": "pnpm build && pnpm test",
-    "todo-prepare": "concurrently \"husky install\" \"pnpm build\"",
+    "prepare": "concurrently \"husky install\" \"pnpm build\"",
     "pre-commit": "lint-staged"
   },
   "repository": {
@@ -67,8 +71,8 @@
   },
   "dependencies": {
     "@braintree/sanitize-url": "^6.0.0",
+    "@types/node": "^18.8.1",
     "@types/uuid": "^8.3.4",
-    "@types/node": "^18.7.21",
     "d3": "^7.0.0",
     "dagre": "^0.8.5",
     "dagre-d3": "^0.6.4",
@@ -84,54 +88,59 @@
     "uuid": "^9.0.0"
   },
   "devDependencies": {
-    "@applitools/eyes-cypress": "^3.25.7",
+    "@applitools/eyes-cypress": "^3.27.1",
     "@commitlint/cli": "^17.1.2",
-    "@commitlint/config-conventional": "^17.0.0",
+    "@commitlint/config-conventional": "^17.1.0",
     "@types/d3": "^7.4.0",
     "@types/dompurify": "^2.3.4",
     "@types/eslint": "^8.4.6",
-    "@types/express": "^4.17.13",
+    "@types/express": "^4.17.14",
     "@types/jsdom": "^20.0.0",
-    "@types/lodash": "^4.14.185",
+    "@types/lodash": "^4.14.186",
     "@types/prettier": "^2.7.1",
     "@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",
+    "@typescript-eslint/eslint-plugin": "^5.39.0",
+    "@typescript-eslint/parser": "^5.39.0",
+    "@vitest/coverage-c8": "^0.23.4",
+    "@vitest/ui": "^0.23.4",
     "concurrently": "^7.4.0",
     "coveralls": "^3.1.1",
     "cypress": "^10.0.0",
     "cypress-image-snapshot": "^4.0.1",
     "documentation": "13.2.0",
+    "esbuild": "^0.15.10",
     "eslint": "^8.24.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-html": "^7.1.0",
-    "eslint-plugin-jest": "^27.0.4",
+    "eslint-plugin-jest": "^27.1.0",
     "eslint-plugin-jsdoc": "^39.3.6",
     "eslint-plugin-json": "^3.1.0",
     "eslint-plugin-markdown": "^3.0.0",
     "express": "^4.18.1",
     "globby": "^13.1.2",
-    "husky": "^8.0.0",
+    "husky": "^8.0.1",
     "identity-obj-proxy": "^3.0.0",
     "jest": "29.x",
     "jison": "^0.4.18",
-    "jsdom": "^20.0.0",
-    "lint-staged": "^13.0.0",
-    "moment": "^2.23.0",
+    "jsdom": "^20.0.1",
+    "lint-staged": "^13.0.3",
+    "markdown-it": "^13.0.1",
     "path-browserify": "^1.0.1",
+    "pnpm": "^7.13.2",
     "prettier": "^2.7.1",
     "prettier-plugin-jsdoc": "^0.4.2",
     "remark": "^14.0.2",
     "rimraf": "^3.0.2",
-    "start-server-and-test": "^1.12.6",
+    "start-server-and-test": "^1.14.0",
     "ts-node": "^10.9.1",
-    "typescript": "^4.8.3",
+    "typescript": "^4.8.4",
     "unist-util-flatmap": "^1.0.0",
-    "vite": "^3.0.9",
-    "vitest": "^0.23.1"
+    "vite": "^3.1.4",
+    "vitepress": "^1.0.0-alpha.19",
+    "vitepress-plugin-mermaid": "^2.0.8",
+    "vitepress-plugin-search": "^1.0.4-alpha.11",
+    "vitest": "^0.23.4"
   },
   "resolutions": {
     "d3": "^7.0.0"

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-example-diagram/src/detector.ts

@@ -0,0 +1,18 @@
+// @ts-ignore: TODO Fix ts errors
+export const id = 'example-diagram';
+
+/**
+ * Detector function that will be called by mermaid to determine if the diagram is this type of digram.
+ *
+ * @param txt The diagram text will be passed to the detector
+ * @returns True if the diagram text matches a diagram of this type
+ */
+
+export const detector = (txt: string) => {
+  return txt.match(/^\s*example-diagram/) !== null;
+};
+
+export const loadDiagram = async () => {
+  const { diagram } = await import('./diagram-definition');
+  return { id, diagram };
+};

packages/mermaid-example-diagram/src/diagram-definition.ts

@@ -5,13 +5,10 @@ import renderer from './exampleDiagramRenderer';
 import styles from './styles';
 import { injectUtils } from './mermaidUtils';
 
-window.mermaid.connectDiagram(
-  'example-diagram',
-  {
-    db,
-    renderer,
-    parser,
-    styles,
-  },
-  injectUtils
-);
+export const diagram = {
+  db,
+  renderer,
+  parser,
+  styles,
+  injectUtils,
+};

packages/mermaid-example-diagram/src/exampleDetector.ts

@@ -1,3 +0,0 @@
-export const detector = (txt: string) => {
-  return txt.match(/^\s*example-diagram/) !== null;
-};

packages/mermaid-example-diagram/src/exampleDiagram.spec.js

@@ -7,8 +7,8 @@ describe('when parsing an info graph it', function () {
     ex.yy = db;
   });
 
-  it('should handle an info definition', function () {
-    let str = `info
+  it('should handle an example-diagram definition', function () {
+    let str = `example-diagram
     showInfo`;
 
     ex.parse(str);

packages/mermaid-example-diagram/src/exampleDiagramDb.js

@@ -13,21 +13,29 @@ export const getMessage = () => {
   return message;
 };
 
+/**
+ * Sets the info flag
+ *
+ * @param {boolean} inf
+ */
 export const setInfo = (inf) => {
   info = inf;
 };
 
+/** @returns Returns the info flag */
 export const getInfo = () => {
   return info;
 };
 
+export const clear = () => {
+  message = '';
+  info = false;
+};
+
 export default {
   setMessage,
   getMessage,
   setInfo,
   getInfo,
-  clear: () => {
-    message = '';
-    info = false;
-  },
+  clear,
 };

packages/mermaid-example-diagram/src/exampleDiagramRenderer.js

@@ -1,6 +1,6 @@
 /** Created by knut on 14-12-11. */
 import { select } from 'd3';
-import { log, getConfig } from './mermaidUtils';
+import { log, getConfig, setupGraphViewbox } from './mermaidUtils';
 
 /**
  * Draws a an info picture in the tag with id: id based on the graph definition in text.
@@ -10,10 +10,11 @@ import { log, getConfig } from './mermaidUtils';
  * @param {any} version
  * @param diagObj
  */
-export const draw = (text, id, version, diagObj) => {
+export const draw = (text, id, version) => {
   try {
-    log.debug('Rendering info diagram\n' + text);
-
+    const conf = getConfig();
+    log.debug('Rendering example diagram\n' + text, 'Conf: ');
+    const THEME_COLOR_LIMIT = getConfig().themeVariables.THEME_COLOR_LIMIT;
     const securityLevel = getConfig().securityLevel;
     // Handle root and Document for when rendering in sanbox mode
     let sandboxElement;
@@ -25,14 +26,34 @@ export const draw = (text, id, version, diagObj) => {
         ? select(sandboxElement.nodes()[0].contentDocument.body)
         : select('body');
 
-    // Parse the graph definition
-    // parser.parse(text);
-    // log.debug('Parsed info diagram');
-    // Fetch the default direction, use TD if none was found
     const svg = root.select('#' + id);
 
     const g = svg.append('g');
 
+    let i;
+    for (i = 0; i < THEME_COLOR_LIMIT; i++) {
+      const section = g.append('g').attr('class', 'section-' + i);
+      section
+        .append('rect')
+        .attr('x', (i % 5) * 110)
+        .attr('y', Math.floor(i / 5) * 90 + 60)
+        .attr('width', 100)
+        .attr('height', 60);
+      section
+        .append('rect')
+        .attr('x', (i % 5) * 110)
+        .attr('y', Math.floor(i / 5) * 90 + 120)
+        .attr('class', 'inverted')
+        .attr('width', 100)
+        .attr('height', 20);
+      section
+        .append('text', 'section-' + i)
+        .text('Section ' + i)
+        .attr('x', (i % 5) * 110 + 15)
+        .attr('y', Math.floor(i / 5) * 90 + 95)
+        .attr('class', 'section-text-' + i);
+    }
+
     g.append('text') // text label for the x axis
       .attr('x', 100)
       .attr('y', 40)
@@ -41,9 +62,8 @@ export const draw = (text, id, version, diagObj) => {
       .style('text-anchor', 'middle')
       .text('v ' + version);
 
-    svg.attr('height', 100);
-    svg.attr('width', 400);
-    // svg.attr('viewBox', '0 0 300 150');
+    // Setup the view box and size of the svg element
+    setupGraphViewbox(undefined, svg, conf.mindmap.padding, conf.mindmap.useMaxWidth);
   } catch (e) {
     log.error('Error while rendering info diagram');
     log.error(e.message);

packages/mermaid-example-diagram/src/mermaidUtils.ts

@@ -19,7 +19,6 @@ export const log: Record<keyof typeof LEVELS, typeof console.log> = {
   error: warning,
   fatal: warning,
 };
-
 export let setLogLevel: (level: keyof typeof LEVELS | number | string) => void;
 export let getConfig: () => object;
 export let sanitizeText: (str: string) => string;

packages/mermaid-example-diagram/src/parser/exampleDiagram.jison

@@ -8,7 +8,7 @@
 
 %%
 
-"info"		      return 'info'    ;
+"example-diagram"		      return 'example-diagram'    ;
 [\s\n\r]+         return 'NL'      ;
 [\s]+ 		      return 'space';
 "showInfo"		  return 'showInfo';
@@ -22,8 +22,8 @@
 %% /* language grammar */
 
 start
-// %{	: info document 'EOF' { return yy; } }
-	: info document 'EOF' { return yy; }
+// %{	: example-diagram document 'EOF' { return yy; } }
+	: example-diagram document 'EOF' { return yy; }
 	;
 
 document

packages/mermaid-example-diagram/src/registry.ts

@@ -1,33 +0,0 @@
-// @ts-ignore: TODO Fix ts errors
-import { detector } from './exampleDetector';
-
-const scriptElement = document.currentScript as HTMLScriptElement;
-const path = scriptElement.src;
-const lastSlash = path.lastIndexOf('/');
-const baseFolder = lastSlash < 0 ? path : path.substring(0, lastSlash + 1);
-
-if (typeof document !== 'undefined') {
-  if (window.mermaid && typeof window.mermaid.detectors === 'object') {
-    window.mermaid.detectors.push({ id: 'example-diagram', detector });
-  } else {
-    window.mermaid = {};
-    window.mermaid.detectors = [{ id: 'example-diagram', detector }];
-  }
-
-  /*
-   * Wait for document loaded before starting the execution.
-   */
-  window.addEventListener(
-    'load',
-    () => {
-      if (window.mermaid && typeof window.mermaid.detectors === 'object') {
-        window.mermaid.detectors.push({
-          id: 'example-diagram',
-          detector,
-          path: baseFolder,
-        });
-      }
-    },
-    false
-  );
-}

packages/mermaid-example-diagram/src/styles.js

@@ -1,3 +1,29 @@
-const getStyles = () => ``;
+import { darken, lighten, isDark } from 'khroma';
 
+const genSections = (options) => {
+  let sections = '';
+
+  for (let i = 0; i < options.THEME_COLOR_LIMIT; i++) {
+    sections += `
+    .section-${i} rect  {
+      fill: ${options['cScale' + i]};
+      stroke: ${options['cScalePeer' + i]};
+      stroke-width: 4;
+    }
+    .section-${i} rect.inverted  {
+      fill: ${options['cScaleInv' + i]};
+    }
+    .section-${i} text {
+     fill: ${options['cScaleLabel' + i]};
+    }
+
+    `;
+  }
+  return sections;
+};
+
+const getStyles = (options) =>
+  `
+  ${genSections(options)}
+`;
 export default getStyles;

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"
   },
@@ -54,8 +50,10 @@
   },
   "dependencies": {
     "@braintree/sanitize-url": "^6.0.0",
+    "cytoscape": "^3.23.0",
+    "cytoscape-cose-bilkent": "^4.1.0",
+    "cytoscape-fcose": "^2.1.0",
     "d3": "^7.0.0",
-    "mermaid": "workspace:*",
     "non-layered-tidy-tree-layout": "^2.0.2"
   },
   "devDependencies": {

packages/mermaid-mindmap/src/add-diagram.ts

@@ -1,23 +0,0 @@
-// @ts-ignore: TODO Fix ts errors
-import mindmapParser from './parser/mindmap';
-import * as mindmapDb from './mindmapDb';
-import mindmapRenderer from './mindmapRenderer';
-import mindmapStyles from './styles';
-import { injectUtils } from './mermaidUtils';
-
-// const getBaseFolder = (path: string) => {
-//   const parts = path.split('/');
-//   parts.pop();
-//   return parts.join('/');
-// };
-
-window.mermaid.connectDiagram(
-  'mindmap',
-  {
-    db: mindmapDb,
-    renderer: mindmapRenderer,
-    parser: mindmapParser,
-    styles: mindmapStyles,
-  },
-  injectUtils
-);

packages/mermaid-mindmap/src/detector.ts

@@ -0,0 +1,10 @@
+export const id = 'mindmap';
+
+export const detector = (txt: string) => {
+  return txt.match(/^\s*mindmap/) !== null;
+};
+
+export const loadDiagram = async () => {
+  const { diagram } = await import('./diagram-definition');
+  return { id, diagram };
+};

packages/mermaid-mindmap/src/diagram-definition.ts

@@ -0,0 +1,14 @@
+// @ts-ignore: TODO Fix ts errors
+import mindmapParser from './parser/mindmap';
+import * as mindmapDb from './mindmapDb';
+import mindmapRenderer from './mindmapRenderer';
+import mindmapStyles from './styles';
+import { injectUtils } from './mermaidUtils';
+
+export const diagram = {
+  db: mindmapDb,
+  renderer: mindmapRenderer,
+  parser: mindmapParser,
+  styles: mindmapStyles,
+  injectUtils,
+};

packages/mermaid-mindmap/src/mermaidUtils.ts

@@ -53,29 +53,3 @@ export const injectUtils = (
   sanitizeText = _sanitizeText;
   setupGraphViewbox = _setupGraphViewbox;
 };
-
-/*
-const warning = (..._args: any[]) => {
-  console.error('Log function was called before initialization');
-};
-
-export let log = {
-  trace: warning,
-  debug: warning,
-  info: warning,
-  warn: warning,
-  error: warning,
-  fatal: warning,
-};
-export let setLogLevel;
-export let getConfig;
-export let sanitizeText;
-export let setupGraphViewbox;
-export const injectUtils = (_log, _setLogLevel, _getConfig, _sanitizeText, _setupGraphViewbox) => {
-  log = _log;
-  setLogLevel = _setLogLevel;
-  getConfig = _getConfig;
-  sanitizeText = _sanitizeText;
-  setupGraphViewbox = _setupGraphViewbox;
-};
-*/

packages/mermaid-mindmap/src/mindmapDb.js

@@ -132,11 +132,7 @@ export const type2Str = (type) => {
   }
 };
 
-export let parseError; // = (str, hash)
-//  => {
-//   const error = { str, hash };
-//   throw error;
-// };
+export let parseError;
 export const setErrorHandler = (handler) => {
   parseError = handler;
 };
@@ -146,17 +142,3 @@ export const getLogger = () => log;
 
 export const getNodeById = (id) => nodes[id];
 export const getElementById = (id) => elements[id];
-// export default {
-// //   getMindmap,
-//   // addNode,
-//   // clear,
-//   // nodeType,
-//   // getType,
-//   // decorateNode,
-//   // setElementForId,
-//   getElementById: (id) => elements[id],
-//   // getNodeById: (id) => nodes.find((node) => node.id === id),
-//   getNodeById: (id) => nodes[id],
-//   // type2Str,
-//   // parseError
-// };

packages/mermaid-mindmap/src/mindmapDetector.old

@@ -1,8 +0,0 @@
-const detector = function detect(txt) {
-  if (txt.match(/^\s*mindmap/)) {
-    return 'mindmap';
-  }
-  return null;
-};
-
-export default detector;

packages/mermaid-mindmap/src/mindmapDetector.ts

@@ -1,3 +0,0 @@
-export const mindmapDetector = (txt: string) => {
-  return txt.match(/^\s*mindmap/) !== null;
-};

packages/mermaid-mindmap/src/mindmapRenderer.js

@@ -2,10 +2,13 @@
 import { select } from 'd3';
 import { log, getConfig, setupGraphViewbox } from './mermaidUtils';
 import svgDraw from './svgDraw';
-import { BoundingBox, Layout } from 'non-layered-tidy-tree-layout';
-import clone from 'fast-clone';
+import cytoscape from 'cytoscape';
+import coseBilkent from 'cytoscape-cose-bilkent';
 import * as db from './mindmapDb';
 
+// Inject the layout algorithm into cytoscape
+cytoscape.use(coseBilkent);
+
 /**
  * @param {any} svg The svg element to draw the diagram onto
  * @param {object} mindmap The maindmap data and hierarchy
@@ -27,184 +30,138 @@ function drawNodes(svg, mindmap, section, conf) {
  * @param parent
  * @param depth
  * @param section
- * @param conf
+ * @param edgesEl
+ * @param cy
  */
-function drawEdges(edgesElem, mindmap, parent, depth, section, conf) {
-  if (parent) {
-    svgDraw.drawEdge(edgesElem, mindmap, parent, depth, section, conf);
-  }
-  if (mindmap.children) {
-    mindmap.children.forEach((child, index) => {
-      drawEdges(edgesElem, child, mindmap, depth + 1, section < 0 ? index : section, conf);
-    });
-  }
+function drawEdges(edgesEl, cy) {
+  cy.edges().map((edge, id) => {
+    const data = edge.data();
+    if (edge[0]._private.bodyBounds) {
+      const bounds = edge[0]._private.rscratch;
+      log.trace('Edge: ', id, data);
+      edgesEl
+        .insert('path')
+        .attr(
+          'd',
+          `M ${bounds.startX},${bounds.startY} L ${bounds.midX},${bounds.midY} L${bounds.endX},${bounds.endY} `
+        )
+        .attr('class', 'edge section-edge-' + data.section + ' edge-depth-' + data.depth);
+    }
+  });
 }
 
 /**
- * @param mindmap
- * @param callback
+ * @param {any} svg The svg element to draw the diagram onto
+ * @param {object} mindmap The maindmap data and hierarchy
+ * @param section
+ * @param cy
+ * @param {object} conf The configuration object
+ * @param level
  */
-function eachNode(mindmap, callback) {
-  callback(mindmap);
+function addNodes(mindmap, cy, conf, level) {
+  cy.add({
+    group: 'nodes',
+    data: {
+      id: mindmap.id,
+      labelText: mindmap.descr,
+      height: mindmap.height,
+      width: mindmap.width,
+      level: level,
+      nodeId: mindmap.id,
+      padding: mindmap.padding,
+      type: mindmap.type,
+    },
+    position: {
+      x: mindmap.x,
+      y: mindmap.y,
+    },
+  });
   if (mindmap.children) {
     mindmap.children.forEach((child) => {
-      eachNode(child, callback);
-    });
-  }
-}
-/** @param {object} mindmap */
-function transpose(mindmap) {
-  eachNode(mindmap, (node) => {
-    const orgWidth = node.width;
-    const orgX = node.x;
-    node.width = node.height;
-    node.height = orgWidth;
-    node.x = node.y;
-    node.y = orgX;
-  });
-  return mindmap;
-}
-/** @param {object} mindmap */
-function bottomToUp(mindmap) {
-  log.debug('bottomToUp', mindmap);
-  eachNode(mindmap.result, (node) => {
-    // node.y = node.y - (node.y - bb.top) * 2 - node.height;
-    node.y = node.y - (node.y - 0) * 2 - node.height;
-  });
-  return mindmap;
-}
-/** @param {object} mindmap The mindmap hierarchy */
-function rightToLeft(mindmap) {
-  eachNode(mindmap.result, (node) => {
-    // node.y = node.y - (node.y - bb.top) * 2 - node.height;
-    node.x = node.x - (node.x - 0) * 2 - node.width;
-  });
-  return mindmap;
-}
-
-/**
- * @param mindmap
- * @param dir
- */
-function layout(mindmap, dir) {
-  const bb = new BoundingBox(30, 60);
-
-  const layout = new Layout(bb);
-  switch (dir) {
-    case 'TB':
-      return layout.layout(mindmap);
-    case 'BT':
-      return bottomToUp(layout.layout(mindmap));
-    case 'RL': {
-      transpose(mindmap);
-      let newRes = layout.layout(mindmap);
-      transpose(newRes.result);
-      return rightToLeft(newRes);
-    }
-    case 'LR': {
-      transpose(mindmap);
-      let newRes = layout.layout(mindmap);
-      transpose(newRes.result);
-      return newRes;
-    }
-    default:
-  }
-}
-const dirFromIndex = (index) => {
-  const dirNum = (index + 2) % 4;
-  switch (dirNum) {
-    case 0:
-      return 'LR';
-    case 1:
-      return 'RL';
-    case 2:
-      return 'TB';
-    case 3:
-      return 'BT';
-    default:
-      return 'TB';
-  }
-};
-
-const mergeTrees = (node, trees) => {
-  node.x = trees[0].result.x;
-  node.y = trees[0].result.y;
-  trees.forEach((tree) => {
-    tree.result.children.forEach((child) => {
-      const dx = node.x - tree.result.x;
-      const dy = node.y - tree.result.y;
-      eachNode(child, (childNode) => {
-        const orgNode = db.getNodeById(childNode.id);
-        if (orgNode) {
-          orgNode.x = childNode.x + dx;
-          orgNode.y = childNode.y + dy;
-        }
+      addNodes(child, cy, conf, level + 1);
+      cy.add({
+        group: 'edges',
+        data: {
+          id: `${mindmap.id}_${child.id}`,
+          source: mindmap.id,
+          target: child.id,
+          depth: level,
+          section: child.section,
+        },
       });
     });
-  });
-  return node;
-};
+  }
+}
 
 /**
  * @param node
  * @param conf
+ * @param cy
  */
 function layoutMindmap(node, conf) {
-  // BoundingBox(gap, bottomPadding)
-  // const bb = new BoundingBox(10, 10);
-  // const layout = new Layout(bb);
-  // // const layout = new HorizontalLayout(bb);
-  if (node.children.length === 0) {
-    return node;
-  }
-  const trees = [];
-  // node.children.forEach((child, index) => {
-  //   const tree = clone(node);
-  //   tree.children = [tree.children[index]];
-  //   trees.push(layout(tree, dirFromIndex(index), conf));
-  // });
+  return new Promise((resolve) => {
+    if (node.children.length === 0) {
+      return node;
+    }
 
-  let cnt = 0;
-  // For each direction, create a new tree with the same root, and add a ubset of the children to it.
-  for (let i = 0; i < 4; i++) {
-    // Calculate the number of the children of the root node that will be used in this direction
-    const numChildren =
-      Math.floor(node.children.length / 4) + (node.children.length % 4 > i ? 1 : 0);
-    // Copy the original root node
-    const tree = clone(node);
-    // Setup the new copy with the children to be rendered in this direction
-    tree.children = [];
-    for (let j = 0; j < numChildren; j++) {
-      tree.children.push(node.children[cnt]);
-      cnt++;
-    }
-    if (tree.children.length > 0) {
-      trees.push(layout(tree, dirFromIndex(i), conf));
-    }
-  }
-  // Let each node know the direct of its tree for when we draw the branches.
-  trees.forEach((tree, index) => {
-    tree.result.direction = dirFromIndex(index);
-    eachNode(tree.result, (node) => {
-      node.direction = dirFromIndex(index);
+    // Add temporary render element
+    const renderEl = select('body').append('div').attr('id', 'cy').attr('style', 'display:none');
+    const cy = cytoscape({
+      container: document.getElementById('cy'), // container to render in
+      style: [
+        {
+          selector: 'edge',
+          style: {
+            'curve-style': 'bezier',
+          },
+        },
+      ],
+    });
+    // Remove element after layout
+    renderEl.remove();
+    addNodes(node, cy, conf, 0);
+
+    // Make cytoscape care about the dimensisions of the nodes
+    cy.nodes().forEach(function (n) {
+      n.layoutDimensions = () => {
+        const data = n.data();
+        return { w: data.width, h: data.height };
+      };
+    });
+
+    cy.layout({
+      name: 'cose-bilkent',
+      quality: 'proof',
+      // headless: true,
+      styleEnabled: false,
+      animate: false,
+    }).run();
+    cy.ready((e) => {
+      log.info('Ready', e);
+      resolve(cy);
     });
   });
-
-  // Merge the trees into a single tree
-  mergeTrees(node, trees);
-  return node;
 }
 /**
  * @param node
+ * @param cy
+ * @param positionedMindmap
  * @param conf
  */
-function positionNodes(node, conf) {
-  svgDraw.positionNode(node, conf);
-  if (node.children) {
-    node.children.forEach((child) => {
-      positionNodes(child, conf);
-    });
-  }
+function positionNodes(cy) {
+  cy.nodes().map((node, id) => {
+    const data = node.data();
+    data.x = node.position().x;
+    data.y = node.position().y;
+    svgDraw.positionNode(data);
+    const el = db.getElementById(data.nodeId);
+    log.info('Id:', id, 'Position: (', node.position().x, ', ', node.position().y, ')', data);
+    el.attr(
+      'transform',
+      `translate(${node.position().x - data.width / 2}, ${node.position().y - data.height / 2})`
+    );
+    el.attr('attr', `apa-${id})`);
+  });
 }
 
 /**
@@ -216,7 +173,7 @@ function positionNodes(node, conf) {
  * @param diagObj
  */
 
-export const draw = (text, id, version, diagObj) => {
+export const draw = async (text, id, version, diagObj) => {
   const conf = getConfig();
 
   // This is done only for throwing the error if the text is not valid.
@@ -254,11 +211,11 @@ export const draw = (text, id, version, diagObj) => {
 
   // Next step is to layout the mindmap, giving each node a position
 
-  const positionedMindmap = layoutMindmap(mm, conf);
+  const cy = await layoutMindmap(mm, conf);
 
-  // After this we can draw, first the edges and the then nodes with the correct position
-  drawEdges(edgesElem, positionedMindmap, null, 0, -1, conf);
-  positionNodes(positionedMindmap, conf);
+  // // After this we can draw, first the edges and the then nodes with the correct position
+  drawEdges(edgesElem, cy, conf);
+  positionNodes(cy, conf);
 
   // Setup the view box and size of the svg element
   setupGraphViewbox(undefined, svg, conf.mindmap.padding, conf.mindmap.useMaxWidth);

packages/mermaid-mindmap/src/registry.ts

@@ -1,41 +0,0 @@
-// @ts-ignore: TODO Fix ts errors
-import { mindmapDetector } from './mindmapDetector';
-
-// const getBaseFolder = () => {
-const scriptElement = document.currentScript as HTMLScriptElement;
-const path = scriptElement.src;
-const lastSlash = path.lastIndexOf('/');
-const baseFolder = lastSlash < 0 ? path : path.substring(0, lastSlash + 1);
-
-// };
-
-// console.log('Current script', getBaseFolder(scriptElement !== null ? scriptElement.src : '')); // eslint-disable-line no-console
-
-if (typeof document !== 'undefined') {
-  if (window.mermaid && typeof window.mermaid.detectors === 'object') {
-    window.mermaid.detectors.push({ id: 'mindmap', detector: mindmapDetector });
-  } else {
-    // console.error('window.mermaid.detectors was not found!'); // eslint-disable-line no-console
-    window.mermaid = {};
-    window.mermaid.detectors = [{ id: 'mindmap', detector: mindmapDetector }];
-    // console.error('Detectors now:', window.mermaid.detectors); // eslint-disable-line no-console
-  }
-
-  /*!
-   * Wait for document loaded before starting the execution.
-   */
-  window.addEventListener(
-    'load',
-    () => {
-      if (window.mermaid && typeof window.mermaid.detectors === 'object') {
-        window.mermaid.detectors.push({
-          id: 'mindmap',
-          detector: mindmapDetector,
-          path: baseFolder,
-        });
-        // console.error(window.mermaid.detectors); // eslint-disable-line no-console
-      }
-    },
-    false
-  );
-}

packages/mermaid-mindmap/src/styles.js

@@ -3,8 +3,8 @@ import { darken, lighten, isDark } from 'khroma';
 const genSections = (options) => {
   let sections = '';
 
-  for (let i = 0; i < 8; i++) {
-    options['lineColor' + i] = options['lineColor' + i] || options['gitInv' + i];
+  for (let i = 0; i < options.THEME_COLOR_LIMIT; i++) {
+    options['lineColor' + i] = options['lineColor' + i] || options['cScaleInv' + i];
     if (isDark(options['lineColor' + i])) {
       options['lineColor' + i] = lighten(options['lineColor' + i], 20);
     } else {
@@ -12,25 +12,25 @@ const genSections = (options) => {
     }
   }
 
-  for (let i = 0; i < 8; i++) {
+  for (let i = 0; i < options.THEME_COLOR_LIMIT; i++) {
     const sw = '' + (17 - 3 * i);
     sections += `
     .section-${i - 1} rect, .section-${i - 1} path, .section-${i - 1} circle, .section-${
       i - 1
     } path  {
-      fill: ${options['git' + i]};
+      fill: ${options['cScale' + i]};
     }
     .section-${i - 1} text {
-     fill: ${options['gitBranchLabel' + i]};
+     fill: ${options['cScaleLabel' + i]};
     //  fill: ${options['gitInv' + i]};
     }
     .node-icon-${i - 1} {
       font-size: 40px;
-      color: ${options['gitBranchLabel' + i]};
+      color: ${options['cScaleLabel' + i]};
       // color: ${options['gitInv' + i]};
     }
     .section-edge-${i - 1}{
-      stroke: ${options['git' + i]};
+      stroke: ${options['cScale' + i]};
     }
     .edge-depth-${i - 1}{
       stroke-width: ${sw};

packages/mermaid-mindmap/src/svgDraw.js

@@ -1,5 +1,6 @@
 import { select } from 'd3';
 import * as db from './mindmapDb';
+const MAX_SECTIONS = 12;
 
 /**
  * @param {string} text The text to be wrapped
@@ -159,16 +160,19 @@ const roundedRectBkg = function (elem, node) {
  * @param {object} elem The D3 dom element in which the node is to be added
  * @param {object} node The node to be added
  * @param section
+ * @param fullSection
  * @param {object} conf The configuration object
  * @returns {number} The height nodes dom element
  */
-export const drawNode = function (elem, node, section, conf) {
+export const drawNode = function (elem, node, fullSection, conf) {
+  const section = (fullSection % MAX_SECTIONS) - 1;
   const nodeElem = elem.append('g');
+  node.section = section;
   nodeElem.attr(
     'class',
     (node.class ? node.class + ' ' : '') +
       'mindmap-node ' +
-      (section === -1 ? 'section-root' : 'section-' + section)
+      (section < 0 ? 'section-root' : 'section-' + section)
   );
   const bkgElem = nodeElem.append('g');
 
@@ -252,14 +256,15 @@ export const drawNode = function (elem, node, section, conf) {
   }
 
   // Position the node to its coordinate
-  if (typeof node.x !== 'undefined' && typeof node.y !== 'undefined') {
-    nodeElem.attr('transform', 'translate(' + node.x + ',' + node.y + ')');
-  }
+  // if (typeof node.x !== 'undefined' && typeof node.y !== 'undefined') {
+  //   nodeElem.attr('transform', 'translate(' + node.x + ',' + node.y + ')');
+  // }
   db.setElementForId(node.id, nodeElem);
   return node.height;
 };
 
-export const drawEdge = function drawEdge(edgesElem, mindmap, parent, depth, section) {
+export const drawEdge = function drawEdge(edgesElem, mindmap, parent, depth, fullSection) {
+  const section = (fullSection % MAX_SECTIONS) - 1;
   const sx = parent.x + parent.width / 2;
   const sy = parent.y + parent.height / 2;
   const ex = mindmap.x + mindmap.width / 2;