chore: Replace moment with dayjs

.eslintignore

@@ -5,4 +5,3 @@ cypress.config.js
 cypress/plugins/index.js
 coverage
 *.json
-node_modules

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -50,11 +50,19 @@ body:
     attributes:
       label: Setup
       description: |-
-        Please fill out the info below.
+        Please fill out the below info.
-        Note that you only need to fill out the relevant section
+        Note that you only need to fill out one and not both sections.
       value: |-
-        - Mermaid version: 
+        **Desktop**
+
+        - OS and Version: [Windows, Linux, Mac, ...]
         - Browser and Version: [Chrome, Edge, Firefox]
+
+        **Smartphone**
+
+        - Device: [Samsung, iPhone, ...]
+        - OS and Version: [Android, iOS, ...]
+        - Browser and Version: [Chrome, Safari, ...]
   - type: textarea
     attributes:
       label: Additional Context

.github/ISSUE_TEMPLATE/config.yml

@@ -1,4 +1,4 @@
-blank_issues_enabled: true
+blank_issues_enabled: false
 contact_links:
   - name: GitHub Discussions
     url: https://github.com/mermaid-js/mermaid/discussions

.github/ISSUE_TEMPLATE/diagram_proposal.yml

@@ -3,7 +3,6 @@ description: Suggest a new Diagram Type to add to Mermaid.
 labels:
   - 'Status: Triage'
   - 'Type: Enhancement'
-  - 'Type: New Diagram'
 
 body:
   - type: markdown
@@ -18,14 +17,6 @@ body:
         - Use a clear and concise title
         - Fill out the text fields with as much detail as possible.
         - Never be shy to give us screenshots and/or code samples. It will help!
-
-        ## Example issues
-
-        Refer to the discussions here to get an idea of how the diagram syntax is created.
-
-        - https://github.com/mermaid-js/mermaid/issues/4269
-        - https://github.com/mermaid-js/mermaid/issues/4282
-
   - type: textarea
     attributes:
       label: Proposal
@@ -44,17 +35,8 @@ body:
       description: If applicable, add screenshots to show possible examples of how the diagram may look like.
   - type: textarea
     attributes:
-      label: Syntax
+      label: Code Sample
       description: |-
-        If possible, include a syntax which could be used to write the diagram.
+        If applicable, add a code sample for how to implement this new diagram.
-        Try to add one or two examples of valid use-cases here.
+        The text will automatically be rendered as JavaScript code.
-  - type: dropdown
+      render: javascript
-    id: implementation
-    attributes:
-      label: Implementation
-      description: |-
-        Would you like to implement this yourself, or is it a proposal for the community?
-        If there is no corresponding PR from your side after 30 days, the diagram will be open for everyone to implement.
-      options:
-        - I will try and implement it myself.
-        - This is a proposal which I'd love to see built into mermaid by the wonderful community.

.github/workflows/build-docs.yml

@@ -1,29 +0,0 @@
-name: Build Vitepress docs
-
-on:
-  pull_request:
-
-permissions:
-  contents: read
-
-jobs:
-  # Build job
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-
-      - uses: pnpm/action-setup@v2
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v3
-        with:
-          cache: pnpm
-          node-version: 18
-
-      - name: Install Packages
-        run: pnpm install --frozen-lockfile
-
-      - name: Run Build
-        run: pnpm --filter mermaid run docs:build:vitepress

.github/workflows/e2e-applitools.yml

@@ -38,8 +38,15 @@ jobs:
       - name: Setup Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v3
         with:
+          cache: pnpm
           node-version: ${{ matrix.node-version }}
 
+      - name: Install Packages
+        run: |
+          pnpm install --frozen-lockfile
+        env:
+          CYPRESS_CACHE_FOLDER: .cache/Cypress
+
       - if: ${{ env.USE_APPLI }}
         name: Notify applitools of new batch
         # Copied from docs https://applitools.com/docs/topics/integrations/github-integration-ci-setup.html
@@ -47,22 +54,19 @@ jobs:
         env:
           # e.g. mermaid-js/mermaid/my-branch
           APPLITOOLS_BRANCH: ${{ github.repository }}/${{ github.ref_name }}
-          APPLITOOLS_PARENT_BRANCH: ${{ github.event.inputs.parent_branch }}
+          APPLITOOLS_PARENT_BRANCH: ${{ github.inputs.parent_branch }}
           APPLITOOLS_API_KEY: ${{ secrets.APPLITOOLS_API_KEY }}
           APPLITOOLS_SERVER_URL: 'https://eyesapi.applitools.com'
 
-      - name: Cypress run
+      - name: Run E2E Tests
-        uses: cypress-io/github-action@v4
+        run: pnpm run e2e
-        id: cypress
-        with:
-          start: pnpm run dev
-          wait-on: 'http://localhost:9000'
         env:
+          CYPRESS_CACHE_FOLDER: .cache/Cypress
           # Mermaid applitools.config.js uses this to pick batch name.
           APPLI_BRANCH: ${{ github.ref_name }}
           APPLITOOLS_BATCH_ID: ${{ github.sha }}
           # e.g. mermaid-js/mermaid/my-branch
           APPLITOOLS_BRANCH: ${{ github.repository }}/${{ github.ref_name }}
-          APPLITOOLS_PARENT_BRANCH: ${{ github.event.inputs.parent_branch }}
+          APPLITOOLS_PARENT_BRANCH: ${{ github.inputs.parent_branch }}
           APPLITOOLS_API_KEY: ${{ secrets.APPLITOOLS_API_KEY }}
           APPLITOOLS_SERVER_URL: 'https://eyesapi.applitools.com'

.github/workflows/e2e.yml

@@ -21,7 +21,11 @@ jobs:
 
       - name: Setup Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v3
+        # Need to skip setup if Cypress run is skipped, otherwise an error
+        # is thrown since the pnpm cache step fails
+        if: ${{ ( env.CYPRESS_RECORD_KEY != '' ) || ( matrix.containers == 1 ) }}
         with:
+          cache: pnpm
           node-version: ${{ matrix.node-version }}
 
       # Install NPM dependencies, cache them correctly

.github/workflows/link-checker.yml

@@ -14,7 +14,6 @@ on:
   pull_request:
     branches:
       - master
-  workflow_dispatch:
   schedule:
     # * is a special character in YAML so you have to quote this string
     - cron: '30 8 * * *'
@@ -36,16 +35,9 @@ jobs:
           restore-keys: cache-lychee-
 
       - name: Link Checker
-        uses: lycheeverse/lychee-action@v1.8.0
+        uses: lycheeverse/lychee-action@v1.5.4
         with:
-          args: >-
+          args: --verbose --no-progress --cache --max-cache-age 1d packages/mermaid/src/docs/**/*.md README.md README.zh-CN.md
-            --verbose
-            --no-progress
-            --cache
-            --max-cache-age 1d
-            packages/mermaid/src/docs/**/*.md
-            README.md
-            README.zh-CN.md
           fail: true
           jobSummary: true
         env:

.github/workflows/lint.yml

@@ -42,7 +42,7 @@ jobs:
           if ! pnpm run lint; then
               # print a nice error message on lint failure
               ERROR_MESSAGE='Running `pnpm run lint` failed.'
-              ERROR_MESSAGE+=' Running `pnpm -w run lint:fix` may fix this issue. '
+              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'

.github/workflows/publish-docs.yml

@@ -5,6 +5,10 @@ on:
   push:
     branches:
       - master
+  pull_request:
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
 
 # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
 permissions:
@@ -49,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
@@ -56,4 +61,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v2
+        uses: actions/deploy-pages@v1

.github/workflows/release-publish.yml

@@ -9,7 +9,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
-      - uses: fregante/setup-git-user@v2
+      - uses: fregante/setup-git-user@v1
 
       - uses: pnpm/action-setup@v2
         # uses version from "packageManager" field in package.json

.github/workflows/test.yml

@@ -33,14 +33,6 @@ jobs:
         run: |
           pnpm run ci --coverage
 
-      - name: Run ganttDb tests using California timezone
-        env:
-          # Makes sure that gantt db works even in a timezone that has daylight savings
-          # since some days have 25 hours instead of 24.
-          TZ: America/Los_Angeles
-        run: |
-          pnpm exec vitest run ./packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts
-
       - name: Upload Coverage to Coveralls
         # it feels a bit weird to use @master, but that's what the docs use
         # (coveralls also doesn't publish a @v1 we can use)

.gitignore

@@ -36,6 +36,3 @@ tsconfig.tsbuildinfo
 knsv*.html
 local*.html
 stats/
-
-**/user-avatars/*
-**/contributor-names.json

.lintstagedrc.mjs

