Fix spellings

Fix typos

.eslintignore

@@ -3,4 +3,5 @@ dist/**
 docs/Setup.md
 cypress.config.js
 cypress/plugins/index.js
-coverage
+coverage
+*.json

.eslintrc.cjs

@@ -0,0 +1,150 @@
+module.exports = {
+  env: {
+    browser: true,
+    es6: true,
+    'jest/globals': true,
+    node: true,
+  },
+  root: true,
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      experimentalObjectRestSpread: true,
+      jsx: true,
+    },
+    tsconfigRootDir: __dirname,
+    sourceType: 'module',
+    ecmaVersion: 2020,
+    allowAutomaticSingleRunInference: true,
+    project: ['./tsconfig.eslint.json', './packages/*/tsconfig.json'],
+    parser: '@typescript-eslint/parser',
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:json/recommended',
+    'plugin:markdown/recommended',
+    'plugin:@cspell/recommended',
+    'prettier',
+  ],
+  plugins: [
+    '@typescript-eslint',
+    'no-only-tests',
+    'html',
+    'jest',
+    'jsdoc',
+    'json',
+    '@cspell',
+    'lodash',
+    'unicorn',
+  ],
+  rules: {
+    curly: 'error',
+    'no-console': 'error',
+    'no-prototype-builtins': 'off',
+    'no-unused-vars': 'off',
+    'cypress/no-async-tests': 'off',
+    '@typescript-eslint/no-floating-promises': 'error',
+    '@typescript-eslint/no-misused-promises': 'error',
+    '@typescript-eslint/ban-ts-comment': [
+      'error',
+      {
+        'ts-expect-error': 'allow-with-description',
+        'ts-ignore': 'allow-with-description',
+        'ts-nocheck': 'allow-with-description',
+        'ts-check': 'allow-with-description',
+        minimumDescriptionLength: 10,
+      },
+    ],
+    'json/*': ['error', 'allowComments'],
+    '@cspell/spellchecker': [
+      'error',
+      {
+        checkIdentifiers: false,
+        checkStrings: false,
+        checkStringTemplates: false,
+      },
+    ],
+    'no-empty': [
+      'error',
+      {
+        allowEmptyCatch: true,
+      },
+    ],
+    'no-only-tests/no-only-tests': 'error',
+    'lodash/import-scope': ['error', 'method'],
+    'unicorn/better-regex': 'error',
+    'unicorn/no-abusive-eslint-disable': 'error',
+    'unicorn/no-array-push-push': 'error',
+    'unicorn/no-for-loop': 'error',
+    'unicorn/no-instanceof-array': 'error',
+    'unicorn/no-typeof-undefined': 'error',
+    'unicorn/no-unnecessary-await': 'error',
+    'unicorn/no-unsafe-regex': 'warn',
+    'unicorn/no-useless-promise-resolve-reject': 'error',
+    'unicorn/prefer-array-find': 'error',
+    'unicorn/prefer-array-flat-map': 'error',
+    'unicorn/prefer-array-index-of': 'error',
+    'unicorn/prefer-array-some': 'error',
+    'unicorn/prefer-default-parameters': 'error',
+    'unicorn/prefer-includes': 'error',
+    'unicorn/prefer-negative-index': 'error',
+    'unicorn/prefer-object-from-entries': 'error',
+    'unicorn/prefer-string-starts-ends-with': 'error',
+    'unicorn/prefer-string-trim-start-end': 'error',
+    'unicorn/string-content': 'error',
+    'unicorn/prefer-spread': 'error',
+    'unicorn/no-lonely-if': 'error',
+  },
+  overrides: [
+    {
+      files: ['cypress/**', 'demos/**'],
+      rules: {
+        'no-console': 'off',
+      },
+    },
+    {
+      files: ['*.{js,jsx,mjs,cjs}'],
+      extends: ['plugin:jsdoc/recommended'],
+      rules: {
+        'jsdoc/check-indentation': 'off',
+        'jsdoc/check-alignment': 'off',
+        'jsdoc/check-line-alignment': 'off',
+        'jsdoc/multiline-blocks': 'off',
+        'jsdoc/newline-after-description': 'off',
+        'jsdoc/tag-lines': 'off',
+        'jsdoc/require-param-description': 'off',
+        'jsdoc/require-param-type': 'off',
+        'jsdoc/require-returns': 'off',
+        'jsdoc/require-returns-description': 'off',
+      },
+    },
+    {
+      files: ['*.{ts,tsx}'],
+      plugins: ['tsdoc'],
+      rules: {
+        'tsdoc/syntax': 'error',
+      },
+    },
+    {
+      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',
+        '@typescript-eslint/no-floating-promises': 'off',
+        '@typescript-eslint/no-misused-promises': 'off',
+      },
+      parserOptions: {
+        project: null,
+      },
+    },
+  ],
+};

.eslintrc.json

@@ -1,137 +0,0 @@
-{
-  "env": {
-    "browser": true,
-    "es6": true,
-    "jest/globals": true,
-    "node": true
-  },
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "ecmaFeatures": {
-      "experimentalObjectRestSpread": true,
-      "jsx": true
-    },
-    "sourceType": "module"
-  },
-  "extends": [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:json/recommended",
-    "plugin:markdown/recommended",
-    "plugin:@cspell/recommended",
-    "prettier"
-  ],
-  "plugins": [
-    "@typescript-eslint",
-    "no-only-tests",
-    "html",
-    "jest",
-    "jsdoc",
-    "json",
-    "@cspell",
-    "lodash",
-    "unicorn"
-  ],
-  "rules": {
-    "curly": "error",
-    "no-console": "error",
-    "no-prototype-builtins": "off",
-    "no-unused-vars": "off",
-    "cypress/no-async-tests": "off",
-    "@typescript-eslint/ban-ts-comment": [
-      "error",
-      {
-        "ts-expect-error": "allow-with-description",
-        "ts-ignore": "allow-with-description",
-        "ts-nocheck": "allow-with-description",
-        "ts-check": "allow-with-description",
-        "minimumDescriptionLength": 10
-      }
-    ],
-    "json/*": ["error", "allowComments"],
-    "@cspell/spellchecker": [
-      "error",
-      {
-        "checkIdentifiers": false,
-        "checkStrings": false,
-        "checkStringTemplates": false
-      }
-    ],
-    "no-empty": [
-      "error",
-      {
-        "allowEmptyCatch": true
-      }
-    ],
-    "no-only-tests/no-only-tests": "error",
-    "lodash/import-scope": ["error", "method"],
-    "unicorn/better-regex": "error",
-    "unicorn/no-abusive-eslint-disable": "error",
-    "unicorn/no-array-push-push": "error",
-    "unicorn/no-for-loop": "error",
-    "unicorn/no-instanceof-array": "error",
-    "unicorn/no-typeof-undefined": "error",
-    "unicorn/no-unnecessary-await": "error",
-    "unicorn/no-unsafe-regex": "warn",
-    "unicorn/no-useless-promise-resolve-reject": "error",
-    "unicorn/prefer-array-find": "error",
-    "unicorn/prefer-array-flat-map": "error",
-    "unicorn/prefer-array-index-of": "error",
-    "unicorn/prefer-array-some": "error",
-    "unicorn/prefer-default-parameters": "error",
-    "unicorn/prefer-includes": "error",
-    "unicorn/prefer-negative-index": "error",
-    "unicorn/prefer-object-from-entries": "error",
-    "unicorn/prefer-string-starts-ends-with": "error",
-    "unicorn/prefer-string-trim-start-end": "error",
-    "unicorn/string-content": "error",
-    "unicorn/prefer-spread": "error",
-    "unicorn/no-lonely-if": "error"
-  },
-  "overrides": [
-    {
-      "files": ["cypress/**", "demos/**"],
-      "rules": {
-        "no-console": "off"
-      }
-    },
-    {
-      "files": ["*.{js,jsx,mjs,cjs}"],
-      "extends": ["plugin:jsdoc/recommended"],
-      "rules": {
-        "jsdoc/check-indentation": "off",
-        "jsdoc/check-alignment": "off",
-        "jsdoc/check-line-alignment": "off",
-        "jsdoc/multiline-blocks": "off",
-        "jsdoc/newline-after-description": "off",
-        "jsdoc/tag-lines": "off",
-        "jsdoc/require-param-description": "off",
-        "jsdoc/require-param-type": "off",
-        "jsdoc/require-returns": "off",
-        "jsdoc/require-returns-description": "off"
-      }
-    },
-    {
-      "files": ["*.{ts,tsx}"],
-      "plugins": ["tsdoc"],
-      "rules": {
-        "tsdoc/syntax": "error"
-      }
-    },
-    {
-      "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/FUNDING.yml

@@ -1,6 +1,8 @@
 # These are supported funding model platforms
 
-github: [knsv]
+github:
+  - knsv
+  - sidharthv96
 #patreon: # Replace with a single Patreon username
 #open_collective: # Replace with a single Open Collective username
 #ko_fi: # Replace with a single Ko-fi username

.github/pull_request_template.md

@@ -14,4 +14,5 @@ Make sure you
 
 - [ ] :book: have read the [contribution guidelines](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md)
 - [ ] :computer: have added unit/e2e tests (if appropriate)
+- [ ] :notebook: have added documentation (if appropriate)
 - [ ] :bookmark: targeted `develop` branch

.github/workflows/dependency-review.yml

@@ -17,4 +17,4 @@ jobs:
       - name: 'Checkout Repository'
         uses: actions/checkout@v3
       - name: 'Dependency Review'
-        uses: actions/dependency-review-action@v2
+        uses: actions/dependency-review-action@v3

.github/workflows/e2e.yml

@@ -32,6 +32,7 @@ jobs:
       # and run all Cypress tests
       - name: Cypress run
         uses: cypress-io/github-action@v4
+        id: cypress
         # 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 ) }}
@@ -44,3 +45,10 @@ jobs:
           parallel: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
         env:
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+
+      - name: Upload Artifacts
+        uses: actions/upload-artifact@v3
+        if: ${{ failure() && steps.cypress.conclusion == 'failure' }}
+        with:
+          name: error-snapshots
+          path: cypress/snapshots/**/__diff_output__/*

.github/workflows/link-checker.yml

@@ -13,11 +13,10 @@ on:
       - master
   pull_request:
     branches:
-      - develop
       - master
   schedule:
     # * is a special character in YAML so you have to quote this string
-    - cron: '30 8 * * 5'
+    - cron: '30 8 * * *'
 
 jobs:
   linkChecker:

.github/workflows/lint.yml

@@ -7,6 +7,7 @@ on:
       - opened
       - synchronize
       - ready_for_review
+  workflow_dispatch:
 
 permissions:
   contents: write
@@ -36,7 +37,20 @@ jobs:
           CYPRESS_CACHE_FOLDER: .cache/Cypress
 
       - name: Run Linting
-        run: pnpm run lint
+        shell: bash
+        run: |
+          if ! pnpm run lint; then
+              # print a nice error message on lint failure
+              ERROR_MESSAGE='Running `pnpm run lint` failed.'
+              ERROR_MESSAGE+=' Running `pnpm run lint:fix` may fix this issue. '
+              ERROR_MESSAGE+=" If this error doesn't occur on your local machine,"
+              ERROR_MESSAGE+=' make sure your packages are up-to-date by running `pnpm install`.'
+              ERROR_MESSAGE+=' You may also need to delete your prettier cache by running'
+              ERROR_MESSAGE+=' `rm ./node_modules/.cache/prettier/.prettier-cache`.'
+              echo "::error title=Lint failure::${ERROR_MESSAGE}"
+              # make sure to return an error exitcode so that GitHub actions shows a red-cross
+              exit 1
+          fi
 
       - name: Verify Docs
         id: verifyDocs

.github/workflows/pr-labeler.yml

@@ -8,6 +8,6 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Label PR
-        uses: TimonVS/pr-labeler-action@v3
+        uses: TimonVS/pr-labeler-action@v4
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/publish-docs.yml

@@ -5,6 +5,7 @@ on:
   push:
     branches:
       - master
+  pull_request:
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
@@ -40,7 +41,7 @@ jobs:
         run: pnpm install --frozen-lockfile
 
       - name: Setup Pages
-        uses: actions/configure-pages@v2
+        uses: actions/configure-pages@v3
 
       - name: Run Build
         run: pnpm --filter mermaid run docs:build:vitepress
@@ -52,6 +53,7 @@ jobs:
 
   # Deployment job
   deploy:
+    if: ${{ github.event_name == 'push' && github.ref == 'refs/heads/master' }}
     environment:
       name: github-pages
     runs-on: ubuntu-latest

.github/workflows/release-publish.yml

@@ -11,18 +11,21 @@ jobs:
       - uses: actions/checkout@v3
       - uses: fregante/setup-git-user@v1
 
-      - name: Setup Node.js
+      - uses: pnpm/action-setup@v2
+        # uses version from "packageManager" field in package.json
+
+      - name: Setup Node.js v18
         uses: actions/setup-node@v3
         with:
+          cache: pnpm
           node-version: 18.x
-      - name: Install Yarn
-        run: npm i yarn --global
-
-      - name: Install Json
-        run: npm i json --global
 
       - name: Install Packages
-        run: yarn install --frozen-lockfile
+        run: |
+          pnpm install --frozen-lockfile
+          npm i json --global
+        env:
+          CYPRESS_CACHE_FOLDER: .cache/Cypress
 
       - name: Prepare release
         run: |
@@ -31,7 +34,7 @@ jobs:
           git checkout -t origin/release/$VERSION
           npm version --no-git-tag-version --allow-same-version $VERSION
           git add package.json
-          git commit -m "Bump version $VERSION"
+          git commit -nm "Bump version $VERSION"
           git checkout -t origin/master
           git merge -m "Release $VERSION" --no-ff release/$VERSION
           git push --no-verify

.lintstagedrc.mjs

@@ -1,5 +1,11 @@
 export default {
-  '!(docs/**/*)*.{ts,js,json,html,md,mts}': ['eslint --fix', 'prettier --write'],
+  '!(docs/**/*)*.{ts,js,json,html,md,mts}': [
+    'eslint --cache --cache-strategy content --fix',
+    // don't cache prettier yet, since we use `prettier-plugin-jsdoc`,
+    // and prettier doesn't invalidate cache on plugin updates"
+    // https://prettier.io/docs/en/cli.html#--cache
+    'prettier --write',
+  ],
   'cSpell.json': ['ts-node-esm scripts/fixCSpell.ts'],
   '**/*.jison': ['pnpm -w run lint:jison'],
 };

.lycheeignore

@@ -9,5 +9,8 @@ https://mkdocs.org/
 https://osawards.com/javascript/#nominees
 https://osawards.com/javascript/2019
 
