Updated version

[9.2.0] Support `lazyLoadedDiagrams` when calling `initThrowsErrorsAsync`

.eslintrc.json

@@ -52,24 +52,25 @@
   },
   "overrides": [
     {
-      "files": "./**/*.html",
-      "rules": {
-        "no-undef": "off",
-        "jsdoc/require-jsdoc": "off"
-      }
-    },
-    {
-      "files": ["./cypress/**", "./demos/**"],
+      "files": ["cypress/**", "demos/**"],
       "rules": {
         "no-console": "off"
       }
     },
     {
-      "files": ["./**/*.spec.{ts,js}", "./cypress/**", "./demos/**", "./**/docs/**"],
+      "files": ["*.spec.{ts,js}", "cypress/**", "demos/**", "**/docs/**"],
       "rules": {
         "jsdoc/require-jsdoc": "off",
         "@typescript-eslint/no-unused-vars": "off"
       }
+    },
+    {
+      "files": ["*.html", "*.md", "**/*.md/*"],
+      "rules": {
+        "no-var": "error",
+        "no-undef": "off",
+        "@typescript-eslint/no-unused-vars": "off"
+      }
     }
   ]
 }

.github/workflows/build.yml

@@ -16,30 +16,36 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [18.x]
     steps:
       - uses: actions/checkout@v3
 
+      - uses: pnpm/action-setup@v2
+        # uses version from "packageManager" field in package.json
+
       - name: Setup Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v3
         with:
-          cache: yarn
+          cache: pnpm
           node-version: ${{ matrix.node-version }}
 
-      - name: Install Yarn
-        run: npm i yarn --global
-
       - name: Install Packages
         run: |
-          yarn install --frozen-lockfile
+          pnpm install --frozen-lockfile
         env:
           CYPRESS_CACHE_FOLDER: .cache/Cypress
 
       - name: Run Build
-        run: yarn build
+        run: pnpm run build
 
-      - name: Upload Build as Artifact
+      - name: Upload Mermaid Build as Artifact
         uses: actions/upload-artifact@v3
         with:
-          name: dist
-          path: dist
+          name: mermaid-build
+          path: packages/mermaid/dist
+
+      - name: Upload Mermaid Mindmap Build as Artifact
+        uses: actions/upload-artifact@v3
+        with:
+          name: mermaid-mindmap-build
+          path: packages/mermaid-mindmap/dist

.github/workflows/docs.yml

@@ -0,0 +1,28 @@
+name: Documentation Checks
+
+on:
+  push:
+    branches:
+      - develop
+    paths:
+      - 'packages/mermaid/src/docs/**/*'
+  pull_request:
+    branches:
+      - develop
+    paths:
+      - 'packages/mermaid/src/docs/**/*'
+jobs:
+  spellcheck:
+    name: 'Docs: Spellcheck'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        name: Check out the code
+      - uses: actions/setup-node@v1
+        name: Setup node
+        with:
+          node-version: '16'
+      - run: npm install -g cspell
+        name: Install cSpell
+      - run: cspell --config ./cSpell.json "packages/mermaid/src/docs/**/*.md" --no-progress
+        name: Run cSpell

.github/workflows/e2e-applitools.yml

@@ -23,31 +23,30 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [18.x]
     steps:
       - if: ${{ ! env.USE_APPLI }}
         name: Warn if not using Applitools
         run: |
           echo "::error,title=Not using Applitols::APPLITOOLS_API_KEY is empty, disabling Applitools for this run."
+
       - uses: actions/checkout@v3
+
+      - uses: pnpm/action-setup@v2
+        # uses version from "packageManager" field in package.json
+
       - name: Setup Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v3
         with:
-          cache: yarn
+          cache: pnpm
           node-version: ${{ matrix.node-version }}
 
-      - name: Install Yarn
-        run: npm i yarn --global
-
       - name: Install Packages
         run: |
-          yarn install --frozen-lockfile
+          pnpm install --frozen-lockfile
         env:
           CYPRESS_CACHE_FOLDER: .cache/Cypress
 
-      - name: Run Build
-        run: yarn build
-
       - if: ${{ env.USE_APPLI }}
         name: Notify applitools of new batch
         # Copied from docs https://applitools.com/docs/topics/integrations/github-integration-ci-setup.html
@@ -60,7 +59,7 @@ jobs:
           APPLITOOLS_SERVER_URL: 'https://eyesapi.applitools.com'
 
       - name: Run E2E Tests
-        run: yarn e2e
+        run: pnpm run e2e
         env:
           CYPRESS_CACHE_FOLDER: .cache/Cypress
           # Mermaid applitools.config.js uses this to pick batch name.

.github/workflows/e2e.yml

@@ -11,42 +11,36 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        node-version: [16.x]
+        node-version: [18.x]
         containers: [1, 2, 3, 4]
     steps:
       - uses: actions/checkout@v3
 
-      - uses: actions/cache@v3
-        id: yarn-and-build-cache
-        with:
-          path: |
-            ~/.cache/Cypress
-            build
-            node_modules
-          key: ${{ runner.os }}-node_modules-build-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-node_modules-build-
+      - uses: pnpm/action-setup@v2
+        # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v3
+        # Need to skip setup if Cypress run is skipped, otherwise an error
+        # is thrown since the pnpm cache step fails
+        if: ${{ ( env.CYPRESS_RECORD_KEY != '' ) || ( matrix.containers == 1 ) }}
         with:
-          cache: yarn
+          cache: pnpm
           node-version: ${{ matrix.node-version }}
 
       # Install NPM dependencies, cache them correctly
       # and run all Cypress tests
       - name: Cypress run
-        uses: cypress-io/github-action@v3
+        uses: cypress-io/github-action@v4
         # If CYPRESS_RECORD_KEY is set, run in parallel on all containers
         # Otherwise (e.g. if running from fork), we run on a single container only
         if: ${{ ( env.CYPRESS_RECORD_KEY != '' ) || ( matrix.containers == 1 ) }}
         with:
-          start: yarn dev
+          start: pnpm run dev
           wait-on: 'http://localhost:9000'
           # Disable recording if we don't have an API key
           # e.g. if this action was run from a fork
           record: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
           parallel: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
-          headless: true
         env:
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}

.github/workflows/lint.yml

@@ -16,27 +16,27 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [18.x]
     steps:
       - uses: actions/checkout@v3
 
+      - uses: pnpm/action-setup@v2
+        # uses version from "packageManager" field in package.json
+
       - name: Setup Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v3
         with:
-          cache: yarn
+          cache: pnpm
           node-version: ${{ matrix.node-version }}
 
-      - name: Install Yarn
-        run: npm i yarn --global
-
       - name: Install Packages
         run: |
-          yarn install --frozen-lockfile
+          pnpm install --frozen-lockfile
         env:
           CYPRESS_CACHE_FOLDER: .cache/Cypress
 
       - name: Run Linting
-        run: yarn lint
+        run: pnpm run lint
 
       - name: Verify Docs
