fix: getElementById type issue.

Converts mindmapDB to TS

.eslintignore

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

.eslintrc.cjs

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

.eslintrc.json

@@ -0,0 +1,76 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "jest/globals": true,
+    "node": true
+  },
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "jsx": true
+    },
+    "sourceType": "module"
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:jsdoc/recommended",
+    "plugin:json/recommended",
+    "plugin:markdown/recommended",
+    "prettier"
+  ],
+  "plugins": ["@typescript-eslint", "html", "jest", "jsdoc", "json"],
+  "rules": {
+    "no-console": "error",
+    "no-prototype-builtins": "off",
+    "no-unused-vars": "off",
+    "jsdoc/check-indentation": "off",
+    "jsdoc/check-alignment": "off",
+    "jsdoc/check-line-alignment": "off",
+    "jsdoc/multiline-blocks": "off",
+    "jsdoc/newline-after-description": "off",
+    "jsdoc/tag-lines": "off",
+    "jsdoc/require-param-description": "off",
+    "jsdoc/require-param-type": "off",
+    "jsdoc/require-returns": "off",
+    "jsdoc/require-returns-description": "off",
+    "cypress/no-async-tests": "off",
+    "@typescript-eslint/ban-ts-comment": [
+      "error",
+      {
+        "ts-expect-error": "allow-with-description",
+        "ts-ignore": "allow-with-description",
+        "ts-nocheck": "allow-with-description",
+        "ts-check": "allow-with-description",
+        "minimumDescriptionLength": 10
+      }
+    ],
+    "json/*": ["error", "allowComments"],
+    "no-empty": ["error", { "allowEmptyCatch": true }]
+  },
+  "overrides": [
+    {
+      "files": ["cypress/**", "demos/**"],
+      "rules": {
+        "no-console": "off"
+      }
+    },
+    {
+      "files": ["*.spec.{ts,js}", "cypress/**", "demos/**", "**/docs/**"],
+      "rules": {
+        "jsdoc/require-jsdoc": "off",
+        "@typescript-eslint/no-unused-vars": "off"
+      }
+    },
+    {
+      "files": ["*.html", "*.md", "**/*.md/*"],
+      "rules": {
+        "no-var": "error",
+        "no-undef": "off",
+        "@typescript-eslint/no-unused-vars": "off"
+      }
+    }
+  ]
+}