+# Timeout error, maybe Twitter has anti-bot defences against GitHub's CI servers?
+https://twitter.com/mermaidjs_
+
 # Don't check files that are generated during the build via `pnpm docs:code`
 packages/mermaid/src/docs/config/setup/*

.percy.yml

@@ -1,6 +0,0 @@
-version: 2
-snapshot:
-  widths:
-    - 1280
-discovery:
-  disable-cache: true

.tern-project

@@ -1,15 +0,0 @@
-{
-  "ecmaVersion": 6,
-  "libs": ["browser"],
-  "loadEagerly": [],
-  "dontLoad": ["node_modules/**"],
-  "plugins": {
-    "modules": {},
-    "es_modules": {},
-    "node": {},
-    "doc_comment": {
-      "fullDocs": true,
-      "strong": true
-    }
-  }
-}

.vite/build.ts

@@ -20,13 +20,14 @@ const visualizerOptions = (packageName: string, core = false): PluginOption[] =>
   if (packageName !== 'mermaid' || !visualize) {
     return [];
   }
-  return ['network', 'treemap', 'sunburst'].map((chartType) =>
+  return ['network', 'treemap', 'sunburst'].map(
-    visualizer({
+    (chartType) =>
-      filename: `./stats/${chartType}${core ? '.core' : ''}.html`,
+      visualizer({
-      template: chartType as TemplateType,
+        filename: `./stats/${chartType}${core ? '.core' : ''}.html`,
-      gzipSize: true,
+        template: chartType as TemplateType,
-      brotliSize: true,
+        gzipSize: true,
-    })
+        brotliSize: true,
+      }) as PluginOption
   );
 };
 
@@ -36,16 +37,11 @@ const packageOptions = {
     packageName: 'mermaid',
     file: 'mermaid.ts',
   },
-  'mermaid-mindmap': {
+  'mermaid-example-diagram': {
-    name: 'mermaid-mindmap',
+    name: 'mermaid-example-diagram',
-    packageName: 'mermaid-mindmap',
+    packageName: 'mermaid-example-diagram',
     file: 'detector.ts',
   },
-  // 'mermaid-example-diagram-detector': {
-  //   name: 'mermaid-example-diagram-detector',
-  //   packageName: 'mermaid-example-diagram',
-  //   file: 'detector.ts',
-  // },
 };
 
 interface BuildOptions {
@@ -66,12 +62,6 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
       sourcemap: true,
       entryFileNames: `${name}.esm${minify ? '.min' : ''}.mjs`,
     },
-    {
-      name,
-      format: 'umd',
-      sourcemap: true,
-      entryFileNames: `${name}${minify ? '.min' : ''}.js`,
-    },
   ];
 
   if (core) {
@@ -119,11 +109,7 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
 
   if (watch && config.build) {
     config.build.watch = {
-      include: [
+      include: ['packages/mermaid-example-diagram/src/**', 'packages/mermaid/src/**'],
-        'packages/mermaid-mindmap/src/**',
-        'packages/mermaid/src/**',
-        // 'packages/mermaid-example-diagram/src/**',
-      ],
     };
   }
 
@@ -131,11 +117,9 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
 };
 
 const buildPackage = async (entryName: keyof typeof packageOptions) => {
-  return Promise.allSettled([
+  await build(getBuildConfig({ minify: false, entryName }));
-    build(getBuildConfig({ minify: false, entryName })),
+  await build(getBuildConfig({ minify: 'esbuild', entryName }));
-    build(getBuildConfig({ minify: 'esbuild', entryName })),
+  await build(getBuildConfig({ minify: false, core: true, entryName }));
-    build(getBuildConfig({ minify: false, core: true, entryName })),
-  ]);
 };
 
 const main = async () => {
@@ -146,10 +130,9 @@ const main = async () => {
 };
 
 if (watch) {
-  build(getBuildConfig({ minify: false, watch, core: true, entryName: 'mermaid' }));
+  build(getBuildConfig({ minify: false, watch, core: false, entryName: 'mermaid' }));
   if (!mermaidOnly) {
-    build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-mindmap' }));
+    build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' }));
-    // build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' }));
   }
 } else if (visualize) {
   await build(getBuildConfig({ minify: false, core: true, entryName: 'mermaid' }));

.vite/server.ts

@@ -1,14 +1,6 @@
-import express, { NextFunction, Request, Response } from 'express';
+import express from 'express';
+import cors from 'cors';
 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();
@@ -16,14 +8,14 @@ async function createServer() {
   // Create Vite server in middleware mode
   const vite = await createViteServer({
     configFile: './vite.config.ts',
+    mode: 'production',
     server: { middlewareMode: true },
     appType: 'custom', // don't include Vite's default HTML handling middlewares
   });
 
-  app.use(cors);
+  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('demos'));
   app.use(express.static('cypress/platform'));
@@ -33,5 +25,4 @@ async function createServer() {
   });
 }
 
-// build(getBuildConfig({ minify: false, watch: true }));
 createServer();

CONTRIBUTING.md

@@ -63,6 +63,28 @@ flowchart LR
 
 ```
 
+You can use `note`, `tip`, `warning` and `danger` in triple backticks to add a note, tip, warning or danger box.
+Do not use vitepress specific markdown syntax `::: warning` as it will not be processed correctly.
+
+````
+```note
+Note content
+```
+
+```tip
+Tip content
+```
+
+```warning
+Warning content
+```
+
+```danger
+Danger content
+```
+
+````
+
 **_DO NOT CHANGE FILES IN `/docs`_**
 
 ### The official documentation site

README.md

@@ -1,8 +1,37 @@
-# mermaid
+<p align="center">
+<img src="https://raw.githubusercontent.com/mermaid-js/mermaid/develop/docs/public/favicon.svg" height="150">
+</p>
+<h1 align="center">
+Mermaid
+</h1>
+<p align="center">
+Generate diagrams from markdown-like text.
+<p>
+<p align="center">
+  <a href="https://www.npmjs.com/package/vitest"><img src="https://img.shields.io/npm/v/mermaid?color=ff3670&label="></a>
+<p>
 
-[![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) [![npm minified gzipped bundle size](https://img.shields.io/bundlephobia/minzip/mermaid)](https://bundlephobia.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_)
+<p align="center">
+<a href="https://mermaid.live/"><b>Live Editor!</b></a>
+</p>
+<p align="center">
+ <a href="https://mermaid.js.org">📖 Documentation</a> | <a href="https://mermaid.js.org/intro/">🚀 Getting Started</a> | <a href="https://www.jsdelivr.com/package/npm/mermaid">🌐 CDN</a> | <a href="https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE" title="Slack invite">🙌 Join Us</a>
+</p>
+<p align="center">
+<a href="./README.zh-CN.md">简体中文</a>
+</p>
 
-English | [简体中文](./README.zh-CN.md)
+<br>
+<br>
+
+[![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/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 minified gzipped bundle size](https://img.shields.io/bundlephobia/minzip/mermaid)](https://bundlephobia.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 Downloads](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/badge/Social-mermaidjs__-blue?style=social&logo=twitter)](https://twitter.com/mermaidjs_)
 
 <img src="./img/header.png" alt="" />
 
@@ -10,7 +39,7 @@ English | [简体中文](./README.zh-CN.md)
 
 **Thanks to all involved, people committing pull requests, people answering questions! 🙏**
 
-<a href="https://mermaid-js.github.io/mermaid/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/img/book-banner-post-release.jpg" alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a>
+<a href="https://mermaid-js.github.io/mermaid/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/intro/img/book-banner-post-release.jpg" alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a>
 
 ## About
 
@@ -27,14 +56,12 @@ Mermaid addresses this problem by enabling users to create easily modifiable dia
 
 Mermaid allows even non-programmers to easily create detailed diagrams through the [Mermaid Live Editor](https://mermaid.live/).<br/>
 [Tutorials](./docs/config/Tutorials.md) has video tutorials.
-Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/misc/integrations.md).
+Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/ecosystem/integrations.md).
 
-You can also use Mermaid within [GitHub](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) as well many of your other favorite applications—check out the list of [Integrations and Usages of Mermaid](./docs/misc/integrations.md).
+You can also use Mermaid within [GitHub](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) as well many of your other favorite applications—check out the list of [Integrations and Usages of Mermaid](./docs/ecosystem/integrations.md).
 
 For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./docs/community/n00b-overview.md), [Usage](./docs/config/usage.md) and [Tutorials](./docs/config/Tutorials.md).
 
-🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) | 📜 [Changelog](./docs/CHANGELOG.md)
-
 In our release process we rely heavily on visual regression tests using [applitools](https://applitools.com/). Applitools is a great service which has been easy to use and integrate with our tests.
 
 <a href="https://applitools.com/">

README.zh-CN.md

@@ -1,8 +1,37 @@
-# mermaid
+<p align="center">
+<img src="https://raw.githubusercontent.com/mermaid-js/mermaid/develop/docs/public/favicon.svg" height="150">
+</p>
+<h1 align="center">
+Mermaid
+</h1>
+<p align="center">
+通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。
+<p>
+<p align="center">
+  <a href="https://www.npmjs.com/package/vitest"><img src="https://img.shields.io/npm/v/mermaid?color=ff3670&label="></a>
+<p>
 
-[![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) [![npm minified gzipped bundle size](https://img.shields.io/bundlephobia/minzip/mermaid)](https://bundlephobia.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_)
+<p align="center">
+<a href="https://mermaid.live/"><b>Live Editor!</b></a>
+</p>
+<p align="center">
+ <a href="https://mermaid.js.org">📖 文档</a> | <a href="https://mermaid.js.org/intro/">🚀 入门</a> | <a href="https://www.jsdelivr.com/package/npm/mermaid">🌐 CDN</a> | <a href="https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE" title="Slack invite">🙌 加入我们</a>
+</p>
+<p align="center">
+<a href="./README.md">English</a>
+</p>
 
-[English](./README.md) | 简体中文
+<br>
+<br>
+
+[![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/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 minified gzipped bundle size](https://img.shields.io/bundlephobia/minzip/mermaid)](https://bundlephobia.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 Downloads](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/badge/Social-mermaidjs__-blue?style=social&logo=twitter)](https://twitter.com/mermaidjs_)
 
 <img src="./img/header.png" alt="" />
 
@@ -10,7 +39,7 @@
 
 **感谢所有参与进来提交 PR，解答疑问的人们! 🙏**
 
-<a href="https://mermaid-js.github.io/mermaid/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/img/book-banner-pre-release.jpg" alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a>
+<a href="https://mermaid-js.github.io/mermaid/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/intro/img/book-banner-post-release.jpg" alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a>
 
 ## 关于 Mermaid
 
@@ -24,12 +53,10 @@ Mermaid 是一个基于 Javascript 的图表绘制工具，通过解析类 Markd
 Mermaid 通过允许用户创建便于修改的图表来解决这一难题，它也可以作为生产脚本（或其他代码）的一部分。<br/>
 <br/>
 Mermaid 甚至能让非程序员也能通过 [Mermaid Live Editor](https://mermaid.live/) 轻松创建详细的图表。<br/>
-你可以访问 [教程](./docs/config/Tutorials.md) 来查看 Live Editor 的视频教程，也可以查看 [Mermaid 的集成和使用](./docs/misc/integrations.md) 这个清单来检查你的文档工具是否已经集成了 Mermaid 支持。
+你可以访问 [教程](./docs/config/Tutorials.md) 来查看 Live Editor 的视频教程，也可以查看 [Mermaid 的集成和使用](./docs/ecosystem/integrations.md) 这个清单来检查你的文档工具是否已经集成了 Mermaid 支持。
 
 如果想要查看关于 Mermaid 更详细的介绍及基础使用方式，可以查看 [入门指引](./docs/community/n00b-overview.md), [用法](./docs/config/usage.md) 和 [教程](./docs/config/Tutorials.md).
 
-🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [文档](https://mermaidjs.github.io) | 🙌 [贡献](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) | 📜 [更新日志](./docs/CHANGELOG.md)
-
 <!-- </Main description> -->
 
 ## 示例
@@ -325,7 +352,7 @@ _很不幸的是，鱼与熊掌不可兼得，在这个场景下它意味着在
 
 来自 Knut Sveidqvist:
 
-> _特别感谢 [d3](https://d3js.org/) 和 [dagre-d3](https://github.com/cpettitt/dagre-d3) 这两个优秀的项目，它们提供了图形布局和绘图工具库! _ >_同样感谢 [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) 提供了时序图语法的使用。 感谢 Jessica Peter 提供了甘特图渲染的灵感。_ >_感谢 [Tyler Long](https://github.com/tylerlong) 从 2017 年四月开始成为了项目的合作者。_
+> _特别感谢 [d3](https://d3js.org/) 和 [dagre-d3](https://github.com/cpettitt/dagre-d3) 这两个优秀的项目，它们提供了图形布局和绘图工具库！_ > _同样感谢 [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) 提供了时序图语法的使用。 感谢 Jessica Peter 提供了甘特图渲染的灵感。_ > _感谢 [Tyler Long](https://github.com/tylerlong) 从 2017 年四月开始成为了项目的合作者。_
 >
 > _感谢越来越多的 [贡献者们](https://github.com/knsv/mermaid/graphs/contributors)，没有你们，就没有这个项目的今天！_
 

V10-BreakingChanges.md

@@ -1,5 +1,58 @@
-# A collection of updates that change the behaviour
+# A collection of updates that change the behavior
+
+## Async
+
+`parse`, `render` are now async.
 
 ## Lazy loading and asynchronisity
 
 - Invalid dates are rendered as syntax error instead of returning best guess or the current date
+
+## ParseError is removed
+
+```js
+//< v10.0.0
+mermaid.parse(text, parseError);
+
+//>= v10.0.0
+await mermaid.parse(text).catch(parseError);
+// or
+try {
+  await mermaid.parse(text);
+} catch (err) {
+  parseError(err);
+}
+```
+
+## Init deprecated and InitThrowsErrors removed
+
+The config passed to `init` was not being used eariler.
+It will now be used.
+The `init` function is deprecated and will be removed in the next major release.
+init currently works as a wrapper to `initialize` and `run`.
+
+```js
+//< v10.0.0
+mermaid.init(config, selector, cb);
+
+//>= v10.0.0
+mermaid.initialize(config);
+mermaid.run({
+  querySelector: selector,
+  postRenderCallback: cb,
+  suppressErrors: true,
+});
+```
+
+```js
+//< v10.0.0
+mermaid.initThrowsErrors(config, selector, cb);
+
+//>= v10.0.0
+mermaid.initialize(config);
+mermaid.run({
+  querySelector: selector,
+  postRenderCallback: cb,
+  suppressErrors: false,
+});
+```

cSpell.json

@@ -6,6 +6,7 @@
     "adamiecki",
     "alois",
     "antiscript",
+    "appli",
     "applitools",
     "asciidoctor",
     "ashish",
@@ -13,6 +14,7 @@
     "bbox",
     "bilkent",
     "bisheng",
+    "blrs",
     "braintree",
     "brkt",
     "brolin",
@@ -31,6 +33,7 @@
     "doku",
     "dompurify",
     "edgechromium",
+    "elkjs",
     "faber",
     "flatmap",
     "ftplugin",
@@ -39,6 +42,7 @@
     "gitgraph",
     "globby",
     "graphlib",
+    "graphviz",
     "grav",
     "greywolf",
     "inkdrop",
@@ -52,8 +56,10 @@
     "knut",
     "laganeckas",
     "lintstagedrc",
+    "logmsg",
     "lucida",
     "matthieu",
+    "mdast",
     "mdbook",
     "mermerd",
     "mindaugas",
@@ -69,6 +75,7 @@
     "pnpm",
     "podlite",
     "quence",
+    "radious",
     "ranksep",
     "rect",
     "rects",
@@ -78,17 +85,20 @@
     "setupgraphviewbox",
     "shiki",
     "sidharth",
+    "sidharthv",
     "sphinxcontrib",
     "statediagram",
     "stylis",
     "substate",
     "sveidqvist",
+    "swimm",
     "techn",
     "teststr",
     "textlength",
     "treemap",
     "ts-nocheck",
     "tuleap",
+    "ugge",
     "unist",
     "verdana",
     "viewports",

cypress/helpers/util.js

@@ -2,7 +2,7 @@ const utf8ToB64 = (str) => {
   return window.btoa(unescape(encodeURIComponent(str)));
 };
 
-const batchId = 'mermid-batch' + new Date().getTime();
+const batchId = 'mermaid-batch' + new Date().getTime();
 
 export const mermaidUrl = (graphStr, options, api) => {
   const obj = {
@@ -46,8 +46,22 @@ export const imgSnapshotTest = (graphStr, _options, api = false, validation) =>
   if (!options.fontSize) {
     options.fontSize = '16px';
   }
+  const url = mermaidUrl(graphStr, options, api);
+  openURLAndVerifyRendering(url, options, validation);
+};
+
+export const urlSnapshotTest = (url, _options, api = false, validation) => {
+  const options = Object.assign(_options);
+  openURLAndVerifyRendering(url, options, validation);
+};
+
+export const renderGraph = (graphStr, options, api) => {
+  const url = mermaidUrl(graphStr, options, api);
+  openURLAndVerifyRendering(url, options);
+};
+
+const openURLAndVerifyRendering = (url, options, validation = undefined) => {
   const useAppli = Cypress.env('useAppli');
-  cy.log('Hello ' + useAppli ? 'Appli' : 'image-snapshot');
   const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
 
   if (useAppli) {
@@ -60,82 +74,20 @@ export const imgSnapshotTest = (graphStr, _options, api = false, validation) =>
     });
   }
 
-  const url = mermaidUrl(graphStr, options, api);
-
   cy.visit(url);
+  cy.window().should('have.property', 'rendered', true);
+  cy.get('svg').should('be.visible');
+
   if (validation) {
     cy.get('svg').should(validation);
   }
-  cy.get('svg');
-  // Default name to test title
 
   if (useAppli) {
     cy.log('Check eyes' + Cypress.spec.name);
     cy.eyesCheckWindow('Click!');
-    cy.log('Closing eyes: ' + Cypress.spec.name);
+    cy.log('Closing eyes' + Cypress.spec.name);
     cy.eyesClose();
   } else {
     cy.matchImageSnapshot(name);
   }
 };
-
-export const urlSnapshotTest = (url, _options, api = false, validation) => {
-  cy.log(_options);
-  const options = Object.assign(_options);
-  if (!options.fontFamily) {
-    options.fontFamily = 'courier';
-  }
-  if (!options.sequence) {
-    options.sequence = {};
-  }
-  if (!options.sequence || (options.sequence && !options.sequence.actorFontFamily)) {
-    options.sequence.actorFontFamily = 'courier';
-  }
-  if (options.sequence && !options.sequence.noteFontFamily) {
-    options.sequence.noteFontFamily = 'courier';
-  }
-  options.sequence.actorFontFamily = 'courier';
-  options.sequence.noteFontFamily = 'courier';
-  options.sequence.messageFontFamily = 'courier';
-  if (options.sequence && !options.sequence.actorFontFamily) {
-    options.sequence.actorFontFamily = 'courier';
-  }
-  if (!options.fontSize) {
-    options.fontSize = '16px';
-  }
-  const useAppli = Cypress.env('useAppli');
-  cy.log('Hello ' + useAppli ? 'Appli' : 'image-snapshot');
-  const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
-
-  if (useAppli) {
-    cy.log('Opening eyes 2' + Cypress.spec.name);
-    cy.eyesOpen({
-      appName: 'Mermaid',
-      testName: name,
-      batchName: Cypress.spec.name,
-      batchId: batchId + Cypress.spec.name,
-    });
-  }
-
-  cy.visit(url);
-  if (validation) {
-    cy.get('svg').should(validation);
-  }
-  cy.get('body');
-  // Default name to test title
-
-  if (useAppli) {
-    cy.log('Check eyes 2' + Cypress.spec.name);
-    cy.eyesCheckWindow('Click!');
-    cy.log('Closing eyes 2' + Cypress.spec.name);
-    cy.eyesClose();
-  } else {
-    cy.matchImageSnapshot(name);
-  }
-};
-
-export const renderGraph = (graphStr, options, api) => {
-  const url = mermaidUrl(graphStr, options, api);
-
-  cy.visit(url);
-};

cypress/integration/other/external-diagrams.spec.js

@@ -2,8 +2,8 @@ import { urlSnapshotTest } from '../../helpers/util';
 
 describe('mermaid', () => {
   describe('registerDiagram', () => {
-    it('should work on @mermaid-js/mermaid-mindmap and mermaid-example-diagram', () => {
+    it('should work on @mermaid-js/mermaid-example-diagram', () => {
-      const url = 'http://localhost:9000/external-diagrams-mindmap.html';
+      const url = 'http://localhost:9000/external-diagrams-example-diagram.html';
       urlSnapshotTest(url, {}, false, false);
     });
   });

cypress/integration/rendering/c4.spec.js

@@ -0,0 +1,122 @@
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+
+describe('C4 diagram', () => {
+  it('should render a simple C4Context diagram', () => {
+    imgSnapshotTest(
+      `
+      C4Context
+      accTitle: C4 context demo
+      accDescr: Many large C4 diagrams
+
+      title System Context diagram for Internet Banking System
+
+      Enterprise_Boundary(b0, "BankBoundary0") {
+          Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
+
+          System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
+
+          Enterprise_Boundary(b1, "BankBoundary") {
+            System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
+          }
+        }
+
+      BiRel(customerA, SystemAA, "Uses")
+      Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
+      Rel(SystemC, customerA, "Sends e-mails to")
+
+      UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
+      UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
+      UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('should render a simple C4Container diagram', () => {
+    imgSnapshotTest(
+      `
+      C4Container
+      title Container diagram for Internet Banking System
+
+      System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system", $tags="v1.0")
+      Person(customer, Customer, "A customer of the bank, with personal bank accounts", $tags="v1.0")
+
+      Container_Boundary(c1, "Internet Banking") {
+          Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to customers via their web browser")
+      }
+
+      Rel(customer, spa, "Uses", "HTTPS")
+      Rel(email_system, customer, "Sends e-mails to")
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('should render a simple C4Component diagram', () => {
+    imgSnapshotTest(
+      `
+      C4Component
+      title Component diagram for Internet Banking System - API Application
+
+      Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.")
+
+      Container_Boundary(api, "API Application") {
+        Component(sign, "Sign In Controller", "MVC Rest Controller", "Allows users to sign in to the internet banking system")
+      }
+
+      Rel_Back(spa, sign, "Uses", "JSON/HTTPS")
+      UpdateRelStyle(spa, sign, $offsetY="-40")
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('should render a simple C4Dynamic diagram', () => {
+    imgSnapshotTest(
+      `
+      C4Dynamic
+      title Dynamic diagram for Internet Banking System - API Application
+
+      ContainerDb(c4, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
+      Container(c1, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.")
+      Container_Boundary(b, "API Application") {
+        Component(c3, "Security Component", "Spring Bean", "Provides functionality Related to signing in, changing passwords, etc.")
+        Component(c2, "Sign In Controller", "Spring MVC Rest Controller", "Allows users to sign in to the Internet Banking System.")
+      }
+      Rel(c1, c2, "Submits credentials to", "JSON/HTTPS")
+      Rel(c2, c3, "Calls isAuthenticated() on")
+      Rel(c3, c4, "select * from users where username = ?", "JDBC")
+
+      UpdateRelStyle(c1, c2, $textColor="red", $offsetY="-40")
+      UpdateRelStyle(c2, c3, $textColor="red", $offsetX="-40", $offsetY="60")
+      UpdateRelStyle(c3, c4, $textColor="red", $offsetY="-40", $offsetX="10")
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('should render a simple C4Deployment diagram', () => {
+    imgSnapshotTest(
+      `
+      C4Deployment
+      title Deployment Diagram for Internet Banking System - Live
+
+      Deployment_Node(mob, "Customer's mobile device", "Apple IOS or Android"){
+          Container(mobile, "Mobile App", "Xamarin", "Provides a limited subset of the Internet Banking functionality to customers via their mobile device.")
+      }
+
+      Deployment_Node(plc, "Big Bank plc", "Big Bank plc data center"){
+          Deployment_Node(dn, "bigbank-api*** x8", "Ubuntu 16.04 LTS"){
+              Deployment_Node(apache, "Apache Tomcat", "Apache Tomcat 8.x"){
+                  Container(api, "API Application", "Java and Spring MVC", "Provides Internet Banking functionality via a JSON/HTTPS API.")
+              }
+          }
+      }
+
+      Rel(mobile, api, "Makes API calls to", "json/HTTPS")
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+});

cypress/integration/rendering/erDiagram.spec.js

@@ -182,6 +182,20 @@ describe('Entity Relationship Diagram', () => {
     cy.get('svg');
   });
 
+  it('should render entities with length in attributes type', () => {
+    renderGraph(
+      `
+    erDiagram
+        CLUSTER {
+          varchar(99) name
+          string(255) description
+        }
+      `,
+      { logLevel: 1 }
+    );
+    cy.get('svg');
+  });
+
   it('should render entities and attributes with big and small entity names', () => {
     renderGraph(
       `

cypress/integration/rendering/flowchart-elk.spec.js

@@ -0,0 +1,687 @@
+import { imgSnapshotTest, renderGraph } from '../../helpers/util';
+
+describe.skip('Flowchart ELK', () => {
+  it('1-elk: should render a simple flowchart', () => {
+    imgSnapshotTest(
+      `flowchart-elk TD
+      A[Christmas] -->|Get money| B(Go shopping)
+      B --> C{Let me think}
+      C -->|One| D[Laptop]
+      C -->|Two| E[iPhone]
+      C -->|Three| F[fa:fa-car Car]
+      `,
+      {}
+    );
+    imgSnapshotTest(
+      `flowchart TD
+      A[Christmas] -->|Get money| B(Go shopping)
+      B --> C{Let me think}
+      C -->|One| D[Laptop]
+      C -->|Two| E[iPhone]
+      C -->|Three| F[fa:fa-car Car]
+      `,
+      { flowchart: { defaultRenderer: 'elk' } }
+    );
+  });
+
+  it('2-elk: should render a simple flowchart with diagramPadding set to 0', () => {
+    imgSnapshotTest(
+      `flowchart-elk TD
+      A[Christmas] -->|Get money| B(Go shopping)
+      B --> C{Let me think}
+      %% this is a comment
+      C -->|One| D[Laptop]
+      C -->|Two| E[iPhone]
+      C -->|Three| F[fa:fa-car Car]
+      `,
+      { flowchart: { diagramPadding: 0 } }
+    );
+  });
+
+  it('3-elk: a link with correct arrowhead to a subgraph', () => {
+    imgSnapshotTest(
+      `flowchart-elk TD
+        P1
+        P1 -->P1.5
+        subgraph P1.5
+          P2
+          P2.5(( A ))
+          P3
+        end
+        P2 --> P4
+        P3 --> P6
+        P1.5 --> P5
+      `,
+      {}
+    );
+  });
+
+  it('4-elk: Length of edges', () => {
+    imgSnapshotTest(
+      `flowchart-elk TD
+      L1 --- L2
+      L2 --- C
+      M1 ---> C
+      R1 .-> R2
+      R2 <.-> C
+      C -->|Label 1| E1
+      C <-- Label 2 ---> E2
+      C ----> E3
+      C <-...-> E4
+      C ======> E5
+      `,
+      {}
+    );
+  });
+  it('5-elk: should render escaped without html labels', () => {
+    imgSnapshotTest(
+      `flowchart-elk TD
+        a["<strong>Haiya</strong>"]---->b
+      `,
+      { htmlLabels: false, flowchart: { htmlLabels: false } }
+    );
+  });
+  it('6-elk: should render non-escaped with html labels', () => {
+    imgSnapshotTest(
+      `flowchart-elk TD
+        a["<strong>Haiya</strong>"]===>b
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('7-elk: should render a flowchart when useMaxWidth is true (default)', () => {
+    renderGraph(
+      `flowchart-elk TD
+      A[Christmas] -->|Get money| B(Go shopping)
+      B --> C{Let me think}
+      C -->|One| D[Laptop]
+      C -->|Two| E[iPhone]
+      C -->|Three| F[fa:fa-car Car]
+      `,
+      { flowchart: { useMaxWidth: true } }
+    );
+    cy.get('svg').should((svg) => {
+      expect(svg).to.have.attr('width', '100%');
+      // expect(svg).to.have.attr('height');
+      // use within because the absolute value can be slightly different depending on the environment ±5%
+      // const height = parseFloat(svg.attr('height'));
+      // expect(height).to.be.within(446 * 0.95, 446 * 1.05);
+      const style = svg.attr('style');
+      expect(style).to.match(/^max-width: [\d.]+px;$/);
+      const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
+      expect(maxWidthValue).to.be.within(230 * 0.95, 230 * 1.05);
+    });
+  });
+  it('8-elk: should render a flowchart when useMaxWidth is false', () => {
+    renderGraph(
+      `flowchart-elk TD
+      A[Christmas] -->|Get money| B(Go shopping)
+      B --> C{Let me think}
+      C -->|One| D[Laptop]
+      C -->|Two| E[iPhone]
+      C -->|Three| F[fa:fa-car Car]
+      `,
+      { flowchart: { useMaxWidth: false } }
+    );
+    cy.get('svg').should((svg) => {
+      // const height = parseFloat(svg.attr('height'));
+      const width = parseFloat(svg.attr('width'));
+      // use within because the absolute value can be slightly different depending on the environment ±5%
+      // expect(height).to.be.within(446 * 0.95, 446 * 1.05);
+      expect(width).to.be.within(230 * 0.95, 230 * 1.05);
+      expect(svg).to.not.have.attr('style');
+    });
+  });
+
+  it('V2 elk - 16: Render Stadium shape', () => {
+    imgSnapshotTest(
+      ` flowchart-elk TD
+      A([stadium shape test])
+      A -->|Get money| B([Go shopping])
+      B --> C([Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?])
+      C -->|One| D([Laptop])
+      C -->|Two| E([iPhone])
+      C -->|Three| F([Car<br/>wroom wroom])
+      click A "index.html#link-clicked" "link test"
+      click B testClick "click test"
+      classDef someclass fill:#f96;
+      class A someclass;
+      class C someclass;
+      `,
+      { flowchart: { htmlLabels: false }, fontFamily: 'courier' }
+    );
+  });
+
+  it('50-elk: handle nested subgraphs in reverse order', () => {
+    imgSnapshotTest(
+      `flowchart-elk LR
+        a -->b
+        subgraph A
+        B
+        end
+        subgraph B
+        b
+        end
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+
+  it('51-elk: handle nested subgraphs in reverse order', () => {
+    imgSnapshotTest(
+      `flowchart-elk LR
+        a -->b
+        subgraph A
+        B
+        end
+        subgraph B
+        b
+        end
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+
+  it('52-elk: handle nested subgraphs in several levels', () => {
+    imgSnapshotTest(
+      `flowchart-elk TB
+    b-->B
+    a-->c
+    subgraph O
+      A
+    end
+    subgraph B
+      c
+    end
+    subgraph A
+        a
+        b
+        B
+    end
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+
+  it('53-elk: handle nested subgraphs with edges in and out', () => {
+    imgSnapshotTest(
+      `flowchart-elk TB
+  internet
+  nat
+  routeur
+  lb1
+  lb2
+  compute1
+  compute2
+  subgraph project
+  routeur
+  nat
+    subgraph subnet1
+      compute1
+      lb1
+    end
+    subgraph subnet2
+      compute2
+      lb2
+    end
+  end
+  internet --> routeur
+  routeur --> subnet1 & subnet2
+  subnet1 & subnet2 --> nat --> internet
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+
+  it('54-elk: handle nested subgraphs with outgoing links', () => {
+    imgSnapshotTest(
+      `flowchart-elk TD
+  subgraph  main
+    subgraph subcontainer
+      subcontainer-child
+    end
+     subcontainer-child--> subcontainer-sibling
+  end
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+
+  it('55-elk: handle nested subgraphs with outgoing links 2', () => {
+    imgSnapshotTest(
+      `flowchart-elk TD
+
+subgraph one[One]
+    subgraph sub_one[Sub One]
+        _sub_one
+    end
+    subgraph sub_two[Sub Two]
+        _sub_two
+    end
+    _one
+end
+
+%% here, either the first or the second one
+sub_one --> sub_two
+_one --> b
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+
+  it('56-elk: handle nested subgraphs with outgoing links 3', () => {
+    imgSnapshotTest(
+      `flowchart-elk TB
+  subgraph container_Beta
+    process_C-->Process_D
+  end
+  subgraph container_Alpha
+    process_A-->process_B
+    process_A-->|messages|process_C
+    end
+    process_B-->|via_AWSBatch|container_Beta
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('57-elk: handle nested subgraphs with outgoing links 4', () => {
+    imgSnapshotTest(
+      `flowchart-elk LR
+subgraph A
+a -->b
+end
+subgraph B
+b
+end
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+
+  it('57-elk: handle nested subgraphs with outgoing links 2', () => {
+    imgSnapshotTest(
+      `flowchart-elk TB
+    c1-->a2
+    subgraph one
+    a1-->a2
+    end
+    subgraph two
+    b1-->b2
+    end
+    subgraph three
+    c1-->c2
+    end
+    one --> two
+    three --> two
+    two --> c2
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('57.x: handle nested subgraphs with outgoing links 5', () => {
+    imgSnapshotTest(
+      `%% this does not produce the desired result
+flowchart-elk TB
+  subgraph container_Beta
+    process_C-->Process_D
+  end
+  subgraph container_Alpha
+    process_A-->process_B
+    process_B-->|via_AWSBatch|container_Beta
+    process_A-->|messages|process_C
+  end
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('58-elk: handle styling with style expressions', () => {
+    imgSnapshotTest(
+      `
+    flowchart-elk LR
+    id1(Start)-->id2(Stop)
+    style id1 fill:#f9f,stroke:#333,stroke-width:4px
+    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('59-elk: handle styling of subgraphs and links', () => {
+    imgSnapshotTest(
+      `
+flowchart-elk TD
+  A[Christmas] ==> D
+  A[Christmas] -->|Get money| B(Go shopping)
+  A[Christmas] ==> C
+  subgraph T ["Test"]
+    A
+    B
+    C
+  end
+
+  classDef Test fill:#F84E68,stroke:#333,color:white;
+  class A,T Test
+  classDef TestSub fill:green;
+  class T TestSub
+  linkStyle 0,1 color:orange, stroke: orange;
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('60-elk: handle styling for all node shapes - v2', () => {
+    imgSnapshotTest(
+      `
+      flowchart-elk LR
+      A[red text] -->|default style| B(blue text)
+      C([red text]) -->|default style| D[[blue text]]
+      E[(red text)] -->|default style| F((blue text))
+      G>red text] -->|default style| H{blue text}
+      I{{red text}} -->|default style| J[/blue text/]
+      K[\\ red text\\] -->|default style| L[/blue text\\]
+      M[\\ red text/] -->|default style| N[blue text];
+      O(((red text))) -->|default style| P(((blue text)));
+      linkStyle default color:Sienna;
+      style A stroke:#ff0000,fill:#ffcccc,color:#ff0000;
+      style B stroke:#0000ff,fill:#ccccff,color:#0000ff;
+      style C stroke:#ff0000,fill:#ffcccc,color:#ff0000;
+      style D stroke:#0000ff,fill:#ccccff,color:#0000ff;
+      style E stroke:#ff0000,fill:#ffcccc,color:#ff0000;
+      style F stroke:#0000ff,fill:#ccccff,color:#0000ff;
+      style G stroke:#ff0000,fill:#ffcccc,color:#ff0000;
+      style H stroke:#0000ff,fill:#ccccff,color:#0000ff;
+      style I stroke:#ff0000,fill:#ffcccc,color:#ff0000;
+      style J stroke:#0000ff,fill:#ccccff,color:#0000ff;
+      style K stroke:#ff0000,fill:#ffcccc,color:#ff0000;
+      style L stroke:#0000ff,fill:#ccccff,color:#0000ff;
+      style M stroke:#ff0000,fill:#ffcccc,color:#ff0000;
+      style N stroke:#0000ff,fill:#ccccff,color:#0000ff;
+      style O stroke:#ff0000,fill:#ffcccc,color:#ff0000;
+      style P stroke:#0000ff,fill:#ccccff,color:#0000ff;
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose', logLevel: 2 }
+    );
+  });
+  it('61-elk: fontawesome icons in edge labels', () => {
+    imgSnapshotTest(
+      `
+      flowchart-elk TD
+        C -->|fa:fa-car Car| F[fa:fa-car Car]
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('62-elk: should render styled subgraphs', () => {
+    imgSnapshotTest(
+      `
+      flowchart-elk TB
+      A
+      B
+      subgraph foo[Foo SubGraph]
+        C
+        D
+      end
+      subgraph bar[Bar SubGraph]
+        E
+        F
+      end
+      G
+
+      A-->B
+      B-->C
+      C-->D
+      B-->D
+      D-->E
+      E-->A
+      E-->F
+      F-->D
+      F-->G
+      B-->G
+      G-->D
+
+      style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
+      style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('63-elk: title on subgraphs should be themable', () => {
+    imgSnapshotTest(
+      `
+      %%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%%
+      flowchart-elk LR
+      subgraph A
+          a --> b
+      end
+      subgraph B
+          i -->f
+      end
+      A --> B
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('65-elk: text-color from classes', () => {
+    imgSnapshotTest(
+      `
+      flowchart-elk LR
+        classDef dark fill:#000,stroke:#000,stroke-width:4px,color:#fff
+        Lorem --> Ipsum --> Dolor
+        class Lorem,Dolor dark
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('66-elk: More nested subgraph cases (TB)', () => {
+    imgSnapshotTest(
+      `
+flowchart-elk TB
+    subgraph two
+    b1
+    end
+    subgraph three
+    c2
+    end
+
+    three --> two
+    two --> c2
+
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('67-elk: More nested subgraph cases (RL)', () => {
+    imgSnapshotTest(
+      `
+flowchart-elk RL
+    subgraph two
+    b1
+    end
+    subgraph three
+    c2
+    end
+
+    three --> two
+    two --> c2
+
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('68-elk: More nested subgraph cases (BT)', () => {
+    imgSnapshotTest(
+      `
+flowchart-elk BT
+    subgraph two
+    b1
+    end
+    subgraph three
+    c2
+    end
+
+    three --> two
+    two --> c2
+
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('69-elk: More nested subgraph cases (LR)', () => {
+    imgSnapshotTest(
+      `
+flowchart-elk LR
+    subgraph two
+    b1
+    end
+    subgraph three
+    c2
+    end
+
+    three --> two
+    two --> c2
+
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('70-elk: Handle nested subgraph cases (TB) link out and link between subgraphs', () => {
+    imgSnapshotTest(
+      `
+flowchart-elk TB
+   subgraph S1
+    sub1 -->sub2
+   end
+  subgraph S2
+    sub4
+   end
+   S1 --> S2
+   sub1 --> sub4
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('71-elk: Handle nested subgraph cases (RL) link out and link between subgraphs', () => {
+    imgSnapshotTest(
+      `
+flowchart-elk RL
+   subgraph S1
+    sub1 -->sub2
+   end
+  subgraph S2
+    sub4
+   end
+   S1 --> S2
+   sub1 --> sub4
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('72-elk: Handle nested subgraph cases (BT) link out and link between subgraphs', () => {
+    imgSnapshotTest(
+      `
+flowchart-elk BT
+   subgraph S1
+    sub1 -->sub2
+   end
+  subgraph S2
+    sub4
+   end
+   S1 --> S2
+   sub1 --> sub4
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('74-elk: Handle nested subgraph cases (RL) link out and link between subgraphs', () => {
+    imgSnapshotTest(
+      `
+flowchart-elk RL
+   subgraph S1
+    sub1 -->sub2
+   end
+  subgraph S2
+    sub4
+   end
+   S1 --> S2
+   sub1 --> sub4
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('74-elk: Handle labels for multiple edges from and to the same couple of nodes', () => {
+    imgSnapshotTest(
+      `
+flowchart-elk RL
+    subgraph one
+      a1 -- l1 --> a2
+      a1 -- l2 --> a2
+    end
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+
+  it('76-elk: handle unicode encoded character with HTML labels true', () => {
+    imgSnapshotTest(
+      `flowchart-elk TB
+      a{{"Lorem 'ipsum' dolor 'sit' amet, 'consectetur' adipiscing 'elit'."}}
+      --> b{{"Lorem #quot;ipsum#quot; dolor #quot;sit#quot; amet,#quot;consectetur#quot; adipiscing #quot;elit#quot;."}}
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+
+  it('2050-elk: handling of different rendering direction in subgraphs', () => {
+    imgSnapshotTest(
+      `
+    flowchart-elk LR
+
+      subgraph TOP
+        direction TB
+        subgraph B1
+            direction RL
+            i1 -->f1
+        end
+        subgraph B2
+            direction BT
+            i2 -->f2
+        end
+      end
+      A --> TOP --> B
+      B1 --> B2
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+
+  it('2388-elk: handling default in the node name', () => {
+    imgSnapshotTest(
+      `
+      flowchart-elk LR
+      default-index.js --> dot.template.js
+      index.js --> module-utl.js
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('2824-elk: Clipping of edges', () => {
+    imgSnapshotTest(
+      `
+      flowchart-elk TD
+          A --> B
+          A --> C
+          B --> C
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('1433-elk: should render a titled flowchart with titleTopMargin set to 0', () => {
+    imgSnapshotTest(
+      `---
+title: Simple flowchart
+---
+flowchart-elk TD
+A --> B
+`,
+      { titleTopMargin: 0 }
+    );
+  });
+});

cypress/integration/rendering/flowchart-v2.spec.js

@@ -670,6 +670,17 @@ title: Simple flowchart
 ---
 flowchart TD
 A --> B
+`,
+      { titleTopMargin: 0 }
+    );
+  });
+  it('3192: It should be possieble to render flowcharts with invisible edges', () => {
+    imgSnapshotTest(
+      `---
+title: Simple flowchart with invisible edges
+---
+flowchart TD
+A ~~~ B
 `,
       { titleTopMargin: 0 }
     );

cypress/integration/rendering/mindmap.spec.ts

@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+import { imgSnapshotTest } from '../../helpers/util.js';
 
 /**
  * Check whether the SVG Element has a Mindmap root
@@ -158,7 +158,6 @@ mindmap
       undefined,
       shouldHaveRoot
     );
-    cy.get('svg');
   });
   it('rounded rect shape', () => {
     imgSnapshotTest(
@@ -172,7 +171,6 @@ mindmap
       undefined,
       shouldHaveRoot
     );
-    cy.get('svg');
   });
   it('circle shape', () => {
     imgSnapshotTest(
@@ -186,7 +184,6 @@ mindmap
       undefined,
       shouldHaveRoot
     );
-    cy.get('svg');
   });
   it('default shape', () => {
     imgSnapshotTest(
@@ -198,7 +195,6 @@ mindmap
       undefined,
       shouldHaveRoot
     );
-    cy.get('svg');
   });
   it('adding children', () => {
     imgSnapshotTest(
@@ -212,7 +208,6 @@ mindmap
       undefined,
       shouldHaveRoot
     );
-    cy.get('svg');
   });
   it('adding grand children', () => {
     imgSnapshotTest(
@@ -227,7 +222,6 @@ mindmap
       undefined,
       shouldHaveRoot
     );
-    cy.get('svg');
   });
   /* The end */
 });