-        run: yarn docs:verify
+        run: pnpm run docs:verify

.github/workflows/release-preview-publish.yml

@@ -13,7 +13,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 16.x
+          node-version: 18.x
       - name: Install Yarn
         run: npm i yarn --global
 

.github/workflows/release-publish.yml

@@ -14,7 +14,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 16.x
+          node-version: 18.x
       - name: Install Yarn
         run: npm i yarn --global
 

.github/workflows/test.yml

@@ -10,28 +10,28 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [18.x]
     steps:
       - uses: actions/checkout@v3
 
+      - uses: pnpm/action-setup@v2
+        # uses version from "packageManager" field in package.json
+
       - name: Setup Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v3
         with:
-          cache: yarn
+          cache: pnpm
           node-version: ${{ matrix.node-version }}
 
-      - name: Install Yarn
-        run: npm i yarn --global
-
       - name: Install Packages
         run: |
-          yarn install --frozen-lockfile
+          pnpm install --frozen-lockfile
         env:
           CYPRESS_CACHE_FOLDER: .cache/Cypress
 
       - name: Run Unit Tests
         run: |
-          yarn ci --coverage
+          pnpm run ci --coverage
 
       - name: Upload Coverage to Coveralls
         # it feels a bit weird to use @master, but that's what the docs use

.gitignore

@@ -32,3 +32,6 @@ cypress/snapshots/
 .eslintcache
 .tsbuildinfo
 tsconfig.tsbuildinfo
+knsv*.html
+
+local*.html

.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"]
 }

.npmrc

@@ -0,0 +1 @@
+auto-install-peers=true

.prettierignore

@@ -1,4 +1,6 @@
 dist
 cypress/platform/xss3.html
 .cache
-coverage
+coverage
+# Autogenerated by PNPM
+pnpm-lock.yaml

.vite/build.ts

@@ -3,35 +3,68 @@ import { resolve } from 'path';
 import { fileURLToPath } from 'url';
 import jisonPlugin from './jisonPlugin.js';
 import pkg from '../package.json' assert { type: 'json' };
+
+const { dependencies } = pkg;
+const watch = process.argv.includes('--watch');
+const mermaidOnly = process.argv.includes('--mermaid');
+const __dirname = fileURLToPath(new URL('.', import.meta.url));
+
 type OutputOptions = Exclude<
   Exclude<InlineConfig['build'], undefined>['rollupOptions'],
   undefined
 >['output'];
 
-const { dependencies } = pkg;
-const watch = process.argv.includes('--watch');
-const __dirname = fileURLToPath(new URL('.', import.meta.url));
+const packageOptions = {
+  mermaid: {
+    name: 'mermaid',
+    packageName: 'mermaid',
+    file: 'mermaid.ts',
+  },
+  'mermaid-mindmap': {
+    name: 'mermaid-mindmap',
+    packageName: 'mermaid-mindmap',
+    file: 'diagram-definition.ts',
+  },
+  'mermaid-mindmap-detector': {
+    name: 'mermaid-mindmap-detector',
+    packageName: 'mermaid-mindmap',
+    file: 'detector.ts',
+  },
+  'mermaid-example-diagram': {
+    name: 'mermaid-example-diagram',
+    packageName: 'mermaid-example-diagram',
+    file: 'diagram-definition.ts',
+  },
+  'mermaid-example-diagram-detector': {
+    name: 'mermaid-example-diagram-detector',
+    packageName: 'mermaid-example-diagram',
+    file: 'detector.ts',
+  },
+};
 
 interface BuildOptions {
   minify: boolean | 'esbuild';
   core?: boolean;
   watch?: boolean;
+  entryName: keyof typeof packageOptions;
 }
 
-export const getBuildConfig = ({ minify, core, watch }: BuildOptions): InlineConfig => {
+export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions): InlineConfig => {
   const external = ['require', 'fs', 'path'];
+  console.log(entryName, packageOptions[entryName]);
+  const { name, file, packageName } = packageOptions[entryName];
   let output: OutputOptions = [
     {
-      name: 'mermaid',
+      name,
       format: 'esm',
       sourcemap: true,
-      entryFileNames: `[name].esm${minify ? '.min' : ''}.mjs`,
+      entryFileNames: `${name}.esm${minify ? '.min' : ''}.mjs`,
     },
     {
-      name: 'mermaid',
+      name,
       format: 'umd',
       sourcemap: true,
-      entryFileNames: `[name]${minify ? '.min' : ''}.js`,
+      entryFileNames: `${name}${minify ? '.min' : ''}.js`,
     },
   ];
 
@@ -42,9 +75,10 @@ export const getBuildConfig = ({ minify, core, watch }: BuildOptions): InlineCon
     // This needs to be an array. Otherwise vite will build esm & umd with same name and overwrite esm with umd.
     output = [
       {
+        name,
         format: 'esm',
         sourcemap: true,
-        entryFileNames: `[name].core.mjs`,
+        entryFileNames: `${name}.core.mjs`,
       },
     ];
   }
@@ -53,11 +87,12 @@ export const getBuildConfig = ({ minify, core, watch }: BuildOptions): InlineCon
     configFile: false,
     build: {
       emptyOutDir: false,
+      outDir: resolve(__dirname, `../packages/${packageName}/dist`),
       lib: {
-        entry: resolve(__dirname, '../src/mermaid.ts'),
-        name: 'mermaid',
+        entry: resolve(__dirname, `../packages/${packageName}/src/${file}`),
+        name,
         // the proper extensions will be added
-        fileName: 'mermaid',
+        fileName: name,
       },
       minify,
       rollupOptions: {
@@ -73,17 +108,41 @@ export const getBuildConfig = ({ minify, core, watch }: BuildOptions): InlineCon
 
   if (watch && config.build) {
     config.build.watch = {
-      include: 'src/**',
+      include: [
+        'packages/mermaid-mindmap/src/**',
+        'packages/mermaid/src/**',
+        'packages/mermaid-example-diagram/src/**',
+      ],
     };
   }
 
   return config;
 };
 
+const buildPackage = async (entryName: keyof typeof packageOptions) => {
+  return Promise.allSettled([
+    build(getBuildConfig({ minify: false, entryName })),
+    build(getBuildConfig({ minify: 'esbuild', entryName })),
+    build(getBuildConfig({ minify: false, core: true, entryName })),
+  ]);
+};
+
+const main = async () => {
+  const packageNames = Object.keys(packageOptions) as (keyof typeof packageOptions)[];
+  for (const pkg of packageNames) {
+    if (mermaidOnly && pkg !== 'mermaid') {
+      continue;
+    }
+    await buildPackage(pkg);
+  }
+};
+
 if (watch) {
-  build(getBuildConfig({ minify: false, watch }));
+  build(getBuildConfig({ minify: false, watch, core: true, entryName: 'mermaid' }));
+  if (!mermaidOnly) {
+    build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-mindmap' }));
+    build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' }));
+  }
 } else {
-  build(getBuildConfig({ minify: false }));
-  build(getBuildConfig({ minify: 'esbuild' }));
-  build(getBuildConfig({ minify: false, core: true }));
+  void main();
 }

.vite/server.ts

@@ -1,7 +1,15 @@
-import express from 'express';
+import express, { NextFunction, Request, Response } from 'express';
 import { createServer as createViteServer } from 'vite';
 // import { getBuildConfig } from './build';
 
+const cors = (req: Request, res: Response, next: NextFunction) => {
+  res.header('Access-Control-Allow-Origin', '*');
+  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
+  res.header('Access-Control-Allow-Headers', 'Content-Type');
+
+  next();
+};
+
 async function createServer() {
   const app = express();
 
@@ -12,8 +20,11 @@ async function createServer() {
     appType: 'custom', // don't include Vite's default HTML handling middlewares
   });
 
+  app.use(cors);
+  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('dist'));
   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