.github/FUNDING.yml

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

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,43 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: 'Status: Triage, Type: Bug / Error'
+assignees: ''
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Code Sample**
+If applicable, add the code sample or a link to the [live editor](https://mermaid.live).
+
+**Desktop (please complete the following information):**
+
+- OS: [e.g. iOS]
+- Browser [e.g. chrome, safari]
+- Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+
+- Device: [e.g. iPhone6]
+- OS: [e.g. iOS8.1]
+- Browser [e.g. stock browser, safari]
+- Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,69 +0,0 @@
-name: Bug Report
-description: Create a report to help us improve
-labels:
-  - 'Status: Triage'
-  - 'Type: Bug / Error'
-
-body:
-  - type: markdown
-    attributes:
-      value: |-
-        ## Security vulnerabilities
-        Please refer our [Security Policy](https://github.com/mermaid-js/.github/blob/main/SECURITY.md) and report to keep vulnerabilities confidential so we can release fixes first.
-
-        ## Before you submit...
-        We like to help you, but in order to do that should you make a few things first:
-
-        - 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!
-  - type: textarea
-    attributes:
-      label: Description
-      description: Give a clear and concise description of what the bug is.
-      placeholder: When I do ... does ... happen.
-    validations:
-      required: true
-  - type: textarea
-    attributes:
-      label: Steps to reproduce
-      description: Give a step-by-step example on how to reproduce the bug.
-      placeholder: |-
-        1. Do this
-        2. Do that
-        3. ...
-        4. Bug!
-    validations:
-      required: true
-  - type: textarea
-    attributes:
-      label: Screenshots
-      description: If applicable, add screenshots to help explain your issue.
-  - type: textarea
-    attributes:
-      label: Code Sample
-      description: |-
-        If applicable, add the code sample or a link to the [Live Editor](https://mermaid.live).
-        Any text pasted here will be rendered as a Code block.
-      render: text
-  - type: textarea
-    attributes:
-      label: Setup
-      description: |-
-        Please fill out the below info.
-        Note that you only need to fill out one and not both sections.
-      value: |-
-        **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
-      description: Anything else to add?

.github/ISSUE_TEMPLATE/config.yml

@@ -1,14 +0,0 @@
-blank_issues_enabled: true
-contact_links:
-  - name: GitHub Discussions
-    url: https://github.com/mermaid-js/mermaid/discussions
-    about: Ask the Community questions or share your own graphs in our discussions.
-  - name: Slack
-    url: https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE
-    about: Join our Community on Slack for Help and a casual chat.
-  - name: Documentation
-    url: https://mermaid-js.github.io
-    about: Read our documentation for all that Mermaid.js can offer.
-  - name: Live Editor
-    url: https://mermaid.live
-    about: Try the live editor to preview graphs in no time.

.github/ISSUE_TEMPLATE/diagram_proposal.yml

@@ -1,42 +0,0 @@
-name: Diagram Proposal
-description: Suggest a new Diagram Type to add to Mermaid.
-labels:
-  - 'Status: Triage'
-  - 'Type: Enhancement'
-
-body:
-  - type: markdown
-    attributes:
-      value: |-
-        ## Before you submit...
-        First of all, thank you for proposing a new Diagram to us.
-        We are always happy about new ideas to improve Mermaid.js wherever possible.
-
-        To get the fastest and best response possible, make sure you do the following:
-
-        - 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!
-  - type: textarea
-    attributes:
-      label: Proposal
-      description: A clear and concise description of what should be added to Mermaid.js.
-      placeholder: Mermaid.js should add ... because ...
-    validations:
-      required: true
-  - type: textarea
-    attributes:
-      label: Use Cases
-      description: If applicable, give some use cases for where this diagram would be useful.
-      placeholder: The Diagram could be used for ...
-  - type: textarea
-    attributes:
-      label: Screenshots
-      description: If applicable, add screenshots to show possible examples of how the diagram may look like.
-  - type: textarea
-    attributes:
-      label: Code Sample
-      description: |-
-        If applicable, add a code sample for how to implement this new diagram.
-        The text will automatically be rendered as JavaScript code.
-      render: javascript

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,19 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: 'Status: Triage, Type: Enhancement'
+assignees: ''
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/ISSUE_TEMPLATE/question.md

@@ -0,0 +1,16 @@
+---
+name: Question
+about: Get some help from the community.
+title: ''
+labels: 'Help wanted!, Type: Other'
+assignees: ''
+---
+
+## Help us help you!
+
+You want an answer. Here are some ways to get it quicker:
+
+- Use a clear and concise title.
+- Try to pose a clear and concise question.
+- Include as much, or as little, code as necessary.
+- Don't be shy to give us some screenshots, if it helps!

.github/ISSUE_TEMPLATE/syntax_proposal.yml

@@ -1,34 +0,0 @@
-name: Syntax Proposal
-description: Suggest a new Syntax to add to Mermaid.js.
-labels:
-  - 'Status: Triage'
-  - 'Type: Enhancement'
-
-body:
-  - type: markdown
-    attributes:
-      value: |-
-        ## Before you submit...
-        First of all, thank you for proposing a new Syntax to us.
-        We are always happy about new ideas to improve Mermaid.js wherever possible.
-
-        To get the fastest and best response possible, make sure you do the following:
-
-        - Use a clear and concise title
-        - Fill out the text fields with as much detail as possible. Examples are always welcome.
-        - Never be shy to give us screenshots and/or code samples. It will help!
-  - type: textarea
-    attributes:
-      label: Proposal
-      description: A clear and concise description of what Syntax should be added to Mermaid.js.
-      placeholder: Mermaid.js should add ... because ...
-    validations:
-      required: true
-  - type: textarea
-    attributes:
-      label: Example
-      description: If applicable, provide an example of the new Syntax.
-  - type: textarea
-    attributes:
-      label: Screenshots
-      description: If applicable, add screenshots to show possible examples of how the theme may look like.

.github/ISSUE_TEMPLATE/theme_proposal.yml

@@ -1,42 +0,0 @@
-name: Theme Proposal
-description: Suggest a new theme to add to Mermaid.js.
-labels:
-  - 'Status: Triage'
-  - 'Type: Enhancement'
-
-body:
-  - type: markdown
-    attributes:
-      value: |-
-        ## Before you submit...
-        First of all, thank you for proposing a new Theme to us.
-        We are always happy about new ideas to improve Mermaid.js wherever possible.
-
-        To get the fastest and best response possible, make sure you do the following:
-
-        - Use a clear and concise title
-        - Fill out the text fields with as much detail as possible. Examples are always welcome!
-        - Never be shy to give us screenshots and/or code samples. It will help!
-  - type: textarea
-    attributes:
-      label: Proposal
-      description: A clear and concise description of what theme should be added to Mermaid.js.
-      placeholder: Mermaid.js should add ... because ...
-    validations:
-      required: true
-  - type: textarea
-    attributes:
-      label: Colors
-      description: |-
-        A detailed list of the different colour values to use.
-        A list of currently used variable names can be found [here](https://mermaid-js.github.io/mermaid/#/theming?id=theme-variables-reference-table)
-      placeholder: |-
-        - background: #f4f4f4
-        - primaryColor: #fff4dd
-        - ...
-    validations:
-      required: true
-  - type: textarea
-    attributes:
-      label: Screenshots
-      description: If applicable, add screenshots to show possible examples of how the theme may look like.

.github/dependabot.yml

@@ -0,0 +1,18 @@
+version: 2
+updates:
+  - package-ecosystem: npm
+    open-pull-requests-limit: 10
+    directory: /
+    target-branch: develop
+    versioning-strategy: increase
+    schedule:
+      interval: weekly
+      day: monday
+      time: '07:00'
+  - package-ecosystem: github-actions
+    directory: /
+    target-branch: develop
+    schedule:
+      interval: weekly
+      day: monday
+      time: '07:00'

.github/pull_request_template.md

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

.github/workflows/dependency-review.yml

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

.github/workflows/docs.yml

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

.github/workflows/e2e.yml

@@ -32,7 +32,6 @@ jobs:
       # and run all Cypress tests
       - name: Cypress run
         uses: cypress-io/github-action@v4
-        id: cypress
         # If CYPRESS_RECORD_KEY is set, run in parallel on all containers
         # Otherwise (e.g. if running from fork), we run on a single container only
         if: ${{ ( env.CYPRESS_RECORD_KEY != '' ) || ( matrix.containers == 1 ) }}
@@ -45,10 +44,3 @@ jobs:
           parallel: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
         env:
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
-
-      - name: Upload Artifacts
-        uses: actions/upload-artifact@v3
-        if: ${{ failure() && steps.cypress.conclusion == 'failure' }}
-        with:
-          name: error-snapshots
-          path: cypress/snapshots/**/__diff_output__/*

.github/workflows/link-checker.yml

@@ -1,44 +0,0 @@
-# This Link Checker is run on all documentation files once per week.
-
-# references:
-# - https://github.com/lycheeverse/lychee-action
-# - https://github.com/lycheeverse/lychee
-
-name: Link Checker
-
-on:
-  push:
-    branches:
-      - develop
-      - master
-  pull_request:
-    branches:
-      - master
-  schedule:
-    # * is a special character in YAML so you have to quote this string
-    - cron: '30 8 * * *'
-
-jobs:
-  linkChecker:
-    runs-on: ubuntu-latest
-    permissions:
-      # lychee only uses the GITHUB_TOKEN to avoid rate-limiting
-      contents: read
-    steps:
-      - uses: actions/checkout@v3
-
-      - name: Restore lychee cache
-        uses: actions/cache@v3
-        with:
-          path: .lycheecache
-          key: cache-lychee-${{ github.sha }}
-          restore-keys: cache-lychee-
-
-      - name: Link Checker
-        uses: lycheeverse/lychee-action@v1.5.4
-        with:
-          args: --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_TOKEN: ${{secrets.GITHUB_TOKEN}}

.github/workflows/lint.yml

@@ -7,10 +7,9 @@ on:
       - opened
       - synchronize
       - ready_for_review
-  workflow_dispatch:
 
 permissions:
-  contents: write
+  contents: read
 
 jobs:
   lint:
@@ -37,35 +36,7 @@ jobs:
           CYPRESS_CACHE_FOLDER: .cache/Cypress
 
       - name: Run Linting
-        shell: bash
-        run: |
-          if ! pnpm run lint; then
-              # print a nice error message on lint failure
-              ERROR_MESSAGE='Running `pnpm run lint` failed.'
-              ERROR_MESSAGE+=' Running `pnpm run lint:fix` may fix this issue. '
-              ERROR_MESSAGE+=" If this error doesn't occur on your local machine,"
-              ERROR_MESSAGE+=' make sure your packages are up-to-date by running `pnpm install`.'
-              ERROR_MESSAGE+=' You may also need to delete your prettier cache by running'
-              ERROR_MESSAGE+=' `rm ./node_modules/.cache/prettier/.prettier-cache`.'
-              echo "::error title=Lint failure::${ERROR_MESSAGE}"
-              # make sure to return an error exitcode so that GitHub actions shows a red-cross
-              exit 1
-          fi
+        run: pnpm run lint
 
       - name: Verify Docs
-        id: verifyDocs
-        working-directory: ./packages/mermaid
-        continue-on-error: ${{ github.event_name == 'push' }}
         run: pnpm run docs:verify
-
-      - name: Rebuild Docs
-        if: ${{ steps.verifyDocs.outcome == 'failure' && github.event_name == 'push' }}
-        working-directory: ./packages/mermaid
-        run: pnpm run docs:build
-
-      - name: Commit changes
-        uses: EndBug/add-and-commit@v9
-        if: ${{ steps.verifyDocs.outcome == 'failure' && github.event_name == 'push' }}
-        with:
-          message: 'Update docs'
-          add: 'docs/*'

.github/workflows/pr-labeler.yml

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

.github/workflows/publish-docs.yml

@@ -1,64 +0,0 @@
-name: Deploy Vitepress docs to Pages
-
-on:
-  # Runs on pushes targeting the default branch
-  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:
-  contents: read
-  pages: write
-  id-token: write
-
-# Allow one concurrent deployment
-concurrency:
-  group: 'pages'
-  cancel-in-progress: true
-
-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: Setup Pages
-        uses: actions/configure-pages@v3
-
-      - name: Run Build
-        run: pnpm --filter mermaid run docs:build:vitepress
-
-      - name: Upload artifact
-        uses: actions/upload-pages-artifact@v1
-        with:
-          path: packages/mermaid/src/vitepress/.vitepress/dist
-
-  # Deployment job
-  deploy:
-    if: ${{ github.event_name == 'push' && github.ref == 'refs/heads/master' }}
-    environment:
-      name: github-pages
-    runs-on: ubuntu-latest
-    needs: build
-    steps:
-      - name: Deploy to GitHub Pages
-        id: deployment
-        uses: actions/deploy-pages@v1

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

@@ -10,30 +10,22 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
-        with:
-          fetch-depth: 0
-
-      - uses: pnpm/action-setup@v2
-
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          cache: pnpm
           node-version: 18.x
-
-      - name: Install Packages
-        run: |
-          pnpm install --frozen-lockfile
-        env:
-          CYPRESS_CACHE_FOLDER: .cache/Cypress
+      - name: Install Yarn
+        run: npm i yarn --global
 
       - name: Install Json
         run: npm i json --global
 
+      - name: Install Packages
+        run: yarn install --frozen-lockfile
+
       - name: Publish
-        working-directory: ./packages/mermaid
         run: |
-          PREVIEW_VERSION=$(git log --oneline "origin/$GITHUB_REF_NAME" ^"origin/master" | wc -l)
+          PREVIEW_VERSION=8
           VERSION=$(echo ${{github.ref}} | tail -c +20)-preview.$PREVIEW_VERSION
           echo $VERSION
           npm version --no-git-tag-version --allow-same-version $VERSION

.github/workflows/release-publish.yml

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

.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

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

.lintstagedrc.json

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

.lintstagedrc.mjs

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

.lycheeignore

@@ -1,19 +0,0 @@
-# These links are ignored by our link checker https://github.com/lycheeverse/lychee
-# The file allows you to list multiple regular expressions for exclusion (one pattern per line).
-
-# Network error: Forbidden
-https://codepen.io
-
-# 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 defenses against GitHub's CI servers?
-https://twitter.com/mermaidjs_
-
-# Don't check files that are generated during the build via `pnpm docs:code`
-packages/mermaid/src/docs/config/setup/*
-
-# Network error: 502, since few days
-https://bundlephobia.com/

.npmrc

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

.percy.yml

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

.prettierignore

@@ -3,5 +3,4 @@ cypress/platform/xss3.html
 .cache
 coverage
 # Autogenerated by PNPM
-pnpm-lock.yaml
-stats
+pnpm-lock.yaml

.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

@@ -1,12 +1,10 @@
-import { build, InlineConfig, type PluginOption } from 'vite';
+import { build, InlineConfig } from 'vite';
 import { resolve } from 'path';
 import { fileURLToPath } from 'url';
 import jisonPlugin from './jisonPlugin.js';
-import { readFileSync } from 'fs';
-import { visualizer } from 'rollup-plugin-visualizer';
-import type { TemplateType } from 'rollup-plugin-visualizer/dist/plugin/template-types.js';
+import pkg from '../package.json' assert { type: 'json' };
 
-const visualize = process.argv.includes('--visualize');
+const { dependencies } = pkg;
 const watch = process.argv.includes('--watch');
 const mermaidOnly = process.argv.includes('--mermaid');
 const __dirname = fileURLToPath(new URL('.', import.meta.url));
@@ -16,30 +14,30 @@ type OutputOptions = Exclude<
   undefined
 >['output'];
 
-const visualizerOptions = (packageName: string, core = false): PluginOption[] => {
-  if (packageName !== 'mermaid' || !visualize) {
-    return [];
-  }
-  return ['network', 'treemap', 'sunburst'].map(
-    (chartType) =>
-      visualizer({
-        filename: `./stats/${chartType}${core ? '.core' : ''}.html`,
-        template: chartType as TemplateType,
-        gzipSize: true,
-        brotliSize: true,
-      }) as PluginOption
-  );
-};
-
 const packageOptions = {
   mermaid: {
     name: 'mermaid',
     packageName: 'mermaid',
     file: 'mermaid.ts',
   },
+  'mermaid-mindmap': {
+    name: 'mermaid-mindmap',
+    packageName: 'mermaid-mindmap',
+    file: 'diagram-definition.ts',
+  },
+  'mermaid-mindmap-detector': {
+    name: 'mermaid-mindmap-detector',
+    packageName: 'mermaid-mindmap',
+    file: 'detector.ts',
+  },
   'mermaid-example-diagram': {
     name: 'mermaid-example-diagram',
     packageName: 'mermaid-example-diagram',
+    file: 'diagram-definition.ts',
+  },
+  'mermaid-example-diagram-detector': {
+    name: 'mermaid-example-diagram-detector',
+    packageName: 'mermaid-example-diagram',
     file: 'detector.ts',
   },
 };
@@ -52,7 +50,7 @@ interface BuildOptions {
 }
 
 export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions): InlineConfig => {
-  const external: (string | RegExp)[] = ['require', 'fs', 'path'];
+  const external = ['require', 'fs', 'path'];
   console.log(entryName, packageOptions[entryName]);
   const { name, file, packageName } = packageOptions[entryName];
   let output: OutputOptions = [
@@ -62,17 +60,18 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
       sourcemap: true,
       entryFileNames: `${name}.esm${minify ? '.min' : ''}.mjs`,
     },
+    {
+      name,
+      format: 'umd',
+      sourcemap: true,
+      entryFileNames: `${name}${minify ? '.min' : ''}.js`,
+    },
   ];
 
   if (core) {
-    const { dependencies } = JSON.parse(
-      readFileSync(resolve(__dirname, `../packages/${packageName}/package.json`), 'utf-8')
-    );
     // Core build is used to generate file without bundled dependencies.
     // This is used by downstream projects to bundle dependencies themselves.
-    // Ignore dependencies and any dependencies of dependencies
-    // Adapted from the RegEx used by `rollup-plugin-node`
-    external.push(new RegExp('^(?:' + Object.keys(dependencies).join('|') + ')(?:/.+)?$'));
+    external.push(...Object.keys(dependencies));
     // This needs to be an array. Otherwise vite will build esm & umd with same name and overwrite esm with umd.
     output = [
       {
@@ -104,12 +103,16 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
     resolve: {
       extensions: ['.jison', '.js', '.ts', '.json'],
     },
-    plugins: [jisonPlugin(), ...visualizerOptions(packageName, core)],
+    plugins: [jisonPlugin()],
   };
 
   if (watch && config.build) {
     config.build.watch = {
-      include: ['packages/mermaid-example-diagram/src/**', 'packages/mermaid/src/**'],
+      include: [
+        'packages/mermaid-mindmap/src/**',
+        'packages/mermaid/src/**',
+        'packages/mermaid-example-diagram/src/**',
+      ],
     };
   }
 
@@ -117,26 +120,29 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
 };
 
 const buildPackage = async (entryName: keyof typeof packageOptions) => {
-  await build(getBuildConfig({ minify: false, entryName }));
-  await build(getBuildConfig({ minify: 'esbuild', entryName }));
-  await build(getBuildConfig({ minify: false, core: true, entryName }));
+  return Promise.allSettled([
+    build(getBuildConfig({ minify: false, entryName })),
+    build(getBuildConfig({ minify: 'esbuild', entryName })),
+    build(getBuildConfig({ minify: false, core: true, entryName })),
+  ]);
 };
 
 const main = async () => {
   const packageNames = Object.keys(packageOptions) as (keyof typeof packageOptions)[];
-  for (const pkg of packageNames.filter((pkg) => !mermaidOnly || pkg === 'mermaid')) {
+  for (const pkg of packageNames) {
+    if (mermaidOnly && pkg !== 'mermaid') {
+      continue;
+    }
     await buildPackage(pkg);
   }
 };
 
 if (watch) {
-  build(getBuildConfig({ minify: false, watch, core: false, entryName: 'mermaid' }));
+  build(getBuildConfig({ minify: false, watch, core: true, entryName: 'mermaid' }));
   if (!mermaidOnly) {
+    build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-mindmap' }));
     build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' }));
   }
-} else if (visualize) {
-  await build(getBuildConfig({ minify: false, core: true, entryName: 'mermaid' }));
-  await build(getBuildConfig({ minify: false, core: false, entryName: 'mermaid' }));
 } else {
   void main();
 }

.vite/server.ts

@@ -1,6 +1,6 @@
 import express from 'express';
-import cors from 'cors';
 import { createServer as createViteServer } from 'vite';
+// import { getBuildConfig } from './build';
 
 async function createServer() {
   const app = express();
@@ -8,14 +8,13 @@ async function createServer() {
   // Create Vite server in middleware mode
   const vite = await createViteServer({
     configFile: './vite.config.ts',
-    mode: 'production',
     server: { middlewareMode: true },
     appType: 'custom', // don't include Vite's default HTML handling middlewares
   });
 
-  app.use(cors());
   app.use(express.static('./packages/mermaid/dist'));
   app.use(express.static('./packages/mermaid-example-diagram/dist'));
+  app.use(express.static('./packages/mermaid-mindmap/dist'));
   app.use(vite.middlewares);
   app.use(express.static('demos'));
   app.use(express.static('cypress/platform'));
@@ -25,4 +24,5 @@ async function createServer() {
   });
 }
 
+// build(getBuildConfig({ minify: false, watch: true }));
 createServer();

.vite/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "module": "ES2022"
+  }
+}

.vscode/launch.json

@@ -12,17 +12,6 @@
       "args": ["run", "${relativeFile}"],
       "smartStep": true,
       "console": "integratedTerminal"
-    },
-    {
-      "name": "Docs generation",
-      "type": "node",
-      "request": "launch",
-      "args": ["src/docs.mts"],
-      "runtimeArgs": ["--loader", "ts-node/esm"],
-      "cwd": "${workspaceRoot}/packages/mermaid",
-      "skipFiles": ["<node_internals>/**", "**/node_modules/**"],
-      "smartStep": true,
-      "internalConsoleOptions": "openOnSessionStart"
     }
   ]
 }

CHANGELOG.md

@@ -1,105 +1,6 @@
-# Changelog
+# Change Log
 
-## [10.0.0](https://github.com/mermaid-js/mermaid/releases/tag/v10.0.0)
-
-### 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
+// TODO: Populate changelog
 
 - Config has a lot of changes
 - globalReset resets to `defaultConfig` instead of current config. Use `reset` instead.

CONTRIBUTING.md

@@ -32,7 +32,7 @@ We make all changes via pull requests. As we have many pull requests from develo
 
 - Large changes reviewed by knsv or other developer asked to review by knsv
 - Smaller low-risk changes like dependencies, documentation, etc. can be merged by active collaborators
-- Documentation (updates to the `package/mermaid/src/docs` folder is also allowed via direct commits)
+- Documentation (updates to the `src/docs` folder is also allowed via direct commits)
 
 To commit code, create a branch, let it start with the type like feature or bug followed by the issue number for reference and some describing text.
 
@@ -63,48 +63,35 @@ 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
 
-**[The mermaid documentation site](https://mermaid-js.github.io/mermaid/) is powered by [Vitepress](https://vitepress.vuejs.org/), a simple documentation site generator.**
+**[The mermaid documentation site](https://mermaid-js.github.io/mermaid/) is powered by [Docsify](https://docsify.js.org), a simple documentation site generator.**
 
-If you want to preview the whole documentation site on your machine:
+If you want to preview the whole documentation site on your machine, you need to install `docsify-cli`:
 
 ```sh
-cd packages/mermaid
-pnpm i
-pnpm docs:dev
+$ npm i docsify-cli -g
 ```
 
-You can now build and serve the documentation site:
+If you are more familiar with Yarn, you can use the following command:
 
 ```sh
-pnpm docs:serve
+$ yarn global add docsify-cli
 ```
 
+The above command will install `docsify-cli` globally.
+If the installation is successful, the command `docsify` will be available in your `PATH`.
+
+You can now run the following command to serve the documentation site:
+
+```sh
+$ docsify serve docs
+```
+
+Once the local HTTP server is listening, you can point your browser at http://localhost:3000.
+
 ## Branching
 
 Going forward we will use a git flow inspired approach to branching. So development is done in develop, to do the development in the develop.
@@ -165,7 +152,7 @@ The source files for documentation are in `/packages/mermaid/src/docs` and are w
 
 #### Adding to or changing the documentation organization
 
-If you want to add a new section or change the organization (structure), then you need to make sure to **change the side navigation** in `mermaid/src/docs/.vitepress/config.js`.
+If you want to add a new section or change the organization (structure), then you need to make sure to **change the side navigation** in `src/docs/_sidebar.md`.
 
 When changes are committed and then released, they become part of the `master` branch and become part of the published documentation on https://mermaid-js.github.io/mermaid/
 

README.md

@@ -1,37 +1,25 @@
-<p align="center">
-<img src="https://raw.githubusercontent.com/mermaid-js/mermaid/develop/docs/public/favicon.svg" height="150">
-</p>
-<h1 align="center">
-Mermaid
-</h1>
-<p align="center">
-Generate diagrams from markdown-like text.
-<p>
-<p align="center">
-  <a href="https://www.npmjs.com/package/mermaid"><img src="https://img.shields.io/npm/v/mermaid?color=ff3670&label="></a>
-<p>
+# mermaid
 
-<p align="center">
-<a href="https://mermaid.live/"><b>Live Editor!</b></a>
-</p>
-<p align="center">
- <a href="https://mermaid.js.org">📖 Documentation</a> | <a href="https://mermaid.js.org/intro/">🚀 Getting Started</a> | <a href="https://www.jsdelivr.com/package/npm/mermaid">🌐 CDN</a> | <a href="https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE" title="Slack invite">🙌 Join Us</a>
-</p>
-<p align="center">
-<a href="./README.zh-CN.md">简体中文</a>
-</p>
+[![Build CI Status](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid) [![NPM](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [![Twitter Follow](https://img.shields.io/twitter/follow/mermaidjs_?style=social)](https://twitter.com/mermaidjs_)
 
-<br>
-<br>
+# Whoa, what's going on here?
 
-[![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid)
-[![Build CI Status](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml)
-[![npm minified gzipped bundle size](https://img.shields.io/bundlephobia/minzip/mermaid)](https://bundlephobia.com/package/mermaid)
-[![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master)
-[![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid)
-[![NPM Downloads](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid)
-[![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
-[![Twitter Follow](https://img.shields.io/badge/Social-mermaidjs__-blue?style=social&logo=twitter)](https://twitter.com/mermaidjs_)
+We are transforming the Mermaid repository to a so called mono-repo. This is a part of the effort to decouple the diagrams from the core of mermaid. This will:
+
+- Make it possible to select which diagrams to include on your site
+- Open up for lazy loading
+- Make it possible to add diagrams from outside of the Mermaid repository
+- Separate the release flow between different diagrams and the Mermaid core
+
+As such be aware of some changes..
+
+# We use pnpm now
+
+# The source code has moved
+
+It is now located in the src folder for each respective package located as subfolders in packages.
+
+English | [简体中文](./README.zh-CN.md)
 
 <img src="./img/header.png" alt="" />
 
@@ -39,7 +27,7 @@ Generate diagrams from markdown-like text.
 
 **Thanks to all involved, people committing pull requests, people answering questions! 🙏**
 
-<a href="https://mermaid-js.github.io/mermaid/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/intro/img/book-banner-post-release.jpg" alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a>
+<a href="https://mermaid-js.github.io/mermaid/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/img/book-banner-post-release.jpg" alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a>
 
 ## About
 
@@ -55,12 +43,14 @@ Mermaid addresses this problem by enabling users to create easily modifiable dia
 <br/>
 
 Mermaid allows even non-programmers to easily create detailed diagrams through the [Mermaid Live Editor](https://mermaid.live/).<br/>
-[Tutorials](./docs/config/Tutorials.md) has video tutorials.
-Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/ecosystem/integrations.md).
+[Tutorials](./docs/Tutorials.md) has video tutorials.
+Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/integrations.md).
 
-You can also use Mermaid within [GitHub](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) as well many of your other favorite applications—check out the list of [Integrations and Usages of Mermaid](./docs/ecosystem/integrations.md).
+You can also use Mermaid within [GitHub](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) as well many of your other favorite applications—check out the list of [Integrations and Usages of Mermaid](./docs/integrations.md).
 
-For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./docs/community/n00b-overview.md), [Usage](./docs/config/usage.md) and [Tutorials](./docs/config/Tutorials.md).
+For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./docs/n00b-overview.md), [Usage](./docs/usage.md) and [Tutorials](./docs/Tutorials.md).
+
+🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) | 📜 [Changelog](./docs/CHANGELOG.md)
 
 In our release process we rely heavily on visual regression tests using [applitools](https://applitools.com/). Applitools is a great service which has been easy to use and integrate with our tests.
 
@@ -364,11 +354,7 @@ To report a vulnerability, please e-mail security@mermaid.live with a descriptio
 
 A quick note from Knut Sveidqvist:
 
-> _Many thanks to the [d3](https://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing the graphical layout and drawing libraries!_
->
-> _Thanks also to the [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) project for usage of the grammar for the sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering._
->
-> _Thank you to [Tyler Long](https://github.com/tylerlong) who has been a collaborator since April 2017._
+> _Many thanks to the [d3](https://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing the graphical layout and drawing libraries!_ >_Thanks also to the [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) project for usage of the grammar for the sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering._ >_Thank you to [Tyler Long](https://github.com/tylerlong) who has been a collaborator since April 2017._
 >
 > _Thank you to the ever-growing list of [contributors](https://github.com/knsv/mermaid/graphs/contributors) that brought the project this far!_
 

README.zh-CN.md

@@ -1,37 +1,8 @@
-<p align="center">
-<img src="https://raw.githubusercontent.com/mermaid-js/mermaid/develop/docs/public/favicon.svg" height="150">
-</p>
-<h1 align="center">
-Mermaid
-</h1>
-<p align="center">
-通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。
-<p>
-<p align="center">
-  <a href="https://www.npmjs.com/package/mermaid"><img src="https://img.shields.io/npm/v/mermaid?color=ff3670&label="></a>
-<p>
+# mermaid
 
-<p align="center">
-<a href="https://mermaid.live/"><b>Live Editor!</b></a>
-</p>
-<p align="center">
- <a href="https://mermaid.js.org">📖 文档</a> | <a href="https://mermaid.js.org/intro/">🚀 入门</a> | <a href="https://www.jsdelivr.com/package/npm/mermaid">🌐 CDN</a> | <a href="https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE" title="Slack invite">🙌 加入我们</a>
-</p>
-<p align="center">
-<a href="./README.md">English</a>
-</p>
+[![Build CI Status](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid) [![NPM](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [![Twitter Follow](https://img.shields.io/twitter/follow/mermaidjs_?style=social)](https://twitter.com/mermaidjs_)
 
-<br>
-<br>
-
-[![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid)
-[![Build CI Status](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml)
-[![npm minified gzipped bundle size](https://img.shields.io/bundlephobia/minzip/mermaid)](https://bundlephobia.com/package/mermaid)
-[![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master)
-[![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid)
-[![NPM Downloads](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid)
-[![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
-[![Twitter Follow](https://img.shields.io/badge/Social-mermaidjs__-blue?style=social&logo=twitter)](https://twitter.com/mermaidjs_)
+[English](./README.md) | 简体中文
 
 <img src="./img/header.png" alt="" />
 
@@ -39,7 +10,7 @@ Mermaid
 
 **感谢所有参与进来提交 PR，解答疑问的人们! 🙏**
 
-<a href="https://mermaid-js.github.io/mermaid/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/intro/img/book-banner-post-release.jpg" alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a>
+<a href="https://mermaid-js.github.io/mermaid/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/img/book-banner-pre-release.jpg" alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a>
 
 ## 关于 Mermaid
 
@@ -53,9 +24,11 @@ Mermaid 是一个基于 Javascript 的图表绘制工具，通过解析类 Markd
 Mermaid 通过允许用户创建便于修改的图表来解决这一难题，它也可以作为生产脚本（或其他代码）的一部分。<br/>
 <br/>
 Mermaid 甚至能让非程序员也能通过 [Mermaid Live Editor](https://mermaid.live/) 轻松创建详细的图表。<br/>
-你可以访问 [教程](./docs/config/Tutorials.md) 来查看 Live Editor 的视频教程，也可以查看 [Mermaid 的集成和使用](./docs/ecosystem/integrations.md) 这个清单来检查你的文档工具是否已经集成了 Mermaid 支持。
+你可以访问 [教程](./docs/Tutorials.md) 来查看 Live Editor 的视频教程，也可以查看 [Mermaid 的集成和使用](./docs/integrations.md) 这个清单来检查你的文档工具是否已经集成了 Mermaid 支持。
 
-如果想要查看关于 Mermaid 更详细的介绍及基础使用方式，可以查看 [入门指引](./docs/community/n00b-overview.md), [用法](./docs/config/usage.md) 和 [教程](./docs/config/Tutorials.md).
+如果想要查看关于 Mermaid 更详细的介绍及基础使用方式，可以查看 [入门指引](./docs/n00b-overview.md), [用法](./docs/usage.md) 和 [教程](./docs/Tutorials.md).
+
+🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [文档](https://mermaidjs.github.io) | 🙌 [贡献](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) | 📜 [更新日志](./docs/CHANGELOG.md)
 
 <!-- </Main description> -->
 
@@ -66,7 +39,7 @@ Mermaid 甚至能让非程序员也能通过 [Mermaid Live Editor](https://merma
 <table>
 <!-- <Flowchart> -->
 
-### 流程图 [<a href="https://mermaid-js.github.io/mermaid/#/flowchart">文档</a> - <a href="https://mermaid.live/edit#base64:eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW0hhcmRdIC0tPnxUZXh0fCBCKFJvdW5kKVxuICAgIEIgLS0-IEN7RGVjaXNpb259XG4gICAgQyAtLT58T25lfCBEW1Jlc3VsdCAxXVxuICAgIEMgLS0-fFR3b3wgRVtSZXN1bHQgMl0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
+### 流程图 [<a href="https://mermaid-js.github.io/mermaid/#/flowchart">文档</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW0hhcmRdIC0tPnxUZXh0fCBCKFJvdW5kKVxuICAgIEIgLS0-IEN7RGVjaXNpb259XG4gICAgQyAtLT58T25lfCBEW1Jlc3VsdCAxXVxuICAgIEMgLS0-fFR3b3wgRVtSZXN1bHQgMl0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
 
 ```
 flowchart LR
@@ -84,7 +57,7 @@ C -->|One| D[Result 1]
 C -->|Two| E[Result 2]
 ```
 
-### 时序图 [<a href="https://mermaid-js.github.io/mermaid/#/sequenceDiagram">文档</a> - <a href="https://mermaid.live/edit#base64:eyJjb2RlIjoic2VxdWVuY2VEaWFncmFtXG5BbGljZS0-PkpvaG46IEhlbGxvIEpvaG4sIGhvdyBhcmUgeW91P1xubG9vcCBIZWFsdGhjaGVja1xuICAgIEpvaG4tPj5Kb2huOiBGaWdodCBhZ2FpbnN0IGh5cG9jaG9uZHJpYVxuZW5kXG5Ob3RlIHJpZ2h0IG9mIEpvaG46IFJhdGlvbmFsIHRob3VnaHRzIVxuSm9obi0tPj5BbGljZTogR3JlYXQhXG5Kb2huLT4-Qm9iOiBIb3cgYWJvdXQgeW91P1xuQm9iLS0-PkpvaG46IEpvbGx5IGdvb2QhIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
+### 时序图 [<a href="https://mermaid-js.github.io/mermaid/#/sequenceDiagram">文档</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoic2VxdWVuY2VEaWFncmFtXG5BbGljZS0-PkpvaG46IEhlbGxvIEpvaG4sIGhvdyBhcmUgeW91P1xubG9vcCBIZWFsdGhjaGVja1xuICAgIEpvaG4tPj5Kb2huOiBGaWdodCBhZ2FpbnN0IGh5cG9jaG9uZHJpYVxuZW5kXG5Ob3RlIHJpZ2h0IG9mIEpvaG46IFJhdGlvbmFsIHRob3VnaHRzIVxuSm9obi0tPj5BbGljZTogR3JlYXQhXG5Kb2huLT4-Qm9iOiBIb3cgYWJvdXQgeW91P1xuQm9iLS0-PkpvaG46IEpvbGx5IGdvb2QhIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
 
 ```
 sequenceDiagram
@@ -110,7 +83,7 @@ John->>Bob: How about you?
 Bob-->>John: Jolly good!
 ```
 
-### 甘特图 [<a href="https://mermaid-js.github.io/mermaid/#/gantt">文档</a> - <a href="https://mermaid.live/edit#base64:eyJjb2RlIjoiZ2FudHRcbnNlY3Rpb24gU2VjdGlvblxuQ29tcGxldGVkIDpkb25lLCAgICBkZXMxLCAyMDE0LTAxLTA2LDIwMTQtMDEtMDhcbkFjdGl2ZSAgICAgICAgOmFjdGl2ZSwgIGRlczIsIDIwMTQtMDEtMDcsIDNkXG5QYXJhbGxlbCAxICAgOiAgICAgICAgIGRlczMsIGFmdGVyIGRlczEsIDFkXG5QYXJhbGxlbCAyICAgOiAgICAgICAgIGRlczQsIGFmdGVyIGRlczEsIDFkXG5QYXJhbGxlbCAzICAgOiAgICAgICAgIGRlczUsIGFmdGVyIGRlczMsIDFkXG5QYXJhbGxlbCA0ICAgOiAgICAgICAgIGRlczYsIGFmdGVyIGRlczQsIDFkIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
+### 甘特图 [<a href="https://mermaid-js.github.io/mermaid/#/gantt">文档</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ2FudHRcbnNlY3Rpb24gU2VjdGlvblxuQ29tcGxldGVkIDpkb25lLCAgICBkZXMxLCAyMDE0LTAxLTA2LDIwMTQtMDEtMDhcbkFjdGl2ZSAgICAgICAgOmFjdGl2ZSwgIGRlczIsIDIwMTQtMDEtMDcsIDNkXG5QYXJhbGxlbCAxICAgOiAgICAgICAgIGRlczMsIGFmdGVyIGRlczEsIDFkXG5QYXJhbGxlbCAyICAgOiAgICAgICAgIGRlczQsIGFmdGVyIGRlczEsIDFkXG5QYXJhbGxlbCAzICAgOiAgICAgICAgIGRlczUsIGFmdGVyIGRlczMsIDFkXG5QYXJhbGxlbCA0ICAgOiAgICAgICAgIGRlczYsIGFmdGVyIGRlczQsIDFkIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
 
 ```
 gantt
@@ -134,7 +107,7 @@ gantt
     Parallel 4   :         des6, after des4, 1d
 ```
 
-### 类图 [<a href="https://mermaid-js.github.io/mermaid/#/classDiagram">文档</a> - <a href="https://mermaid.live/edit#base64:eyJjb2RlIjoiY2xhc3NEaWFncmFtXG5DbGFzczAxIDx8LS0gQXZlcnlMb25nQ2xhc3MgOiBDb29sXG48PGludGVyZmFjZT4-IENsYXNzMDFcbkNsYXNzMDkgLS0-IEMyIDogV2hlcmUgYW0gaT9cbkNsYXNzMDkgLS0qIEMzXG5DbGFzczA5IC0tfD4gQ2xhc3MwN1xuQ2xhc3MwNyA6IGVxdWFscygpXG5DbGFzczA3IDogT2JqZWN0W10gZWxlbWVudERhdGFcbkNsYXNzMDEgOiBzaXplKClcbkNsYXNzMDEgOiBpbnQgY2hpbXBcbkNsYXNzMDEgOiBpbnQgZ29yaWxsYVxuY2xhc3MgQ2xhc3MxMCB7XG4gID4-c2VydmljZT4-XG4gIGludCBpZFxuICBzaXplKClcbn0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
+### 类图 [<a href="https://mermaid-js.github.io/mermaid/#/classDiagram">文档</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiY2xhc3NEaWFncmFtXG5DbGFzczAxIDx8LS0gQXZlcnlMb25nQ2xhc3MgOiBDb29sXG48PGludGVyZmFjZT4-IENsYXNzMDFcbkNsYXNzMDkgLS0-IEMyIDogV2hlcmUgYW0gaT9cbkNsYXNzMDkgLS0qIEMzXG5DbGFzczA5IC0tfD4gQ2xhc3MwN1xuQ2xhc3MwNyA6IGVxdWFscygpXG5DbGFzczA3IDogT2JqZWN0W10gZWxlbWVudERhdGFcbkNsYXNzMDEgOiBzaXplKClcbkNsYXNzMDEgOiBpbnQgY2hpbXBcbkNsYXNzMDEgOiBpbnQgZ29yaWxsYVxuY2xhc3MgQ2xhc3MxMCB7XG4gID4-c2VydmljZT4-XG4gIGludCBpZFxuICBzaXplKClcbn0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
 
 ```
 classDiagram
@@ -174,7 +147,7 @@ class Class10 {
 }
 ```
 
-### 状态图 [[<a href="https://mermaid-js.github.io/mermaid/#/stateDiagram">docs</a> - <a href="https://mermaid.live/edit#pako:eNpdkLsOwjAMRX-l8ojahTEDCzB26kgYrMYtkfJAqVMJVf13QiIKqqfr44d8vUDvFYGAiZHponEMaJv5KF2V4na4V01zqjrWxhSUZYapuEetn7UbCy16P_5HzwGnR6FZfpdCDZaCRa3SWcunQQI_yJIEkaSiAaNhCdKtqRUj--7lehAcItUQn-pnBMSAZtroVWn2YYOU07b4z29Y37gJVYk">live editor</a>]
+### 状态图 [[<a href="https://mermaid-js.github.io/mermaid/#/stateDiagram">docs</a> - <a href="https://mermaid.live/#/edit/eyJjb2RlIjoic3RhdGVEaWFncmFtLXYyXG4gICAgWypdIC0tPiBTdGlsbFxuICAgIFN0aWxsIC0tPiBbKl1cbiAgICBTdGlsbCAtLT4gTW92aW5nXG4gICAgTW92aW5nIC0tPiBTdGlsbFxuICAgIE1vdmluZyAtLT4gQ3Jhc2hcbiAgICBDcmFzaCAtLT4gWypdIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQiLCJ0aGVtZVZhcmlhYmxlcyI6eyJiYWNrZ3JvdW5kIjoid2hpdGUiLCJwcmltYXJ5Q29sb3IiOiIjRUNFQ0ZGIiwic2Vjb25kYXJ5Q29sb3IiOiIjZmZmZmRlIiwidGVydGlhcnlDb2xvciI6ImhzbCg4MCwgMTAwJSwgOTYuMjc0NTA5ODAzOSUpIiwicHJpbWFyeUJvcmRlckNvbG9yIjoiaHNsKDI0MCwgNjAlLCA4Ni4yNzQ1MDk4MDM5JSkiLCJzZWNvbmRhcnlCb3JkZXJDb2xvciI6ImhzbCg2MCwgNjAlLCA4My41Mjk0MTE3NjQ3JSkiLCJ0ZXJ0aWFyeUJvcmRlckNvbG9yIjoiaHNsKDgwLCA2MCUsIDg2LjI3NDUwOTgwMzklKSIsInByaW1hcnlUZXh0Q29sb3IiOiIjMTMxMzAwIiwic2Vjb25kYXJ5VGV4dENvbG9yIjoiIzAwMDAyMSIsInRlcnRpYXJ5VGV4dENvbG9yIjoicmdiKDkuNTAwMDAwMDAwMSwgOS41MDAwMDAwMDAxLCA5LjUwMDAwMDAwMDEpIiwibGluZUNvbG9yIjoiIzMzMzMzMyIsInRleHRDb2xvciI6IiMzMzMiLCJtYWluQmtnIjoiI0VDRUNGRiIsInNlY29uZEJrZyI6IiNmZmZmZGUiLCJib3JkZXIxIjoiIzkzNzBEQiIsImJvcmRlcjIiOiIjYWFhYTMzIiwiYXJyb3doZWFkQ29sb3IiOiIjMzMzMzMzIiwiZm9udEZhbWlseSI6IlwidHJlYnVjaGV0IG1zXCIsIHZlcmRhbmEsIGFyaWFsIiwiZm9udFNpemUiOiIxNnB4IiwibGFiZWxCYWNrZ3JvdW5kIjoiI2U4ZThlOCIsIm5vZGVCa2ciOiIjRUNFQ0ZGIiwibm9kZUJvcmRlciI6IiM5MzcwREIiLCJjbHVzdGVyQmtnIjoiI2ZmZmZkZSIsImNsdXN0ZXJCb3JkZXIiOiIjYWFhYTMzIiwiZGVmYXVsdExpbmtDb2xvciI6IiMzMzMzMzMiLCJ0aXRsZUNvbG9yIjoiIzMzMyIsImVkZ2VMYWJlbEJhY2tncm91bmQiOiIjZThlOGU4IiwiYWN0b3JCb3JkZXIiOiJoc2woMjU5LjYyNjE2ODIyNDMsIDU5Ljc3NjUzNjMxMjglLCA4Ny45MDE5NjA3ODQzJSkiLCJhY3RvckJrZyI6IiNFQ0VDRkYiLCJhY3RvclRleHRDb2xvciI6ImJsYWNrIiwiYWN0b3JMaW5lQ29sb3IiOiJncmV5Iiwic2lnbmFsQ29sb3IiOiIjMzMzIiwic2lnbmFsVGV4dENvbG9yIjoiIzMzMyIsImxhYmVsQm94QmtnQ29sb3IiOiIjRUNFQ0ZGIiwibGFiZWxCb3hCb3JkZXJDb2xvciI6ImhzbCgyNTkuNjI2MTY4MjI0MywgNTkuNzc2NTM2MzEyOCUsIDg3LjkwMTk2MDc4NDMlKSIsImxhYmVsVGV4dENvbG9yIjoiYmxhY2siLCJsb29wVGV4dENvbG9yIjoiYmxhY2siLCJub3RlQm9yZGVyQ29sb3IiOiIjYWFhYTMzIiwibm90ZUJrZ0NvbG9yIjoiI2ZmZjVhZCIsIm5vdGVUZXh0Q29sb3IiOiJibGFjayIsImFjdGl2YXRpb25Cb3JkZXJDb2xvciI6IiM2NjYiLCJhY3RpdmF0aW9uQmtnQ29sb3IiOiIjZjRmNGY0Iiwic2VxdWVuY2VOdW1iZXJDb2xvciI6IndoaXRlIiwic2VjdGlvbkJrZ0NvbG9yIjoicmdiYSgxMDIsIDEwMiwgMjU1LCAwLjQ5KSIsImFsdFNlY3Rpb25Ca2dDb2xvciI6IndoaXRlIiwic2VjdGlvbkJrZ0NvbG9yMiI6IiNmZmY0MDAiLCJ0YXNrQm9yZGVyQ29sb3IiOiIjNTM0ZmJjIiwidGFza0JrZ0NvbG9yIjoiIzhhOTBkZCIsInRhc2tUZXh0TGlnaHRDb2xvciI6IndoaXRlIiwidGFza1RleHRDb2xvciI6IndoaXRlIiwidGFza1RleHREYXJrQ29sb3IiOiJibGFjayIsInRhc2tUZXh0T3V0c2lkZUNvbG9yIjoiYmxhY2siLCJ0YXNrVGV4dENsaWNrYWJsZUNvbG9yIjoiIzAwMzE2MyIsImFjdGl2ZVRhc2tCb3JkZXJDb2xvciI6IiM1MzRmYmMiLCJhY3RpdmVUYXNrQmtnQ29sb3IiOiIjYmZjN2ZmIiwiZ3JpZENvbG9yIjoibGlnaHRncmV5IiwiZG9uZVRhc2tCa2dDb2xvciI6ImxpZ2h0Z3JleSIsImRvbmVUYXNrQm9yZGVyQ29sb3IiOiJncmV5IiwiY3JpdEJvcmRlckNvbG9yIjoiI2ZmODg4OCIsImNyaXRCa2dDb2xvciI6InJlZCIsInRvZGF5TGluZUNvbG9yIjoicmVkIiwibGFiZWxDb2xvciI6ImJsYWNrIiwiZXJyb3JCa2dDb2xvciI6IiM1NTIyMjIiLCJlcnJvclRleHRDb2xvciI6IiM1NTIyMjIiLCJjbGFzc1RleHQiOiIjMTMxMzAwIiwiZmlsbFR5cGUwIjoiI0VDRUNGRiIsImZpbGxUeXBlMSI6IiNmZmZmZGUiLCJmaWxsVHlwZTIiOiJoc2woMzA0LCAxMDAlLCA5Ni4yNzQ1MDk4MDM5JSkiLCJmaWxsVHlwZTMiOiJoc2woMTI0LCAxMDAlLCA5My41Mjk0MTE3NjQ3JSkiLCJmaWxsVHlwZTQiOiJoc2woMTc2LCAxMDAlLCA5Ni4yNzQ1MDk4MDM5JSkiLCJmaWxsVHlwZTUiOiJoc2woLTQsIDEwMCUsIDkzLjUyOTQxMTc2NDclKSIsImZpbGxUeXBlNiI6ImhzbCg4LCAxMDAlLCA5Ni4yNzQ1MDk4MDM5JSkiLCJmaWxsVHlwZTciOiJoc2woMTg4LCAxMDAlLCA5My41Mjk0MTE3NjQ3JSkifX0sInVwZGF0ZUVkaXRvciI6ZmFsc2V9">live editor</a>]
 
 ```
 stateDiagram-v2
@@ -196,7 +169,7 @@ Moving --> Crash
 Crash --> [*]
 ```
 
-### 饼图 [<a href="https://mermaid-js.github.io/mermaid/#/pie">文档</a> - <a href="https://mermaid.live/edit#base64:eyJjb2RlIjoicGllXG5cIkRvZ3NcIiA6IDQyLjk2XG5cIkNhdHNcIiA6IDUwLjA1XG5cIlJhdHNcIiA6IDEwLjAxIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
+### 饼图 [<a href="https://mermaid-js.github.io/mermaid/#/pie">文档</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoicGllXG5cIkRvZ3NcIiA6IDQyLjk2XG5cIkNhdHNcIiA6IDUwLjA1XG5cIlJhdHNcIiA6IDEwLjAxIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
 
 ```
 pie
@@ -212,9 +185,9 @@ pie
 "Rats" : 15
 ```
 
-### Git 图 [实验特性 - <a href="https://mermaid.live/edit#base64:eyJjb2RlIjoiZ2l0R3JhcGg6XG5vcHRpb25zXG57XG4gICAgXCJub2RlU3BhY2luZ1wiOiAxNTAsXG4gICAgXCJub2RlUmFkaXVzXCI6IDEwXG59XG5lbmRcbmNvbW1pdFxuYnJhbmNoIG5ld2JyYW5jaFxuY2hlY2tvdXQgbmV3YnJhbmNoXG5jb21taXRcbmNvbW1pdFxuY2hlY2tvdXQgbWFzdGVyXG5jb21taXRcbmNvbW1pdFxubWVyZ2UgbmV3YnJhbmNoXG4iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
+### Git 图 [实验特性 - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ2l0R3JhcGg6XG5vcHRpb25zXG57XG4gICAgXCJub2RlU3BhY2luZ1wiOiAxNTAsXG4gICAgXCJub2RlUmFkaXVzXCI6IDEwXG59XG5lbmRcbmNvbW1pdFxuYnJhbmNoIG5ld2JyYW5jaFxuY2hlY2tvdXQgbmV3YnJhbmNoXG5jb21taXRcbmNvbW1pdFxuY2hlY2tvdXQgbWFzdGVyXG5jb21taXRcbmNvbW1pdFxubWVyZ2UgbmV3YnJhbmNoXG4iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
 
-### 用户体验旅程图 [<a href="https://mermaid-js.github.io/mermaid/#/user-journey">文档</a> - <a href="https://mermaid.live/edit#pako:eNpljzEPgkAMhf9K05nFGJdbJXFiYmVpuKIncDVHL4QQ_ruHaILaqXnf63vpjLVYRoMAd4nB81R5SKNOO4ZiglFC6_wVLL3JwLU68XARUHnhTQcoqGVQJgMnAwV_5GSMj0HJhcHAcU_y7d7AYVUzOJP-ddyk3ydZGf0n66uldPqCPxWYYc-hJ2fTj_OqVqg3Tplo0mq5odhphZVfkpWiSjn5Go2GyBnGhyXl3NE1UI-moW7g5QkSoF5m">live editor</a>]
+### 用户体验旅程图 [<a href="https://mermaid-js.github.io/mermaid/#/user-journey">文档</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoic3RhdGVEaWFncmFtXG4gICAgWypdIC0tPiBTdGlsbFxuICAgIFN0aWxsIC0tPiBbKl1cbiAgICBTdGlsbCAtLT4gTW92aW5nXG4gICAgTW92aW5nIC0tPiBTdGlsbFxuICAgIE1vdmluZyAtLT4gQ3Jhc2hcbiAgICBDcmFzaCAtLT4gWypdIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
 
 ```
   journey
@@ -352,7 +325,7 @@ _很不幸的是，鱼与熊掌不可兼得，在这个场景下它意味着在
 
 来自 Knut Sveidqvist:
 
-> _特别感谢 [d3](https://d3js.org/) 和 [dagre-d3](https://github.com/cpettitt/dagre-d3) 这两个优秀的项目，它们提供了图形布局和绘图工具库！_ > _同样感谢 [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) 提供了时序图语法的使用。 感谢 Jessica Peter 提供了甘特图渲染的灵感。_ > _感谢 [Tyler Long](https://github.com/tylerlong) 从 2017 年四月开始成为了项目的合作者。_
+> _特别感谢 [d3](https://d3js.org/) 和 [dagre-d3](https://github.com/cpettitt/dagre-d3) 这两个优秀的项目，它们提供了图形布局和绘图工具库! _ >_同样感谢 [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) 提供了时序图语法的使用。 感谢 Jessica Peter 提供了甘特图渲染的灵感。_ >_感谢 [Tyler Long](https://github.com/tylerlong) 从 2017 年四月开始成为了项目的合作者。_
 >
 > _感谢越来越多的 [贡献者们](https://github.com/knsv/mermaid/graphs/contributors)，没有你们，就没有这个项目的今天！_
 

V10-BreakingChanges.md

@@ -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__/c4Renderer.js

@@ -1,21 +0,0 @@
-/**
- * Mocked C4Context diagram renderer
- */
-
-import { vi } from 'vitest';
-
-export const drawPersonOrSystemArray = vi.fn();
-export const drawBoundary = vi.fn();
-
-export const setConf = vi.fn();
-
-export const draw = vi.fn().mockImplementation(() => {
-  return '';
-});
-
-export default {
-  drawPersonOrSystemArray,
-  drawBoundary,
-  setConf,
-  draw,
-};

__mocks__/classRenderer-v2.js

@@ -1,16 +0,0 @@
-/**
- * Mocked class diagram v2 renderer
- */
-
-import { vi } from 'vitest';
-
-export const setConf = vi.fn();
-
-export const draw = vi.fn().mockImplementation(() => {
-  return '';
-});
-
-export default {
-  setConf,
-  draw,
-};

__mocks__/classRenderer.js

@@ -1,13 +0,0 @@
-/**
- * Mocked class diagram renderer
- */
-
-import { vi } from 'vitest';
-
-export const draw = vi.fn().mockImplementation(() => {
-  return '';
-});
-
-export default {
-  draw,
-};

__mocks__/d3.ts

@@ -1,14 +1,67 @@
 // @ts-nocheck TODO: Fix TS
-import { MockedD3 } from '../packages/mermaid/src/tests/MockedD3';
+import { vi } from 'vitest';
+
+const NewD3 = function () {
+  /**
+   *
+   */
+  function returnThis() {
+    return this;
+  }
+  return {
+    append: function () {
+      return NewD3();
+    },
+    lower: returnThis,
+    attr: returnThis,
+    style: returnThis,
+    text: returnThis,
+    0: {
+      0: {
+        getBBox: function () {
+          return {
+            height: 10,
+            width: 20,
+          };
+        },
+      },
+    },
+  };
+};
 
 export const select = function () {
-  return new MockedD3();
+  return new NewD3();
 };
 
 export const selectAll = function () {
-  return new MockedD3();
+  return new NewD3();
 };
 
 export const curveBasis = 'basis';
 export const curveLinear = 'linear';
 export const curveCardinal = 'cardinal';
+
+export const MockD3 = (name, parent) => {
+  const children = [];
+  const elem = {
+    get __children() {
+      return children;
+    },
+    get __name() {
+      return name;
+    },
+    get __parent() {
+      return parent;
+    },
+  };
+  elem.append = (name) => {
+    const mockElem = MockD3(name, elem);
+    children.push(mockElem);
+    return mockElem;
+  };
+  elem.lower = vi.fn(() => elem);
+  elem.attr = vi.fn(() => elem);
+  elem.text = vi.fn(() => elem);
+  elem.style = vi.fn(() => elem);
+  return elem;
+};

__mocks__/erRenderer.js

@@ -1,16 +0,0 @@
-/**
- * Mocked er diagram renderer
- */
-
-import { vi } from 'vitest';
-
-export const setConf = vi.fn();
-
-export const draw = vi.fn().mockImplementation(() => {
-  return '';
-});
-
-export default {
-  setConf,
-  draw,
-};

__mocks__/flowRenderer-v2.js

@@ -1,24 +0,0 @@
-/**
- * Mocked flow (flowchart) diagram v2 renderer
- */
-
-import { vi } from 'vitest';
-
-export const setConf = vi.fn();
-export const addVertices = vi.fn();
-export const addEdges = vi.fn();
-export const getClasses = vi.fn().mockImplementation(() => {
-  return {};
-});
-
-export const draw = vi.fn().mockImplementation(() => {
-  return '';
-});
-
-export default {
-  setConf,
-  addVertices,
-  addEdges,
-  getClasses,
-  draw,
-};

__mocks__/ganttRenderer.js

@@ -1,16 +0,0 @@
-/**
- * Mocked gantt diagram renderer
- */
-
-import { vi } from 'vitest';
-
-export const setConf = vi.fn();
-
-export const draw = vi.fn().mockImplementation(() => {
-  return '';
-});
-
-export default {
-  setConf,
-  draw,
-};

__mocks__/gitGraphRenderer.js

@@ -1,13 +0,0 @@
-/**
- * Mocked git (graph) diagram renderer
- */
-
-import { vi } from 'vitest';
-
-export const draw = vi.fn().mockImplementation(() => {
-  return '';
-});
-
-export default {
-  draw,
-};

__mocks__/journeyRenderer.js

@@ -1,15 +0,0 @@
-/**
- * Mocked pie (picChart) diagram renderer
- */
-
-import { vi } from 'vitest';
-export const setConf = vi.fn();
-
-export const draw = vi.fn().mockImplementation(() => {
-  return '';
-});
-
-export default {
-  setConf,
-  draw,
-};

__mocks__/pieRenderer.js

@@ -1,13 +0,0 @@
-/**
- * Mocked pie (picChart) diagram renderer
- */
-
-import { vi } from 'vitest';
-
-export const draw = vi.fn().mockImplementation(() => {
-  return '';
-});
-
-export default {
-  draw,
-};

__mocks__/requirementRenderer.js

@@ -1,13 +0,0 @@
-/**
- * Mocked requirement diagram renderer
- */
-
-import { vi } from 'vitest';
-
-export const draw = vi.fn().mockImplementation(() => {
-  return '';
-});
-
-export default {
-  draw,
-};

__mocks__/sequenceRenderer.js

@@ -1,23 +0,0 @@
-/**
- * Mocked sequence diagram renderer
- */
-
-import { vi } from 'vitest';
-
-export const bounds = vi.fn();
-export const drawActors = vi.fn();
-export const drawActorsPopup = vi.fn();
-
-export const setConf = vi.fn();
-
-export const draw = vi.fn().mockImplementation(() => {
-  return '';
-});
-
-export default {
-  bounds,
-  drawActors,
-  drawActorsPopup,
-  setConf,
-  draw,
-};

__mocks__/stateRenderer-v2.js

@@ -1,22 +0,0 @@
-/**
- * Mocked state diagram v2 renderer
- */
-
-import { vi } from 'vitest';
-
-export const setConf = vi.fn();
-export const getClasses = vi.fn().mockImplementation(() => {
-  return {};
-});
-export const stateDomId = vi.fn().mockImplementation(() => {
-  return 'mocked-stateDiagram-stateDomId';
-});
-export const draw = vi.fn().mockImplementation(() => {
-  return '';
-});
-
-export default {
-  setConf,
-  getClasses,
-  draw,
-};

applitools.config.js

@@ -15,5 +15,5 @@ module.exports = defineConfig({
     //   { deviceName: 'Pixel 2', screenOrientation: 'portrait' },
   ],
   // set batch name to the configuration
-  // batchName: `Mermaid ${process.env.APPLI_BRANCH ?? "'no APPLI_BRANCH set'"}`,
+  batchName: `Mermaid ${process.env.APPLI_BRANCH ?? "'no APPLI_BRANCH set'"}`,
 });

cSpell.json

@@ -2,116 +2,50 @@
   "version": "0.2",
   "language": "en",
   "words": [
-    "acyclicer",
-    "adamiecki",
-    "alois",
-    "antiscript",
-    "appli",
-    "applitools",
-    "asciidoctor",
-    "ashish",
-    "astah",
-    "bbox",
-    "bilkent",
-    "bisheng",
-    "blrs",
-    "braintree",
-    "brkt",
-    "brolin",
-    "brotli",
-    "città",
-    "classdef",
-    "codedoc",
-    "colour",
-    "cpettitt",
     "customizability",
-    "cuzon",
-    "cytoscape",
-    "dagre",
-    "deepdwn",
-    "descr",
-    "docsify",
-    "docsy",
-    "doku",
-    "dompurify",
-    "edgechromium",
-    "elkjs",
-    "faber",
-    "flatmap",
-    "ftplugin",
-    "gantt",
-    "gitea",
-    "gitgraph",
-    "globby",
-    "graphlib",
-    "graphviz",
-    "grav",
-    "greywolf",
-    "inkdrop",
-    "jaoude",
+    "Gantt",
     "jison",
-    "kaufmann",
-    "khroma",
-    "klemm",
-    "klink",
     "knsv",
-    "knut",
-    "laganeckas",
-    "lintstagedrc",
-    "logmsg",
-    "lucida",
-    "matthieu",
-    "mdast",
+    "Knut",
+    "mindmap",
+    "Mindmaps",
+    "mitigations",
+    "sandboxed",
+    "Sveidqvist",
+    "verdana",
+    "Visio"
+  ],
+  "ignoreWords": [
+    "Adamiecki",
+    "applitools",
+    "Asciidoctor",
+    "Astah",
+    "Bisheng",
+    "codedoc",
+    "Docsy",
+    "Doku",
+    "Gitea",
+    "Gitgraph",
+    "Grav",
+    "Inkdrop",
+    "Jaoude",
     "mdbook",
     "mermerd",
-    "mindaugas",
-    "mindmap",
-    "mindmaps",
-    "mitigations",
     "mkdocs",
-    "mult",
-    "orlandoni",
     "phpbb",
-    "plantuml",
-    "playfair",
-    "pnpm",
-    "podlite",
-    "quence",
-    "radious",
-    "ranksep",
-    "rect",
-    "rects",
+    "Plantuml",
+    "Playfair's",
+    "Podlite",
     "redmine",
-    "roledescription",
-    "sandboxed",
-    "setupgraphviewbox",
-    "shiki",
-    "sidharth",
-    "sidharthv",
     "sphinxcontrib",
-    "statediagram",
-    "stylis",
-    "substate",
-    "sveidqvist",
-    "swimm",
-    "techn",
-    "teststr",
-    "textlength",
-    "treemap",
-    "ts-nocheck",
-    "tuleap",
-    "ugge",
-    "unist",
-    "verdana",
-    "viewports",
-    "vinod",
-    "visio",
-    "vitepress",
-    "xlink",
-    "yash"
+    "Tuleap"
   ],
   "patterns": [
-    { "name": "Markdown links", "pattern": "\\((.*)\\)", "description": "" },
+    {
+      "name": "Markdown links",
+      "pattern": "\\((.*)\\)",
+      "description": ""
+    },
     {
       "name": "Markdown code blocks",
       "pattern": "/^(\\s*`{3,}).*[\\s\\S]*?^\\1/gmx",
@@ -122,14 +56,25 @@
       "pattern": "\\`([^\\`\\r\\n]+?)\\`",
       "description": "https://stackoverflow.com/questions/41274241/how-to-capture-inline-markdown-code-but-not-a-markdown-code-fence-with-regex"
     },
-    { "name": "Link contents", "pattern": "\\<a(.*)\\>", "description": "" },
-    { "name": "Snippet references", "pattern": "-- snippet:(.*)", "description": "" },
+    {
+      "name": "Link contents",
+      "pattern": "\\<a(.*)\\>",
+      "description": ""
+    },
+    {
+      "name": "Snippet references",
+      "pattern": "-- snippet:(.*)",
+      "description": ""
+    },
     {
       "name": "Snippet references 2",
       "pattern": "\\<\\[sample:(.*)",
       "description": "another kind of snippet reference"
     },
-    { "name": "Multi-line code blocks", "pattern": "/^\\s*```[\\s\\S]*?^\\s*```/gm" },
+    {
+      "name": "Multi-line code blocks",
+      "pattern": "/^\\s*```[\\s\\S]*?^\\s*```/gm"
+    },
     {
       "name": "HTML Tags",
       "pattern": "<[^>]*>",
@@ -146,8 +91,5 @@
     "Multi-line code blocks",
     "HTML Tags"
   ],
-  "ignorePaths": [
-    "packages/mermaid/src/docs/CHANGELOG.md",
-    "packages/mermaid/src/docs/.vitepress/redirect.ts"
-  ]
+  "ignorePaths": ["packages/mermaid/src/docs/CHANGELOG.md"]
 }

cypress/helpers/util.js

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

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

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

cypress/integration/other/ghsa.spec.js

@@ -7,10 +7,4 @@ describe('CSS injections', () => {
       flowchart: { htmlLabels: false },
     });
   });
-  it('should not allow adding styletags affecting the page', () => {
-    urlSnapshotTest('http://localhost:9000/ghsa3.html', {
-      logLevel: 1,
-      flowchart: { htmlLabels: false },
-    });
-  });
 });