cypress/integration/rendering/sequencediagram.spec.js

@@ -3,6 +3,42 @@
 import { imgSnapshotTest, renderGraph } from '../../helpers/util';
 
 context('Sequence diagram', () => {
+  it('should render a sequence diagram with boxes', () => {
+    renderGraph(
+      `
+    sequenceDiagram
+      box LightGrey Alice and Bob
+      participant Alice
+      participant Bob
+      end
+      participant John as John<br/>Second Line
+      Alice ->> Bob: Hello Bob, how are you?
+      Bob-->>John: How about you John?
+      Bob--x Alice: I am good thanks!
+      Bob-x John: I am good thanks!
+      Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
+      Bob-->Alice: Checking with John...
+      alt either this
+        Alice->>John: Yes
+        else or this
+        Alice->>John: No
+        else or this will happen
+        Alice->John: Maybe
+      end
+      par this happens in parallel
+      Alice -->> Bob: Parallel message 1
+      and
+      Alice -->> John: Parallel message 2
+      end
+    `,
+      { sequence: { useMaxWidth: false } }
+    );
+    cy.get('svg').should((svg) => {
+      const width = parseFloat(svg.attr('width'));
+      expect(width).to.be.within(830 * 0.95, 830 * 1.05);
+      expect(svg).to.not.have.attr('style');
+    });
+  });
   it('should render a simple sequence diagram', () => {
     imgSnapshotTest(
       `
@@ -80,7 +116,11 @@ context('Sequence diagram', () => {
         loop Loopy
             Bob->>Alice: Pasten
         end      `,
-      { wrap: true }
+      {
+        sequence: {
+          wrap: true,
+        },
+      }
     );
   });
   context('font settings', () => {

cypress/integration/rendering/timeline.spec.ts

@@ -0,0 +1,164 @@
+import { imgSnapshotTest } from '../../helpers/util.js';
+
+describe('Timeline diagram', () => {
+  it('1: should render a simple timeline with no specific sections', () => {
+    imgSnapshotTest(
+      `timeline
+    title History of Social Media Platform
+    2002 : LinkedIn
+    2004 : Facebook : Google
+    2005 : Youtube
+    2006 : Twitter
+      `,
+      {}
+    );
+  });
+  it('2: should render a timeline diagram with sections', () => {
+    imgSnapshotTest(
+      `timeline
+    title Timeline of Industrial Revolution
+    section 17th-20th century
+        Industry 1.0 : Machinery, Water power, Steam <br>power
+        Industry 2.0 : Electricity, Internal combustion engine, Mass production
+        Industry 3.0 : Electronics, Computers, Automation
+    section 21st century
+        Industry 4.0 : Internet, Robotics, Internet of Things
+        Industry 5.0 : Artificial intelligence, Big data,3D printing
+      `,
+      {}
+    );
+  });
+  it('3: should render a complex timeline with sections, and long events text with <br>', () => {
+    imgSnapshotTest(
+      `timeline
+        title England's History Timeline
+        section Stone Age
+          7600 BC : Britain's oldest known house was built in Orkney, Scotland
+          6000 BC : Sea levels rise and Britain becomes an island.<br> The people who live here are hunter-gatherers.
+        section Broze Age
+          2300 BC : People arrive from Europe and settle in Britain. <br>They bring farming and metalworking.
+                  : New styles of pottery and ways of burying the dead appear.
+          2200 BC : The last major building works are completed at Stonehenge.<br> People now bury their dead in stone circles.
+                  : The first metal objects are made in Britain.Some other nice things happen. it is a good time to be alive.
+      `,
+      {}
+    );
+  });
+  it('4: should render a simple timeline with directives and disableMultiColor:true ', () => {
+    imgSnapshotTest(
+      `%%{init: { 'logLevel': 'debug', 'theme': 'base', 'timeline': {'disableMulticolor': true}}}%%
+    timeline
+        title History of Social Media Platform
+          2002 : LinkedIn
+          2004 : Facebook : Google
+          2005 : Youtube
+          2006 : Twitter
+      `,
+      {}
+    );
+  });
+  it('5: should render a simple timeline with directive overriden colors', () => {
+    imgSnapshotTest(
+      ` %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
+              'cScale0': '#ff0000',
+              'cScale1': '#00ff00',
+              'cScale2': '#0000ff'
+       } } }%%
+       timeline
+        title History of Social Media Platform
+          2002 : LinkedIn
+          2004 : Facebook : Google
+          2005 : Youtube
+          2006 : Twitter
+          2007 : Tumblr
+          2008 : Instagram
+          2010 : Pinterest
+      `,
+      {}
+    );
+  });
+  it('6: should render a simple timeline in base theme', () => {
+    imgSnapshotTest(
+      `%%{init: { 'logLevel': 'debug', 'theme': 'base' } }%%
+    timeline
+        title History of Social Media Platform
+          2002 : LinkedIn
+          2004 : Facebook : Google
+          2005 : Youtube
+          2006 : Twitter
+          2007 : Tumblr
+          2008 : Instagram
+          2010 : Pinterest
+      `,
+      {}
+    );
+  });
+
+  it('7: should render a simple timeline in default theme', () => {
+    imgSnapshotTest(
+      `%%{init: { 'logLevel': 'debug', 'theme': 'default' } }%%
+    timeline
+        title History of Social Media Platform
+          2002 : LinkedIn
+          2004 : Facebook : Google
+          2005 : Youtube
+          2006 : Twitter
+          2007 : Tumblr
+          2008 : Instagram
+          2010 : Pinterest
+      `,
+      {}
+    );
+  });
+
+  it('8: should render a simple timeline in dark theme', () => {
+    imgSnapshotTest(
+      `%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
+    timeline
+        title History of Social Media Platform
+          2002 : LinkedIn
+          2004 : Facebook : Google
+          2005 : Youtube
+          2006 : Twitter
+          2007 : Tumblr
+          2008 : Instagram
+          2010 : Pinterest
+      `,
+      {}
+    );
+  });
+
+  it('9: should render a simple timeline in neutral theme', () => {
+    imgSnapshotTest(
+      `%%{init: { 'logLevel': 'debug', 'theme': 'neutral' } }%%
+    timeline
+        title History of Social Media Platform
+          2002 : LinkedIn
+          2004 : Facebook : Google
+          2005 : Youtube
+          2006 : Twitter
+          2007 : Tumblr
+          2008 : Instagram
+          2010 : Pinterest
+      `,
+      {}
+    );
+  });
+
+  it('10: should render a simple timeline in forest theme', () => {
+    imgSnapshotTest(
+      `%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
+    timeline
+        title History of Social Media Platform
+          2002 : LinkedIn
+          2004 : Facebook : Google
+          2005 : Youtube
+          2006 : Twitter
+          2007 : Tumblr
+          2008 : Instagram
+          2010 : Pinterest
+      `,
+      {}
+    );
+  });
+});

cypress/platform/ashish2.html

@@ -0,0 +1,231 @@
+<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://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"
+    />
+    <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; */
+        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;
+        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="mermaid2">
+ timeline
+        title My day
+        section section with no tasks
+        section Go to work at the dog office
+          1930 : first step : second step is a long step
+               : third step
+          1940 : fourth step : fifth step
+        section Go home
+          1950 : India got independent and already won war against Pakistan
+          1960 : India fights poverty, looses war to China and gets nuclear weapons from USA and USSR
+          1970 : Green Revolution comes to india
+        section Another section with no tasks
+          I am a big big big tasks
+          I am not so big tasks
+    </pre>
+    <pre id="diagram" class="mermaid">
+ timeline
+        title MermaidChart 2023 Timeline
+        section 2023 Q1 <br> Release Personal Tier
+          Buttet 1 : sub-point 1a : sub-point 1b
+               : sub-point 1c
+          Bullet 2 : sub-point 2a : sub-point 2b
+        section 2023 Q2 <br> Release XYZ Tier
+          Buttet 3 : sub-point <br> 3a : sub-point 3b
+               : sub-point 3c
+          Bullet 4 : sub-point 4a : sub-point 4b
+
+    </pre>
+
+    <pre id="diagram" class="mermaid">
+ timeline
+        title England's History Timeline
+        section Stone Age
+          7600 BC : Britain's oldest known house was built in Orkney, Scotland
+          6000 BC : Sea levels rise and Britain becomes an island. The people who live here are hunter-gatherers.
+        section Broze Age
+          2300 BC : People arrive from Europe and settle in Britain. They bring farming and metalworking.
+               : New styles of pottery and ways of burying the dead appear.
+          2200 BC : The last major building works are completed at Stonehenge. People now bury their dead in stone circles.
+                  : The first metal objects are made in Britain.Some other nice things happen. it is a good time to be alive.
+
+    </pre>
+    <pre id="diagram" class="mermaid2">
+      %%{'init': { 'logLevel': 'debug', 'theme': 'default', 'timeline': {'disableMulticolor':false} } }%%
+ timeline
+        title History of Social Media Platform
+          2002 : LinkedIn
+          2004 : Facebook : Google : Pixar
+          2005 : Youtube
+          2006 : Twitter
+          2007 : Tumblr
+          2008s : Instagram
+          2010 : Pinterest
+    </pre>
+    <pre id="diagram" class="mermaid2">
+      %%{init: { 'logLevel': 'debug', 'theme': 'base', 'themeVariables': {
+              'cScale0': '#ff0000',
+              'cScale1': '#00ff00',
+              'cScale2': '#ff0000'
+              } } }%%
+ timeline
+        title History of Social Media Platform
+          2002 : LinkedIn
+          2004 : Facebook : Google : Pixar
+          2005 : Youtube
+          2006 : Twitter
+          2007 : Tumblr
+          2008s : Instagram
+          2010 : Pinterest
+    </pre>
+
+    <pre id="diagram" class="mermaid2">
+          %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
+              'cScale0': '#ff0000',
+              'cScale1': '#00ff00',
+              'cScale2': '#0000ff'
+       } } }%%
+       timeline
+        title History of Social Media Platform
+          2002 : LinkedIn
+          2004 : Facebook : Google
+          2005 : Youtube
+          2006 : Twitter
+          2007 : Tumblr
+          2008 : Instagram
+          2010 : Pinterest
+
+    </pre>
+
+    <pre id="diagram" class="mermaid2">
+ timeline
+        title History of Social Media Platform
+          2002 : LinkedIn
+          2004 : Facebook : Google
+          2005 : Youtube
+          2006 : Twitter
+          2007 : Tumblr
+          2008s : Instagram
+          2010 : Pinterest
+    </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">
+      flowchart-elk TB
+      a --> b
+      a --> c
+      b --> d
+      c --> d
+    </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 type="module">
+      //import mindmap from '../../packages/mermaid-mindmap/src/detector';
+      // import example from '../../packages/mermaid-example-diagram/src/detector';
+      // import timeline from '../../packages/mermaid-timeline/src/detector';
+      import mermaid from '../../packages/mermaid/src/mermaid';
+      // await mermaid.registerExternalDiagrams([]);
+      mermaid.parseError = function (err, hash) {
+        // console.error('Mermaid error: ', err);
+      };
+      mermaid.initialize({
+        theme: 'base',
+        startOnLoad: true,
+        logLevel: 0,
+        flowchart: {
+          useMaxWidth: false,
+          htmlLabels: true,
+        },
+        gantt: {
+          useMaxWidth: false,
+        },
+        timeline: {
+          disableMulticolor: false,
+          htmlLabels: false,
+        },
+        useMaxWidth: true,
+        lazyLoadedDiagrams: [
+          // './mermaid-mindmap-detector.esm.mjs',
+          // './mermaid-example-diagram-detector.esm.mjs',
+          //'./mermaid-timeline-detector.esm.mjs',
+        ],
+      });
+      function callback() {
+        alert('It worked');
+      }
+      mermaid.parseError = function (err, hash) {
+        console.error('In parse error:');
+        console.error(err);
+      };
+      // mermaid.test1('first_slow', 1200).then((r) => console.info(r));
+      // mermaid.test1('second_fast', 200).then((r) => console.info(r));
+      // mermaid.test1('third_fast', 200).then((r) => console.info(r));
+      // mermaid.test1('forth_slow', 1200).then((r) => console.info(r));
+    </script>
+  </body>
+</html>

cypress/platform/bundle-test.js

@@ -49,13 +49,9 @@ mermaid.initialize({
     ],
   },
 });