@@ -6,13 +6,24 @@ So you want to help? That's great!
 
 Here are a few things to know to get you started on the right path.
 
+Below link will help you making a copy of the repository in your local system.
+
+https://docs.github.com/en/get-started/quickstart/fork-a-repo
+
+## Requirements
+
+- [volta](https://volta.sh/) to manage node versions.
+- [Node.js](https://nodejs.org/en/). `volta install node`
+- [pnpm](https://pnpm.io/) package manager. `volta install pnpm`
+
 ## Development Installation
 
 ```bash
 git clone git@github.com:mermaid-js/mermaid.git
 cd mermaid
-yarn
-yarn test
+# npx is required for first install as volta support for pnpm is not added yet.
+npx pnpm install
+pnpm test
 ```
 
 ## Committing code
@@ -39,16 +50,16 @@ Less strict here, it is OK to commit directly in the `develop` branch if you are
 
 The documentation is written in **Markdown**. For more information about Markdown [see the GitHub Markdown help page](https://help.github.com/en/github/writing-on-github/basic-writing-and-formatting-syntax).
 
-### Documentation source files are in /src/docs
+### Documentation source files are in [`/packages/mermaid/src/docs`](packages/mermaid/src/docs)
 
-The source files for the project documentation are located in the `/src/docs` directory. This is where you should make changes.
-The files under `/src/docs` are processed to generate the published documentation, and the resulting files are put into the `/docs` directory.
+The source files for the project documentation are located in the [`/packages/mermaid/src/docs`](packages/mermaid/src/docs) directory. This is where you should make changes.
+The files under `/packages/mermaid/src/docs` are processed to generate the published documentation, and the resulting files are put into the `/docs` directory.
 
 ```mermaid
 flowchart LR
   classDef default fill:#fff,color:black,stroke:black
 
-  source["files in /src/docs\n(changes should be done here)"] -- automatic processing\nto generate the final documentation--> published["files in /docs\ndisplayed on the official documentation site"]
+  source["files in /packages/mermaid/src/docs\n(changes should be done here)"] -- automatic processing\nto generate the final documentation--> published["files in /docs\ndisplayed on the official documentation site"]
 
 ```
 
@@ -103,7 +114,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.
 
@@ -137,7 +148,7 @@ it('should render forks and joins', () => {
 
 Finally, if it is not in the documentation, no one will know about it and then **no one will use it**. Wouldn't that be sad? With all the effort that was put into the feature?
 
-The source files for documentation are in `/src/docs` and are written in markdown. Just pick the right section and start typing. See the [Committing Documentation](#committing-documentation) section for more about how the documentation is generated.
+The source files for documentation are in `/packages/mermaid/src/docs` and are written in markdown. Just pick the right section and start typing. See the [Committing Documentation](#committing-documentation) section for more about how the documentation is generated.
 
 #### Adding to or changing the documentation organization
 

README.md

@@ -1,4 +1,23 @@
-# mermaid [![Build Status](https://travis-ci.org/mermaid-js/mermaid.svg?branch=master)](https://travis-ci.org/mermaid-js/mermaid) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
+# mermaid
+
+[![Build CI Status](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid) [![NPM](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [![Twitter Follow](https://img.shields.io/twitter/follow/mermaidjs_?style=social)](https://twitter.com/mermaidjs_)
+
+# Whoa, what's going on here?
+
+We are transforming the Mermaid repository to a so called mono-repo. This is a part of the effort to decouple the diagrams from the core of mermaid. This will:
+
+- Make it possible to select which diagrams to include on your site
+- Open up for lazy loading
+- 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 some changes..
+
+# We use pnpm now
+
+# The source code has moved
+
+It is now located in the src folder for each respective package located as subfolders in packages.
 
 English | [简体中文](./README.zh-CN.md)
 

README.zh-CN.md

@@ -1,4 +1,6 @@
-# mermaid [![Build Status](https://travis-ci.org/mermaid-js/mermaid.svg?branch=master)](https://travis-ci.org/mermaid-js/mermaid) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
+# mermaid
+
+[![Build CI Status](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid) [![NPM](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [![Twitter Follow](https://img.shields.io/twitter/follow/mermaidjs_?style=social)](https://twitter.com/mermaidjs_)
 
 [English](./README.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

__mocks__/dagre-d3.ts

@@ -1,3 +1 @@
-import { vi } from 'vitest';
-
-// export const render = vi.fn();
+// DO NOT delete this file. It is used by vitest to mock the dagre-d3 module.

cSpell.json

@@ -0,0 +1,95 @@
+{
+  "version": "0.2",
+  "language": "en",
+  "words": [
+    "customizability",
+    "Gantt",
+    "jison",
+    "knsv",
+    "Knut",
+    "mindmap",
+    "Mindmaps",
+    "mitigations",
+    "sandboxed",
+    "Sveidqvist",
+    "verdana",
+    "Visio"
+  ],
+  "ignoreWords": [
+    "Adamiecki",
+    "applitools",
+    "Asciidoctor",
+    "Astah",
+    "Bisheng",
+    "codedoc",
+    "Docsy",
+    "Doku",
+    "Gitea",
+    "Gitgraph",
+    "Grav",
+    "Inkdrop",
+    "Jaoude",
+    "mdbook",
+    "mermerd",
+    "mkdocs",
+    "phpbb",
+    "Plantuml",
+    "Playfair's",
+    "Podlite",
+    "redmine",
+    "sphinxcontrib",
+    "Tuleap"
+  ],
+  "patterns": [
+    {
+      "name": "Markdown links",
+      "pattern": "\\((.*)\\)",
+      "description": ""
+    },
+    {
+      "name": "Markdown code blocks",
+      "pattern": "/^(\\s*`{3,}).*[\\s\\S]*?^\\1/gmx",
+      "description": "Taken from the cSpell example at https://cspell.org/configuration/patterns/#verbose-regular-expressions"
+    },
+    {
+      "name": "Inline code blocks",
+      "pattern": "\\`([^\\`\\r\\n]+?)\\`",
+      "description": "https://stackoverflow.com/questions/41274241/how-to-capture-inline-markdown-code-but-not-a-markdown-code-fence-with-regex"
+    },
+    {
+      "name": "Link contents",
+      "pattern": "\\<a(.*)\\>",
+      "description": ""
+    },
+    {
+      "name": "Snippet references",
+      "pattern": "-- snippet:(.*)",
+      "description": ""
+    },
+    {
+      "name": "Snippet references 2",
+      "pattern": "\\<\\[sample:(.*)",
+      "description": "another kind of snippet reference"
+    },
+    {
+      "name": "Multi-line code blocks",
+      "pattern": "/^\\s*```[\\s\\S]*?^\\s*```/gm"
+    },
+    {
+      "name": "HTML Tags",
+      "pattern": "<[^>]*>",
+      "description": "Reference: https://stackoverflow.com/questions/11229831/regular-expression-to-remove-html-tags-from-a-string"
+    }
+  ],
+  "ignoreRegExpList": [
+    "Markdown links",
+    "Markdown code blocks",
+    "Inline code blocks",
+    "Link contents",
+    "Snippet references",
+    "Snippet references 2",
+    "Multi-line code blocks",
+    "HTML Tags"
+  ],
+  "ignorePaths": ["packages/mermaid/src/docs/CHANGELOG.md"]
+}

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/bundle-test.js

@@ -1,4 +1,4 @@
-import mermaid from '../../src/mermaid';
+import mermaid from '../../packages/mermaid/src/mermaid';
 
 let code = `flowchart LR
 Power_Supply --> Transmitter_A

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/e2e.html

@@ -2,7 +2,7 @@
   <head>
     <meta charset="utf-8" />
     <!-- <meta charset="iso-8859-15"/> -->
-    <script src="./viewer.js" type="module" />
+    <script src="./viewer.js" type="module"></script>
     <!-- <link href="https://fonts.googleapis.com/css?family=Mansalva&display=swap" rel="stylesheet" /> -->
     <link
       href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"

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
@@ -363,6 +367,7 @@ flowchart TD
     }
     </pre>
 
+    <!-- <script src="./mermaid.js"></script> -->
     <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
@@ -380,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;
@@ -45,41 +55,72 @@
   </head>
   <body>
     <div>Security check</div>
-    <div class="flex">
-      <pre id="diagram" class="mermaid">
-    flowchart TD
-    A[myClass1] --> B[default] & C[default]
-    B[default] & C[default] --> D[myClass2]
-    classDef default stroke-width:2px,fill:none,stroke:silver
-    classDef node color:red
-    classDef myClass1 color:#0000ff
-    classDef myClass2 stroke:#0000ff,fill:#ccccff
-    class A myClass1
-    class D myClass2
-  </pre
-      >
-      <div id="res" class=""></div>
-    </div>
+    <pre id="diagram" class="mermaid">
+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
+    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({
-        startOnLoad: false,
+        theme: 'forest',
+        startOnLoad: true,
         logLevel: 0,
-        // 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');
       }
-
-      // document.querySelector('#diagram').innerHTML = diagram;
-      try {
-        mermaid.initThrowsErrors(undefined, '#diagram');
-      } catch (err) {
-        console.log('Caught error:', err);
-      }
+      mermaid.parseError = function (err, hash) {
+        console.error('In parse error:');
+        console.error(err);
+      };
     </script>
   </body>
 </html>

cypress/platform/per.html

@@ -0,0 +1,82 @@
+<html>
+  <head>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
+      rel="stylesheet"
+    />
+    <style>
+      body {
+        /* background: rgb(221, 208, 208); */
+        /* background:#333; */
+        font-family: 'Arial';
+        /* font-size: 18px !important; */
+      }
+      h1 {
+        color: grey;
+      }
+      .mermaid2 {
+        display: none;
+      }
+      .mermaid svg {
+        /* font-size: 18px !important; */
+      }
+      .malware {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 150px;
+        background: red;
+        color: black;
+        display: flex;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-family: monospace;
+        font-size: 72px;
+      }
+    </style>
+  </head>
+  <body>
+    <div>Security check</div>
+    <pre id="diagram" class="mermaid">
+flowchart LR
+A-->B
+        </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>
+    <script>
+      mermaid.parseError = function (err, hash) {
+        // console.error('Mermaid error: ', err);
+      };
+      mermaid.initialize({
+        startOnLoad: true,
+        logLevel: 0,
+        basePath: './packages/',
+        // themeVariables: {relationLabelColor: 'red'}
+      });
+      function callback() {
+        alert('It worked');
+      }
+      mermaid.parseError = function (err, hash) {
+        console.error('In parse error:');
+        console.error(err);
+      };
+    </script>
+  </body>
+</html>

cypress/platform/render-after-error.html

@@ -14,7 +14,6 @@
       mermaid.init({ startOnLoad: false });
 
       mermaid.mermaidAPI.initialize({ securityLevel: 'strict' });
-
       try {
         console.log('rendering');
         mermaid.mermaidAPI.render('graphDiv', `>`);

cypress/platform/rerender.html

@@ -17,9 +17,9 @@
       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);
+        const graph = mermaid.mermaidAPI.render('id', graphText);
         console.log('\x1b[35m%s\x1b[0m', '>> graph', graph);
         document.getElementById('graph').innerHTML = graph;
       }

cypress/platform/sidv.html

@@ -0,0 +1,14 @@
+<html>
+  <body>
+    <pre class="mermaid">
+    none
+    hello world
+    </pre>
+    <script src="./mermaid.js"></script>
+    <script>
+      mermaid.initialize({
+        logLevel: 1,
+      });
+    </script>
+  </body>
+</html>

cypress/platform/viewer.js

@@ -1,4 +1,4 @@
-import mermaid2 from '../../src/mermaid';
+import mermaid2 from '../../packages/mermaid/src/mermaid';
 
 function b64ToUtf8(str) {
   return decodeURIComponent(escape(window.atob(str)));
@@ -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();
   }

cypress/platform/xss10.html

@@ -93,7 +93,7 @@
         throw new Error('XSS Succeeded');
       }
 
-      var diagram = 'classDiagram\n';
+      let diagram = 'classDiagram\n';
       diagram += 'class Square~<img/src';
       diagram += "='1'/onerror=xssAttack()>~{\n";
       diagram += 'id A\n';

cypress/platform/xss11.html

@@ -93,7 +93,7 @@
         throw new Error('XSS Succeeded');
       }
 
-      var diagram = 'stateDiagram-v2\n';
+      let diagram = 'stateDiagram-v2\n';
       diagram += 's2 : This is a state description<img/src';
       diagram += "='1'/onerror=xssAttack()>";
 

cypress/platform/xss12.html

@@ -93,7 +93,7 @@
         throw new Error('XSS Succeeded');
       }
 
-      var diagram = 'stateDiagram-v2\n';
+      let diagram = 'stateDiagram-v2\n';
       diagram += 's2 : A<img/src';
       diagram += "='1'/onerror=xssAttack()>";
 

cypress/platform/xss13.html

@@ -93,7 +93,7 @@
         throw new Error('XSS Succeeded');
       }
 
-      var diagram = 'stateDiagram-v2\n';
+      let diagram = 'stateDiagram-v2\n';
       diagram += 'if_state --> False: if n < 0<img/src';
       diagram += "='1'/onerror=xssAttack()>";
 

cypress/platform/xss14.html

@@ -93,7 +93,7 @@
         throw new Error('XSS Succeeded');
       }
 
-      var diagram = 'classDiagram\n';
+      let diagram = 'classDiagram\n';
       diagram += 'classA <-- classB : <ifr';
       diagram += "ame/srcdoc='<scr";
       diagram += 'ipt>parent.xssAttack(`XSS`)</';

cypress/platform/xss15.html

@@ -93,7 +93,7 @@
         throw new Error('XSS Succeeded');
       }
 
-      var diagram = `sequenceDiagram
+      let diagram = `sequenceDiagram
     participant John
     links John: {"XSS": "javas`;
       diagram += `cript:alert('AudioParam')"}`;

cypress/platform/xss16.html

@@ -93,7 +93,7 @@
         throw new Error('XSS Succeeded');
       }
 
-      var diagram = `sequenceDiagram
+      let diagram = `sequenceDiagram
     participant Alice
     links Alice: { "Click me!" : "javasjavascript:cript:alert('goose')" }`;
 

cypress/platform/xss17.html

@@ -93,7 +93,7 @@
         throw new Error('XSS Succeeded');
       }
 
-      var diagram = `sequenceDiagram
+      let diagram = `sequenceDiagram
     participant Alice
     link Alice: Click Me!@javasjavascript:cript:alert("goose")`;
 

cypress/platform/xss18.html

@@ -93,7 +93,7 @@
         throw new Error('XSS Succeeded');
       }
 
-      var diagram = `classDiagram
+      let diagram = `classDiagram
       Class "<img/src='x'/onerror=xssAttack(1)>" <--> "<img/src='x'/onerror=xssAttack(2)>" C2: Cool label`;
 
       // //   var diagram = "stateDiagram-v2\n";

cypress/platform/xss19.html

@@ -93,7 +93,7 @@
         throw new Error('XSS Succeeded');
       }
 
-      var diagram = `classDiagram
+      let diagram = `classDiagram
 class Shape{
     <<<img/src='1'/`;
 

cypress/platform/xss2.html

@@ -54,9 +54,9 @@
         startOnLoad: true,
         useMaxWidth: true,
       });
-      var cnt = 0;
-      var a;
-      var handler = setInterval(() => {
+      let cnt = 0;
+      let a;
+      const handler = setInterval(() => {
         cnt++;
         a = {};
         if (typeof a.polluted !== 'undefined') {

cypress/platform/xss20.html

@@ -96,7 +96,7 @@
       //       var diagram = `  graph TD
       // A --> B["<a href='javasc`;
       // diagram += `ript#colon;xssAttack()'>AAA</a>"]`;
-      var diagram = `  graph TD
+      let diagram = `  graph TD
 A --> B["<a href='javasc`;
       diagram += `ript#colon;xssAttack()'>AAA</a>"]`;
       // diagram += '//via.placeholder.com/64\' width=64 />"]';

cypress/platform/xss21.html

@@ -96,7 +96,7 @@
       //       var diagram = `  graph TD
       // A --> B["<a href='javasc`;
       // diagram += `ript#colon;xssAttack()'>AAA</a>"]`;
-      var diagram = `  graph TD
+      let diagram = `  graph TD
 A --> B["<a href='javasc`;
       diagram += `ript#9;t#colon;xssAttack()'>AAA</a>"]`;
       // diagram += '//via.placeholder.com/64\' width=64 />"]';

cypress/platform/xss3.html

@@ -42,9 +42,9 @@
         startOnLoad: true,
         useMaxWidth: true,
       });
-      var cnt = 0;
-      var a;
-      var handler = setInterval(() => {
+      let cnt = 0;
+      let a;
+      const handler = setInterval(() => {
         cnt++;
         a = {};
         if (typeof a.polluted !== 'undefined') {

cypress/platform/xss4.html

@@ -85,7 +85,7 @@
         alert('It worked');
       }
 
-      var diagram = '%%{init: {"flowchart": {"htmlLabels": "true"}} }%%\n';
+      let diagram = '%%{init: {"flowchart": {"htmlLabels": "true"}} }%%\n';
       diagram += 'flowchart\n';
       diagram += 'A["<ifra';
       diagram += "me srcdoc='<scrip";

cypress/platform/xss5.html

@@ -92,7 +92,7 @@
         document.getElementsByTagName('body')[0].appendChild(div);
         throw new Error('XSS Succeeded');
       }
-      var diagram = 'graph LR\n';
+      let diagram = 'graph LR\n';
       diagram += 'B-->D("<img onerror=location=`java';
       // diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
       diagram += 'script\x3a;xssAttack\u0028\u0029` src=x>");\n';

cypress/platform/xss6.html

@@ -92,7 +92,7 @@
         document.getElementsByTagName('body')[0].appendChild(div);
         throw new Error('XSS Succeeded');
       }
-      var diagram = 'graph LR\n';
+      let diagram = 'graph LR\n';
       diagram += 'A(<img/src/onerror=xssAttack`1`>)';
       // diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
       console.log(diagram);

cypress/platform/xss7.html

@@ -92,7 +92,7 @@
         document.getElementsByTagName('body')[0].appendChild(div);
         throw new Error('XSS Succeeded');
       }
-      var diagram = 'graph LR\n';
+      let diagram = 'graph LR\n';
       diagram += " B(<a href='<";
       diagram += 'script></';
       diagram += "script>Javascript:xssAttack`1`'>Click)";

cypress/platform/xss8.html

@@ -93,7 +93,7 @@
         throw new Error('XSS Succeeded');
       }
 
-      var diagram = 'stateDiagram-v2\n';
+      let diagram = 'stateDiagram-v2\n';
       diagram += "<img/src='1'/onerror=xssAttack()> --> B";
       // diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
       console.log(diagram);

cypress/platform/xss9.html

@@ -93,7 +93,7 @@
         throw new Error('XSS Succeeded');
       }
 
-      var diagram = 'stateDiagram-v2\n';
+      let diagram = 'stateDiagram-v2\n';
       diagram += "<img/src='1'/onerror=xssAttack()> --> B";
       // diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
       console.log(diagram);

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>
@@ -273,7 +277,7 @@
     <script>
       function testClick(nodeId) {
         console.log('clicked', nodeId);
-        var originalBgColor = document.querySelector('body').style.backgroundColor;
+        let originalBgColor = document.querySelector('body').style.backgroundColor;
         document.querySelector('body').style.backgroundColor = 'yellow';
         setTimeout(function () {
           document.querySelector('body').style.backgroundColor = originalBgColor;

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
@@ -44,7 +46,7 @@
     <script>
       function testClick(nodeId) {
         console.log('clicked', nodeId);
-        var originalBgColor = document.querySelector('body').style.backgroundColor;
+        let originalBgColor = document.querySelector('body').style.backgroundColor;
         document.querySelector('body').style.backgroundColor = 'yellow';
         setTimeout(function () {
           document.querySelector('body').style.backgroundColor = originalBgColor;

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,36 +10,56 @@
         /* font-family: 'trebuchet ms', verdana, arial; */
         font-family: 'Courier New', Courier, monospace !important;
       }
+      .diagram-title {
+        fill: red;
+        font-size: 24pt;
+      }
     </style>
   </head>
 
   <body>
     <pre class="mermaid">
-      erDiagram
-        title: This is a title
-        accDescription_ Test a description
 
-        CUSTOMER ||--o{ ORDER : places
-        ORDER ||--|{ LINE-ITEM : contains
-        CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
+erDiagram
+  %% title This is a title
+  %% accDescription Test a description
 
-        DELIVERY-ADDRESS {
-          int customerId
-          string addressLine1
-          string addressLine2
-          string city
-          string county
-          string state
-          string region
-          string country
-          string postalCode
-        }
+  "Person . CUSTOMER"||--o{ ORDER : places
+
+  ORDER ||--|{ "€£LINE_ITEM ¥" : contains
+
+  "Person . CUSTOMER" }|..|{ "Address//StreetAddress::[DELIVERY ADDRESS]" : uses
+
+  "Address//StreetAddress::[DELIVERY ADDRESS]" {
+      int customerID FK
+      string line1 "this is the first address line comment"
+      string line2
+      string city
+      string region
+      string state
+      string postal_code
+      string country
+      }
+
+      "a_~`!@#$^&*()-_=+[]{}|/;:'.?¡⁄™€£‹¢›∞fi§‡•°ª·º‚≠±œŒ∑„®†ˇ¥Á¨ˆˆØπ∏“«»åÅßÍ∂΃ϩ˙Ó∆Ô˚¬Ò…ÚæÆΩ¸≈π˛çÇ√◊∫ı˜µÂ≤¯≥˘÷¿" {
+        string name "this is an entity with an absurd name just to show characters that are now acceptable as long as the name is in double quotes"
+      }
+
+      "€£LINE_ITEM ¥" {
+        int orderID FK
+        int currencyId FK
+        number price
+        number quantity
+        number adjustment
+        number final_price
+      }
     </pre>
 
+    <script src="./mermaid.js"></script>
     <script type="module">
-      import mermaid from '../src/mermaid';
       mermaid.initialize({
-        theme: 'base',
+        theme: 'default',
+
         // themeCSS: '.node rect { fill: red; }',
         logLevel: 3,
         securityLevel: 'loose',

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>
 
@@ -1482,7 +1513,7 @@
     <script>
       function testClick(nodeId) {
         console.log('clicked', nodeId);
-        var originalBgColor = document.querySelector('body').style.backgroundColor;
+        let originalBgColor = document.querySelector('body').style.backgroundColor;
         document.querySelector('body').style.backgroundColor = 'yellow';
         setTimeout(function () {
           document.querySelector('body').style.backgroundColor = originalBgColor;

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) {
@@ -160,13 +174,14 @@
       }
       function testClick(nodeId) {
         console.log('clicked', nodeId);
-        var originalBgColor = document.querySelector('body').style.backgroundColor;
+        let originalBgColor = document.querySelector('body').style.backgroundColor;
         document.querySelector('body').style.backgroundColor = 'yellow';
         setTimeout(function () {
           document.querySelector('body').style.backgroundColor = originalBgColor;
         }, 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
 
@@ -10,7 +10,7 @@ It is a JavaScript based diagramming and charting tool that renders Markdown-ins
 
 <img src="img/header.png" alt="" />
 
-[![Build Status](https://travis-ci.org/mermaid-js/mermaid.svg?branch=master)](https://travis-ci.org/mermaid-js/mermaid) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
+[![Build CI Status](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid) [![NPM](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [![Twitter Follow](https://img.shields.io/twitter/follow/mermaidjs_?style=social)](https://twitter.com/mermaidjs_)
 
 <!-- Mermaid book banner -->
 
@@ -271,16 +271,16 @@ To Deploy Mermaid:
 
 ### [Mermaid API](./Setup.md):
 
-**To deploy mermaid without a bundler, one can insert a `script` tag with an absolute address and a `mermaidAPI` call into the HTML like so:**
+**To deploy mermaid without a bundler, one can insert a `script` tag with an absolute address and a `mermaid.initialize` call into the HTML like so:**
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
-<script>
+<script type="module">
+  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
   mermaid.initialize({ startOnLoad: true });
 </script>
 ```
 
-**Doing so will command the mermaid parser to look for the `<div>` tags with `class="mermaid"`. From these tags mermaid will try to read the diagram/chart definitions and render them into SVG charts.**
+**Doing so will command the mermaid parser to look for the `<div>` or `<pre>` tags with `class="mermaid"`. From these tags mermaid will try to read the diagram/chart definitions and render them into SVG charts.**
 
 **Examples can be found at** [Other examples](/examples)
 
@@ -347,7 +347,7 @@ Update version number in `package.json`.
 npm publish
 ```
 
-The above command generates files into the `dist` folder and publishes them to npmjs.org.
+The above command generates files into the `dist` folder and publishes them to \<npmjs.org>.
 
 ## Related projects
 
@@ -363,7 +363,7 @@ Detailed information about how to contribute can be found in the [contribution g
 
 ## Security and safe diagrams
 
-For public sites, it can be precarious to retrieve text from users on the internet, storing that content for presentation in a browser at a later stage. The reason is that the user content can contain embedded malicious scripts that will run when the data is presented. For Mermaid this is a risk, specially as mermaid diagrams contain many characters that are used in html which makes the standard sanitation unusable as it also breaks the diagrams. We still make an effort to sanitise the incoming code and keep refining the process but it is hard to guarantee that there are no loop holes.
+For public sites, it can be precarious to retrieve text from users on the internet, storing that content for presentation in a browser at a later stage. The reason is that the user content can contain embedded malicious scripts that will run when the data is presented. For Mermaid this is a risk, specially as mermaid diagrams contain many characters that are used in html which makes the standard sanitation unusable as it also breaks the diagrams. We still make an effort to sanitize the incoming code and keep refining the process but it is hard to guarantee that there are no loop holes.
 
 As an extra level of security for sites with external users we are happy to introduce a new security level in which the diagram is rendered in a sandboxed iframe preventing JavaScript in the code from being executed. This is a great step forward for better security.
 

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. -->
 
@@ -74,15 +74,15 @@ Theme , the CSS style sheet
 
 | Parameter     | Description                       | Type   | Required | Values                                     |
 | ------------- | --------------------------------- | ------ | -------- | ------------------------------------------ |
-| securityLevel | Level of trust for parsed diagram | string | Required | 'sandbox', 'strict', 'loose', 'antiscript' |
+| securityLevel | Level of trust for parsed diagram | string | Required | `sandbox`, `strict`, `loose`, `antiscript` |
 
 **Notes**:
 
-- **strict**: (**default**) tags in text are encoded, click functionality is disabled
-- **loose**: tags in text are allowed, click functionality is enabled
-- **antiscript**: html tags in text are allowed, (only script element is removed), click
+- **`strict`**: (**default**) tags in text are encoded, click functionality is disabled
+- **`loose`**: tags in text are allowed, click functionality is enabled
+- **`antiscript`**: html tags in text are allowed, (only script element is removed), click
   functionality is enabled
-- **sandbox**: With this security level all rendering takes place in a sandboxed iframe. This
+- **`sandbox`**: With this security level all rendering takes place in a sandboxed iframe. This
   prevent any JavaScript from running in the context. This may hinder interactive functionality
   of the diagram like scripts, popups in sequence diagram or links to other tabs/targets etc.
 
@@ -121,11 +121,11 @@ Default value: \['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
 
 This option controls if the generated ids of nodes in the SVG are generated randomly or based
 on a seed. If set to false, the IDs are generated based on the current date and thus are not
-deterministic. This is the default behaviour.
+deterministic. This is the default behavior.
 
 **Notes**:
 
-This matters if your files are checked into sourcecontrol e.g. git and should not change unless
+This matters if your files are checked into source control e.g. git and should not change unless
 content is changed.
 
 Default value: false
@@ -212,16 +212,16 @@ Default value: true
 
 ### defaultRenderer
 
-| Parameter       | Description | Type    | Required | Values                  |
-| --------------- | ----------- | ------- | -------- | ----------------------- |
-| defaultRenderer | See notes   | boolean | 4        | dagre-d3, dagre-wrapper |
+| Parameter       | Description | Type    | Required | Values                      |
+| --------------- | ----------- | ------- | -------- | --------------------------- |
+| defaultRenderer | See notes   | boolean | 4        | `dagre-d3`, `dagre-wrapper` |
 
 **Notes:**
 
 Decides which rendering engine that is to be used for the rendering. Legal values are:
-dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid
+`dagre-d3` `dagre-wrapper` - wrapper for `dagre` implemented in mermaid
 
-Default value: 'dagre-wrapper'
+Default value: `dagre-wrapper`
 
 ## sequence
 
@@ -737,16 +737,16 @@ Default value: true
 
 ## defaultRenderer
 
-| Parameter       | Description | Type    | Required | Values                  |
-| --------------- | ----------- | ------- | -------- | ----------------------- |
-| defaultRenderer | See notes   | boolean | 4        | dagre-d3, dagre-wrapper |
+| Parameter       | Description | Type    | Required | Values                      |
+| --------------- | ----------- | ------- | -------- | --------------------------- |
+| defaultRenderer | See notes   | boolean | 4        | `dagre-d3`, `dagre-wrapper` |
 
 **Notes**:
 
 Decides which rendering engine that is to be used for the rendering. Legal values are:
-dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid
+`dagre-d3` `dagre-wrapper` - wrapper for `dagre` implemented in mermaid
 
-Default value: 'dagre-d3'
+Default value: `dagre-d3`
 
 ## useMaxWidth
 
@@ -763,16 +763,16 @@ Default value: true
 
 ## defaultRenderer
 
-| Parameter       | Description | Type    | Required | Values                  |
-| --------------- | ----------- | ------- | -------- | ----------------------- |
-| defaultRenderer | See notes   | boolean | 4        | dagre-d3, dagre-wrapper |
+| Parameter       | Description | Type    | Required | Values                      |
+| --------------- | ----------- | ------- | -------- | --------------------------- |
+| defaultRenderer | See notes   | boolean | 4        | `dagre-d3`, `dagre-wrapper` |
 
 **Notes:**
 
 Decides which rendering engine that is to be used for the rendering. Legal values are:
-dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid
+`dagre-d3` `dagre-wrapper` - wrapper for `dagre` implemented in mermaid
 
-Default value: 'dagre-d3'
+Default value: `dagre-d3`
 
 ## er
 
@@ -994,7 +994,7 @@ Default value: 4
 | --------------- | ----------- | ------- | -------- | ------------------ |
 | c4BoundaryInRow | See Notes   | Integer | Required | Any Positive Value |
 
-**Notes:** How many boundarys to place in each row.
+**Notes:** How many boundaries to place in each row.
 
 Default value: 2
 
@@ -1561,7 +1561,7 @@ Returns **void**
 
 ```html
 <script>
-  var config = {
+  const config = {
     theme: 'default',
     logLevel: 'fatal',
     securityLevel: 'strict',

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
 
@@ -19,7 +19,7 @@ The diagram authors can now add the accessibility options in the diagram definit
 - `accTitle: "Your Accessibility Title"` or
 - `accDescr: "Your Accessibility Description"`
 
-**When these two options are defined, they will add a coressponding `<title>` and `<desc>` tag in the SVG.**
+**When these two options are defined, they will add a corresponding `<title>` and `<desc>` tag in the SVG.**
 
 Let us take a look at the following example with a flowchart diagram:
 

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
 
@@ -220,7 +220,7 @@ The following unfinished features are not supported in the short term.
 
 - - \[x] RelIndex \* Compatible with C4-Plantuml syntax, but ignores the index parameter. The sequence number is determined by the order in which the rel statements are written.
 
-- \[ ] Custom tags/stereotypes support and skinparam updates
+- \[ ] Custom tags/stereotypes support and skin param updates
 
 - - \[ ] AddElementTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new element tag. The styles of the tagged elements are updated and the tag is displayed in the calculated legend.
 

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
 
@@ -589,7 +589,7 @@ click Shape2 call callbackFunction() "This is a tooltip for a callback"
 
 ```html
 <script>
-  var callbackFunction = function () {
+  const callbackFunction = function () {
     alert('A callback was triggered');
   };
 </script>
@@ -653,10 +653,10 @@ Beginner's tip—a full example using interactive links in an HTML page:
   </pre>
 
   <script>
-    var callback = function () {
+    const callback = function () {
       alert('A callback was triggered');
     };
-    var config = {
+    const config = {
       startOnLoad: true,
       securityLevel: 'loose',
     };

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.
 
 ---
 
@@ -649,7 +649,7 @@ A node can have click events bound that lead to either a JavaScript callback or
 
 ```html
 <script>
-  var callback = function (nodeId) {
+  const callback = function (nodeId) {
     alert('A callback was triggered on ' + nodeId);
   };
 </script>
@@ -727,10 +727,10 @@ Beginner's tip—here's a full example of using interactive links in HTML:
   </pre>
 
   <script>
-    var callback = function () {
+    const callback = function () {
       alert('A callback was triggered');
     };
-    var config = {
+    const config = {
       startOnLoad: true,
       flowchart: {
         useMaxWidth: true,

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
 
@@ -264,6 +264,20 @@ flowchart LR
     A --- B
 ```
 
+### An invisisble link
+
+This can be a usefull tool in some instances where you want to alter the default positining of a node.
+
+```mermaid-example
+flowchart LR
+    A ~~~ B
+```
+
+```mermaid
+flowchart LR
+    A ~~~ B
+```
+
 ### Text on links
 
 ```mermaid-example
@@ -695,7 +709,7 @@ Examples of tooltip usage below:
 
 ```html
 <script>
-  var callback = function () {
+  const callback = function () {
     alert('A callback was triggered');
   };
 </script>
@@ -771,10 +785,10 @@ Beginner's tip—a full example using interactive links in a html context:
   </pre>
 
   <script>
-    var callback = function () {
+    const callback = function () {
       alert('A callback was triggered');
     };
-    var config = {
+    const config = {
       startOnLoad: true,
       flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
       securityLevel: 'loose',

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
 
@@ -391,13 +391,13 @@ Beginner's tip—a full example using interactive links in an html context:
   </pre>
 
   <script>
-    var printArguments = function (arg1, arg2, arg3) {
+    const printArguments = function (arg1, arg2, arg3) {
       alert('printArguments called with arguments: ' + arg1 + ', ' + arg2 + ', ' + arg3);
     };
-    var printTask = function (taskId) {
+    const printTask = function (taskId) {
       alert('taskId: ' + taskId);
     };
-    var config = {
+    const config = {
       startOnLoad: true,
       securityLevel: 'loose',
     };

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,
@@ -21,15 +21,13 @@
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css"
     />
-    <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script>
-    <!-- <script src="http://localhost:9000/mermaid.js"></script> -->
     <script
       defer=""
       data-domain="mermaid-js.github.io"
       src="https://plausible.io/js/plausible.js"
     ></script>
     <script>
-      var require = {
+      const require = {
         paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs' },
       };
     </script>
@@ -50,17 +48,46 @@
 
   <body>
     <div id="app"></div>
+    <script type="module">
+      // import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
+      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9.2.0-rc6/dist/mermaid.esm.min.mjs';
+      // import mermaid from 'http://localhost:9000/mermaid.esm.mjs';
+      console.log(mermaid); // eslint-disable-line
+      window.mermaid = mermaid;
+      const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+      const conf = {
+        logLevel: 4,
+        startOnLoad: true,
+        themeCSS: '.label { font-family: Source Sans Pro,Helvetica Neue,Arial,sans-serif; }',
+        lazyLoadedDiagrams: [
+          'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-mindmap@9.2.0-rc3/dist/mermaid-mindmap-detector.esm.mjs',
+          // 'http://localhost:9000/mermaid-mindmap-detector.esm.mjs',
+        ],
+      };
+      if (isDarkMode) conf.theme = 'dark';
+
+      async function loadMermaid() {
+        await mermaid.initialize(conf);
+        console.log('mermaid initialized'); // eslint-disable-line
+      }
+      mermaid.parseError = (e) => {
+        console.log('parse error', e); // eslint-disable-line
+      };
+      await loadMermaid();
+    </script>
     <script>
-      var initEditor = exports.default;
-      var parser = new DOMParser();
-      var currentCodeExample = 0;
-      var colorize = [];
+      let initEditor = exports.default;
+      let parser = new DOMParser();
+      let currentCodeExample = 0;
+      let colorize = [];
+      let num = 0;
 
       function colorizeEverything(html) {
         initEditor(monaco);
         return new Promise((resolve, reject) => {
           monaco.editor.setTheme('mermaid');
-          var parsed = parser.parseFromString(html, 'text/html').body;
+          const parsed = parser.parseFromString(html, 'text/html').body;
           Promise.all(
             [...parsed.querySelectorAll('pre[id*="code"]')].map((codeBlock) =>
               monaco.editor.colorize(codeBlock.innerText, 'mermaid')
@@ -95,13 +122,12 @@
           renderer: {
             code: function (code, lang) {
               if (lang === 'mermaid-example') {
+                console.log('An example'); // eslint-disable-line
                 currentCodeExample++;
                 colorize.push(currentCodeExample);
                 return '<pre id="code' + currentCodeExample + '">' + escapeHTML(code) + '</pre>';
               } else if (lang === 'mermaid') {
-                return (
-                  '<pre class="mermaid">' + mermaid.render('mermaid-svg-' + num++, code) + '</pre>'
-                );
+                return '<pre class="mermaid">' + code + '</pre>';
               }
               return this.origin.code.apply(this, arguments);
             },
@@ -117,9 +143,13 @@
           function (hook, vm) {
             hook.beforeEach(function (html) {
               url = 'https://github.com/mermaid-js/mermaid/blob/develop/src/docs/' + vm.route.file;
-              var editHtml = '[:memo: Edit this Page](' + url + ')\n';
+              const editHtml = '[:memo: Edit this Page](' + url + ')\n';
               return editHtml + html;
             });
+            // Invoked on each page load after new HTML has been appended to the DOM
+            hook.doneEach(function () {
+              window.mermaid.init();
+            });
 
             hook.afterEach(function (html, next) {
               next(html);
@@ -135,29 +165,17 @@
           },
         ],
       };
-
-      var num = 0;
-      const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
-
-      const conf = {
-        logLevel: 4,
-        startOnLoad: false,
-        themeCSS: '.label { font-family: Source Sans Pro,Helvetica Neue,Arial,sans-serif; }',
-      };
-      if (isDarkMode) conf.theme = 'dark';
-      mermaid.initialize(conf);
     </script>
     <script>
       window.onhashchange = function (a) {
-        //code
-        if (location) {
-          ga('send', 'pageview', location.hash);
-        }
+        // if (location && ga) {
+        //   ga('send', 'pageview', location.hash);
+        // }
       };
     </script>
     <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
     <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
-    <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/ga.min.js"></script>
+    <!-- <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/ga.min.js"></script> -->
     <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-coffeescript.min.js"></script>
   </body>
 </html>

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
 
@@ -33,7 +33,7 @@ They also serve as proof of concept, for the variety of things that can be built
   - [Mermaid Macro](https://www.redmine.org/plugins/redmine_mermaid_macro)
   - [redmine-mermaid](https://github.com/styz/redmine_mermaid)
   - [markdown-for-mermaid-plugin](https://github.com/jamieh-mongolian/markdown-for-mermaid-plugin)
-- [Jetsbrain IDE eg Pycharm](https://www.jetbrains.com/go/guide/tips/mermaid-js-support-in-markdown/)
+- [JetBrains IDE eg Pycharm](https://www.jetbrains.com/go/guide/tips/mermaid-js-support-in-markdown/)
 - [mermerd](https://github.com/KarnerTh/mermerd)
 
 ## CRM/ERP/Similar

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