cypress/integration/rendering/appli.spec.js

@@ -21,7 +21,7 @@ describe('Git Graph diagram', () => {
   //   // Call Open on eyes to initialize a test session
   //   cy.eyesOpen({
   //     appName: 'Demo App',
-  //     testName: 'UltraFast grid demo',
+  //     testName: 'Ultrafast grid demo',
   //   });
 
   //   // check the login page with fluent api, see more info here

cypress/integration/rendering/c4.spec.js

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

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

@@ -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,97 +476,6 @@ describe('Class diagram V2', () => {
       `,
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
-  });
-
-  it('18: should render a simple class diagram with notes', () => {
-    imgSnapshotTest(
-      `
-      classDiagram-v2
-        note "I love this diagram!\nDo you love it?"
-        class Class10 {
-            int id
-          size()
-        }
-        note for Class10 "Cool class\nI said it's very cool class!"
-
-        `,
-      { logLevel: 1, flowchart: { htmlLabels: false } }
-    );
-  });
-
-  it('1433: should render a simple class with a title', () => {
-    imgSnapshotTest(
-      `---
-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"]
-`
-    );
+    cy.get('svg');
   });
 });

cypress/integration/rendering/classDiagram.spec.js

@@ -407,20 +407,4 @@ describe('Class diagram', () => {
   //      // expect(svg).to.not.have.attr('style');
   //     });
   // });
-
-  it('19: should render a simple class diagram with notes', () => {
-    imgSnapshotTest(
-      `
-    classDiagram
-      note "I love this diagram!\nDo you love it?"
-      class Class10 {
-        int id
-        size()
-      }
-      note for Class10 "Cool class\nI said it's very cool class!"
-      `,
-      { logLevel: 1 }
-    );
-    cy.get('svg');
-  });
 });

cypress/integration/rendering/current.spec.js

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

cypress/integration/rendering/erDiagram.spec.js

@@ -167,7 +167,7 @@ describe('Entity Relationship Diagram', () => {
     cy.get('svg');
   });
 
-  it('should render entities with generic and array attributes', () => {
+  it.only('should render entities with generic and array attributes', () => {
     renderGraph(
       `
     erDiagram
@@ -182,20 +182,6 @@ describe('Entity Relationship Diagram', () => {
     cy.get('svg');
   });
 
-  it('should render entities with length in attributes type', () => {
-    renderGraph(
-      `
-    erDiagram
-        CLUSTER {
-          varchar(99) name
-          string(255) description
-        }
-      `,
-      { logLevel: 1 }
-    );
-    cy.get('svg');
-  });
-
   it('should render entities and attributes with big and small entity names', () => {
     renderGraph(
       `
@@ -269,35 +255,4 @@ describe('Entity Relationship Diagram', () => {
     );
     cy.get('svg');
   });
-
-  it('should render entities with aliases', () => {
-    renderGraph(
-      `
-    erDiagram
-      T1 one or zero to one or more T2 : test
-      T2 one or many optionally to zero or one T3 : test
-      T3 zero or more to zero or many T4 : test
-      T4 many(0) to many(1) T5 : test
-      T5 many optionally to one T6 : test
-      T6 only one optionally to only one T1 : test
-      T4 0+ to 1+ T6 : test
-      T1 1 to 1 T3 : test
-      `,
-      { logLevel: 1 }
-    );
-    cy.get('svg');
-  });
-
-  it('1433: should render a simple ER diagram with a title', () => {
-    imgSnapshotTest(
-      `---
-title: simple ER diagram
----
-erDiagram
-CUSTOMER ||--o{ ORDER : places
-ORDER ||--|{ LINE-ITEM : contains
-`,
-      {}
-    );
-  });
 });

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

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

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

@@ -663,26 +663,4 @@ flowchart RL
       { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
-  it('1433: should render a titled flowchart with titleTopMargin set to 0', () => {
-    imgSnapshotTest(
-      `---
-title: Simple flowchart
----
-flowchart TD
-A --> B
-`,
-      { titleTopMargin: 0 }
-    );
-  });
-  it('3192: It should be possieble to render flowcharts with invisible edges', () => {
-    imgSnapshotTest(
-      `---
-title: Simple flowchart with invisible edges
----
-flowchart TD
-A ~~~ B
-`,
-      { titleTopMargin: 0 }
-    );
-  });
 });

cypress/integration/rendering/gantt.spec.js

@@ -310,129 +310,35 @@ describe('Gantt diagram', () => {
     );
   });
 
-  it('should render a gantt diagram with tick is 15 minutes', () => {
-    imgSnapshotTest(
+  it('should render accessibility tags', function () {
+    const expectedTitle = 'Gantt Diagram';
+    const expectedAccDescription = 'Tasks for Q4';
+    renderGraph(
       `
       gantt
-        title A Gantt Diagram
-        dateFormat   YYYY-MM-DD
-        axisFormat   %H:%M
-        tickInterval 15minute
-        excludes     weekends
-
-        section Section
-        A task           : a1, 2022-10-03, 6h
-        Another task     : after a1, 6h
-        section Another
-        Task in sec      : 2022-10-03, 3h
-        another task     : 3h
+      accTitle: ${expectedTitle}
+      accDescr: ${expectedAccDescription}
+      dateFormat  YYYY-MM-DD
+      section Section
+      A task :a1, 2014-01-01, 30d
       `,
       {}
     );
-  });
+    cy.get('svg').should((svg) => {
+      const el = svg.get(0);
+      const children = Array.from(el.children);
 
-  it('should render a gantt diagram with tick is 6 hours', () => {
-    imgSnapshotTest(
-      `
-      gantt
-        title A Gantt Diagram
-        dateFormat   YYYY-MM-DD
-        axisFormat   %d %H:%M
-        tickInterval 6hour
-        excludes     weekends
+      const titleEl = children.find(function (node) {
+        return node.tagName === 'title';
+      });
+      const descriptionEl = children.find(function (node) {
+        return node.tagName === 'desc';
+      });
 
-        section Section
-        A task           : a1, 2022-10-03, 1d
-        Another task     : after a1, 2d
-        section Another
-        Task in sec      : 2022-10-04, 2d
-        another task     : 2d
-      `,
-      {}
-    );
-  });
-
-  it('should render a gantt diagram with tick is 1 day', () => {
-    imgSnapshotTest(
-      `
-      gantt
-        title A Gantt Diagram
-        dateFormat   YYYY-MM-DD
-        axisFormat   %m-%d
-        tickInterval 1day
-        excludes     weekends
-
-        section Section
-        A task           : a1, 2022-10-01, 30d
-        Another task     : after a1, 20d
-        section Another
-        Task in sec      : 2022-10-20, 12d
-        another task     : 24d
-      `,
-      {}
-    );
-  });
-
-  it('should render a gantt diagram with tick is 1 week', () => {
-    imgSnapshotTest(
-      `
-      gantt
-        title A Gantt Diagram
-        dateFormat   YYYY-MM-DD
-        axisFormat   %m-%d
-        tickInterval 1week
-        excludes     weekends
-
-        section Section
-        A task           : a1, 2022-10-01, 30d
-        Another task     : after a1, 20d
-        section Another
-        Task in sec      : 2022-10-20, 12d
-        another task     : 24d
-      `,
-      {}
-    );
-  });
-
-  it('should render a gantt diagram with tick is 1 month', () => {
-    imgSnapshotTest(
-      `
-      gantt
-        title A Gantt Diagram
-        dateFormat   YYYY-MM-DD
-        axisFormat   %m-%d
-        tickInterval 1month
-        excludes     weekends
-
-        section Section
-        A task           : a1, 2022-10-01, 30d
-        Another task     : after a1, 20d
-        section Another
-        Task in sec      : 2022-10-20, 12d
-        another task     : 24d
-      `,
-      {}
-    );
-  });
-
-  it('should render a gantt diagram with tick is 1 day and topAxis is true', () => {
-    imgSnapshotTest(
-      `
-      gantt
-        title A Gantt Diagram
-        dateFormat   YYYY-MM-DD
-        axisFormat   %m-%d
-        tickInterval 1day
-        excludes     weekends
-
-        section Section
-        A task           : a1, 2022-10-01, 30d
-        Another task     : after a1, 20d
-        section Another
-        Task in sec      : 2022-10-20, 12d
-        another task     : 24d
-      `,
-      { gantt: { topAxis: true } }
-    );
+      expect(titleEl).to.exist;
+      expect(titleEl.textContent).to.equal(expectedTitle);
+      expect(descriptionEl).to.exist;
+      expect(descriptionEl.textContent).to.equal(expectedAccDescription);
+    });
   });
 });

cypress/integration/rendering/gitGraph.spec.js

@@ -322,15 +322,4 @@ describe('Git Graph diagram', () => {
       {}
     );
   });
-  it('1433: should render a simple gitgraph with a title', () => {
-    imgSnapshotTest(
-      `---
-title: simple gitGraph
----
-gitGraph
-  commit id: "1-abcdefg"
-`,
-      {}
-    );
-  });
 });

cypress/integration/rendering/mermaid.spec.js

@@ -0,0 +1,75 @@
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+
+describe('Mindmap', () => {
+  it('square shape', () => {
+    imgSnapshotTest(
+      `
+mindmap
+    root[
+      The root
+    ]
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('rounded rect shape', () => {
+    imgSnapshotTest(
+      `
+mindmap
+    root((
+      The root
+    ))
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('circle shape', () => {
+    imgSnapshotTest(
+      `
+mindmap
+    root(
+      The root
+    )
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('default shape', () => {
+    imgSnapshotTest(
+      `
+mindmap
+  The root
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('adding children', () => {
+    imgSnapshotTest(
+      `
+mindmap
+  The root
+    child1
+    child2
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('adding grand children', () => {
+    imgSnapshotTest(
+      `
+mindmap
+  The root
+    child1
+      child2
+      child3
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+});

cypress/integration/rendering/mindmap.spec.js

@@ -0,0 +1,115 @@
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+
+describe('Mindmaps', () => {
+  it('Only a root', () => {
+    imgSnapshotTest(
+      `mindmap
+root
+    `,
+      {}
+    );
+  });
+
+  it('a root with a shape', () => {
+    imgSnapshotTest(
+      `mindmap
+root[root]
+    `,
+      {}
+    );
+  });
+
+  it('a root with wrapping text and a shape', () => {
+    imgSnapshotTest(
+      `mindmap
+root[A root with a long text that wraps to keep the node size in check]
+    `,
+      {}
+    );
+  });
+
+  it('a root with an icon', () => {
+    imgSnapshotTest(
+      `mindmap
+root[root]
+::icon(mdi mdi-fire)
+    `,
+      {}
+    );
+  });
+
+  it('Blang and cloud shape', () => {
+    imgSnapshotTest(
+      `mindmap
+root))bang((
+  ::icon(mdi mdi-fire)
+  a))Another bang((
+  ::icon(mdi mdi-fire)
+  a)A cloud(
+  ::icon(mdi mdi-fire)
+    `,
+      {}
+    );
+  });
+
+  it('Blang and cloud shape with icons', () => {
+    imgSnapshotTest(
+      `mindmap
+root))bang((
+
+  a))Another bang((
+  a)A cloud(
+    `,
+      {}
+    );
+  });
+
+  it('braches', () => {
+    imgSnapshotTest(
+      `mindmap
+root
+  child1
+      grandchild 1
+      grandchild 2
+  child2
+      grandchild 3
+      grandchild 4
+  child3
+      grandchild 5
+      grandchild 6
+    `,
+      {}
+    );
+  });
+
+  it('braches with shapes and labels', () => {
+    imgSnapshotTest(
+      `mindmap
+root
+  child1((Circle))
+      grandchild 1
+      grandchild 2
+  child2(Round rectangle)
+      grandchild 3
+      grandchild 4
+  child3[Square]
+      grandchild 5
+      ::icon(mdi mdi-fire)
+      gc6((grand<br/>child 6))
+      ::icon(mdi mdi-fire)
+    `,
+      {}
+    );
+  });
+  it('text shouhld wrap with icon', () => {
+    imgSnapshotTest(
+      `mindmap
+root
+  Child3(A node with an icon and with a long text that wraps to keep the node size in check)
+    `,
+      {}
+    );
+  });
+
+  /* The end */
+});

cypress/integration/rendering/mindmap.spec.ts

@@ -1,227 +0,0 @@
-import { imgSnapshotTest } from '../../helpers/util.js';
-
-/**
- * Check whether the SVG Element has a Mindmap root
- *
- * Sometimes, Cypress takes a snapshot before the mermaid mindmap has finished
- * generating the SVG.
- *
- * @param $p - The element to check.
- */
-function shouldHaveRoot($p: JQuery<SVGSVGElement>) {
-  // get HTML Element from jquery element
-  const svgElement = $p[0];
-  expect(svgElement.nodeName).equal('svg');
-
-  const sectionRoots = svgElement.getElementsByClassName('mindmap-node section-root');
-  // mindmap should have at least one root section
-  expect(sectionRoots).to.have.lengthOf.at.least(1);
-}
-
-describe('Mindmaps', () => {
-  it('Only a root', () => {
-    imgSnapshotTest(
-      `mindmap
-root
-    `,
-      {},
-      undefined,
-      shouldHaveRoot
-    );
-  });
-
-  it('a root with a shape', () => {
-    imgSnapshotTest(
-      `mindmap
-root[root]
-    `,
-      {},
-      undefined,
-      shouldHaveRoot
-    );
-  });
-
-  it('a root with wrapping text and a shape', () => {
-    imgSnapshotTest(
-      `mindmap
-root[A root with a long text that wraps to keep the node size in check]
-    `,
-      {},
-      undefined,
-      shouldHaveRoot
-    );
-  });
-
-  it('a root with an icon', () => {
-    imgSnapshotTest(
-      `mindmap
-root[root]
-::icon(mdi mdi-fire)
-    `,
-      {},
-      undefined,
-      shouldHaveRoot
-    );
-  });
-
-  it('Blang and cloud shape', () => {
-    imgSnapshotTest(
-      `mindmap
-root))bang((
-  ::icon(mdi mdi-fire)
-  a))Another bang((
-  ::icon(mdi mdi-fire)
-  a)A cloud(
-  ::icon(mdi mdi-fire)
-    `,
-      {},
-      undefined,
-      shouldHaveRoot
-    );
-  });
-
-  it('Blang and cloud shape with icons', () => {
-    imgSnapshotTest(
-      `mindmap
-root))bang((
-
-  a))Another bang((
-  a)A cloud(
-    `,
-      {},
-      undefined,
-      shouldHaveRoot
-    );
-  });
-
-  it('braches', () => {
-    imgSnapshotTest(
-      `mindmap
-root
-  child1
-      grandchild 1
-      grandchild 2
-  child2
-      grandchild 3
-      grandchild 4
-  child3
-      grandchild 5
-      grandchild 6
-    `,
-      {},
-      undefined,
-      shouldHaveRoot
-    );
-  });
-
-  it('braches with shapes and labels', () => {
-    imgSnapshotTest(
-      `mindmap
-root
-  child1((Circle))
-      grandchild 1
-      grandchild 2
-  child2(Round rectangle)
-      grandchild 3
-      grandchild 4
-  child3[Square]
-      grandchild 5
-      ::icon(mdi mdi-fire)
-      gc6((grand<br/>child 6))
-      ::icon(mdi mdi-fire)
-    `,
-      {},
-      undefined,
-      shouldHaveRoot
-    );
-  });
-  it('text shouhld wrap with icon', () => {
-    imgSnapshotTest(
-      `mindmap
-root
-  Child3(A node with an icon and with a long text that wraps to keep the node size in check)
-    `,
-      {},
-      undefined,
-      shouldHaveRoot
-    );
-  });
-  it('square shape', () => {
-    imgSnapshotTest(
-      `
-mindmap
-    root[
-      The root
-    ]
-      `,
-      {},
-      undefined,
-      shouldHaveRoot
-    );
-  });
-  it('rounded rect shape', () => {
-    imgSnapshotTest(
-      `
-mindmap
-    root((
-      The root
-    ))
-      `,
-      {},
-      undefined,
-      shouldHaveRoot
-    );
-  });
-  it('circle shape', () => {
-    imgSnapshotTest(
-      `
-mindmap
-    root(
-      The root
-    )
-      `,
-      {},
-      undefined,
-      shouldHaveRoot
-    );
-  });
-  it('default shape', () => {
-    imgSnapshotTest(
-      `
-mindmap
-  The root
-      `,
-      {},
-      undefined,
-      shouldHaveRoot
-    );
-  });
-  it('adding children', () => {
-    imgSnapshotTest(
-      `
-mindmap
-  The root
-    child1
-    child2
-      `,
-      {},
-      undefined,
-      shouldHaveRoot
-    );
-  });
-  it('adding grand children', () => {
-    imgSnapshotTest(
-      `
-mindmap
-  The root
-    child1
-      child2
-      child3
-      `,
-      {},
-      undefined,
-      shouldHaveRoot
-    );
-  });
-  /* The end */
-});

cypress/integration/rendering/requirement.spec.js

@@ -46,4 +46,69 @@ describe('Requirement diagram', () => {
     );
     cy.get('svg');
   });
+
+  it('should render accessibility tags', function () {
+    const expectedTitle = 'Gantt Diagram';
+    const expectedAccDescription = 'Tasks for Q4';
+    renderGraph(
+      `
+    requirementDiagram
+    accTitle: ${expectedTitle}
+    accDescr: ${expectedAccDescription}
+
+    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
+      `,
+      {}
+    );
+    cy.get('svg').should((svg) => {
+      const el = svg.get(0);
+      const children = Array.from(el.children);
+
+      const titleEl = children.find(function (node) {
+        return node.tagName === 'title';
+      });
+      const descriptionEl = children.find(function (node) {
+        return node.tagName === 'desc';
+      });
+
+      expect(titleEl).to.exist;
+      expect(titleEl.textContent).to.equal(expectedTitle);
+      expect(descriptionEl).to.exist;
+      expect(descriptionEl.textContent).to.equal(expectedAccDescription);
+    });
+  });
 });

cypress/integration/rendering/sequencediagram.spec.js

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

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

@@ -328,7 +328,7 @@ describe('State diagram', () => {
       }
     );
   });
-  it('v2 it should be possible to use a choice', () => {
+  it('v2 it should be possibel to use a choice', () => {
     imgSnapshotTest(
       `
   stateDiagram-v2
@@ -521,54 +521,4 @@ stateDiagram-v2
       { logLevel: 0, fontFamily: 'courier' }
     );
   });
-
-  describe('classDefs and applying classes', () => {
-    it('v2 states can have a class applied', () => {
-      imgSnapshotTest(
-        `
-          stateDiagram-v2
-          [*] --> A
-          A --> B: test({ foo#colon; 'far' })
-          B --> [*]
-            classDef badBadEvent fill:#f00,color:white,font-weight:bold 
-            class B badBadEvent
-           `,
-        { logLevel: 0, fontFamily: 'courier' }
-      );
-    });
-    it('v2 can have multiple classes applied to multiple states', () => {
-      imgSnapshotTest(
-        `
-          stateDiagram-v2
-          classDef notMoving fill:white
-          classDef movement font-style:italic;
-          classDef badBadEvent fill:#f00,color:white,font-weight:bold
-    
-          [*] --> Still
-          Still --> [*]
-          Still --> Moving
-          Moving --> Still
-          Moving --> Crash
-          Crash --> [*]
-    
-          class Still notMoving
-          class Moving, Crash movement
-          class Crash badBadEvent
-        `,
-        { logLevel: 0, fontFamily: 'courier' }
-      );
-    });
-  });
-  it('1433: should render a simple state diagram with a title', () => {
-    imgSnapshotTest(
-      `---
-title: simple state diagram
----
-stateDiagram-v2
-[*] --> State1
-State1 --> [*]
-`,
-      {}
-    );
-  });
 });

cypress/integration/rendering/theme.spec.js

@@ -25,7 +25,6 @@ describe('themeCSS balancing, it', () => {
   });
 });
 
-// TODO: Delete/Rename this describe, keeping the inner contents.
 describe('Pie Chart', () => {
   // beforeEach(()=>{
   //   cy.clock((new Date('2014-06-09')).getTime());

cypress/integration/rendering/timeline.spec.ts

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

cypress/platform/ashish2.html

@@ -1,231 +0,0 @@
-<html>
-  <head>
-    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
-    />
-    <link
-      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
-      rel="stylesheet"
-    />
-    <style>
-      body {
-        /* background: rgb(221, 208, 208); */
-        /* background:#333; */
-        font-family: 'Arial';
-        /* font-size: 18px !important; */
-      }
-      h1 {
-        color: grey;
-      }
-      .mermaid2 {
-        display: none;
-      }
-      .mermaid svg {
-        /* font-size: 18px !important; */
-        background-color: #eee;
-        background-image: radial-gradient(#fff 1%, transparent 11%),
-          radial-gradient(#fff 1%, transparent 11%);
-        background-size: 20px 20px;
-        background-position: 0 0, 10px 10px;
-        background-repeat: repeat;
-      }
-      .malware {
-        position: fixed;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: 150px;
-        background: red;
-        color: black;
-        display: flex;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        font-family: monospace;
-        font-size: 72px;
-      }
-    </style>
-  </head>
-  <body>
-    <div>Security check</div>
-    <pre id="diagram" class="mermaid2">
- timeline
-        title My day
-        section section with no tasks
-        section Go to work at the dog office
-          1930 : first step : second step is a long step
-               : third step
-          1940 : fourth step : fifth step
-        section Go home
-          1950 : India got independent and already won war against Pakistan
-          1960 : India fights poverty, looses war to China and gets nuclear weapons from USA and USSR
-          1970 : Green Revolution comes to india
-        section Another section with no tasks
-          I am a big big big tasks
-          I am not so big tasks
-    </pre>
-    <pre id="diagram" class="mermaid">
- timeline
-        title MermaidChart 2023 Timeline
-        section 2023 Q1 <br> Release Personal Tier
-          Buttet 1 : sub-point 1a : sub-point 1b
-               : sub-point 1c
-          Bullet 2 : sub-point 2a : sub-point 2b
-        section 2023 Q2 <br> Release XYZ Tier
-          Buttet 3 : sub-point <br> 3a : sub-point 3b
-               : sub-point 3c
-          Bullet 4 : sub-point 4a : sub-point 4b
-
-    </pre>
-
-    <pre id="diagram" class="mermaid">
- timeline
-        title England's History Timeline
-        section Stone Age
-          7600 BC : Britain's oldest known house was built in Orkney, Scotland
-          6000 BC : Sea levels rise and Britain becomes an island. The people who live here are hunter-gatherers.
-        section Broze Age
-          2300 BC : People arrive from Europe and settle in Britain. They bring farming and metalworking.
-               : New styles of pottery and ways of burying the dead appear.
-          2200 BC : The last major building works are completed at Stonehenge. People now bury their dead in stone circles.
-                  : The first metal objects are made in Britain.Some other nice things happen. it is a good time to be alive.
-
-    </pre>
-    <pre id="diagram" class="mermaid2">
-      %%{'init': { 'logLevel': 'debug', 'theme': 'default', 'timeline': {'disableMulticolor':false} } }%%
- timeline
-        title History of Social Media Platform
-          2002 : LinkedIn
-          2004 : Facebook : Google : Pixar
-          2005 : Youtube
-          2006 : Twitter
-          2007 : Tumblr
-          2008s : Instagram
-          2010 : Pinterest
-    </pre>
-    <pre id="diagram" class="mermaid2">
-      %%{init: { 'logLevel': 'debug', 'theme': 'base', 'themeVariables': {
-              'cScale0': '#ff0000',
-              'cScale1': '#00ff00',
-              'cScale2': '#ff0000'
-              } } }%%
- timeline
-        title History of Social Media Platform
-          2002 : LinkedIn
-          2004 : Facebook : Google : Pixar
-          2005 : Youtube
-          2006 : Twitter
-          2007 : Tumblr
-          2008s : Instagram
-          2010 : Pinterest
-    </pre>
-
-    <pre id="diagram" class="mermaid2">
-          %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
-              'cScale0': '#ff0000',
-              'cScale1': '#00ff00',
-              'cScale2': '#0000ff'
-       } } }%%
-       timeline
-        title History of Social Media Platform
-          2002 : LinkedIn
-          2004 : Facebook : Google
-          2005 : Youtube
-          2006 : Twitter
-          2007 : Tumblr
-          2008 : Instagram
-          2010 : Pinterest
-
-    </pre>
-
-    <pre id="diagram" class="mermaid2">
- timeline
-        title History of Social Media Platform
-          2002 : LinkedIn
-          2004 : Facebook : Google
-          2005 : Youtube
-          2006 : Twitter
-          2007 : Tumblr
-          2008s : Instagram
-          2010 : Pinterest
-    </pre>
-    <pre id="diagram" class="mermaid2">
-mindmap
-  root
-    child1((Circle))
-        grandchild 1
-        grandchild 2
-    child2(Round rectangle)
-        grandchild 3
-        grandchild 4
-    child3[Square]
-        grandchild 5
-        ::icon(mdi mdi-fire)
-        gc6((grand<br/>child 6))
-        ::icon(mdi mdi-fire)
-          gc7((grand<br/>grand<br/>child 8))
-        </pre>
-    <pre id="diagram" class="mermaid2">
-      flowchart-elk TB
-      a --> b
-      a --> c
-      b --> d
-      c --> d
-    </pre>
-
-    <!-- <div id="cy"></div> -->
-    <!-- <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> -->
-    <!-- <script src="./mermaid-example-diagram-detector.js"></script>    -->
-    <!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script> -->
-    <script type="module">
-      //import mindmap from '../../packages/mermaid-mindmap/src/detector';
-      // import example from '../../packages/mermaid-example-diagram/src/detector';
-      // import timeline from '../../packages/mermaid-timeline/src/detector';
-      import mermaid from '../../packages/mermaid/src/mermaid';
-      // await mermaid.registerExternalDiagrams([]);
-      mermaid.parseError = function (err, hash) {
-        // console.error('Mermaid error: ', err);
-      };
-      mermaid.initialize({
-        theme: 'base',
-        startOnLoad: true,
-        logLevel: 0,
-        flowchart: {
-          useMaxWidth: false,
-          htmlLabels: true,
-        },
-        gantt: {
-          useMaxWidth: false,
-        },
-        timeline: {
-          disableMulticolor: false,
-          htmlLabels: false,
-        },
-        useMaxWidth: true,
-        lazyLoadedDiagrams: [
-          // './mermaid-mindmap-detector.esm.mjs',
-          // './mermaid-example-diagram-detector.esm.mjs',
-          //'./mermaid-timeline-detector.esm.mjs',
-        ],
-      });
-      function callback() {
-        alert('It worked');
-      }
-      mermaid.parseError = function (err, hash) {
-        console.error('In parse error:');
-        console.error(err);
-      };
-      // mermaid.test1('first_slow', 1200).then((r) => console.info(r));
-      // mermaid.test1('second_fast', 200).then((r) => console.info(r));
-      // mermaid.test1('third_fast', 200).then((r) => console.info(r));
-      // mermaid.test1('forth_slow', 1200).then((r) => console.info(r));
-    </script>
-  </body>
-</html>

cypress/platform/bundle-test.js

@@ -49,9 +49,13 @@ mermaid.initialize({
     ],
   },
 });
-void (async () => {
-  const { svg } = await mermaid.render('the-id-of-the-svg', code);
-  console.log(svg);
-  const elem = document.querySelector('#graph-to-be');
-  elem.innerHTML = svg;
-})();
+mermaid.render(
+  '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 {
@@ -45,9 +46,13 @@
     <pre class="mermaid" style="width: 100%; height: 20%">
       %%{init: {'theme': 'base',  'fontFamily': 'courier', 'themeVariables': {  'primaryColor': '#fff000'}}}%%
       classDiagram-v2
-classA <|-- classB : implements
-classC *-- classD : composition
-classE o-- classF : aggregation
+       class BankAccount{
+        +String owner
+        +BigDecimal balance
+        +deposit(amount) bool
+        +withdrawl(amount) int
+       }
+       cssClass "BankAccount" customCss
     </pre>
     <pre class="mermaid2" style="width: 100%; height: 20%">
         %%{init: {'theme': 'base',  'fontFamily': 'courier', 'themeVariables': {  'primaryColor': '#fff000'}}}%%
@@ -112,16 +117,24 @@ classE o-- classF : aggregation
         callback Shape "callbackFunction" "This is a tooltip for a callback"
 
     </pre>
-    <script type="module">
-      import mermaid from './mermaid.esm.mjs';
+    <script src="./mermaid.js"></script>
+    <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">
-      import mermaid from './mermaid.esm.mjs';
+    <script src="./mermaid.js"></script>
+    <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">
-      import mermaid from './mermaid.esm.mjs';
+    <script src="./mermaid.js"></script>
+    <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">
-      import mermaid from './mermaid.esm.mjs';
+    <script src="./mermaid.js"></script>
+    <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">
-      import mermaid from './mermaid.esm.mjs';
+    <script src="./mermaid.js"></script>
+    <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">
-      import mermaid from './mermaid.esm.mjs';
+    <script src="./mermaid.js"></script>
+    <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

@@ -1,26 +0,0 @@
-<html>
-  <body>
-    <h1>Should correctly load a third-party diagram using registerDiagram</h1>
-    <pre id="diagram" class="mermaid">
-example-diagram
-    </pre>
-
-    <!-- <div id="cy"></div> -->
-    <!-- <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> -->
-    <!-- <script src="./mermaid-example-diagram-detector.js"></script>    -->
-    <!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script> -->
-    <!-- <script type="module" src="./external-diagrams-mindmap.mjs" /> -->
-    <script type="module">
-      import exampleDiagram from '../../packages/mermaid-example-diagram/src/detector';
-      // import example from '../../packages/mermaid-example-diagram/src/detector';
-      import mermaid from '../../packages/mermaid/src/mermaid';
-
-      await mermaid.registerExternalDiagrams([exampleDiagram]);
-      await mermaid.initialize({ logLevel: 0 });
-      await mermaid.run();
-      if (window.Cypress) {
-        window.rendered = true;
-      }
-    </script>
-  </body>
-</html>

cypress/platform/flow.html

@@ -29,8 +29,8 @@
         click a_a "http://www.aftonbladet.se" "apa"
     </pre>
 
-    <script type="module">
-      import mermaid from './mermaid.esm.mjs';
+    <script src="./mermaid.js"></script>
+    <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 '../../packages/mermaid/src/mermaid';
-
-      mermaid.initialize({
-        theme: 'forest',
-        // themeCSS: '.node rect { fill: red; }',
-        logLevel: 3,
-        flowchart: { curve: 'linear' },
-        gantt: { axisFormat: '%m/%d/%Y' },
-        sequence: { actorMargin: 50 },
-        // sequenceDiagram: { actorMargin: 300 } // deprecated
-      });
-    </script>
-  </body>
-</html>

cypress/platform/ghsa1.html

@@ -4,26 +4,23 @@
   </script>
   <body>
     <div id="target">
-      <h1>Background should be yellow!!!</h1>
+      <h1>This element does not belong to the SVG but we can style it</h1>
     </div>
     <svg id="diagram"></svg>
 
-    <script type="module">
-      import mermaid from './mermaid.esm.mjs';
+    <script src="./mermaid.js"></script>
+    <script>
       mermaid.initialize({ startOnLoad: false, logLevel: 0 });
 
       const graph = `
-      %%{ init: { "themeVariables" : { "textColor": "green;} #target { background-color: crimson }", "mainBkg": "#fff000" } } }%%
-             graph TD
-                 A[Goose]
-             `;
+     %%{ init: { "themeVariables" : { "textColor": "green;} #target { background-color: crimson }", "mainBkg": "#fff000" } } }%%
+            graph TD
+                A[Goose]
+            `;
 
       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;
-      }
     </script>
   </body>
 </html>

cypress/platform/ghsa2.html

@@ -8,8 +8,8 @@
     </div>
     <svg id="diagram"></svg>
 
-    <script type="module">
-      import mermaid from './mermaid.esm.mjs';
+    <script src="./mermaid.js"></script>
+    <script>
       mermaid.initialize({ startOnLoad: false, logLevel: 0 });
 
       const graph = `
@@ -19,11 +19,8 @@
             `;
 
       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;
-      }
     </script>
   </body>
 </html>

cypress/platform/ghsa3.html

@@ -1,101 +0,0 @@
-<html>
-  <head>
-    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
-      rel="stylesheet"
-    />
-    <style>
-      body {
-        /* background: rgb(221, 208, 208); */
-        /* background:#333; */
-        font-family: 'Arial';
-        /* font-size: 18px !important; */
-      }
-      h1 {
-        color: grey;
-      }
-      .mermaid2 {
-        display: none;
-      }
-      .mermaid svg {
-        /* font-size: 18px !important; */
-      }
-      .malware {
-        position: fixed;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: 150px;
-        background: red;
-        color: black;
-        display: flex;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        font-family: monospace;
-        font-size: 72px;
-      }
-    </style>
-  </head>
-  <body>
-    <h1>PAGE SHOULD NOT BE RED</h1>
-    <div class="flex">
-      <div id="diagram" class="mermaid"></div>
-      <div id="res" class=""></div>
-    </div>
-    <script type="module">
-      import mermaid from './mermaid.esm.mjs';
-      mermaid.parseError = function (err, hash) {
-        // console.error('Mermaid error: ', err);
-      };
-      mermaid.initialize({
-        theme: 'forest',
-        arrowMarkerAbsolute: true,
-        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
-        logLevel: 0,
-        state: {
-          defaultRenderer: 'dagre-wrapper',
-        },
-        flowchart: {
-          // defaultRenderer: 'dagre-wrapper',
-          nodeSpacing: 10,
-          curve: 'cardinal',
-          htmlLabels: true,
-        },
-        htmlLabels: true,
-        // gantt: { axisFormat: '%m/%d/%Y' },
-        sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
-        // sequenceDiagram: { actorMargin: 300 } // deprecated
-        // fontFamily: '"times", sans-serif',
-        // fontFamily: 'courier',
-        fontSize: 18,
-        curve: 'basis',
-        // securityLevel: 'strict',
-        startOnLoad: false,
-        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
-        // themeVariables: {relationLabelColor: 'red'}
-      });
-      function callback() {
-        alert('It worked');
-      }
-
-      let diagram = '%%{init: {"flowchart": {"htmlLabels": "true"}} }%%\n';
-      diagram += 'flowchart\n';
-      diagram += 'A["<p><sty';
-      diagram += 'le> * { background : red}</style>test</p>"]';
-
-      console.log(diagram);
-      const { svg } = await mermaid.render('diagram', diagram);
-      document.querySelector('#res').innerHTML = svg;
-      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">
-      import mermaid from './mermaid.esm.mjs';
+    <script src="./mermaid.js"></script>
+    <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">
-      import mermaid from './mermaid.esm.mjs';
+    <script src="./mermaid.js"></script>
+    <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">
-      import mermaid from './mermaid.esm.mjs';
+    <script src="./mermaid.js"></script>
+    <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">
-      import mermaid from './mermaid.esm.mjs';
+    <script src="./mermaid.js"></script>
+    <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">
-      import mermaid from './mermaid.esm.mjs';
+    <script src="./mermaid.js"></script>
+    <script>
       function clickByFlow(elemName) {
         const div = document.createElement('div');
         div.className = 'created-by-click';

cypress/platform/knsv2.html

@@ -54,234 +54,65 @@
     </style>
   </head>
   <body>
+    <div>Security check</div>
     <pre id="diagram" class="mermaid">
-%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
-graph BT
-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
+classDiagram
+        direction LR
+        class Student {
+          -idCard : IdCard
+        }
+        class IdCard{
+          -id : int
+          -name : string
+        }
+        class Bike{
+          -id : int
+          -name : string
+        }
+        Student "1" --o "1" IdCard : carries
+        Student "1" --o "1" Bike : rides
     </pre>
     <pre id="diagram" class="mermaid2">
-flowchart-elk TB
-      a --> b
-      a --> c
-      b --> d
-      c --> d
-    </pre>
-    <pre id="diagram" class="mermaid2">
-%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
-flowchart TB
-  %% I could not figure out how to use double quotes in labels in Mermaid
-  subgraph ibm[IBM Espresso CPU]
-    core0[IBM PowerPC Broadway Core 0]
-    core1[IBM PowerPC Broadway Core 1]
-    core2[IBM PowerPC Broadway Core 2]
-
-    rom[16 KB ROM]
-
-    core0 --- core2
-
-    rom --> core2
-  end
-
-  subgraph amd[AMD Latte GPU]
-    mem[Memory & I/O Bridge]
-    dram[DRAM Controller]
-    edram[32 MB EDRAM MEM1]
-    rom[512 B SEEPROM]
-
-    sata[SATA IF]
-    exi[EXI]
-
-    subgraph gx[GX]
-      sram[3 MB 1T-SRAM]
-    end
-
-    radeon[AMD Radeon R7xx GX2]
-
-    mem --- gx
-    mem --- radeon
-
-    rom --- mem
-
-    mem --- sata
-    mem --- exi
-
-    dram --- sata
-    dram --- exi
-  end
-
-  ddr3[2 GB DDR3 RAM MEM2]
-
-  mem --- ddr3
-  dram --- ddr3
-  edram --- ddr3
-
-  core1 --- mem
-
-  exi --- rtc
-  rtc{{rtc}}
-</pre
-    >
-    <br />
-    <pre id="diagram" class="mermaid2">
-flowchart TB
-  %% I could not figure out how to use double quotes in labels in Mermaid
-  subgraph ibm[IBM Espresso CPU]
-    core0[IBM PowerPC Broadway Core 0]
-    core1[IBM PowerPC Broadway Core 1]
-    core2[IBM PowerPC Broadway Core 2]
-
-    rom[16 KB ROM]
-
-    core0 --- core2
-
-    rom --> core2
-  end
-
-  subgraph amd[AMD Latte GPU]
-    mem[Memory & I/O Bridge]
-    dram[DRAM Controller]
-    edram[32 MB EDRAM MEM1]
-    rom[512 B SEEPROM]
-
-    sata[SATA IF]
-    exi[EXI]
-
-    subgraph gx[GX]
-      sram[3 MB 1T-SRAM]
-    end
-
-    radeon[AMD Radeon R7xx GX2]
-
-    mem --- gx
-    mem --- radeon
-
-    rom --- mem
-
-    mem --- sata
-    mem --- exi
-
-    dram --- sata
-    dram --- exi
-  end
-
-  ddr3[2 GB DDR3 RAM MEM2]
-
-  mem --- ddr3
-  dram --- ddr3
-  edram --- ddr3
-
-  core1 --- mem
-
-  exi --- rtc
-  rtc{{rtc}}
-</pre
-    >
-    <br />
-    &nbsp;
-    <pre id="diagram" class="mermaid2">
-      flowchart LR
-  B1 --be be--x B2
-  B1 --bo bo--o B3
-  subgraph Ugge
-      B2
-      B3
-      subgraph inner
-          B4
-          B5
-      end
-      subgraph inner2
-        subgraph deeper
-          C4
-          C5
-        end
-        C6
-      end
-
-      B4 --> C4
-
-      B3 -- X --> B4
-      B2 --> inner
-
-      C4 --> C5
-  end
-
-  subgraph outer
-      B6
-  end
-  B6 --> B5
-  </pre
-    >
-    <pre id="diagram" class="mermaid2">
-sequenceDiagram
-    Customer->>+Stripe: Makes a payment request
-    Stripe->>+Bank: Forwards the payment request to the bank
-    Bank->>+Customer: Asks for authorization
-    Customer->>+Bank: Provides authorization
-    Bank->>+Stripe: Sends a response with payment details
-    Stripe->>+Merchant: Sends a notification of payment receipt
-    Merchant->>+Stripe: Confirms the payment
-    Stripe->>+Customer: Sends a confirmation of payment
-    Customer->>+Merchant: Receives goods or services
-        </pre
-    >
-    <pre id="diagram" class="mermaid2">
 mindmap
-  root((mindmap))
-    Origins
-      Long history
-      ::icon(fa fa-book)
-      Popularisation
-        British popular psychology author Tony Buzan
-    Research
-      On effectiveness<br/>and features
-      On Automatic creation
-        Uses
-            Creative techniques
-            Strategic planning
-            Argument mapping
-    Tools
-      Pen and paper
-      Mermaid
-    </pre>
-    <br />
+  root
+    child1((Circle))
+        grandchild 1
+        grandchild 2
+    child2(Round rectangle)
+        grandchild 3
+        grandchild 4
+    child3[Square]
+        grandchild 5
+        ::icon(mdi mdi-fire)
+        gc6((grand<br/>child 6))
+        ::icon(mdi mdi-fire)
+          gc7((grand<br/>grand<br/>child 8))
+        </pre>
     <pre id="diagram" class="mermaid2">
-  example-diagram
+      example-diagram
     </pre>
 
     <!-- <div id="cy"></div> -->
     <!-- <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> -->
     <!-- <script src="./mermaid-example-diagram-detector.js"></script>    -->
     <!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script> -->
-    <!-- <script src="./mermaid.js"></script> -->
+    <script src="./mermaid.js"></script>
 
-    <script type="module">
-      // import mindmap from '../../packages/mermaid-mindmap/src/detector';
-      import example from '../../packages/mermaid-example-diagram/src/detector';
-      import mermaid from '../../packages/mermaid/src/mermaid';
-      await mermaid.registerExternalDiagrams([example]);
+    <script>
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };
       mermaid.initialize({
         theme: 'forest',
         startOnLoad: true,
-        logLevel: 5,
-        flowchart: {
-          // defaultRenderer: 'elk',
-          useMaxWidth: false,
-          htmlLabels: true,
-        },
-        gantt: {
-          useMaxWidth: false,
-        },
-        useMaxWidth: false,
+        logLevel: 0,
+        // basePath: './packages/',
+        // themeVariables: { darkMode: true },
+        lazyLoadedDiagrams: [
+          './mermaid-mindmap-detector.esm.mjs',
+          './mermaid-example-diagram-detector.esm.mjs',
+        ],
+        // lazyLoadedDiagrams: ['../../mermaid-mindmap/registry.ts'],
       });
       function callback() {
         alert('It worked');
@@ -290,10 +121,6 @@ mindmap
         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>