-mermaid.render(
+void (async () => {
-  'the-id-of-the-svg',
+  const { svg } = await mermaid.render('the-id-of-the-svg', code);
-  code,
+  console.log(svg);
-  (svg) => {
+  const elem = document.querySelector('#graph-to-be');
-    console.log(svg);
+  elem.innerHTML = svg;
-    const elem = document.querySelector('#graph-to-be');
+})();
-    elem.innerHTML = svg;
-  }
-  // ,document.querySelector('#tmp')
-);

cypress/platform/class.html

@@ -46,13 +46,9 @@
     <pre class="mermaid" style="width: 100%; height: 20%">
       %%{init: {'theme': 'base',  'fontFamily': 'courier', 'themeVariables': {  'primaryColor': '#fff000'}}}%%
       classDiagram-v2
-       class BankAccount{
+classA <|-- classB : implements
-        +String owner
+classC *-- classD : composition
-        +BigDecimal balance
+classE o-- classF : aggregation
-        +deposit(amount) bool
-        +withdrawl(amount) int
-       }
-       cssClass "BankAccount" customCss
     </pre>
     <pre class="mermaid2" style="width: 100%; height: 20%">
         %%{init: {'theme': 'base',  'fontFamily': 'courier', 'themeVariables': {  'primaryColor': '#fff000'}}}%%