@@ -1,5 +1,5 @@
 export default {
-  '!(docs/**/*)*.{ts,js,html,md,mts}': [
+  '!(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"

.lycheeignore

@@ -4,7 +4,12 @@
 # Network error: Forbidden
 https://codepen.io
 
-# Timeout error, maybe Twitter has anti-bot defenses against GitHub's CI servers?
+# Network error: The certificate was not trusted
+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`

.npmrc

@@ -1,2 +1,3 @@
 auto-install-peers=true
 strict-peer-dependencies=false
+use-inline-specifiers-lockfile-format=true

.percy.yml

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

.prettierignore

@@ -5,4 +5,3 @@ coverage
 # Autogenerated by PNPM
 pnpm-lock.yaml
 stats
-packages/mermaid/src/docs/.vitepress/components.d.ts

.tern-project

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

.vite/build.ts

@@ -3,7 +3,6 @@ import { resolve } from 'path';
 import { fileURLToPath } from 'url';
 import jisonPlugin from './jisonPlugin.js';
 import { readFileSync } from 'fs';
-import typescript from '@rollup/plugin-typescript';
 import { visualizer } from 'rollup-plugin-visualizer';
 import type { TemplateType } from 'rollup-plugin-visualizer/dist/plugin/template-types.js';
 
@@ -11,7 +10,6 @@ const visualize = process.argv.includes('--visualize');
 const watch = process.argv.includes('--watch');
 const mermaidOnly = process.argv.includes('--mermaid');
 const __dirname = fileURLToPath(new URL('.', import.meta.url));
-const sourcemap = false;
 
 type OutputOptions = Exclude<
   Exclude<InlineConfig['build'], undefined>['rollupOptions'],
@@ -22,14 +20,13 @@ const visualizerOptions = (packageName: string, core = false): PluginOption[] =>
   if (packageName !== 'mermaid' || !visualize) {
     return [];
   }
-  return ['network', 'treemap', 'sunburst'].map(
+  return ['network', 'treemap', 'sunburst'].map((chartType) =>
-    (chartType) =>
     visualizer({
       filename: `./stats/${chartType}${core ? '.core' : ''}.html`,
       template: chartType as TemplateType,
       gzipSize: true,
       brotliSize: true,
-      }) as PluginOption
+    })
   );
 };
 
@@ -44,11 +41,6 @@ const packageOptions = {
     packageName: 'mermaid-example-diagram',
     file: 'detector.ts',
   },
-  'mermaid-zenuml': {
-    name: 'mermaid-zenuml',
-    packageName: 'mermaid-zenuml',
-    file: 'detector.ts',
-  },
 };
 
 interface BuildOptions {
@@ -66,13 +58,13 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
     {
       name,
       format: 'esm',
-      sourcemap,
+      sourcemap: true,
       entryFileNames: `${name}.esm${minify ? '.min' : ''}.mjs`,
     },
     {
       name,
       format: 'umd',
-      sourcemap,
+      sourcemap: true,
       entryFileNames: `${name}${minify ? '.min' : ''}.js`,
     },
   ];
@@ -91,7 +83,7 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
       {
         name,
         format: 'esm',
-        sourcemap,
+        sourcemap: true,
         entryFileNames: `${name}.core.mjs`,
       },
     ];
@@ -115,14 +107,9 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
       },
     },
     resolve: {
-      extensions: [],
+      extensions: ['.jison', '.js', '.ts', '.json'],
     },
-    plugins: [
+    plugins: [jisonPlugin(), ...visualizerOptions(packageName, core)],
-      jisonPlugin(),
-      // @ts-expect-error According to the type definitions, rollup plugins are incompatible with vite
-      typescript({ compilerOptions: { declaration: false } }),
-      ...visualizerOptions(packageName, core),
-    ],
   };
 
   if (watch && config.build) {
@@ -151,7 +138,6 @@ if (watch) {
   build(getBuildConfig({ minify: false, watch, core: false, entryName: 'mermaid' }));
   if (!mermaidOnly) {
     build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' }));
-    build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-zenuml' }));
   }
 } else if (visualize) {
   await build(getBuildConfig({ minify: false, core: true, entryName: 'mermaid' }));

.vite/server.ts

@@ -1,21 +1,27 @@
-import express from 'express';
+import express, { NextFunction, Request, Response } from 'express';
-import cors from 'cors';
 import { createServer as createViteServer } from 'vite';
 
+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();
 
   // 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 middleware
+    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-zenuml/dist'));
+  // app.use(express.static('./packages/mermaid-example-diagram/dist'));
   app.use(express.static('./packages/mermaid-example-diagram/dist'));
   app.use(vite.middlewares);
   app.use(express.static('demos'));

CHANGELOG.md

@@ -1,105 +1,6 @@
-# Changelog
+# Change Log
 
-## [10.0.0](https://github.com/mermaid-js/mermaid/releases/tag/v10.0.0)
+// TODO: Populate changelog
-
-### Mermaid is ESM only!
-
-We've dropped CJS support. So, you will have to update your import scripts as follows.
-
-```html
-<script type="module">
-  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
-  mermaid.initialize({ startOnLoad: true });
-</script>
-```
-
-You can keep using v9 by adding the `@9` in the CDN URL.
-
-```diff
-- <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.js"></script>
-+ <script src="https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.js"></script>
-```
-
-### mermaid.render is async and doesn't accept callbacks
-
-```js
-// < v10
-mermaid.render('id', 'graph TD;\nA-->B', (svg, bindFunctions) => {
-  element.innerHTML = svg;
-  if (bindFunctions) {
-    bindFunctions(element);
-  }
-});
-
-// Shorter syntax
-if (bindFunctions) {
-  bindFunctions(element);
-}
-// can be replaced with the `?.` shorthand
-bindFunctions?.(element);
-
-// >= v10 with async/await
-const { svg, bindFunctions } = await mermaid.render('id', 'graph TD;\nA-->B');
-element.innerHTML = svg;
-bindFunctions?.(element);
-
-// >= v10 with promise.then
-mermaid.render('id', 'graph TD;A-->B').then(({ svg, bindFunctions }) => {
-  element.innerHTML = svg;
-  bindFunctions?.(element);
-});
-```
-
-### mermaid.parse is async and ParseError is removed
-
-```js
-// < v10
-mermaid.parse(text, parseError);
-
-//>= v10
-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
-mermaid.init(config, selector, cb);
-
-//>= v10
-mermaid.initialize(config);
-mermaid.run({
-  querySelector: selector,
-  postRenderCallback: cb,
-  suppressErrors: true,
-});
-```
-
-```js
-// < v10
-mermaid.initThrowsErrors(config, selector, cb);
-
-//>= v10
-mermaid.initialize(config);
-mermaid.run({
-  querySelector: selector,
-  postRenderCallback: cb,
-  suppressErrors: false,
-});
-```
-
-// TODO: Populate changelog pre v10
 
 - Config has a lot of changes
 - globalReset resets to `defaultConfig` instead of current config. Use `reset` instead.

CONTRIBUTING.md

@@ -55,8 +55,6 @@ The documentation is written in **Markdown**. For more information about Markdow
 The source files for the project documentation are located in the [`/packages/mermaid/src/docs`](packages/mermaid/src/docs) directory. This is where you should make changes.
 The files under `/packages/mermaid/src/docs` are processed to generate the published documentation, and the resulting files are put into the `/docs` directory.
 
-After editing files in the [`/packages/mermaid/src/docs`](packages/mermaid/src/docs) directory, be sure to run `pnpm install` and `pnpm run --filter mermaid docs:build` locally to build the `/docs` directory.
-
 ```mermaid
 flowchart LR
   classDef default fill:#fff,color:black,stroke:black
@@ -65,28 +63,6 @@ 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

@@ -8,7 +8,7 @@ Mermaid
 Generate diagrams from markdown-like text.
 <p>
 <p align="center">
-  <a href="https://www.npmjs.com/package/mermaid"><img src="https://img.shields.io/npm/v/mermaid?color=ff3670&label="></a>
+  <a href="https://www.npmjs.com/package/vitest"><img src="https://img.shields.io/npm/v/mermaid?color=ff3670&label="></a>
 <p>
 
 <p align="center">
@@ -165,13 +165,6 @@ class Class10 {
   int id
   size()
 }
-namespace Namespace01 {
-  class Class11
-  class Class12 {
-    int id
-    size()
-  }
-}
 ```
 
 ```mermaid
@@ -191,13 +184,6 @@ class Class10 {
   int id
   size()
 }
-namespace Namespace01 {
-  class Class11
-  class Class12 {
-    int id
-    size()
-  }
-}
 ```
 
 ### State diagram [<a href="https://mermaid-js.github.io/mermaid/#/stateDiagram">docs</a> - <a href="https://mermaid.live/edit#pako:eNpdkEFvgzAMhf8K8nEqpYSNthx22Xbcqcexg0sCiZQQlDhIFeK_L8A6TfXp6fOz9ewJGssFVOAJSbwr7ByadGR1n8T6evpO0vQ1uZDSekOrXGFsPqJPO6q-2-imH8f_0TeHXm50lfelsAMjnEHFY6xpMdRAUhhRQxUlFy0GTTXU_RytYeAx-AdXZB1ULWovdoCB7OXWN1CRC-Ju-r3uz6UtchGHJqDbsPygU57iysb2reoWHpyOWBINvsqypb3vFMlw3TfWZF5xiY7keC6zkpUnZIUojwW-FAVvrvn51LLnvOXHQ84Q5nn-AVtLcwk">live editor</a>]
@@ -240,44 +226,6 @@ pie
 
 ### Git graph [experimental - <a href="https://mermaid.live/edit#pako:eNqNkMFugzAMhl8F-VyVAR1tOW_aA-zKxSSGRCMJCk6lCvHuNZPKZdM0n-zf3_8r8QIqaIIGMqnB8kfEybQ--y4VnLP8-9RF9Mpkmm40hmlnDKmvkPiH_kfS7nFo_VN0FAf6XwocQGgxa_nGsm1bYEOOWmik1dRjGrmF1q-Cpkkj07u2HCI0PY4zHQATh8-7V9BwTPSE3iwOEd1OjQE1iWkBvk_bzQY7s0Sq4Hs7bHqKo8iGeZqbPN_WR7mpSd1RHpvPVhuMbG7XOq_L-oJlRfW5wteq0qorrpe-PBW9Pr8UJcK6rg-BLYPQ">live editor</a>]
 
-### Bar chart (using gantt chart) [<a href="https://mermaid-js.github.io/mermaid/#/gantt">docs</a> - <a href="https://mermaid.live/edit#pako:eNptkU1vhCAQhv8KIenNugiI4rkf6bmXpvEyFVxJFDYyNt1u9r8X63Z7WQ9m5pknLzieaBeMpQ3dg0dsPUkPOhwteXZIXmJcbCT3xMAxkuh8Z8kIEclyMIB209fqKcwTICFvG4IvFy_oLrZ-g9F26ILfQgvNFN94VaRXQ1iWqpumZBcu1J8p1E1TXDx59eQNr5LyEqjJn6hv5QnGNlxevZJmdLLpy5xJSzut45biYCfb0iaVxvawjNjS1p-TCguG16PvaIPzYjO67e3BwX6GiTY9jPFKH43DMF_hGMDY1J4oHg-_f8hFTJFd8L3br3yZx4QHxENsdrt1nO8dDstH3oVpF50ZYMbhU6ud4qoGLqyqBJRCmO6j0HXPZdGbihUc6Pmc0QP49xD-b5X69ZQv2gjO81IwzWqhC1lKrjJ6pA3nVS7SMiVjrKirWlYp5fs3osgrWeo00lorLWvOzz8JVbXm">live editor</a>]
-
-```
-gantt
-    title Git Issues - days since last update
-    dateFormat  X
-    axisFormat %s
-
-    section Issue19062
-    71   : 0, 71
-    section Issue19401
-    36   : 0, 36
-    section Issue193
-    34   : 0, 34
-    section Issue7441
-    9    : 0, 9
-    section Issue1300
-    5    : 0, 5
-```
-
-```mermaid
-gantt
-    title Git Issues - days since last update
-    dateFormat  X
-    axisFormat %s
-
-    section Issue19062
-    71   : 0, 71
-    section Issue19401
-    36   : 0, 36
-    section Issue193
-    34   : 0, 34
-    section Issue7441
-    9    : 0, 9
-    section Issue1300
-    5    : 0, 5
-```
-
 ### User Journey diagram [<a href="https://mermaid-js.github.io/mermaid/#/user-journey">docs</a> - <a href="https://mermaid.live/edit#pako:eNplkMFuwjAQRH9l5TMiTVIC-FqqnjhxzWWJN4khsSN7XRSh_HsdKBVt97R6Mzsj-yoqq0hIAXCywRkaSwNxWHNHsB_hYt1ZmwYUfiueKtbWwIcFtjf5zgH2eCZgQgkrCXt64GgMg2fUzkvIn5Xd_V5COtMFvCH_62ht_5yk7MU8sn61HDTfxD8VYiF6cj1qFd94nWkpuKWYKWRcFdUYOi5FaaZoDYNCpnel2Toha-w8LQQGtofRVEKyC_Qw7TQ2DvsfV2dRUTy6Ch6H-UMb7TlGVtbUupl5cF3ELfPgZZLM8rLR3IbjsrJ94rVq0XH7uS2SIis2mOVUrHNc5bmqjul2U2evaa3WL2mGYpqmL2BGiho">live editor</a>]
 
 ```

README.zh-CN.md

@@ -8,7 +8,7 @@ Mermaid
 通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。
 <p>
 <p align="center">
-  <a href="https://www.npmjs.com/package/mermaid"><img src="https://img.shields.io/npm/v/mermaid?color=ff3670&label="></a>
+  <a href="https://www.npmjs.com/package/vitest"><img src="https://img.shields.io/npm/v/mermaid?color=ff3670&label="></a>
 <p>
 
 <p align="center">

V10-BreakingChanges.md

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

__mocks__/d3.ts

@@ -1,5 +1,5 @@
 // @ts-nocheck TODO: Fix TS
-import { MockedD3 } from '../packages/mermaid/src/tests/MockedD3.js';
+import { MockedD3 } from '../packages/mermaid/src/tests/MockedD3';
 
 export const select = function () {
   return new MockedD3();

cSpell.json

@@ -5,14 +5,11 @@
     "acyclicer",
     "adamiecki",
     "alois",
-    "aloisklink",
     "antiscript",
-    "antlr",
     "appli",
     "applitools",
     "asciidoctor",
     "ashish",
-    "ashishjain",
     "astah",
     "bbox",
     "bilkent",
@@ -22,17 +19,14 @@
     "brkt",
     "brolin",
     "brotli",
-    "città",
     "classdef",
     "codedoc",
     "colour",
-    "commitlint",
     "cpettitt",
     "customizability",
     "cuzon",
     "cytoscape",
     "dagre",
-    "deepdwn",
     "descr",
     "docsify",
     "docsy",
@@ -51,42 +45,30 @@
     "graphviz",
     "grav",
     "greywolf",
-    "huynh",
-    "huynhicode",
     "inkdrop",
     "jaoude",
-    "jgreywolf",
     "jison",
-    "jiti",
     "kaufmann",
     "khroma",
     "klemm",
     "klink",
     "knsv",
     "knut",
-    "knutsveidqvist",
     "laganeckas",
-    "linetype",
     "lintstagedrc",
     "logmsg",
     "lucida",
-    "markdownish",
     "matthieu",
-    "matthieumorel",
     "mdast",
     "mdbook",
-    "mermaidjs",
     "mermerd",
     "mindaugas",
     "mindmap",
     "mindmaps",
     "mitigations",
     "mkdocs",
-    "mmorel",
     "mult",
     "orlandoni",
-    "pathe",
-    "pbrolin",
     "phpbb",
     "plantuml",
     "playfair",
@@ -98,7 +80,6 @@
     "rect",
     "rects",
     "redmine",
-    "rehype",
     "roledescription",
     "sandboxed",
     "setupgraphviewbox",
@@ -106,12 +87,7 @@
     "sidharth",
     "sidharthv",
     "sphinxcontrib",
-    "startx",
-    "starty",
     "statediagram",
-    "steph",
-    "stopx",
-    "stopy",
     "stylis",
     "substate",
     "sveidqvist",
@@ -121,22 +97,16 @@
     "textlength",
     "treemap",
     "ts-nocheck",
-    "tsdoc",
     "tuleap",
-    "tylerlong",
     "ugge",
     "unist",
-    "unocss",
-    "valign",
     "verdana",
     "viewports",
     "vinod",
     "visio",
     "vitepress",
-    "vueuse",
     "xlink",
-    "yash",
+    "yash"
-    "zenuml"
   ],
   "patterns": [
     { "name": "Markdown links", "pattern": "\\((.*)\\)", "description": "" },
@@ -176,7 +146,6 @@
   ],
   "ignorePaths": [
     "packages/mermaid/src/docs/CHANGELOG.md",
-    "packages/mermaid/src/docs/.vitepress/redirect.ts",
+    "packages/mermaid/src/docs/.vitepress/redirect.ts"
-    "packages/mermaid/src/docs/.vitepress/contributor-names.json"
   ]
 }

cypress/helpers/util.js

@@ -22,7 +22,7 @@ export const mermaidUrl = (graphStr, options, api) => {
   return url;
 };
 
-export const imgSnapshotTest = (graphStr, _options = {}, api = false, validation = undefined) => {
+export const imgSnapshotTest = (graphStr, _options, api = false, validation) => {
   cy.log(_options);
   const options = Object.assign(_options);
   if (!options.fontFamily) {

cypress/integration/other/configuration.spec.js

@@ -1,4 +1,4 @@
-import { renderGraph } from '../../helpers/util.js';
+import { renderGraph } from '../../helpers/util';
 describe('Configuration', () => {
   describe('arrowMarkerAbsolute', () => {
     it('should handle default value false of arrowMarkerAbsolute', () => {

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

@@ -1,4 +1,4 @@
-import { urlSnapshotTest } from '../../helpers/util.js';
+import { urlSnapshotTest } from '../../helpers/util';
 
 describe('mermaid', () => {
   describe('registerDiagram', () => {

cypress/integration/other/ghsa.spec.js

@@ -1,4 +1,4 @@
-import { urlSnapshotTest } from '../../helpers/util.js';
+import { urlSnapshotTest } from '../../helpers/util';
 
 describe('CSS injections', () => {
   it('should not allow CSS injections outside of the diagram', () => {

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

@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util.js';
+import { imgSnapshotTest } from '../../helpers/util';
 describe('Class diagram V2', () => {
   it('0: should render a simple class diagram', () => {
     imgSnapshotTest(
@@ -13,6 +13,7 @@ describe('Class diagram V2', () => {
         `,
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
+    cy.get('svg');
   });
 
   it('1: should render a simple class diagram', () => {
@@ -46,6 +47,7 @@ describe('Class diagram V2', () => {
       `,
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
+    cy.get('svg');
   });
 
   it('2: should render a simple class diagrams with cardinality', () => {
@@ -74,6 +76,7 @@ describe('Class diagram V2', () => {
       `,
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
+    cy.get('svg');
   });
 
   it('should render a simple class diagram with different visibilities', () => {
@@ -91,6 +94,7 @@ describe('Class diagram V2', () => {
       `,
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
+    cy.get('svg');
   });
 
   it('should render multiple class diagrams', () => {
@@ -143,6 +147,7 @@ describe('Class diagram V2', () => {
       ],
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
+    cy.get('svg');
   });
 
   it('4: should render a simple class diagram with comments', () => {
@@ -172,6 +177,7 @@ describe('Class diagram V2', () => {
       `,
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
+    cy.get('svg');
   });
 
   it('5: should render a simple class diagram with abstract method', () => {
@@ -183,6 +189,7 @@ describe('Class diagram V2', () => {
       `,
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
+    cy.get('svg');
   });
 
   it('6: should render a simple class diagram with static method', () => {
@@ -194,6 +201,7 @@ describe('Class diagram V2', () => {
       `,
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
+    cy.get('svg');
   });
 
   it('7: should render a simple class diagram with Generic class', () => {
@@ -213,6 +221,7 @@ describe('Class diagram V2', () => {
       `,
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
+    cy.get('svg');
   });
 
   it('8: should render a simple class diagram with Generic class and relations', () => {
@@ -233,6 +242,7 @@ describe('Class diagram V2', () => {
       `,
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
+    cy.get('svg');
   });
 
   it('9: should render a simple class diagram with clickable link', () => {
@@ -254,6 +264,7 @@ describe('Class diagram V2', () => {
       `,
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
+    cy.get('svg');
   });
 
   it('10: should render a simple class diagram with clickable callback', () => {
@@ -275,6 +286,7 @@ describe('Class diagram V2', () => {
       `,
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
+    cy.get('svg');
   });
 
   it('11: should render a simple class diagram with return type on method', () => {
@@ -289,6 +301,7 @@ describe('Class diagram V2', () => {
       `,
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
+    cy.get('svg');
   });
 
   it('12: should render a simple class diagram with generic types', () => {
@@ -304,6 +317,7 @@ describe('Class diagram V2', () => {
       `,
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
+    cy.get('svg');
   });
 
   it('13: should render a simple class diagram with css classes applied', () => {
@@ -321,6 +335,7 @@ describe('Class diagram V2', () => {
       `,
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
+    cy.get('svg');
   });
 
   it('14: should render a simple class diagram with css classes applied directly', () => {
@@ -336,6 +351,7 @@ describe('Class diagram V2', () => {
       `,
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
+    cy.get('svg');
   });
 
   it('15: should render a simple class diagram with css classes applied two multiple classes', () => {
@@ -349,6 +365,7 @@ describe('Class diagram V2', () => {
       `,
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
+    cy.get('svg');
   });
 
   it('16a: should render a simple class diagram with static field', () => {
@@ -361,6 +378,7 @@ describe('Class diagram V2', () => {
             `,
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
+    cy.get('svg');
   });
 
   it('16b: should handle the direction statement with TB', () => {
@@ -385,6 +403,7 @@ describe('Class diagram V2', () => {
       `,
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
+    cy.get('svg');
   });
 
   it('18: should handle the direction statement with LR', () => {
@@ -409,6 +428,7 @@ describe('Class diagram V2', () => {
       `,
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
+    cy.get('svg');
   });
   it('17a: should handle the direction statement with BT', () => {
     imgSnapshotTest(
@@ -432,6 +452,7 @@ describe('Class diagram V2', () => {
       `,
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
+    cy.get('svg');
   });
   it('17b: should handle the direction statement with RL', () => {
     imgSnapshotTest(
@@ -455,6 +476,7 @@ describe('Class diagram V2', () => {
       `,
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
+    cy.get('svg');
   });
 
   it('18: should render a simple class diagram with notes', () => {
@@ -471,6 +493,7 @@ describe('Class diagram V2', () => {
         `,
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
+    cy.get('svg');
   });
 
   it('1433: should render a simple class with a title', () => {
@@ -480,86 +503,8 @@ title: simple class diagram
 ---
 classDiagram-v2
 class Class10
-`
+`,
-    );
+      {}
-  });
-
-  it('should render a class with text label', () => {
-    imgSnapshotTest(
-      `classDiagram
-  class C1["Class 1 with text label"]
-  C1 -->  C2`
-    );
-  });
-
-  it('should render two classes with text labels', () => {
-    imgSnapshotTest(
-      `classDiagram
-  class C1["Class 1 with text label"]
-  class C2["Class 2 with chars @?"]
-  C1 -->  C2`
-    );
-  });
-  it('should render a class with a text label, members and annotation', () => {
-    imgSnapshotTest(
-      `classDiagram
-  class C1["Class 1 with text label"] {
-    <<interface>>
-    +member1
-  }
-  C1 -->  C2`
-    );
-  });
-  it('should render multiple classes with same text labels', () => {
-    imgSnapshotTest(
-      `classDiagram
-class C1["Class with text label"]
-class C2["Class with text label"]
-class C3["Class with text label"]
-C1 --> C2
-C3 ..> C2
-  `
-    );
-  });
-  it('should render classes with different text labels', () => {
-    imgSnapshotTest(
-      `classDiagram
-class C1["OneWord"]
-class C2["With, Comma"]
-class C3["With (Brackets)"]
-class C4["With [Brackets]"]
-class C5["With {Brackets}"]
-class C7["With 1 number"]
-class C8["With . period..."]
-class C9["With - dash"]
-class C10["With _ underscore"]
-class C11["With ' single quote"]
-class C12["With ~!@#$%^&*()_+=-/?"]
-class C13["With Città foreign language"]
-  `
-    );
-  });
-
-  it('should render classLabel if class has already been defined earlier', () => {
-    imgSnapshotTest(
-      `classDiagram
-  Animal <|-- Duck
-  class Duck["Duck with text label"]
-`
-    );
-  });
-  it('should add classes namespaces', function () {
-    imgSnapshotTest(
-      `
-      classDiagram
-      namespace Namespace1 {
-        class C1
-        class C2
-      }
-      C1 --> C2
-      class C3
-      class C4
-      `
     );
   });
 });

cypress/integration/rendering/classDiagram.spec.js

@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util';
 
 describe('Class diagram', () => {
   it('1: should render a simple class diagram', () => {
@@ -286,7 +286,7 @@ describe('Class diagram', () => {
     cy.get('svg');
   });
 
-  it('15: should render a simple class diagram with css classes applied to multiple classes', () => {
+  it('15: should render a simple class diagram with css classes applied two multiple classes', () => {
     imgSnapshotTest(
       `
     classDiagram

cypress/integration/rendering/current.spec.js

@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util.js';
+import { imgSnapshotTest } from '../../helpers/util';
 
 describe('Current diagram', () => {
   it('should render a state with states in it', () => {

cypress/integration/rendering/debug.spec.js

@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util.js';
+import { imgSnapshotTest } from '../../helpers/util';
 
 describe('Flowchart', () => {
   it('34: testing the label width in percy', () => {

cypress/integration/rendering/erDiagram.spec.js

@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util';
 
 describe('Entity Relationship Diagram', () => {
   it('should render a simple ER diagram', () => {
@@ -10,6 +10,7 @@ describe('Entity Relationship Diagram', () => {
       `,
       { logLevel: 1 }
     );
+    cy.get('svg');
   });
 
   it('should render an ER diagram with a recursive relationship', () => {
@@ -22,6 +23,7 @@ describe('Entity Relationship Diagram', () => {
       `,
       { logLevel: 1 }
     );
+    cy.get('svg');
   });
 
   it('should render an ER diagram with multiple relationships between the same two entities', () => {
@@ -33,6 +35,7 @@ describe('Entity Relationship Diagram', () => {
       `,
       { logLevel: 1 }
     );
+    cy.get('svg');
   });
 
   it('should render a cyclical ER diagram', () => {
@@ -45,6 +48,7 @@ describe('Entity Relationship Diagram', () => {
       `,
       { logLevel: 1 }
     );
+    cy.get('svg');
   });
 
   it('should render a not-so-simple ER diagram', () => {
@@ -62,6 +66,7 @@ describe('Entity Relationship Diagram', () => {
       `,
       { logLevel: 1 }
     );
+    cy.get('svg');
   });
 
   it('should render multiple ER diagrams', () => {
@@ -80,6 +85,7 @@ describe('Entity Relationship Diagram', () => {
       ],
       { logLevel: 1 }
     );
+    cy.get('svg');
   });
 
   it('should render an ER diagram with blank or empty labels', () => {
@@ -92,6 +98,7 @@ describe('Entity Relationship Diagram', () => {
       `,
       { logLevel: 1 }
     );
+    cy.get('svg');
   });
 
   it('should render an ER diagrams when useMaxWidth is true (default)', () => {
@@ -144,6 +151,7 @@ describe('Entity Relationship Diagram', () => {
       `,
       { er: { useMaxWidth: false } }
     );
+    cy.get('svg');
   });
 
   it('should render entities with and without attributes', () => {
@@ -156,6 +164,7 @@ describe('Entity Relationship Diagram', () => {
       `,
       { logLevel: 1 }
     );
+    cy.get('svg');
   });
 
   it('should render entities with generic and array attributes', () => {
@@ -170,6 +179,7 @@ describe('Entity Relationship Diagram', () => {
       `,
       { logLevel: 1 }
     );
+    cy.get('svg');
   });
 
   it('should render entities with length in attributes type', () => {
@@ -183,6 +193,7 @@ describe('Entity Relationship Diagram', () => {
       `,
       { logLevel: 1 }
     );
+    cy.get('svg');
   });
 
   it('should render entities and attributes with big and small entity names', () => {
@@ -198,6 +209,7 @@ describe('Entity Relationship Diagram', () => {
       `,
       { logLevel: 1 }
     );
+    cy.get('svg');
   });
 
   it('should render entities with keys', () => {
@@ -216,6 +228,7 @@ describe('Entity Relationship Diagram', () => {
       `,
       { logLevel: 1 }
     );
+    cy.get('svg');
   });
 
   it('should render entities with comments', () => {
@@ -234,6 +247,7 @@ describe('Entity Relationship Diagram', () => {
       `,
       { logLevel: 1 }
     );
+    cy.get('svg');
   });
 
   it('should render entities with keys and comments', () => {
@@ -253,6 +267,7 @@ describe('Entity Relationship Diagram', () => {
       `,
       { logLevel: 1 }
     );
+    cy.get('svg');
   });
 
   it('should render entities with aliases', () => {
@@ -270,6 +285,7 @@ describe('Entity Relationship Diagram', () => {
       `,
       { logLevel: 1 }
     );
+    cy.get('svg');
   });
 
   it('1433: should render a simple ER diagram with a title', () => {

cypress/integration/rendering/errorDiagram.spec.js

@@ -1,45 +0,0 @@
-import { imgSnapshotTest } from '../../helpers/util';
-
-describe('Error Diagrams', () => {
-  beforeEach(() => {
-    cy.on('uncaught:exception', (err) => {
-      expect(err.message).to.include('Parse error');
-      // return false to prevent the error from
-      // failing this test
-      return false;
-    });
-  });
-
-  it('should render a simple ER diagram', () => {
-    imgSnapshotTest(
-      `
-      error
-      `,
-      { logLevel: 1 }
-    );
-  });
-
-  it('should render error diagram for actual errors', () => {
-    imgSnapshotTest(
-      `
-    flowchart TD
-      A[Christmas] --|Get money| B(Go shopping)
-      `,
-      { logLevel: 1 }
-    );
-  });
-
-  it('should render error for wrong ER diagram', () => {
-    imgSnapshotTest(
-      `
-    erDiagram
-        ATLAS-ORGANIZATION ||--|{ ATLAS-PROJECTS : "has many"
-        ATLAS-PROJECTS ||--|{ MONGODB-CLUSTERS : "has many"
-        ATLAS-PROJECTS ||--|{ ATLAS-TEAMS : "has many"
-        MONGODB-CLUSTERS ||..|{
-        ATLAS-TEAMS ||..|{
-      `,
-      { logLevel: 1 }
-    );
-  });
-});

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

@@ -1,6 +1,6 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util';
 
-describe.skip('Flowchart ELK', () => {
+describe('Flowchart ELK', () => {
   it('1-elk: should render a simple flowchart', () => {
     imgSnapshotTest(
       `flowchart-elk TD
@@ -684,163 +684,4 @@ A --> B
       { titleTopMargin: 0 }
     );
   });
-  it('elk: should include classes on the edges', () => {
-    renderGraph(
-      `flowchart-elk TD
-      A --> B --> C --> D
-      `,
-      {}
-    );
-    cy.get('svg').should((svg) => {
-      const edges = svg.querySelectorAll('.edges > path');
-      edges.forEach((edge) => {
-        expect(edge).to.have.class('flowchart-link');
-      });
-    });
-  });
-  describe('Markdown strings flowchart-elk (#4220)', () => {
-    describe('html labels', () => {
-      it('With styling and classes', () => {
-        imgSnapshotTest(
-          `%%{init: {"flowchart": {"htmlLabels": true}} }%%
-flowchart-elk LR
-    A:::someclass --> B["\`The **cat** in the hat\`"]:::someclass
-    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
-    classDef someclass fill:#f96
-`,
-          { titleTopMargin: 0 }
-        );
-      });
-      it('With formatting in a node', () => {
-        imgSnapshotTest(
-          `%%{init: {"flowchart": {"htmlLabels": true}} }%%
-flowchart-elk LR
-  a{"\`The **cat** in the hat\`"} -- 1o --> b
-  a -- 2o --> c
-  a -- 3o --> d
-  g --2i--> a
-  d --1i--> a
-  h --3i -->a
-  b --> d(The dog in the hog)
-  c --> d
-`,
-          { titleTopMargin: 0 }
-        );
-      });
-      it('New line in node and formatted edge label', () => {
-        imgSnapshotTest(
-          `%%{init: {"flowchart": {"htmlLabels": true}} }%%
-flowchart-elk LR
-b("\`The dog in **the** hog.(1)
-NL\`") --"\`1o **bold**\`"--> c
-`,
-          { titleTopMargin: 0 }
-        );
-      });
-      it('Wrapping long text with a new line', () => {
-        imgSnapshotTest(
-          `%%{init: {"flowchart": {"htmlLabels": true}} }%%
-flowchart-elk LR
-b(\`The dog in **the** hog.(1).. a a a a *very long text* about it
-Word!
-
-Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`) --> c
-
-`,
-          { titleTopMargin: 0 }
-        );
-      });
-      it('Sub graphs and markdown strings', () => {
-        imgSnapshotTest(
-          `%%{init: {"flowchart": {"htmlLabels": true}} }%%
-flowchart-elk LR
-subgraph "One"
-  a("\`The **cat**
-  in the hat\`") -- "1o" --> b{{"\`The **dog** in the hog\`"}}
-end
-subgraph "\`**Two**\`"
-  c("\`The **cat**
-  in the hat\`") -- "\`1o **ipa**\`" --> d("The dog in the hog")
-end
-
-`,
-          { titleTopMargin: 0 }
-        );
-      });
-    });
-
-    describe('svg text labels', () => {
-      it('With styling and classes', () => {
-        imgSnapshotTest(
-          `%%{init: {"flowchart": {"htmlLabels": false}} }%%
-flowchart-elk LR
-    A:::someclass --> B["\`The **cat** in the hat\`"]:::someclass
-    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
-    classDef someclass fill:#f96
-`,
-          { titleTopMargin: 0 }
-        );
-      });
-      it('With formatting in a node', () => {
-        imgSnapshotTest(
-          `%%{init: {"flowchart": {"htmlLabels": false}} }%%
-flowchart-elk LR
-  a{"\`The **cat** in the hat\`"} -- 1o --> b
-  a -- 2o --> c
-  a -- 3o --> d
-  g --2i--> a
-  d --1i--> a
-  h --3i -->a
-  b --> d(The dog in the hog)
-  c --> d
-`,
-          { titleTopMargin: 0 }
-        );
-      });
-      it('New line in node and formatted edge label', () => {
-        imgSnapshotTest(
-          `%%{init: {"flowchart": {"htmlLabels": false}} }%%
-flowchart-elk LR
-b("\`The dog in **the** hog.(1)
-NL\`") --"\`1o **bold**\`"--> c
-`,
-          { titleTopMargin: 0 }
-        );
-      });
-      it('Wrapping long text with a new line', () => {
-        imgSnapshotTest(
-          `%%{init: {"flowchart": {"htmlLabels": false}} }%%
-flowchart-elk LR
-b("\`The dog in **the** hog.(1).. a a a a *very long text* about it
-Word!
-
-Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`") --> c
-
-`,
-          { titleTopMargin: 0 }
-        );
-      });
-      it('Sub graphs and markdown strings', () => {
-        imgSnapshotTest(
-          `%%{init: {"flowchart": {"htmlLabels": false}} }%%
-flowchart-elk LR
-subgraph "One"
-  a("\`The **cat**
-  in the hat\`") -- "1o" --> b{{"\`The **dog** in the hog\`"}}
-end
-subgraph "\`**Two**\`"
-  c("\`The **cat**
-  in the hat\`") -- "\`1o **ipa**\`" --> d("The dog in the hog")
-end
-
-`,
-          { titleTopMargin: 0 }
-        );
-      });
-    });
-  });
 });

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

@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util';
 
 describe('Flowchart v2', () => {
   it('1: should render a simple flowchart', () => {
@@ -674,170 +674,4 @@ 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 }
-    );
-  });
-  it('4023: Should render html labels with images and-or text correctly', () => {
-    imgSnapshotTest(
-      `flowchart TD
-    B[<img src='https://mermaid.js.org/mermaid-logo.svg'>]
-    B-->C[<img src="https://mermaid.js.org/mermaid-logo.svg"> more text <img src='https://mermaid.js.org/mermaid-logo.svg'>]
-    B-->D(<img src='https://mermaid.js.org/mermaid-logo.svg'> some text)
-    B-->E(plain)`,
-      {}
-    );
-  });
-  describe('Markdown strings flowchart (#4220)', () => {
-    describe('html labels', () => {
-      it('With styling and classes', () => {
-        imgSnapshotTest(
-          `%%{init: {"flowchart": {"htmlLabels": true}} }%%
-flowchart LR
-    A:::someclass --> B["\`The **cat** in the hat\`"]:::someclass
-    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
-    classDef someclass fill:#f96
-`,
-          { titleTopMargin: 0 }
-        );
-      });
-      it('With formatting in a node', () => {
-        imgSnapshotTest(
-          `%%{init: {"flowchart": {"htmlLabels": true}} }%%
-flowchart LR
-  a{"\`The **cat** in the hat\`"} -- 1o --> b
-  a -- 2o --> c
-  a -- 3o --> d
-  g --2i--> a
-  d --1i--> a
-  h --3i -->a
-  b --> d(The dog in the hog)
-  c --> d
-`,
-          { titleTopMargin: 0 }
-        );
-      });
-      it('New line in node and formatted edge label', () => {
-        imgSnapshotTest(
-          `%%{init: {"flowchart": {"htmlLabels": true}} }%%
-flowchart LR
-b("\`The dog in **the** hog.(1)
-NL\`") --"\`1o **bold**\`"--> c
-`,
-          { titleTopMargin: 0 }
-        );
-      });
-      it('Wrapping long text with a new line', () => {
-        imgSnapshotTest(
-          `%%{init: {"flowchart": {"htmlLabels": true}} }%%
-flowchart LR
-b("\`The dog in **the** hog.(1).. a a a a *very long text* about it
-Word!
-
-Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`") --> c
-
-`,
-          { titleTopMargin: 0 }
-        );
-      });
-      it('Sub graphs and markdown strings', () => {
-        imgSnapshotTest(
-          `%%{init: {"flowchart": {"htmlLabels": true}} }%%
-flowchart LR
-subgraph "One"
-  a("\`The **cat**
-  in the hat\`") -- "1o" --> b{{"\`The **dog** in the hog\`"}}
-end
-subgraph "\`**Two**\`"
-  c("\`The **cat**
-  in the hat\`") -- "\`1o **ipa**\`" --> d("The dog in the hog")
-end
-
-`,
-          { titleTopMargin: 0 }
-        );
-      });
-    });
-
-    describe('svg text labels', () => {
-      it('With styling and classes', () => {
-        imgSnapshotTest(
-          `%%{init: {"flowchart": {"htmlLabels": false}} }%%
-flowchart LR
-    A:::someclass --> B["\`The **cat** in the hat\`"]:::someclass
-    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
-    classDef someclass fill:#f96
-`,
-          { titleTopMargin: 0 }
-        );
-      });
-      it('With formatting in a node', () => {
-        imgSnapshotTest(
-          `%%{init: {"flowchart": {"htmlLabels": false}} }%%
-flowchart LR
-  a{"\`The **cat** in the hat\`"} -- 1o --> b
-  a -- 2o --> c
-  a -- 3o --> d
-  g --2i--> a
-  d --1i--> a
-  h --3i -->a
-  b --> d(The dog in the hog)
-  c --> d
-`,
-          { titleTopMargin: 0 }
-        );
-      });
-      it('New line in node and formatted edge label', () => {
-        imgSnapshotTest(
-          `%%{init: {"flowchart": {"htmlLabels": false}} }%%
-flowchart LR
-b("\`The dog in **the** hog.(1)
-NL\`") --"\`1o **bold**\`"--> c
-`,
-          { titleTopMargin: 0 }
-        );
-      });
-      it('Wrapping long text with a new line', () => {
-        imgSnapshotTest(
-          `%%{init: {"flowchart": {"htmlLabels": false}} }%%
-flowchart LR
-b("\`The dog in **the** hog.(1).. a a a a *very long text* about it
-Word!
-
-Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`") --> c
-
-`,
-          { titleTopMargin: 0 }
-        );
-      });
-      it('Sub graphs and markdown strings', () => {
-        imgSnapshotTest(
-          `%%{init: {"flowchart": {"htmlLabels": false}} }%%
-flowchart LR
-subgraph "One"
-  a("\`The **cat**
-  in the hat\`") -- "1o" --> b{{"\`The **dog** in the hog\`"}}
-end
-subgraph "\`**Two**\`"
-  c("\`The **cat**
-  in the hat\`") -- "\`1o **ipa**\`" --> d("The dog in the hog")
-end
-
-`,
-          { titleTopMargin: 0 }
-        );
-      });
-    });
-  });
 });

cypress/integration/rendering/flowchart.spec.js

@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util';
 
 describe('Graph', () => {
   it('1: should render a simple flowchart no htmlLabels', () => {

cypress/integration/rendering/gantt.spec.js

@@ -133,24 +133,6 @@ describe('Gantt diagram', () => {
     );
   });
 
-  it('should default to showing today marker', () => {
-    // This test only works if the environment thinks today is 1010-10-10
-    imgSnapshotTest(
-      `
-      gantt
-        title Show today marker (vertical line should be visible)
-        dateFormat YYYY-MM-DD
-        axisFormat %d
-        %% Should default to being on
-        %% todayMarker on
-        section Section1
-         Yesterday: 1010-10-09, 1d
-         Today: 1010-10-10, 1d
-      `,
-      {}
-    );
-  });
-
   it('should hide today marker', () => {
     imgSnapshotTest(
       `
@@ -160,8 +142,7 @@ describe('Gantt diagram', () => {
         axisFormat %d
         todayMarker off
         section Section1
-         Yesterday: 1010-10-09, 1d
+         Today: 1, -1h
-         Today: 1010-10-10, 1d
       `,
       {}
     );
@@ -176,8 +157,7 @@ describe('Gantt diagram', () => {
       axisFormat %d
       todayMarker stroke-width:5px,stroke:#00f,opacity:0.5
       section Section1
-       Yesterday: 1010-10-09, 1d
+       Today: 1, -1h
-       Today: 1010-10-10, 1d
       `,
       {}
     );
@@ -455,39 +435,4 @@ describe('Gantt diagram', () => {
       { gantt: { topAxis: true } }
     );
   });
-
-  it('should render when compact is true', () => {
-    imgSnapshotTest(
-      `
-      ---
-      displayMode: compact
-      ---
-      gantt
-        title GANTT compact
-        dateFormat  HH:mm:ss
-        axisFormat  %Hh%M
-
-        section DB Clean
-        Clean: 12:00:00, 10m
-        Clean: 12:30:00, 12m
-        Clean: 13:00:00, 8m
-        Clean: 13:30:00, 9m
-        Clean: 14:00:00, 13m
-        Clean: 14:30:00, 10m
-        Clean: 15:00:00, 11m
-
-        section Sessions
-        A: 12:00:00, 63m
-        B: 12:30:00, 12m
-        C: 13:05:00, 12m
-        D: 13:06:00, 33m
-        E: 13:15:00, 55m
-        F: 13:20:00, 12m
-        G: 13:32:00, 18m
-        H: 13:50:00, 20m
-        I: 14:10:00, 10m
-    `,
-      {}
-    );
-  });
 });

cypress/integration/rendering/mindmap.spec.ts

@@ -223,18 +223,5 @@ mindmap
       shouldHaveRoot
     );
   });
-  describe('Markdown strings mindmaps (#4220)', () => {
-    it('Formatted label with linebreak and a wrapping label and emojis', () => {
-      imgSnapshotTest(
-        `mindmap
-    id1[\`**Start** with
-    a second line 😎\`]
-      id2[\`The dog in **the** hog... a *very long text* about it
-Word!\`]
-`,
-        { titleTopMargin: 0 }
-      );
-    });
-  });
   /* The end */
 });

cypress/integration/rendering/pie.spec.js

@@ -75,15 +75,4 @@ describe('Pie Chart', () => {
       expect(svg).to.not.have.attr('style');
     });
   });
-  it('should render a pie diagram when textPosition is set', () => {
-    imgSnapshotTest(
-      `
-        pie
-          "Dogs": 50
-          "Cats": 25
-        `,
-      { logLevel: 1, pie: { textPosition: 0.9 } }
-    );
-    cy.get('svg');
-  });
 });

cypress/integration/rendering/quadrantChart.spec.js

@@ -1,163 +0,0 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
-
-describe('Quadrant Chart', () => {
-  it('should render if only chart type is provided', () => {
-    imgSnapshotTest(
-      `
-  quadrantChart
-      `,
-      {}
-    );
-    cy.get('svg');
-  });
-  it('should render a complete quadrant chart', () => {
-    imgSnapshotTest(
-      `
-  quadrantChart
-    title Reach and engagement of campaigns
-    x-axis Low Reach --> High Reach
-    y-axis Low Engagement --> High Engagement
-    quadrant-1 We should expand
-    quadrant-2 Need to promote
-    quadrant-3 Re-evaluate
-    quadrant-4 May be improved
-    Campaign A: [0.3, 0.6]
-    Campaign B: [0.45, 0.23]
-    Campaign C: [0.57, 0.69]
-    Campaign D: [0.78, 0.34]
-    Campaign E: [0.40, 0.34]
-    Campaign F: [0.35, 0.78]
-      `,
-      {}
-    );
-    cy.get('svg');
-  });
-  it('should render without points', () => {
-    imgSnapshotTest(
-      `
-  quadrantChart
-    title Reach and engagement of campaigns
-    x-axis Low Reach --> High Reach
-    y-axis Low Engagement --> High Engagement
-    quadrant-1 We should expand
-    quadrant-2 Need to promote
-    quadrant-3 Re-evaluate
-    quadrant-4 May be improved
-      `,
-      {}
-    );
-    cy.get('svg');
-  });
-  it('should able to render y-axix on right side', () => {
-    imgSnapshotTest(
-      `
-  %%{init: {"quadrantChart": {"yAxisPosition": "right"}}}%%
-  quadrantChart
-    title Reach and engagement of campaigns
-    x-axis Low Reach --> High Reach
-    y-axis Low Engagement --> High Engagement
-    quadrant-1 We should expand
-    quadrant-2 Need to promote
-    quadrant-3 Re-evaluate
-    quadrant-4 May be improved
-      `,
-      {}
-    );
-    cy.get('svg');
-  });
-  it('should able to render x-axix on bottom', () => {
-    imgSnapshotTest(
-      `
-  %%{init: {"quadrantChart": {"xAxisPosition": "bottom"}}}%%
-  quadrantChart
-    title Reach and engagement of campaigns
-    x-axis Low Reach --> High Reach
-    y-axis Low Engagement --> High Engagement
-    quadrant-1 We should expand
-    quadrant-2 Need to promote
-    quadrant-3 Re-evaluate
-    quadrant-4 May be improved
-      `,
-      {}
-    );
-    cy.get('svg');
-  });
-  it('should able to render x-axix on bottom and y-axis on right', () => {
-    imgSnapshotTest(
-      `
-  %%{init: {"quadrantChart": {"xAxisPosition": "bottom", "yAxisPosition": "right"}}}%%
-  quadrantChart
-    title Reach and engagement of campaigns
-    x-axis Low Reach --> High Reach
-    y-axis Low Engagement --> High Engagement
-    quadrant-1 We should expand
-    quadrant-2 Need to promote
-    quadrant-3 Re-evaluate
-    quadrant-4 May be improved
-      `,
-      {}
-    );
-    cy.get('svg');
-  });
-  it('should render without title', () => {
-    imgSnapshotTest(
-      `
-  quadrantChart
-    x-axis Low Reach --> High Reach
-    y-axis Low Engagement --> High Engagement
-    quadrant-1 We should expand
-    quadrant-2 Need to promote
-    quadrant-3 Re-evaluate
-    quadrant-4 May be improved
-      `,
-      {}
-    );
-    cy.get('svg');
-  });
-  it('should use all the config', () => {
-    imgSnapshotTest(
-      `
-  %%{init: {"quadrantChart": {"chartWidth": 600, "chartHeight": 600, "titlePadding": 20, "titleFontSize": 10, "quadrantPadding": 20, "quadrantTextTopPadding": 40, "quadrantLabelFontSize": 20, "quadrantInternalBorderStrokeWidth": 3, "quadrantExternalBorderStrokeWidth": 5, "xAxisLabelPadding": 20, "xAxisLabelFontSize": 20, "yAxisLabelPadding": 20, "yAxisLabelFontSize": 20, "pointTextPadding": 20, "pointLabelFontSize": 20, "pointRadius": 10 }}}%%
-  quadrantChart
-    title Reach and engagement of campaigns
-    x-axis Low Reach --> High Reach
-    y-axis Low Engagement --> High Engagement
-    quadrant-1 We should expand
-    quadrant-2 Need to promote
-    quadrant-3 Re-evaluate
-    quadrant-4 May be improved
-    Campaign A: [0.3, 0.6]
-    Campaign B: [0.45, 0.23]
-    Campaign C: [0.57, 0.69]
-    Campaign D: [0.78, 0.34]
-    Campaign E: [0.40, 0.34]
-    Campaign F: [0.35, 0.78]
-      `,
-      {}
-    );
-    cy.get('svg');
-  });
-  it('should use all the theme variable', () => {
-    imgSnapshotTest(
-      `
-  %%{init: {"themeVariables": {"quadrant1Fill": "#b4dcff","quadrant2Fill": "#fef0ff", "quadrant3Fill": "#fffaf0", "quadrant4Fill": "#f0fff2", "quadrant1TextFill": "#ff0000", "quadrant2TextFill": "#2d00df", "quadrant3TextFill": "#00ffda", "quadrant4TextFill": "#e68300", "quadrantPointFill": "#0149ff", "quadrantPointTextFill": "#dc00ff", "quadrantXAxisTextFill": "#ffb500", "quadrantYAxisTextFill": "#fae604", "quadrantInternalBorderStrokeFill": "#3636f2", "quadrantExternalBorderStrokeFill": "#ff1010", "quadrantTitleFill": "#00ea19"} }}%%
-  quadrantChart
-    title Reach and engagement of campaigns
-    x-axis Low Reach --> High Reach
-    y-axis Low Engagement --> High Engagement
-    quadrant-1 We should expand
-    quadrant-2 Need to promote
-    quadrant-3 Re-evaluate
-    quadrant-4 May be improved
-    Campaign A: [0.3, 0.6]
-    Campaign B: [0.45, 0.23]
-    Campaign C: [0.57, 0.69]
-    Campaign D: [0.78, 0.34]
-    Campaign E: [0.40, 0.34]
-    Campaign F: [0.35, 0.78]
-      `,
-      {}
-    );
-    cy.get('svg');
-  });
-});

cypress/integration/rendering/sequencediagram.spec.js

@@ -1,6 +1,6 @@
 /// <reference types="Cypress" />
 
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util';
 
 context('Sequence diagram', () => {
   it('should render a sequence diagram with boxes', () => {
@@ -116,34 +116,7 @@ context('Sequence diagram', () => {
         loop Loopy
             Bob->>Alice: Pasten
         end      `,
-      {
+      { wrap: true }
-        sequence: {
-          wrap: true,
-        },
-      }
-    );
-  });
-  it('should render a sequence diagram with par_over', () => {
-    imgSnapshotTest(
-      `
-        sequenceDiagram
-        participant Alice
-        participant Bob
-        participant John
-        par_over Section title
-          Alice ->> Bob: Message 1<br>Second line
-          Bob ->> John: Message 2
-        end
-        par_over Two line<br>section title
-          Note over Alice: Alice note
-          Note over Bob: Bob note<br>Second line
-          Note over John: John note
-        end
-        par_over Mixed section
-          Alice ->> Bob: Message 1
-          Note left of Bob: Alice/Bob Note
-        end
-      `
     );
   });
   context('font settings', () => {

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

@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util';
 
 describe('State diagram', () => {
   it('v2 should render a simple info', () => {

cypress/integration/rendering/stateDiagram.spec.js

@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util';
 
 describe('State diagram', () => {
   it('should render a simple state diagrams', () => {

cypress/integration/rendering/zenuml.spec.js

@@ -1,19 +0,0 @@
-import { imgSnapshotTest } from '../../helpers/util.js';
-
-describe('Zen UML', () => {
-  it('Basic Zen UML diagram', () => {
-    imgSnapshotTest(
-      `
-    zenuml
-			A.method() {
-        if(x) {
-          B.method() {
-            selfCall() { return X }
-          }
-        }
-      }
-    `,
-      {}
-    );
-  });
-});

cypress/platform/ashish2.html

@@ -188,7 +188,7 @@ mindmap
       //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 './mermaid.esm.mjs';
+      import mermaid from '../../packages/mermaid/src/mermaid';
       // await mermaid.registerExternalDiagrams([]);
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);

cypress/platform/bundle-test.js

@@ -1,5 +1,4 @@
-// TODO: this file should be testing the ./mermaid.core.mjs file, as that's the file listed in the package.json file that users will use
+import mermaid from '../../packages/mermaid/src/mermaid';
-import mermaid from './mermaid.esm.mjs';
 
 let code = `flowchart LR
 Power_Supply --> Transmitter_A
@@ -50,9 +49,13 @@ mermaid.initialize({
     ],
   },
 });
-void (async () => {
+mermaid.render(
-  const { svg } = await mermaid.render('the-id-of-the-svg', code);
+  'the-id-of-the-svg',
+  code,
+  (svg) => {
     console.log(svg);
     const elem = document.querySelector('#graph-to-be');
     elem.innerHTML = svg;
-})();
+  }
+  // ,document.querySelector('#tmp')
+);

cypress/platform/class.html

@@ -12,6 +12,7 @@
     <style>
       body {
         background: rgb(221, 208, 208);
+        /*background:#333;*/
         font-family: 'Arial';
       }
       h1 {
@@ -112,16 +113,24 @@ classE o-- classF : aggregation
         callback Shape "callbackFunction" "This is a tooltip for a callback"
 
     </pre>
-    <script type="module">
+    <script src="./mermaid.js"></script>
-      import mermaid from './mermaid.esm.mjs';
+    <script>
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };
       mermaid.initialize({
         theme: 'default',
+        // arrowMarkerAbsolute: true,
+        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,
         flowchart: { curve: 'linear', htmlLabels: true },
+        // gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50, showSequenceNumbers: true },
+        // sequenceDiagram: { actorMargin: 300 } // deprecated
+        // fontFamily: '"arial", sans-serif',
+        // themeVariables: {
+        //   fontFamily: '"arial", sans-serif',
+        // },
         curve: 'linear',
         securityLevel: 'loose',
       });

cypress/platform/click_security_loose.html

@@ -125,6 +125,7 @@
       </pre>
     </div>
 
+    <script src="./mermaid.js"></script>
     <script>
       function clickByFlow(elemName) {
         const div = document.createElement('div');
@@ -161,9 +162,6 @@
 
         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 type="module">
+    <script src="./mermaid.js"></script>
-      import mermaid from './mermaid.esm.mjs';
+    <script>
       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 type="module">
+    <script src="./mermaid.js"></script>
-      import mermaid from './mermaid.esm.mjs';
+    <script>
       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 type="module">
+    <script src="./mermaid.js"></script>
-      import mermaid from './mermaid.esm.mjs';
+    <script>
       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 type="module">
+    <script src="./mermaid.js"></script>
-      import mermaid from './mermaid.esm.mjs';
+    <script>
       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 type="module">
+    <script src="./mermaid.js"></script>
-      import mermaid from './mermaid.esm.mjs';
+    <script>
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };

cypress/platform/e2e.html

@@ -1,12 +1,32 @@
 <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;
       }
@@ -16,5 +36,21 @@
       }
     </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

@@ -11,13 +11,13 @@ example-diagram
     <!-- <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 exampleDiagram from '../../packages/mermaid-example-diagram/dist/mermaid-example-diagram.core.mjs';
+      import exampleDiagram from '../../packages/mermaid-example-diagram/src/detector';
       // import example from '../../packages/mermaid-example-diagram/src/detector';
-      import mermaid from './mermaid.esm.mjs';
+      import mermaid from '../../packages/mermaid/src/mermaid';
 
       await mermaid.registerExternalDiagrams([exampleDiagram]);
       await mermaid.initialize({ logLevel: 0 });
-      await mermaid.run();
+      await mermaid.initThrowsErrorsAsync();
       if (window.Cypress) {
         window.rendered = true;
       }

cypress/platform/flow.html

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

cypress/platform/flow2.html

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

cypress/platform/ghsa2.html

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

cypress/platform/ghsa3.html

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

cypress/platform/gitgraph.html

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

cypress/platform/gitgraph2.html

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

cypress/platform/info.html

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

cypress/platform/knsv.html

@@ -42,86 +42,368 @@
     </style>
   </head>
   <body>
-    <pre class="mermaid" style="width: 50%">
+    <pre class="mermaid2" style="width: 50%">
-      %%{init: {"flowchart": {"htmlLabels": true}} }%%
+flowchart LR
-      flowchart LR
+  subgraph one
-      b("`The dog in **the** hog.(1).. a a a a *very long text* about it
+    direction LR
-      Word!
+    A[myClass1] --> B[default]
+    subgraph two
+      direction BT
+      C[myClass2] --> D[default]
+    end
+  end
 
-      Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words.`") --apa--> c
-      
-          </pre
-    >
-    <pre class="mermaid" style="width: 50%">
-      classDiagram-v2
-
-      classA -- classB : Inheritance
-      classA -- classC : link
-      classC -- classD : link
-      classB -- classD
     </pre>
-    <pre class="mermaid" style="width: 50%">
+    <pre class="mermaid2" style="width: 50%">
-      sequenceDiagram
+flowchart LR
-      Alice->>Bob: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
+  classDef aPID stroke:#4e4403,fill:#fdde29,color:#4e4403,rx:5px,ry:5px;
-      loop Loopy
+  classDef crm stroke:#333333,fill:#DCDCDC,color:#333333,rx:5px,ry:5px;
-          Bob->>Alice: Pasten
+  classDef type stroke:#502604,fill:#FAB565,color:#502604,rx:20px,ry:20px;;
+
+  O0("Joe")
+  class O0 aPID;
+
+  O1("Person")
+  class O1 crm;
+  O0 -- has type -->O1["Person"]
+
+  O2("aat:300411314")
+  class O2 type;
+  click O2 function "Sorry the newline html tags are not being processed correctly<br/> So all of this appears on the <br/> same line."
+  O0 -- has type -->O2["Bug"]
+  click O0 function "Lots of great info about Joe<br>Lots of great info about Joe<br>burt<br>fred";
+    </pre>
+    <pre class="mermaid2" style="width: 50%">
+flowchart TD
+    subgraph test
+    direction TB
+    subgraph test2
+      direction LR
+      F --> D
+    end
+    subgraph test3
+      direction TB
+      G --> H
+    end
     end
     </pre>
-    <pre class="mermaid" style="width: 50%">
+    <pre class="mermaid2" style="width: 50%">
-      %%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart TD
-      flowchart LR
+
-      b("`The dog in **the** hog.(1)
+  release-branch[Create Release Branch]:::relClass
-      NL`") --"`1o **bold**`"--> c[new strings svg labels]
+  develop-branch[Update Develop Branch]:::relClass
+  github-release-draft[GitHub Release Draft]:::relClass
+  trigger-pipeline[Trigger Jenkins pipeline]:::fixClass
+  github-release[GitHub Release]:::postClass
+
+  build-ready --> release-branch
+  build-ready --> develop-branch
+  release-branch --> jenkins-release-build
+  jenkins-release-build --> github-release-draft
+  jenkins-release-build --> install-release
+  install-release --> verify-release
+  jenkins-release-build --> announce
+  github-release-draft --> github-release
+  verify-release --> verify-check
+  verify-check -- Yes --> github-release
+  verify-check -- No --> release-fix
+  release-fix --> release-branch-pr
+  verify-check -- No --> delete-artifacts
+  release-branch-pr --> trigger-pipeline
+  delete-artifacts --> trigger-pipeline
+  trigger-pipeline --> jenkins-release-build
+
+
     </pre>
-    <pre class="mermaid" style="width: 50%">
+    <pre class="mermaid2" style="width: 50%">
-      %%{init: {"flowchart": {"htmlLabels": true}} }%%
+flowchart LR
-      flowchart LR
+        a["<strong>Haiya</strong>"]===>b
-      b("`The dog in **the** hog.(1)
-      NL`") --"`1o **bold**`"--> c[new strings html labels]
     </pre>
-    <pre class="mermaid" style="width: 50%">
+    <pre class="mermaid2" style="width: 50%">
-      %%{init: {"flowchart": {"htmlLabels": true}} }%%
+flowchart TD
-      flowchart LR
+    A --> B
-      b("The dog in the hog.(1)\nNL") --"1o bold"--> c[old strings svg labels]
+    A --> C
+    B --> C
     </pre>
-    <script type="module">
+    <pre class="mermaid2" style="width: 50%">
-      // import mindmap from '../../packages/mermaid-mindmap/src/detector';
+flowchart TD
-      // import example from '../../packages/mermaid-example-diagram/src/mermaid-example-diagram.core.mjs';
+      A([stadium shape test])
-      import mermaid from './mermaid.esm.mjs';
+      A -->|Get money| B([Go shopping])
-      // await mermaid.registerExternalDiagrams([example]);
+      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;
+    </pre>
+    <pre class="mermaid2" style="width: 50%">
+   sequenceDiagram
+      title: My Sequence Diagram Title
+      accTitle: My Acc Sequence Diagram
+      accDescr: My Sequence Diagram Description
+
+      Alice->>John: Hello John, how are you?
+      John-->>Alice: Great!
+      Alice-)John: See you later!
+    </pre>
+    <pre class="mermaid2" style="width: 50%">
+graph TD
+    A -->|000| B
+    B -->|111| C
+
+    linkStyle 1 stroke:#ff3,stroke-width:4px,color:red;
+    </pre>
+    <pre class="mermaid2" style="width: 100%">
+  journey
+      accTitle: My User Journey Diagram
+      accDescr: My User Journey Diagram Description
+
+      title My working day
+      section Go to work
+        Make tea: 5: Me
+        Go upstairs: 3: Me
+        Do work: 1: Me, Cat
+      section Go home
+        Go downstairs: 5: Me
+        Sit down: 5: Me
+    </pre>
+    <pre class="mermaid2" style="width: 100%">
+        info
+    </pre>
+    <pre class="mermaid2" style="width: 100%">
+requirementDiagram
+      accTitle: My req Diagram
+      accDescr: My req Diagram Description
+
+    requirement test_req {
+    id: 1
+    text: the test text.
+    risk: high
+    verifymethod: test
+    }
+
+    functionalRequirement test_req2 {
+    id: 1.1
+    text: the second test text.
+    risk: low
+    verifymethod: inspection
+    }
+
+    performanceRequirement test_req3 {
+    id: 1.2
+    text: the third test text.
+    risk: medium
+    verifymethod: demonstration
+    }
+
+    element test_entity {
+    type: simulation
+    }
+
+    element test_entity2 {
+    type: word doc
+    docRef: reqs/test_entity
+    }
+
+
+    test_entity - satisfies -> test_req2
+    test_req - traces -> test_req2
+    test_req - contains -> test_req3
+    test_req <- copies - test_entity2
+    </pre>
+    <pre class="mermaid2" style="width: 100%">
+gantt
+    dateFormat  YYYY-MM-DD
+    title       Adding GANTT diagram functionality to mermaid
+    excludes    weekends
+    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
+
+    section A section
+    Completed task            :done,    des1, 2014-01-06,2014-01-08
+    Active task               :active,  des2, 2014-01-09, 3d
+    Future task               :         des3, after des2, 5d
+    Future task2              :         des4, after des3, 5d
+
+    section Critical tasks
+    Completed task in the critical line :crit, done, 2014-01-06,24h
+    Implement parser and jison          :crit, done, after des1, 2d
+    Create tests for parser             :crit, active, 3d
+    Future task in critical line        :crit, 5d
+    Create tests for renderer           :2d
+    Add to mermaid                      :1d
+    Functionality added                 :milestone, 2014-01-25, 0d
+
+    section Documentation
+    Describe gantt syntax               :active, a1, after des1, 3d
+    Add gantt diagram to demo page      :after a1  , 20h
+    Add another diagram to demo page    :doc1, after a1  , 48h
+
+    section Last section
+    Describe gantt syntax               :after doc1, 3d
+    Add gantt diagram to demo page      :20h
+    Add another diagram to demo page    :48h
+    </pre>
+    <pre class="mermaid2" style="width: 100%">
+stateDiagram
+  state Active {
+    Idle
+  }
+  Inactive --> Idle: ACT
+  Active --> Active: LOG
+    </pre>
+    <pre class="mermaid2" style="width: 100%">
+      flowchart TB
+        accTitle: My flowchart
+        accDescr: My flowchart Description
+        subgraph One
+          a1-->a2-->a3
+        end
+    </pre>
+    <pre class="mermaid2" style="width: 100%">
+        sequenceDiagram
+          A ->> B: 1
+          rect rgb(204, 0, 102)
+            break yes
+              rect rgb(0, 204, 204)
+                C ->> C: 0
+              end
+            end
+          end
+          B ->> A: Return
+    </pre>
+    <pre class="mermaid2" style="width: 100%">
+classDiagram
+accTitle: My class diagram
+accDescr: My class diagram Description
+Class01 <|-- AveryLongClass : Cool
+Class09 --> C2 : Where am i?
+Class09 --* C3
+Class09 --|> Class07
+Class07 : equals()
+Class07 : Object[] elementData
+Class01 : size()
+Class01 : int chimp
+Class01 : int gorilla
+class Class10 {
+  int id
+  size()
+}
+    </pre>
+    <pre class="mermaid2" style="width: 100%">
+%%{init: {'config': {'wrap': true }}}%%
+        sequenceDiagram
+        participant A as Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
+        A->>Bob: Hola
+        Bob-->A: Pasten !
+    </pre>
+    <pre class="mermaid2" style="width: 100%">
+      gitGraph
+       commit id: "ZERO"
+       branch develop
+       commit id:"A"
+       checkout main
+       commit id:"ONE"
+       checkout develop
+       commit id:"B"
+       branch featureA
+       commit id:"FIX"
+       commit id: "FIX-2"
+       checkout main
+       commit id:"TWO"
+       cherry-pick id:"A"
+       commit id:"THREE"
+       cherry-pick id:"FIX"
+       checkout develop
+       commit id:"C"
+       merge featureA
+    </pre>
+    <pre class="mermaid2" style="width: 100%">
+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]
+    </pre>
+    <pre class="mermaid2" style="width: 100%">
+        classDiagram
+          Animal "1" <|-- Duck
+          Animal <|-- Fish
+          Animal <--o Zebra
+          Animal : +int age
+          Animal : +String gender
+          Animal: +isMammal()
+          Animal: +mate()
+          class Duck{
+            +String beakColor
+            +swim()
+            +quack()
+          }
+          class Fish{
+            -int sizeInFeet
+            -canEat()
+          }
+          class Zebra{
+            +bool is_wild
+            +run()
+          }
+    </pre>
+    <pre class="mermaid2" style="width: 100%">
+        erDiagram
+    CAR ||--o{ NAMED-DRIVER : allows
+    CAR {
+        string registrationNumber
+        string make
+        string model
+    }
+    PERSON ||--o{ NAMED-DRIVER : is
+    PERSON {
+        string firstName
+        string lastName
+        int age
+    }
+    </pre>
+
+    <!-- <script src="./mermaid.js"></script> -->
+    <script src="./mermaid.js"></script>
+    <script>
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };
       mermaid.initialize({
-        // theme: 'forest',
+        maxTextSize: 900000,
         startOnLoad: true,
+        securityLevel: 'loose',
         logLevel: 0,
+        fontFamily: 'courier',
         flowchart: {
-          // defaultRenderer: 'elk',
+          // curve: 'curveLinear',
-          useMaxWidth: false,
+          useMaxWidth: true,
-          // htmlLabels: false,
+          htmlLabels: false,
-          htmlLabels: true,
+          fontFamily: 'courier',
         },
-        // htmlLabels: false,
+        lazyLoadedDiagrams: ['./mermaid-mindmap-detector.js'],
-        gantt: {
-          useMaxWidth: false,
-        },
-        sequence: {
-          wrap: true,
-        },
-        useMaxWidth: false,
       });
       function callback() {
         alert('It worked');
       }
+
+      function clickByFlow(elemName) {
+        const div = document.createElement('div');
+        div.className = 'created-by-click';
+        div.style = 'padding: 20px; background: green; color: white;';
+        div.innerText = 'Clicked By Flow';
+
+        document.getElementsByTagName('body')[0].appendChild(div);
+      }
+
       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/knsv2.html

@@ -29,9 +29,9 @@
       }
       .mermaid svg {
         /* font-size: 18px !important; */
-        background-color: #efefef;
+        background-color: #eee;
-        background-image: radial-gradient(#fff 51%, transparent 91%),
+        background-image: radial-gradient(#fff 1%, transparent 11%),
-          radial-gradient(#fff 51%, transparent 91%);
+          radial-gradient(#fff 1%, transparent 11%);
         background-size: 20px 20px;
         background-position: 0 0, 10px 10px;
         background-repeat: repeat;
@@ -51,103 +51,29 @@
         font-family: monospace;
         font-size: 72px;
       }
-      /* tspan {
-        font-size: 6px !important;
-      } */
     </style>
   </head>
   <body>
     <pre id="diagram" class="mermaid">
-stateDiagram-v2
+%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
-    [*] --> Still
+graph BT
-    Still --> [*]
+a{The cat in the hat} -- 1o --> b
-    Still --> Moving
+a -- 2o --> c
-    Moving --> Still
+a -- 3o --> d
-    Moving --> Crash
+g --2i--> a
-    Crash --> [*]    </pre
+d --1i--> a
-    >
+h --3i -->a
-    <pre id="diagram" class="mermaid2">
+b --> d(The dog in the hog)
-flowchart RL
+c --> d
-    subgraph "`one`"
-      a1 -- l1 --> a2
-      a1 -- l2 --> a2
-    end
-    </pre>
-    <pre id="diagram" class="mermaid">
-flowchart RL
-    subgraph "`one`"
-      a1 -- l1 --> a2
-      a1 -- l2 --> a2
-    end
     </pre>
     <pre id="diagram" class="mermaid2">
-flowchart
+flowchart-elk TB
-id["`A root with a long text that wraps to keep the node size in check. A root with a long text that wraps to keep the node size in check`"]</pre
+      a --> b
-    >
+      a --> c
-    <pre id="diagram" class="mermaid2">
+      b --> d
-flowchart LR
+      c --> d
-    A[A text that needs to be wrapped wraps to another line]
-    B[A text that needs to be<br/>wrapped wraps to another line]
-    C["`A text that needs to be wrapped to another line`"]</pre>
-    <pre id="diagram" class="mermaid2">
-flowchart LR
-    C["`A text
-        that needs
-        to be wrapped
-        in another
-        way`"]
-  </pre
-    >
-    <pre id="diagram" class="mermaid">
-      classDiagram-v2
-        note "I love this diagram!\nDo you love it?"
-    </pre>
-    <pre id="diagram" class="mermaid">
-    stateDiagram-v2
-    State1: The state with a note with minus - and plus + in it
-    note left of State1
-      Important information! You can write
-      notes with . and  in them.
-    end note    </pre
-    >
-    <pre id="diagram" class="mermaid2">
-mindmap
-root
-  Child3(A node with an icon and with a long text that wraps to keep the node size in check)
-</pre
-    >
-    <pre id="diagram" class="mermaid2">
-      %%{init: {"theme": "forest"} }%%
-mindmap
-    id1[**Start2**<br/>end]
-      id2[**Start2**<br />end]
-      %% Another comment
-      id3[**Start2**<br>end] %% Comment
-      id4[**Start2**<br >end<br    >the very end]
     </pre>
     <pre id="diagram" class="mermaid2">
-mindmap
-    id1["`**Start2**
-    second line 😎 with long text that is wrapping to the next line`"]
-      id2["`Child **with bold** text`"]
-      id3["`Children of which some
-      is using *italic type of* text`"]
-      id4[Child]
-      id5["`Child
-      Row
-      and another
-      `"]
-    </pre>
-    <pre id="diagram" class="mermaid2">
-mindmap
-    id1("`**Root**`"]
-      id2["`A formatted text... with **bold** and *italics*`"]
-      id3[Regular labels works as usual]
-      id4["`Emojis and unicode works too: 🤓
-      शान्तिः سلام  和平 `"]
-
-    </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
@@ -163,7 +89,7 @@ flowchart TB
     rom --> core2
   end
 
-  subgraph amd["`**AMD** Latte GPU`"]
+  subgraph amd[AMD Latte GPU]
     mem[Memory & I/O Bridge]
     dram[DRAM Controller]
     edram[32 MB EDRAM MEM1]
@@ -202,62 +128,6 @@ flowchart TB
   rtc{{rtc}}
 </pre
     >
-    <pre id="diagram" class="mermaid2">
-%%{init: {"flowchart": {"defaultRenderer": "elk", "htmlLabels": false}} }%%
-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
@@ -393,23 +263,21 @@ mindmap
 
     <script type="module">
       // import mindmap from '../../packages/mermaid-mindmap/src/detector';
-      // import example from '../../packages/mermaid-example-diagram/src/mermaid-example-diagram.core.mjs';
+      import example from '../../packages/mermaid-example-diagram/src/detector';
-      import mermaid from './mermaid.esm.mjs';
+      import mermaid from '../../packages/mermaid/src/mermaid';
-      // await mermaid.registerExternalDiagrams([example]);
+      await mermaid.registerExternalDiagrams([example]);
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };
       mermaid.initialize({
-        // theme: 'forest',
+        theme: 'forest',
         startOnLoad: true,
-        logLevel: 0,
+        logLevel: 5,
         flowchart: {
           // defaultRenderer: 'elk',
           useMaxWidth: false,
-          // htmlLabels: false,
           htmlLabels: true,
         },
-        // htmlLabels: false,
         gantt: {
           useMaxWidth: false,
         },

cypress/platform/knsv3.html

@@ -40,7 +40,7 @@
 
     <script type="module">
       // import mermaid from './mermaid.esm.mjs';
-      import mermaid from '../../packages/mermaid/dist/mermaid.esm.mjs';
+      import mermaid from '../../packages/mermaid/src/mermaid';
       // import mermaidMindmap from './mermaid-mindmap.esm.mjs';
 
       // import mermaidMindmap from 'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-mindmap@9.3.0/+esm';

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

cypress/platform/regression/issue-1874.html

@@ -1,4 +1,14 @@
 <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">
@@ -16,12 +26,4 @@ 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 type="module">
+    <script src="./mermaid.js"></script>
-      import mermaid from './mermaid.esm.mjs';
+    <script>
-      await mermaid.initialize({ startOnLoad: false });
+      mermaid.init({ startOnLoad: false });
-      await mermaid.run();
 
-      await mermaid.mermaidAPI.initialize({ securityLevel: 'strict' });
+      mermaid.mermaidAPI.initialize({ securityLevel: 'strict' });
       try {
         console.log('rendering');
-        await mermaid.mermaidAPI.render('graphDiv', `>`);
+        mermaid.mermaidAPI.render('graphDiv', `>`);
       } catch (e) {}
 
-      const { svg } = await mermaid.mermaidAPI.render('graphDiv', `graph LR\n a --> b`);
+      mermaid.mermaidAPI.render('graphDiv', `graph LR\n a --> b`, (html) => {
-      document.getElementById('graph').innerHTML = svg;
+        document.getElementById('graph').innerHTML = html;
+      });
     </script>
   </body>
 </html>

cypress/platform/rerender.html

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

cypress/platform/showcase_base_dark.html

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

cypress/platform/sidv.html

@@ -1,17 +1,252 @@
 <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 id="diagram" class="mermaid">
+%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
 graph TB
       a --> b
       a --> c
       b --> d
       c --> d
     </pre>
+    <pre id="diagram" class="mermaid">
+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]
 
-    <div id="d2"></div>
+    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>
+
+    <!-- <div id="cy"></div> -->
+    <!-- <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> -->
+    <!-- <script src="./mermaid-example-diagram-detector.js"></script>    -->
+    <!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script> -->
+    <!-- <script src="./mermaid.js"></script> -->
 
     <script type="module">
-      import mermaid from '/mermaid.esm.mjs';
+      import mermaid from '../../packages/mermaid/src/mermaid';
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };
@@ -36,11 +271,6 @@ graph TB
         console.error('In parse error:');
         console.error(err);
       };
-      const value = `graph TD\nHello --> World`;
-      const el = document.getElementById('d2');
-      const { svg } = await mermaid.render('d22', value);
-      console.log(svg);
-      el.innerHTML = svg;
       // 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));

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 type="module">
+    <script src="./mermaid.js"></script>
-      import mermaid from './mermaid.esm.mjs';
+    <script>
       function showFullFirstSquad(elemName) {
         console.log('show ' + elemName);
       }

cypress/platform/theme-directives.html

@@ -120,8 +120,8 @@
       </div>
     </div>
 
-    <script type="module">
+    <script src="./mermaid.js"></script>
-      import mermaid from './mermaid.esm.mjs';
+    <script>
       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 type="module">
+    <script src="./mermaid.js"></script>
-      import mermaid from './mermaid.esm.mjs';
+    <script>
       mermaid.initialize({
         theme: 'forest',
         logLevel: 3,

cypress/platform/vertices.html

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

cypress/platform/viewer.js

@@ -1,6 +1,5 @@
-import mermaid2 from './mermaid.esm.mjs';
+import mermaid2 from '../../packages/mermaid/src/mermaid';
-import externalExample from '../../packages/mermaid-example-diagram/dist/mermaid-example-diagram.core.mjs';
+import externalExample from '../../packages/mermaid-example-diagram/src/detector';
-import zenUml from '../../packages/mermaid-zenuml/dist/mermaid-zenuml.core.mjs';
 
 function b64ToUtf8(str) {
   return decodeURIComponent(escape(window.atob(str)));
@@ -45,9 +44,10 @@ const contentLoaded = async function () {
       document.getElementsByTagName('body')[0].appendChild(div);
     }
 
-    await mermaid2.registerExternalDiagrams([externalExample, zenUml]);
+    await mermaid2.registerExternalDiagrams([externalExample]);
     mermaid2.initialize(graphObj.mermaid);
-    await mermaid2.run();
+    await mermaid2.init();
+    markRendered();
   }
 };
 
@@ -75,7 +75,7 @@ function merge(current, update) {
   return current;
 }
 
-const contentLoadedApi = async function () {
+const contentLoadedApi = function () {
   let pos = document.location.href.indexOf('?graph=');
   if (pos > 0) {
     pos = pos + 7;
@@ -102,27 +102,41 @@ const contentLoadedApi = async function () {
       mermaid2.initialize(cnf);
 
       for (let i = 0; i < numCodes; i++) {
-        const { svg, bindFunctions } = await mermaid2.render(
+        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);
 
-      const { svg, bindFunctions } = await mermaid2.render('newid', graphObj.code, div);
+      mermaid2.render(
-      div.innerHTML = svg;
+        'newid',
+        graphObj.code,
+        (svgCode, bindFunctions) => {
+          div.innerHTML = svgCode;
+
+          if (bindFunctions) {
             bindFunctions(div);
           }
+        },
+        div
+      );
     }
+  }
+  markRendered();
 };
 
 if (typeof document !== 'undefined') {
@@ -134,10 +148,10 @@ if (typeof document !== 'undefined') {
     function () {
       if (this.location.href.match('xss.html')) {
         this.console.log('Using api');
-        void contentLoadedApi().finally(markRendered);
+        contentLoadedApi();
       } else {
         this.console.log('Not using api');
-        void contentLoaded().finally(markRendered);
+        void contentLoaded();
       }
     },
     false

cypress/platform/xss.html

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

cypress/platform/xss11.html

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

cypress/platform/xss12.html

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

cypress/platform/xss13.html

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

cypress/platform/xss14.html

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

cypress/platform/xss15.html

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

cypress/platform/xss16.html

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

cypress/platform/xss17.html

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

cypress/platform/xss18.html

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