@@ -117,8 +113,8 @@
         callback Shape "callbackFunction" "This is a tooltip for a callback"
 
     </pre>
-    <script src="./mermaid.js"></script>
+    <script type="module">
-    <script>
+      import mermaid from './mermaid.esm.mjs';
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };

cypress/platform/click_security_loose.html

@@ -125,7 +125,6 @@
       </pre>
     </div>
 
-    <script src="./mermaid.js"></script>
     <script>
       function clickByFlow(elemName) {
         const div = document.createElement('div');
@@ -162,6 +161,9 @@
 
         document.getElementsByTagName('body')[0].appendChild(div);
       }
+    </script>
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
       mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
     </script>
   </body>

cypress/platform/click_security_other.html

@@ -59,8 +59,8 @@
     Add another diagram to demo page    : 48h
     </pre>
 
-    <script src="./mermaid.js"></script>
+    <script type="module">
-    <script>
+      import mermaid from './mermaid.esm.mjs';
       function clickByFlow(elemName) {
         const div = document.createElement('div');
         div.className = 'created-by-click';

cypress/platform/click_security_sandbox.html

@@ -125,8 +125,8 @@
       </pre>
     </div>
 
-    <script src="./mermaid.js"></script>
+    <script type="module">
-    <script>
+      import mermaid from './mermaid.esm.mjs';
       function clickByFlow(elemName) {
         const div = document.createElement('div');
         div.className = 'created-by-click';

cypress/platform/click_security_strict.html

@@ -61,8 +61,8 @@
     Add another diagram to demo page    : 48h
     </pre>
 
-    <script src="./mermaid.js"></script>
+    <script type="module">
-    <script>
+      import mermaid from './mermaid.esm.mjs';
       function clickByFlow(elemName) {
         const div = document.createElement('div');
         div.className = 'created-by-click';

cypress/platform/css1.html

@@ -28,8 +28,8 @@
     end
     A --> B
     </pre>
-    <script src="./mermaid.js"></script>
+    <script type="module">
-    <script>
+      import mermaid from './mermaid.esm.mjs';
       function showFullFirstSquad(elemName) {
         console.log('show ' + elemName);
       }

cypress/platform/current2.html

@@ -107,8 +107,8 @@ Note over Alice,Bob: Looks
 Note over Bob,Alice: Looks back
     </pre>
 
-    <script src="./mermaid.js"></script>
+    <script type="module">
-    <script>
+      import mermaid from './mermaid.esm.mjs';
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };

cypress/platform/e2e.html

@@ -1,32 +1,12 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <!-- <meta charset="iso-8859-15"/> -->
     <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"
       rel="stylesheet"
     />
     <style>
-      body {
-        /* font-family: 'Mansalva', cursive;*/
-        /* font-family: 'Mansalva', cursive; */
-        /* font-family: 'arial'; */
-        /* font-family: "trebuchet ms", verdana, arial; */
-      }
-      /* div {
-        font-family: 'arial';
-      } */
-      /* .mermaid-main-font {
-        font-family: "trebuchet ms", verdana, arial;
-        font-family: var(--mermaid-font-family);
-      } */
-      /* :root {
-        --mermaid-font-family: '"trebuchet ms", verdana, arial';
-        --mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive;
-        --mermaid-font-family: '"Lucida Console", Monaco, monospace';
-      } */
       svg {
         border: 2px solid darkred;
       }
@@ -36,21 +16,5 @@
       }
     </style>
   </head>
-  <body>
+  <body></body>
-    <!-- <script src="./mermaid.js"></script> -->
-    <script>
-      // Notice startOnLoad=false
-      // This prevents default handling in mermaid from render before the e2e logic is applied
-      // mermaid.initialize({
-      //   startOnLoad: false,
-      //   useMaxWidth: true,
-      //   // "themeCSS": ":root { --mermaid-font-family: \"trebuchet ms\", verdana, arial;}",
-      //   // fontFamily: '\"trebuchet ms\", verdana, arial;'
-      //   // fontFamily: '"Comic Sans MS", "Comic Sans", cursive'
-      //   // fontFamily: '"Mansalva", cursive',
-      //   // fontFamily: '"Noto Sans SC", sans-serif'
-      //   fontFamily: '"Noto Sans SC", sans-serif'
-      // });
-    </script>
-  </body>
 </html>

cypress/platform/external-diagrams-example-diagram.html

@@ -2,34 +2,8 @@
   <body>
     <h1>Should correctly load a third-party diagram using registerDiagram</h1>
     <pre id="diagram" class="mermaid">
-mindmap
+example-diagram
-  root
-    A
-    B
-    C
-    D
-    E
-    A2
-    B2
-    C2
-    D2
-    E2
-    child1((Circle))
-        grandchild 1
-        grandchild 2
-    child2(Round rectangle)
-        grandchild 3
-        grandchild 4
-    child3[Square]
-        grandchild 5
-        ::icon(mdi mdi-fire)
-        gc6((grand<br/>child 6))
-        ::icon(mdi mdi-fire)
-          gc7((grand<br/>grand<br/>child 8))
     </pre>
-    <!-- <pre id="diagram" class="mermaid2">
-      example-diagram
-    </pre> -->
 
     <!-- <div id="cy"></div> -->
     <!-- <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> -->
@@ -37,13 +11,16 @@ mindmap
     <!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script> -->
     <!-- <script type="module" src="./external-diagrams-mindmap.mjs" /> -->
     <script type="module">
-      import mindmap from '../../packages/mermaid-mindmap/src/detector';
+      import exampleDiagram from '../../packages/mermaid-example-diagram/src/detector';
       // import example from '../../packages/mermaid-example-diagram/src/detector';
       import mermaid from '../../packages/mermaid/src/mermaid';
 
-      await mermaid.registerExternalDiagrams([mindmap]);
+      await mermaid.registerExternalDiagrams([exampleDiagram]);
       await mermaid.initialize({ logLevel: 0 });
-      await mermaid.initThrowsErrorsAsync();
+      await mermaid.run();
+      if (window.Cypress) {
+        window.rendered = true;
+      }
     </script>
   </body>
 </html>

cypress/platform/flow.html

@@ -29,8 +29,8 @@
         click a_a "http://www.aftonbladet.se" "apa"
     </pre>
 
-    <script src="./mermaid.js"></script>
+    <script type="module">
-    <script>
+      import mermaid from './mermaid.esm.mjs';
       mermaid.initialize({
         theme: 'forest',
         // themeCSS: '.node rect { fill: red; }',

cypress/platform/flow2.html

@@ -0,0 +1,46 @@
+<html>
+  <head>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
+    <style>
+      body {
+        font-family: 'trebuchet ms', verdana, arial;
+      }
+    </style>
+  </head>
+  <body>
+    <pre class="mermaid">
+      graph TB
+      subgraph One
+        a1-->a2-->a3
+      end
+    </pre>
+    <pre class="mermaid">
+      graph TB
+        a_a --> b_b:::apa --> c_c:::apa
+        classDef apa fill:#f9f,stroke:#333,stroke-width:4px;
+        class a_a apa;
+    </pre>
+    <pre class="mermaid">
+      graph TB
+        a_a(Aftonbladet) --> b_b[gorilla]:::apa --> c_c{chimp}:::apa -->a_a
+        a_a --> c --> d_d --> c_c
+        classDef apa fill:#f9f,stroke:#333,stroke-width:4px;
+        class a_a apa;
+        click a_a "http://www.aftonbladet.se" "apa"
+    </pre>
+
+    <script type="module">
+      import mermaid from '../../packages/mermaid/src/mermaid';
+
+      mermaid.initialize({
+        theme: 'forest',
+        // themeCSS: '.node rect { fill: red; }',
+        logLevel: 3,
+        flowchart: { curve: 'linear' },
+        gantt: { axisFormat: '%m/%d/%Y' },
+        sequence: { actorMargin: 50 },
+        // sequenceDiagram: { actorMargin: 300 } // deprecated
+      });
+    </script>
+  </body>
+</html>

cypress/platform/ghsa1.html

@@ -8,19 +8,22 @@
     </div>
     <svg id="diagram"></svg>
 
-    <script src="./mermaid.js"></script>
+    <script type="module">
-    <script>
+      import mermaid from './mermaid.esm.mjs';
       mermaid.initialize({ startOnLoad: false, logLevel: 0 });
 
       const graph = `
-     %%{ init: { "themeVariables" : { "textColor": "green;} #target { background-color: crimson }", "mainBkg": "#fff000" } } }%%
+      %%{ init: { "themeVariables" : { "textColor": "green;} #target { background-color: crimson }", "mainBkg": "#fff000" } } }%%
-            graph TD
+             graph TD
-                A[Goose]
+                 A[Goose]
-            `;
+             `;
 
       const diagram = document.getElementById('diagram');
-      const svg = mermaid.render('diagram-svg', graph);
+      const { svg } = await mermaid.render('diagram-svg', graph);
       diagram.innerHTML = svg;
+      if (window.Cypress) {
+        window.rendered = true;
+      }
     </script>
   </body>
 </html>

cypress/platform/ghsa2.html

@@ -8,8 +8,8 @@
     </div>
     <svg id="diagram"></svg>
 
-    <script src="./mermaid.js"></script>
+    <script type="module">
-    <script>
+      import mermaid from './mermaid.esm.mjs';
       mermaid.initialize({ startOnLoad: false, logLevel: 0 });
 
       const graph = `
@@ -19,8 +19,11 @@
             `;
 
       const diagram = document.getElementById('diagram');
-      const svg = mermaid.render('diagram-svg', graph);
+      const { svg } = await mermaid.render('diagram-svg', graph);
       diagram.innerHTML = svg;
+      if (window.Cypress) {
+        window.rendered = true;
+      }
     </script>
   </body>
 </html>

cypress/platform/ghsa3.html

@@ -49,8 +49,8 @@
       <div id="diagram" class="mermaid"></div>
       <div id="res" class=""></div>
     </div>
-    <script src="./mermaid.js"></script>
+    <script type="module">
-    <script>
+      import mermaid from './mermaid.esm.mjs';
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };
@@ -91,10 +91,11 @@
       diagram += 'le> * { background : red}</style>test</p>"]';
 
       console.log(diagram);
-      // document.querySelector('#diagram').innerHTML = diagram;
+      const { svg } = await mermaid.render('diagram', diagram);
-      mermaid.render('diagram', diagram, (res) => {
+      document.querySelector('#res').innerHTML = svg;
-        document.querySelector('#res').innerHTML = res;
+      if (window.Cypress) {
-      });
+        window.rendered = true;
+      }
     </script>
   </body>
 </html>

cypress/platform/git-graph.html

@@ -43,8 +43,8 @@
        cssClass "BankAccount" customCss
     </pre>
 
-    <script src="./mermaid.js"></script>
+    <script type="module">
-    <script>
+      import mermaid from './mermaid.esm.mjs';
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };

cypress/platform/gitgraph.html

@@ -130,8 +130,8 @@
       commit
       merge main
     </pre>
-    <script src="./mermaid.js"></script>
+    <script type="module">
-    <script>
+      import mermaid from './mermaid.esm.mjs';
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };

cypress/platform/gitgraph2.html

@@ -98,8 +98,8 @@
       commit
       merge main
     </pre>
-    <script src="./mermaid.js"></script>
+    <script type="module">
-    <script>
+      import mermaid from './mermaid.esm.mjs';
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };

cypress/platform/info.html

@@ -7,8 +7,8 @@
     <pre class="mermaid">
 info
     </pre>
-    <script src="./mermaid.js"></script>
+    <script type="module">
-    <script>
+      import mermaid from './mermaid.esm.mjs';
       mermaid.initialize({
         theme: 'forest',
         // themeCSS: '.node rect { fill: red; }',

cypress/platform/interaction.html

@@ -87,8 +87,8 @@
     Add another diagram to demo page    : 48h
     </pre>
 
-    <script src="./mermaid.js"></script>
+    <script type="module">
-    <script>
+      import mermaid from './mermaid.esm.mjs';
       function clickByFlow(elemName) {
         const div = document.createElement('div');
         div.className = 'created-by-click';

cypress/platform/knsv2.html

@@ -54,39 +54,205 @@
     </style>
   </head>
   <body>
-    <div>Security check</div>
     <pre id="diagram" class="mermaid">
-flowchart LR
+%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
-    %% Actors
+graph BT
-    A
+a{The cat in the hat} -- 1o --> b
-    subgraph Sub
+a -- 2o --> c
-        B --> C
+a -- 3o --> d
-    end
+g --2i--> a
-
+d --1i--> a
-    %% Accusations
+h --3i -->a
-    A --L --> Sub
+b --> d(The dog in the hog)
-
+c --> d
-    %% Offense
-    B --> A
-
-    </pre>
-    <pre id="diagram" class="mermaid">
-      stateDiagram-v2
-
-      [*] --> S1
-      S1 --> S2: long line using<br/>should work
-      S1 --> S3: long line using <br>should work
-      S1 --> S4: long line using \\nshould work
-
     </pre>
     <pre id="diagram" class="mermaid2">
-      gantt
+flowchart-elk TB
-        title Style today marker (vertical line should be 5px wide and half-transparent blue)
+      a --> b
-        dateFormat YYYY-MM-DD
+      a --> c
-        axisFormat %d
+      b --> d
-        todayMarker stroke-width:5px,stroke:#00f,opacity:0.5
+      c --> d
-        section Section1
+    </pre>
-        Today: 1, -1h
+    <pre id="diagram" class="mermaid2">
+%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
+flowchart TB
+  %% I could not figure out how to use double quotes in labels in Mermaid
+  subgraph ibm[IBM Espresso CPU]
+    core0[IBM PowerPC Broadway Core 0]
+    core1[IBM PowerPC Broadway Core 1]
+    core2[IBM PowerPC Broadway Core 2]
+
+    rom[16 KB ROM]
+
+    core0 --- core2
+
+    rom --> core2
+  end
+
+  subgraph amd[AMD Latte GPU]
+    mem[Memory & I/O Bridge]
+    dram[DRAM Controller]
+    edram[32 MB EDRAM MEM1]
+    rom[512 B SEEPROM]
+
+    sata[SATA IF]
+    exi[EXI]
+
+    subgraph gx[GX]
+      sram[3 MB 1T-SRAM]
+    end
+
+    radeon[AMD Radeon R7xx GX2]
+
+    mem --- gx
+    mem --- radeon
+
+    rom --- mem
+
+    mem --- sata
+    mem --- exi
+
+    dram --- sata
+    dram --- exi
+  end
+
+  ddr3[2 GB DDR3 RAM MEM2]
+
+  mem --- ddr3
+  dram --- ddr3
+  edram --- ddr3
+
+  core1 --- mem
+
+  exi --- rtc
+  rtc{{rtc}}
+</pre
+    >
+    <br />
+    <pre id="diagram" class="mermaid2">
+flowchart TB
+  %% I could not figure out how to use double quotes in labels in Mermaid
+  subgraph ibm[IBM Espresso CPU]
+    core0[IBM PowerPC Broadway Core 0]
+    core1[IBM PowerPC Broadway Core 1]
+    core2[IBM PowerPC Broadway Core 2]
+
+    rom[16 KB ROM]
+
+    core0 --- core2
+
+    rom --> core2
+  end
+
+  subgraph amd[AMD Latte GPU]
+    mem[Memory & I/O Bridge]
+    dram[DRAM Controller]
+    edram[32 MB EDRAM MEM1]
+    rom[512 B SEEPROM]
+
+    sata[SATA IF]
+    exi[EXI]
+
+    subgraph gx[GX]
+      sram[3 MB 1T-SRAM]
+    end
+
+    radeon[AMD Radeon R7xx GX2]
+
+    mem --- gx
+    mem --- radeon
+
+    rom --- mem
+
+    mem --- sata
+    mem --- exi
+
+    dram --- sata
+    dram --- exi
+  end
+
+  ddr3[2 GB DDR3 RAM MEM2]
+
+  mem --- ddr3
+  dram --- ddr3
+  edram --- ddr3
+
+  core1 --- mem
+
+  exi --- rtc
+  rtc{{rtc}}
+</pre
+    >
+    <br />
+    &nbsp;
+    <pre id="diagram" class="mermaid2">
+      flowchart LR
+  B1 --be be--x B2
+  B1 --bo bo--o B3
+  subgraph Ugge
+      B2
+      B3
+      subgraph inner
+          B4
+          B5
+      end
+      subgraph inner2
+        subgraph deeper
+          C4
+          C5
+        end
+        C6
+      end
+
+      B4 --> C4
+
+      B3 -- X --> B4
+      B2 --> inner
+
+      C4 --> C5
+  end
+
+  subgraph outer
+      B6
+  end
+  B6 --> B5
+  </pre
+    >
+    <pre id="diagram" class="mermaid2">
+sequenceDiagram
+    Customer->>+Stripe: Makes a payment request
+    Stripe->>+Bank: Forwards the payment request to the bank
+    Bank->>+Customer: Asks for authorization
+    Customer->>+Bank: Provides authorization
+    Bank->>+Stripe: Sends a response with payment details
+    Stripe->>+Merchant: Sends a notification of payment receipt
+    Merchant->>+Stripe: Confirms the payment
+    Stripe->>+Customer: Sends a confirmation of payment
+    Customer->>+Merchant: Receives goods or services
+        </pre
+    >
+    <pre id="diagram" class="mermaid2">
+mindmap
+  root((mindmap))
+    Origins
+      Long history
+      ::icon(fa fa-book)
+      Popularisation
+        British popular psychology author Tony Buzan
+    Research
+      On effectiveness<br/>and features
+      On Automatic creation
+        Uses
+            Creative techniques
+            Strategic planning
+            Argument mapping
+    Tools
+      Pen and paper
+      Mermaid
+    </pre>
+    <br />
+    <pre id="diagram" class="mermaid2">
+  example-diagram
     </pre>
 
     <!-- <div id="cy"></div> -->
@@ -96,18 +262,19 @@ flowchart LR
     <!-- <script src="./mermaid.js"></script> -->
 
     <script type="module">
-      import mindmap from '../../packages/mermaid-mindmap/src/detector';
+      // import mindmap from '../../packages/mermaid-mindmap/src/detector';
-      // import example from '../../packages/mermaid-example-diagram/src/detector';
+      import example from '../../packages/mermaid-example-diagram/src/detector';
       import mermaid from '../../packages/mermaid/src/mermaid';
-      await mermaid.registerExternalDiagrams([mindmap]);
+      await mermaid.registerExternalDiagrams([example]);
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };
       mermaid.initialize({
-        theme: 'default',
+        theme: 'forest',
         startOnLoad: true,
-        logLevel: 0,
+        logLevel: 5,
         flowchart: {
+          // defaultRenderer: 'elk',
           useMaxWidth: false,
           htmlLabels: true,
         },

cypress/platform/knsv3.html

@@ -1,81 +1,93 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">
   <head>
-    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
+    <meta charset="utf-8" />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <link
+    <title>Mindmap Mermaid Quick Test Page</title>
-      rel="stylesheet"
+    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
-      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"
-    />
     <style>
-      body {
+      div.mermaid {
-        /* background: rgb(221, 208, 208); */
+        /* font-family: 'trebuchet ms', verdana, arial; */
-        /* background:#333; */
+        font-family: 'Courier New', Courier, monospace !important;
-        font-family: 'Arial';
-        /* font-size: 18px !important; */
-      }
-      h1 {
-        color: grey;
-      }
-      .mermaid2 {
-        display: none;
-      }
-      .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;
-        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>
+    <h1>Mindmap diagram demo</h1>
-    <pre id="diagram" class="mermaid">
+    <pre class="mermaid">
-      graph TD
+        mindmap
-        A["test"] --"<p><style> * { display : none}</style>test</p>"--> B
+        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>
 
-    <!-- <div id="cy"></div> -->
+    <h2>Mindmap with root wrapping text and a shape</h2>
-    <!-- <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> -->
+    <pre class="mermaid">
-    <!-- <script src="./mermaid-example-diagram-detector.js"></script>    -->
+        mindmap
-    <!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script> -->
+            root[A root with a long text that wraps to keep the node size in check]
-    <!-- <script src="./mermaid.js"></script> -->
+    </pre>
 
     <script type="module">
-      import mindmap from '../../packages/mermaid-mindmap/src/detector';
+      // import mermaid from './mermaid.esm.mjs';
-      // import example from '../../packages/mermaid-example-diagram/src/detector';
       import mermaid from '../../packages/mermaid/src/mermaid';
-      await mermaid.registerExternalDiagrams([mindmap]);
+      // import mermaidMindmap from './mermaid-mindmap.esm.mjs';
+
+      // import mermaidMindmap from 'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-mindmap@9.3.0/+esm';
+      // await mermaid.registerExternalDiagrams([mermaidMindmap]);
+
+      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.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };
       mermaid.initialize({
-        theme: 'default',
+        theme: 'base',
         startOnLoad: true,
         logLevel: 0,
         flowchart: {
@@ -94,10 +106,6 @@
         console.error('In parse error:');
         console.error(err);
       };
-      // mermaid.test1('first_slow', 1200).then((r) => console.info(r));
-      // mermaid.test1('second_fast', 200).then((r) => console.info(r));
-      // mermaid.test1('third_fast', 200).then((r) => console.info(r));
-      // mermaid.test1('forth_slow', 1200).then((r) => console.info(r));
     </script>
   </body>
 </html>

cypress/platform/per.html

@@ -59,7 +59,7 @@ A-->B
     >
     <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 src="./packages/mermaid/dist/mermaid.esm.mjs"></script>
     <script>
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);

cypress/platform/regression/issue-1874.html

@@ -1,14 +1,4 @@
 <html>
-  <head>
-    <script src="http://localhost:9000/mermaid.js"></script>
-    <script>
-      mermaid.initialize({
-        theme: 'base',
-        themeVariables: {},
-        startOnLoad: true,
-      });
-    </script>
-  </head>
   <body>
     <h1>Example</h1>
     <pre class="mermaid">
@@ -26,4 +16,12 @@ sequenceDiagram
     Note left of Ernie: Cookies are good
     </pre>
   </body>
+  <script type="module">
+    import mermaid from '/mermaid.esm.mjs';
+    mermaid.initialize({
+      theme: 'base',
+      themeVariables: {},
+      startOnLoad: true,
+    });
+  </script>
 </html>

cypress/platform/render-after-error.html

@@ -9,19 +9,19 @@
   <body>
     <div id="graph"></div>
 
-    <script src="./mermaid.js"></script>
+    <script type="module">
-    <script>
+      import mermaid from './mermaid.esm.mjs';
-      mermaid.init({ startOnLoad: false });
+      await mermaid.initialize({ startOnLoad: false });
+      await mermaid.run();
 
-      mermaid.mermaidAPI.initialize({ securityLevel: 'strict' });
+      await mermaid.mermaidAPI.initialize({ securityLevel: 'strict' });
       try {
         console.log('rendering');
-        mermaid.mermaidAPI.render('graphDiv', `>`);
+        await mermaid.mermaidAPI.render('graphDiv', `>`);
       } catch (e) {}
 
-      mermaid.mermaidAPI.render('graphDiv', `graph LR\n a --> b`, (html) => {
+      const { svg } = await mermaid.mermaidAPI.render('graphDiv', `graph LR\n a --> b`);
-        document.getElementById('graph').innerHTML = html;
+      document.getElementById('graph').innerHTML = svg;
-      });
     </script>
   </body>
 </html>

cypress/platform/rerender.html

@@ -9,20 +9,20 @@
   <body>
     <div id="graph"></div>
 
-    <script src="./mermaid.js"></script>
+    <script type="module">
-    <script>
+      import mermaid from './mermaid.esm.mjs';
-      mermaid.init({ startOnLoad: false });
+      mermaid.initialize({ startOnLoad: false });
       mermaid.mermaidAPI.initialize();
 
-      rerender('XMas');
+      async function rerender(text) {
-
-      function rerender(text) {
         const graphText = `graph TD
         A[${text}] -->|Get money| B(Go shopping)`;
-        const graph = mermaid.mermaidAPI.render('id', graphText);
+        const { svg } = await mermaid.mermaidAPI.render('id', graphText);
-        console.log('\x1b[35m%s\x1b[0m', '>> graph', graph);
+        console.log('\x1b[35m%s\x1b[0m', '>> graph', svg);
-        document.getElementById('graph').innerHTML = graph;
+        document.getElementById('graph').innerHTML = svg;
       }
+      window.rerender = rerender;
+      await rerender('XMas');
     </script>
     <button id="rerender" onclick="rerender('Saturday')">Rerender</button>
   </body>

cypress/platform/showcase_base.html

@@ -313,8 +313,8 @@ requirementDiagram
       merge release
       </pre>
     </div>
-    <script src="./mermaid.js"></script>
+    <script type="module">
-    <script>
+      import mermaid from './mermaid.esm.mjs';
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };

cypress/platform/showcase_base_dark.html

@@ -308,8 +308,8 @@ gitGraph
    
       </pre>
     </div>
-    <script src="./mermaid.js"></script>
+    <script type="module">
-    <script>
+      import mermaid from './mermaid.esm.mjs';
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };

cypress/platform/showcase_dark.html

@@ -308,8 +308,8 @@ gitGraph
       merge release
       </pre>
     </div>
-    <script src="./mermaid.js"></script>
+    <script type="module">
-    <script>
+      import mermaid from './mermaid.esm.mjs';
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };

cypress/platform/showcase_default.html

@@ -301,8 +301,8 @@ requirementDiagram
       merge release
       </pre>
     </div>
-    <script src="./mermaid.js"></script>
+    <script type="module">
-    <script>
+      import mermaid from './mermaid.esm.mjs';
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };

cypress/platform/showcase_forest.html

@@ -305,8 +305,8 @@ requirementDiagram
       merge release
       </pre>
     </div>
-    <script src="./mermaid.js"></script>
+    <script type="module">
-    <script>
+      import mermaid from './mermaid.esm.mjs';
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };

cypress/platform/showcase_neutral.html

@@ -305,8 +305,8 @@ requirementDiagram
       merge release
       </pre>
     </div>
-    <script src="./mermaid.js"></script>
+    <script type="module">
-    <script>
+      import mermaid from './mermaid.esm.mjs';
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };

cypress/platform/sidv.html

@@ -1,14 +1,274 @@
 <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://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"
+    />
+    <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; */
+        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;
+        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>
-    <pre class="mermaid">
+    <pre id="diagram" class="mermaid">
-    none
+%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
-    hello world
+graph TB
+      a --> b
+      a --> c
+      b --> d
+      c --> d
     </pre>
-    <script src="./mermaid.js"></script>
+    <pre id="diagram" class="mermaid">
-    <script>
+flowchart-elk LR
+  subgraph A
+  a --> b
+  end
+  subgraph B
+  b
+  end
+    </pre>
+    <pre id="diagram" class="mermaid">
+%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
+flowchart TB
+  %% I could not figure out how to use double quotes in labels in Mermaid
+  subgraph ibm[IBM Espresso CPU]
+    core0[IBM PowerPC Broadway Core 0]
+    core1[IBM PowerPC Broadway Core 1]
+    core2[IBM PowerPC Broadway Core 2]
+
+    rom[16 KB ROM]
+
+    core0 --- core2
+
+    rom --> core2
+  end
+
+  subgraph amd[AMD Latte GPU]
+    mem[Memory & I/O Bridge]
+    dram[DRAM Controller]
+    edram[32 MB EDRAM MEM1]
+    rom[512 B SEEPROM]
+
+    sata[SATA IF]
+    exi[EXI]
+
+    subgraph gx[GX]
+      sram[3 MB 1T-SRAM]
+    end
+
+    radeon[AMD Radeon R7xx GX2]
+
+    mem --- gx
+    mem --- radeon
+
+    rom --- mem
+
+    mem --- sata
+    mem --- exi
+
+    dram --- sata
+    dram --- exi
+  end
+
+  ddr3[2 GB DDR3 RAM MEM2]
+
+  mem --- ddr3
+  dram --- ddr3
+  edram --- ddr3
+
+  core1 --- mem
+
+  exi --- rtc
+  rtc{{rtc}}
+</pre
+    >
+    <br />
+    <pre id="diagram" class="mermaid">
+flowchart TB
+  %% I could not figure out how to use double quotes in labels in Mermaid
+  subgraph ibm[IBM Espresso CPU]
+    core0[IBM PowerPC Broadway Core 0]
+    core1[IBM PowerPC Broadway Core 1]
+    core2[IBM PowerPC Broadway Core 2]
+
+    rom[16 KB ROM]
+
+    core0 --- core2
+
+    rom --> core2
+  end
+
+  subgraph amd[AMD Latte GPU]
+    mem[Memory & I/O Bridge]
+    dram[DRAM Controller]
+    edram[32 MB EDRAM MEM1]
+    rom[512 B SEEPROM]
+
+    sata[SATA IF]
+    exi[EXI]
+
+    subgraph gx[GX]
+      sram[3 MB 1T-SRAM]
+    end
+
+    radeon[AMD Radeon R7xx GX2]
+
+    mem --- gx
+    mem --- radeon
+
+    rom --- mem
+
+    mem --- sata
+    mem --- exi
+
+    dram --- sata
+    dram --- exi
+  end
+
+  ddr3[2 GB DDR3 RAM MEM2]
+
+  mem --- ddr3
+  dram --- ddr3
+  edram --- ddr3
+
+  core1 --- mem
+
+  exi --- rtc
+  rtc{{rtc}}
+</pre
+    >
+    <br />
+    &nbsp;
+    <pre id="diagram" class="mermaid2">
+      flowchart LR
+  B1 --be be--x B2
+  B1 --bo bo--o B3
+  subgraph Ugge
+      B2
+      B3
+      subgraph inner
+          B4
+          B5
+      end
+      subgraph inner2
+        subgraph deeper
+          C4
+          C5
+        end
+        C6
+      end
+
+      B4 --> C4
+
+      B3 -- X --> B4
+      B2 --> inner
+
+      C4 --> C5
+  end
+
+  subgraph outer
+      B6
+  end
+  B6 --> B5
+  </pre
+    >
+    <pre id="diagram" class="mermaid2">
+sequenceDiagram
+    Customer->>+Stripe: Makes a payment request
+    Stripe->>+Bank: Forwards the payment request to the bank
+    Bank->>+Customer: Asks for authorization
+    Customer->>+Bank: Provides authorization
+    Bank->>+Stripe: Sends a response with payment details
+    Stripe->>+Merchant: Sends a notification of payment receipt
+    Merchant->>+Stripe: Confirms the payment
+    Stripe->>+Customer: Sends a confirmation of payment
+    Customer->>+Merchant: Receives goods or services
+        </pre
+    >
+    <pre id="diagram" class="mermaid2">
+      gantt
+        title Style today marker (vertical line should be 5px wide and half-transparent blue)
+        dateFormat YYYY-MM-DD
+        axisFormat %d
+        todayMarker stroke-width:5px,stroke:#00f,opacity:0.5
+        section Section1
+        Today: 1, -1h
+    </pre>
+
+    <script type="module">
+      import mermaid from '../../packages/mermaid/src/mermaid';
+      mermaid.parseError = function (err, hash) {
+        // console.error('Mermaid error: ', err);
+      };
       mermaid.initialize({
-        logLevel: 1,
+        // theme: 'forest',
+        startOnLoad: true,
+        logLevel: 0,
+        flowchart: {
+          // defaultRenderer: 'elk',
+          useMaxWidth: false,
+          htmlLabels: true,
+        },
+        gantt: {
+          useMaxWidth: false,
+        },
+        useMaxWidth: false,
       });
+      function callback() {
+        alert('It worked');
+      }
+      mermaid.parseError = function (err, hash) {
+        console.error('In parse error:');
+        console.error(err);
+      };
+      // mermaid.test1('first_slow', 1200).then((r) => console.info(r));
+      // mermaid.test1('second_fast', 200).then((r) => console.info(r));
+      // mermaid.test1('third_fast', 200).then((r) => console.info(r));
+      // mermaid.test1('forth_slow', 1200).then((r) => console.info(r));
     </script>
   </body>
 </html>

cypress/platform/subgraph.html

@@ -34,8 +34,8 @@
       9e122290-->82072290_1ec3_e711_8c5a_005056ad0002
       style 9e122290 fill:#F99,stroke-width:2px,stroke:#F0F
     </pre>
-    <script src="./mermaid.js"></script>
+    <script type="module">
-    <script>
+      import mermaid from './mermaid.esm.mjs';
       function showFullFirstSquad(elemName) {
         console.log('show ' + elemName);
       }

cypress/platform/theme-directives.html

@@ -120,8 +120,8 @@
       </div>
     </div>
 
-    <script src="./mermaid.js"></script>
+    <script type="module">
-    <script>
+      import mermaid from './mermaid.esm.mjs';
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };

cypress/platform/user-journey.html

@@ -25,8 +25,8 @@
           Get into car:4: Dad, Mum, Child 1, Child 2
           Drive home:3: Dad
     </pre>
-    <script src="./mermaid.js"></script>
+    <script type="module">
-    <script>
+      import mermaid from './mermaid.esm.mjs';
       mermaid.initialize({
         theme: 'forest',
         logLevel: 3,

cypress/platform/vertices.html

@@ -26,8 +26,8 @@
       A --> B --> C
     </pre>
 
-    <script src="./mermaid.js"></script>
+    <script type="module">
-    <script>
+      import mermaid from './mermaid.esm.mjs';
       function showFullFirstSquad(elemName) {
         console.log('show ' + elemName);
       }

cypress/platform/viewer.js

@@ -1,10 +1,17 @@
 import mermaid2 from '../../packages/mermaid/src/mermaid';
-import mindmap from '../../packages/mermaid-mindmap/src/detector';
+import externalExample from '../../packages/mermaid-example-diagram/src/detector';
 
 function b64ToUtf8(str) {
   return decodeURIComponent(escape(window.atob(str)));
 }
 
+// Adds a rendered flag to window when rendering is done, so cypress can wait for it.
+function markRendered() {
+  if (window.Cypress) {
+    window.rendered = true;
+  }
+}
+
 /**
  * ##contentLoaded Callback function that is called when page is loaded. This functions fetches
  * configuration for mermaid rendering and calls init for rendering the mermaid diagrams on the
@@ -37,9 +44,10 @@ const contentLoaded = async function () {
       document.getElementsByTagName('body')[0].appendChild(div);
     }
 
-    await mermaid2.registerExternalDiagrams([mindmap]);
+    await mermaid2.registerExternalDiagrams([externalExample]);
     mermaid2.initialize(graphObj.mermaid);
-    mermaid2.init();
+    await mermaid2.init();
+    markRendered();
   }
 };
 
@@ -67,7 +75,7 @@ function merge(current, update) {
   return current;
 }
 
-const contentLoadedApi = function () {
+const contentLoadedApi = async function () {
   let pos = document.location.href.indexOf('?graph=');
   if (pos > 0) {
     pos = pos + 7;
@@ -94,40 +102,28 @@ const contentLoadedApi = function () {
       mermaid2.initialize(cnf);
 
       for (let i = 0; i < numCodes; i++) {
-        mermaid2.render(
+        const { svg, bindFunctions } = await mermaid2.render(
           'newid' + i,
           graphObj.code[i],
-          (svgCode, bindFunctions) => {
-            div.innerHTML = svgCode;
-
-            bindFunctions(div);
-          },
           divs[i]
         );
+        div.innerHTML = svg;
+        bindFunctions(div);
       }
     } else {
       const div = document.createElement('div');
       div.id = 'block';
       div.className = 'mermaid';
-      // div.innerHTML = graphObj.code
       console.warn('graphObj.mermaid', graphObj.mermaid);
       document.getElementsByTagName('body')[0].appendChild(div);
       mermaid2.initialize(graphObj.mermaid);
 
-      mermaid2.render(
+      const { svg, bindFunctions } = await mermaid2.render('newid', graphObj.code, div);
-        'newid',
+      div.innerHTML = svg;
-        graphObj.code,
+      bindFunctions(div);
-        (svgCode, bindFunctions) => {
-          div.innerHTML = svgCode;
-
-          if (bindFunctions) {
-            bindFunctions(div);
-          }
-        },
-        div
-      );
     }
   }
+  markRendered();
 };
 
 if (typeof document !== 'undefined') {
@@ -139,10 +135,10 @@ if (typeof document !== 'undefined') {
     function () {
       if (this.location.href.match('xss.html')) {
         this.console.log('Using api');
-        contentLoadedApi();
+        void contentLoadedApi();
       } else {
         this.console.log('Not using api');
-        contentLoaded();
+        void contentLoaded();
       }
     },
     false

cypress/platform/xss.html

@@ -33,8 +33,8 @@
     </script>
   </head>
   <body>
-    <script src="./mermaid.js"></script>
+    <script type="module">
-    <script>
+      import mermaid from './mermaid.esm.mjs';
       mermaid.initialize({
         startOnLoad: false,
         useMaxWidth: true,

cypress/platform/xss10.html

@@ -49,8 +49,8 @@
       <div id="diagram" class="mermaid"></div>
       <div id="res" class=""></div>
     </div>
-    <script src="./mermaid.js"></script>
+    <script type="module">
-    <script>
+      import mermaid from './mermaid.esm.mjs';
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };
@@ -104,10 +104,9 @@
       //  diagram += "=xssAttack()> --> B";
       console.log(diagram);
       // document.querySelector('#diagram').innerHTML = diagram;
-      mermaid.render('diagram', diagram, (res) => {
+      const { svg } = await mermaid.render('diagram', diagram);
-        console.log(res);
+      console.log(res);
-        document.querySelector('#res').innerHTML = res;
+      document.querySelector('#res').innerHTML = svg;
-      });
     </script>
   </body>
 </html>

cypress/platform/xss11.html

@@ -49,8 +49,8 @@
       <div id="diagram" class="mermaid"></div>
       <div id="res" class=""></div>
     </div>
-    <script src="./mermaid.js"></script>
+    <script type="module">
-    <script>
+      import mermaid from './mermaid.esm.mjs';
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };
@@ -102,10 +102,9 @@
       //  diagram += "=xssAttack()> --> B";
       console.log(diagram);
       // document.querySelector('#diagram').innerHTML = diagram;
-      mermaid.render('diagram', diagram, (res) => {
+      const { svg } = await mermaid.render('diagram', diagram);
-        console.log(res);
+      console.log(res);
-        document.querySelector('#res').innerHTML = res;
+      document.querySelector('#res').innerHTML = svg;
-      });
     </script>
   </body>
 </html>

cypress/platform/xss12.html

@@ -49,8 +49,8 @@
       <div id="diagram" class="mermaid"></div>
       <div id="res" class=""></div>
     </div>
-    <script src="./mermaid.js"></script>
+    <script type="module">
-    <script>
+      import mermaid from './mermaid.esm.mjs';
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };
@@ -102,10 +102,9 @@
       //  diagram += "=xssAttack()> --> B";
       console.log(diagram);
       // document.querySelector('#diagram').innerHTML = diagram;
-      mermaid.render('diagram', diagram, (res) => {
+      const { svg } = await mermaid.render('diagram', diagram);
-        console.log(res);
+      console.log(res);
-        document.querySelector('#res').innerHTML = res;
+      document.querySelector('#res').innerHTML = svg;
-      });
     </script>
   </body>
 </html>

cypress/platform/xss13.html

@@ -49,8 +49,8 @@
       <div id="diagram" class="mermaid"></div>
       <div id="res" class=""></div>
     </div>
-    <script src="./mermaid.js"></script>
+    <script type="module">
-    <script>
+      import mermaid from './mermaid.esm.mjs';
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };
@@ -102,10 +102,9 @@
       //  diagram += "=xssAttack()> --> B";
       console.log(diagram);
       // document.querySelector('#diagram').innerHTML = diagram;
-      mermaid.render('diagram', diagram, (res) => {
+      const { svg } = await mermaid.render('diagram', diagram);
-        console.log(res);
+      console.log(res);
-        document.querySelector('#res').innerHTML = res;
+      document.querySelector('#res').innerHTML = svg;
-      });
     </script>
   </body>
 </html>

cypress/platform/xss14.html

@@ -49,8 +49,8 @@
       <div id="diagram" class="mermaid"></div>
       <div id="res" class=""></div>
     </div>
-    <script src="./mermaid.js"></script>
+    <script type="module">
-    <script>
+      import mermaid from './mermaid.esm.mjs';
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };
@@ -104,10 +104,9 @@
       //  diagram += "=xssAttack()> --> B";
       console.log(diagram);
       // document.querySelector('#diagram').innerHTML = diagram;
-      mermaid.render('diagram', diagram, (res) => {
+      const { svg } = await mermaid.render('diagram', diagram);
-        console.log(res);
+      console.log(res);
-        document.querySelector('#res').innerHTML = res;
+      document.querySelector('#res').innerHTML = svg;
-      });
     </script>
   </body>
 </html>

cypress/platform/xss15.html

@@ -49,8 +49,8 @@
       <div id="diagram" class="mermaid"></div>
       <div id="res" class=""></div>
     </div>
-    <script src="./mermaid.js"></script>
+    <script type="module">
-    <script>
+      import mermaid from './mermaid.esm.mjs';
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };
@@ -103,10 +103,9 @@
       //  diagram += "=xssAttack()> --> B";
       console.log(diagram);
       // document.querySelector('#diagram').innerHTML = diagram;
-      mermaid.render('diagram', diagram, (res) => {
+      const { svg } = await mermaid.render('diagram', diagram);
-        console.log(res);
+      console.log(res);
-        document.querySelector('#res').innerHTML = res;
+      document.querySelector('#res').innerHTML = svg;
-      });
     </script>
   </body>
 </html>

cypress/platform/xss16.html

@@ -49,8 +49,8 @@
       <div id="diagram" class="mermaid"></div>
       <div id="res" class=""></div>
     </div>
-    <script src="./mermaid.js"></script>
+    <script type="module">
-    <script>
+      import mermaid from './mermaid.esm.mjs';
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };
@@ -102,10 +102,9 @@
       // diagram += '//via.placeholder.com/64\' width=64 />"]';
       // console.log(diagram);
       // document.querySelector('#diagram').innerHTML = diagram;
-      mermaid.render('diagram', diagram, (res) => {
+      const { svg } = await mermaid.render('diagram', diagram);
-        console.log(res);
+      console.log(res);
-        document.querySelector('#res').innerHTML = res;
+      document.querySelector('#res').innerHTML = svg;
-      });
     </script>
   </body>
 </html>

cypress/platform/xss17.html

@@ -49,8 +49,8 @@
       <div id="diagram" class="mermaid"></div>
       <div id="res" class=""></div>
     </div>
-    <script src="./mermaid.js"></script>
+    <script type="module">
-    <script>
+      import mermaid from './mermaid.esm.mjs';
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };
@@ -102,10 +102,9 @@
       // diagram += '//via.placeholder.com/64\' width=64 />"]';
       // console.log(diagram);
       // document.querySelector('#diagram').innerHTML = diagram;
-      mermaid.render('diagram', diagram, (res) => {
+      const { svg } = await mermaid.render('diagram', diagram);
-        console.log(res);
+      console.log(res);
-        document.querySelector('#res').innerHTML = res;
+      document.querySelector('#res').innerHTML = svg;
-      });
     </script>
   </body>
 </html>

cypress/platform/xss18.html

@@ -49,8 +49,8 @@
       <div id="diagram" class="mermaid"></div>
       <div id="res" class=""></div>
     </div>
-    <script src="./mermaid.js"></script>
+    <script type="module">
-    <script>
+      import mermaid from './mermaid.esm.mjs';
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };
@@ -101,10 +101,9 @@
       // diagram += '//via.placeholder.com/64\' width=64 />"]';
       // console.log(diagram);
       // document.querySelector('#diagram').innerHTML = diagram;
-      mermaid.render('diagram', diagram, (res) => {
+      const { svg } = await mermaid.render('diagram', diagram);
-        console.log(res);
+      console.log(res);
-        document.querySelector('#res').innerHTML = res;
+      document.querySelector('#res').innerHTML = svg;
-      });
     </script>
   </body>
 </html>

cypress/platform/xss19.html

@@ -49,8 +49,8 @@
       <div id="diagram" class="mermaid"></div>
       <div id="res" class=""></div>
     </div>
-    <script src="./mermaid.js"></script>
+    <script type="module">
-    <script>
+      import mermaid from './mermaid.esm.mjs';
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };
@@ -103,10 +103,9 @@ class Shape{
       // diagram += '//via.placeholder.com/64\' width=64 />"]';
       // console.log(diagram);
       // document.querySelector('#diagram').innerHTML = diagram;
-      mermaid.render('diagram', diagram, (res) => {
+      const { svg } = await mermaid.render('diagram', diagram);
-        console.log(res);
+      console.log(res);
-        document.querySelector('#res').innerHTML = res;
+      document.querySelector('#res').innerHTML = svg;
-      });
     </script>
   </body>
 </html>

cypress/platform/xss2.html

@@ -48,8 +48,8 @@
       Alice->>Bob: Hi Bob
       Bob->>Alice: Hi Alice
     </pre>
-    <script src="./mermaid.js"></script>
+    <script type="module">
-    <script>
+      import mermaid from './mermaid.esm.mjs';
       mermaid.initialize({
         startOnLoad: true,
         useMaxWidth: true,
@@ -59,7 +59,7 @@
       const handler = setInterval(() => {
         cnt++;
         a = {};
-        if (typeof a.polluted !== 'undefined') {
+        if (a.polluted !== undefined) {
           clearInterval(handler);
           xssAttack();
         }

cypress/platform/xss20.html

@@ -49,8 +49,8 @@
       <div id="diagram" class="mermaid"></div>
       <div id="res" class=""></div>
     </div>
-    <script src="./mermaid.js"></script>
+    <script type="module">
-    <script>
+      import mermaid from './mermaid.esm.mjs';
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };
@@ -101,10 +101,8 @@ A --> B["<a href='javasc`;
       diagram += `ript#colon;xssAttack()'>AAA</a>"]`;
       // diagram += '//via.placeholder.com/64\' width=64 />"]';
       // document.querySelector('#diagram').innerHTML = diagram;
-      mermaid.render('diagram', diagram, (res) => {
+      const { svg } = await mermaid.render('diagram', diagram);
-        // console.log(res);
+      document.querySelector('#res').innerHTML = svg;
-        document.querySelector('#res').innerHTML = res;
-      });
     </script>
   </body>
 </html>

cypress/platform/xss21.html

@@ -49,8 +49,8 @@
       <div id="diagram" class="mermaid"></div>
       <div id="res" class=""></div>
     </div>
-    <script src="./mermaid.js"></script>
+    <script type="module">
-    <script>
+      import mermaid from './mermaid.esm.mjs';
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };
@@ -97,14 +97,12 @@
       // A --> B["&lt;a href='javascript`;
       // diagram += `ript#colon;xssAttack()'&gt;AAA&lt;/a&gt;"]`;
       let diagram = `  graph TD
-A --> B["<a href='javasc`;
+      A --> B["<a href='javasc`;
       diagram += `ript#9;t#colon;xssAttack()'>AAA</a>"]`;
       // diagram += '//via.placeholder.com/64\' width=64 />"]';
       // document.querySelector('#diagram').innerHTML = diagram;
-      mermaid.render('diagram', diagram, (res) => {
+      const { svg } = await mermaid.render('diagram', diagram);
-        console.log(res);
+      document.querySelector('#res').innerHTML = svg;
-        document.querySelector('#res').innerHTML = res;
-      });
     </script>
   </body>
 </html>

cypress/platform/xss22.html

@@ -8,8 +8,8 @@
   graph TD
 A --> B["<a href='javascript#9;t#colon;alert(document.location)'>AAA</a>"]
     </pre>
-    <script src="./mermaid.js"></script>
+    <script type="module">
-    <script>
+      import mermaid from './mermaid.esm.mjs';
       mermaid.initialize({ startOnLoad: true });
     </script>
   </body>

cypress/platform/xss3.html

@@ -36,8 +36,8 @@
       graph LR
           A --> B
     </pre>
-    <script src="./mermaid.js"></script>
+    <script type="module">
-    <script>
+      import mermaid from './mermaid.esm.mjs';
       mermaid.initialize({
         startOnLoad: true,
         useMaxWidth: true,

cypress/platform/xss4.html

@@ -49,8 +49,8 @@
       <div id="diagram" class="mermaid"></div>
       <div id="res" class=""></div>
     </div>
-    <script src="./mermaid.js"></script>
+    <script type="module">
-    <script>
+      import mermaid from './mermaid.esm.mjs';
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };
@@ -95,9 +95,8 @@
 
       console.log(diagram);
       // document.querySelector('#diagram').innerHTML = diagram;
-      mermaid.render('diagram', diagram, (res) => {
+      const { svg } = await mermaid.render('diagram', diagram);
-        document.querySelector('#res').innerHTML = res;
+      document.querySelector('#res').innerHTML = svg;
-      });
     </script>
   </body>
 </html>

cypress/platform/xss5.html

@@ -49,8 +49,8 @@
       <div id="diagram" class="mermaid"></div>
       <div id="res" class=""></div>
     </div>
-    <script src="./mermaid.js"></script>
+    <script type="module">
-    <script>
+      import mermaid from './mermaid.esm.mjs';
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };
@@ -99,10 +99,9 @@
 
       console.log(diagram);
       // document.querySelector('#diagram').innerHTML = diagram;
-      mermaid.render('diagram', diagram, (res) => {
+      const { svg } = await mermaid.render('diagram', diagram);
-        console.log(res);
+      console.log(res);
-        document.querySelector('#res').innerHTML = res;
+      document.querySelector('#res').innerHTML = svg;
-      });
     </script>
   </body>
 </html>

cypress/platform/xss6.html

@@ -49,8 +49,8 @@
       <div id="diagram" class="mermaid"></div>
       <div id="res" class=""></div>
     </div>
-    <script src="./mermaid.js"></script>
+    <script type="module">
-    <script>
+      import mermaid from './mermaid.esm.mjs';
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };
@@ -97,10 +97,9 @@
       // diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
       console.log(diagram);
       // document.querySelector('#diagram').innerHTML = diagram;
-      mermaid.render('diagram', diagram, (res) => {
+      const { svg } = await mermaid.render('diagram', diagram);
-        console.log(res);
+      console.log(res);
-        document.querySelector('#res').innerHTML = res;
+      document.querySelector('#res').innerHTML = svg;
-      });
     </script>
   </body>
 </html>

cypress/platform/xss7.html

@@ -49,8 +49,8 @@
       <div id="diagram" class="mermaid"></div>
       <div id="res" class=""></div>
     </div>
-    <script src="./mermaid.js"></script>
+    <script type="module">
-    <script>
+      import mermaid from './mermaid.esm.mjs';
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };
@@ -99,10 +99,9 @@
       // diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
       console.log(diagram);
       // document.querySelector('#diagram').innerHTML = diagram;
-      mermaid.render('diagram', diagram, (res) => {
+      const { svg } = await mermaid.render('diagram', diagram);
-        console.log(res);
+      console.log(res);
-        document.querySelector('#res').innerHTML = res;
+      document.querySelector('#res').innerHTML = svg;
-      });
     </script>
   </body>
 </html>

cypress/platform/xss8.html

@@ -49,8 +49,8 @@
       <div id="diagram" class="mermaid"></div>
       <div id="res" class=""></div>
     </div>
-    <script src="./mermaid.js"></script>
+    <script type="module">
-    <script>
+      import mermaid from './mermaid.esm.mjs';
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };
@@ -98,10 +98,9 @@
       // diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
       console.log(diagram);
       // document.querySelector('#diagram').innerHTML = diagram;
-      mermaid.render('diagram', diagram, (res) => {
+      const { svg } = await mermaid.render('diagram', diagram);
-        console.log(res);
+      console.log(res);
-        document.querySelector('#res').innerHTML = res;
+      document.querySelector('#res').innerHTML = svg;
-      });
     </script>
   </body>
 </html>

cypress/platform/xss9.html

@@ -49,8 +49,8 @@
       <div id="diagram" class="mermaid"></div>
       <div id="res" class=""></div>
     </div>
-    <script src="./mermaid.js"></script>
+    <script type="module">
-    <script>
+      import mermaid from './mermaid.esm.mjs';
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };
@@ -98,10 +98,9 @@
       // diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
       console.log(diagram);
       // document.querySelector('#diagram').innerHTML = diagram;
-      mermaid.render('diagram', diagram, (res) => {
+      const { svg } = await mermaid.render('diagram', diagram);
-        console.log(res);
+      console.log(res);
-        document.querySelector('#res').innerHTML = res;
+      document.querySelector('#res').innerHTML = svg;
-      });
     </script>
   </body>
 </html>

demos/c4context.html

@@ -217,8 +217,8 @@
      </pre>
     <hr />
 
-    <script src="./mermaid.js"></script>
+    <script type="module">
-    <script>
+      import mermaid from './mermaid.esm.mjs';
       const ALLOWED_TAGS = [
         'a',
         'b',
@@ -273,8 +273,7 @@
         },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
       });
-    </script>
+
-    <script>
       function testClick(nodeId) {
         console.log('clicked', nodeId);
         let originalBgColor = document.querySelector('body').style.backgroundColor;
@@ -283,21 +282,18 @@
           document.querySelector('body').style.backgroundColor = originalBgColor;
         }, 100);
       }
-    </script>
+
-    <script>
+      const testLineEndings = async (test, input) => {
-      const testLineEndings = (test, input) => {
         try {
-          mermaid.render(test, input, () => {
+          await 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');
+      await testLineEndings('CR', 'graph LR\rsubgraph CR\rA --> B\rend');
-      testLineEndings('LF', 'graph LR\nsubgraph LF\nA --> B\nend');
+      await testLineEndings('LF', 'graph LR\nsubgraph LF\nA --> B\nend');
-      testLineEndings('CRLF', 'graph LR\r\nsubgraph CRLF\r\nA --> B\r\nend');
+      await testLineEndings('CRLF', 'graph LR\r\nsubgraph CRLF\r\nA --> B\r\nend');
     </script>
   </body>
 </html>

demos/classchart.html

@@ -17,10 +17,10 @@
     <h1>Class diagram demos</h1>
 
     <pre class="mermaid">
----
+    ---
-title: Demo Class Diagram
+    title: Demo Class Diagram
----
+    ---
-		classDiagram
+    classDiagram
       accTitle: Demo Class Diagram
       accDescr: This class diagram show the abstract Animal class, and 3 classes that inherit from it: Duck, Fish, and Zebra.
 
@@ -138,11 +138,24 @@ title: Demo Class Diagram
     Pineapple : -int leafCount()
     Pineapple : -int spikeCount()
     </pre>
-
     <hr />
 
-    <script src="./mermaid.js"></script>
+    <pre class="mermaid">
-    <script>
+    classDiagram
+      class Person {
+        +Id : Guid
+        +FirstName : string
+        +LastName : string
+        -privateProperty : string
+        #ProtectedProperty : string
+        ~InternalProperty : string
+        ~AnotherInternalProperty : List~List~string~~
+      }
+    </pre>
+    <hr />
+
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
       mermaid.initialize({
         theme: 'default',
         // themeCSS: '.node rect { fill: red; }',

demos/dataflowchart.html

@@ -34,8 +34,8 @@
       noSide[|borders:no| stroke no side ];
     </pre>
 
-    <script src="./mermaid.js"></script>
+    <script type="module">
-    <script>
+      import mermaid from './mermaid.esm.mjs';
       mermaid.initialize({
         theme: 'forest',
         logLevel: 3,

demos/er.html

@@ -19,47 +19,98 @@
 
   <body>
     <pre class="mermaid">
+      ---
+      title: This is a title
+      ---
+      erDiagram
+        %% title This is a title
+        %% accDescription Test a description
 
----
+        "Person . CUSTOMER"||--o{ ORDER : places
-title: This is a title
----
-erDiagram
-  %% title This is a title
-  %% accDescription Test a description
 
-  "Person . CUSTOMER"||--o{ ORDER : places
+        ORDER ||--|{ "€£LINE_ITEM ¥" : contains
 
-  ORDER ||--|{ "€£LINE_ITEM ¥" : contains
+        "Person . CUSTOMER" }|..|{ "Address//StreetAddress::[DELIVERY ADDRESS]" : uses
 
-  "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(5) postal_code
+          string country
+        }
 
-  "Address//StreetAddress::[DELIVERY ADDRESS]" {
+        "a_~`!@#$^&*()-_=+[]{}|/;:'.?¡⁄™€£‹¢›∞fi§‡•°ª·º‚≠±œŒ∑„®†ˇ¥Á¨ˆˆØπ∏“«»åÅßÍ∂΃ϩ˙Ó∆Ô˚¬Ò…ÚæÆΩ¸≈π˛çÇ√◊∫ı˜µÂ≤¯≥˘÷¿" {
-      int customerID FK
+          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"
-      string line1 "this is the first address line comment"
+        }
-      string line2
-      string city
-      string region
-      string state
-      string postal_code
-      string country
-      }
 
-      "a_~`!@#$^&*()-_=+[]{}|/;:'.?¡⁄™€£‹¢›∞fi§‡•°ª·º‚≠±œŒ∑„®†ˇ¥Á¨ˆˆØπ∏“«»åÅßÍ∂΃ϩ˙Ó∆Ô˚¬Ò…ÚæÆΩ¸≈π˛çÇ√◊∫ı˜µÂ≤¯≥˘÷¿" {
+        "€£LINE_ITEM ¥" {
-        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"
+          int orderID FK
-      }
+          int currencyId FK
+          number price
+          number quantity
+          number adjustment
+          number final_price
+        }
+    </pre>
+    <hr />
 
-      "€£LINE_ITEM ¥" {
+    <pre class="mermaid">
-        int orderID FK
+    erDiagram
-        int currencyId FK
+      "HOSPITAL" {
-        number price
+        int id PK
-        number quantity
+        int doctor_id FK
-        number adjustment
+        string address UK
-        number final_price
+        string name
+        string phone_number
+        string fax_number
       }
     </pre>
+    <hr />
+
+    <pre class="mermaid">
+      erDiagram
+        "HOSPITAL" {
+          int id PK
+          int doctor_id PK, FK
+          string address UK
+          string name
+          string phone_number
+          string fax_number
+        }
+      </pre
+    >
+    <hr />
+
+    <pre class="mermaid">
+      erDiagram
+        CAR ||--o{ NAMED-DRIVER : allows
+        CAR {
+          string registrationNumber PK
+          string make
+          string model
+          string[] parts
+        }
+        PERSON ||--o{ NAMED-DRIVER : is
+        PERSON {
+          string driversLicense PK "The license #"
+          string(99) firstName "Only 99 characters are allowed"
+          string lastName
+          string phone UK
+          int age
+        }
+        NAMED-DRIVER {
+          string carRegistrationNumber PK, FK
+          string driverLicence PK,FK
+        }
+        MANUFACTURER only one to zero or more CAR : makes
+    </pre>
 
-    <script src="./mermaid.js"></script>
     <script type="module">
+      import mermaid from './mermaid.esm.mjs';
       mermaid.initialize({
         theme: 'default',
 

demos/flowchart.html

@@ -17,9 +17,9 @@
     <h2>Sample 1</h2>
     <h3>graph</h3>
     <pre class="mermaid">
----
+    ---
-title: This is a complicated flow
+    title: This is a complicated flow
----
+    ---
     graph LR
       accTitle: This is a complicated flow
       accDescr: This is the descriptoin for the complicated flow.
@@ -224,9 +224,9 @@ title: This is a complicated flow
     <h2>Sample 2</h2>
     <h3>graph</h3>
     <pre class="mermaid">
----
+    ---
-title: What to buy
+    title: What to buy
----
+    ---
     graph TD
       accTitle: What to buy
       accDescr: Options of what to buy with Christmas money
@@ -1507,8 +1507,8 @@ title: What to buy
 
     <h1 id="link-clicked">Anchor for "link-clicked" test</h1>
 
-    <script src="./mermaid.js"></script>
+    <script type="module">
-    <script>
+      import mermaid from './mermaid.esm.mjs';
       mermaid.initialize({
         theme: 'forest',
         logLevel: 3,

demos/gantt.html

@@ -182,8 +182,8 @@
       }
     </script>
 
-    <script src="./mermaid.js"></script>
+    <script type="module">
-    <script>
+      import mermaid from './mermaid.esm.mjs';
       mermaid.initialize({
         logLevel: 3,
         securityLevel: 'loose',