Add no-var rule.

.eslintignore

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

.eslintrc.json

@@ -23,9 +23,9 @@
   ],
   "plugins": ["@typescript-eslint", "html", "jest", "jsdoc", "json"],
   "rules": {
-    "no-console": "error",
     "no-prototype-builtins": "off",
     "no-unused-vars": "off",
+    "no-var": "error",
     "jsdoc/check-indentation": "off",
     "jsdoc/check-alignment": "off",
     "jsdoc/check-line-alignment": "off",
@@ -52,24 +52,10 @@
   },
   "overrides": [
     {
-      "files": ["cypress/**", "demos/**"],
+      "files": "./**/*.html",
       "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"
+        "jsdoc/require-jsdoc": "off"
       }
     }
   ]

.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,17 +0,0 @@
-blank_issues_enabled: false
-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: Security Vulnerability
-    url: https://github.com/mermaid-js/.github/blob/main/SECURITY.md
-    about: Report security issues confidentially.
-  - 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/workflows/build.yml

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

.github/workflows/checks.yml

@@ -14,7 +14,7 @@ jobs:
     name: check tests
     if: github.repository_owner == 'mermaid-js'
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v2
         with:
           fetch-depth: 0
       - uses: testomatio/check-tests@stable

.github/workflows/docs.yml

@@ -1,28 +0,0 @@
-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

@@ -0,0 +1,38 @@
+name: E2E
+
+on: [push, pull_request]
+
+permissions:
+  contents: read
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [16.x]
+    steps:
+    - uses: actions/checkout@v3
+
+    - name: Setup Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v3
+      with:
+        cache: yarn
+        node-version: ${{ matrix.node-version }}
+
+    - name: Install Yarn
+      run: npm i yarn --global
+
+    - name: Install Packages
+      run: |
+        yarn install --frozen-lockfile
+      env:
+        CYPRESS_CACHE_FOLDER: .cache/Cypress
+
+    - name: Run Build
+      run: yarn build
+
+    - name: Run E2E Tests
+      run: yarn e2e
+      env:
+        CYPRESS_CACHE_FOLDER: .cache/Cypress

.github/workflows/e2e-applitools.yml

@@ -1,72 +0,0 @@
-name: E2E (Applitools)
-
-on:
-  workflow_dispatch:
-    # Because we want to limit Applitools usage, so we only want to start this
-    # workflow on rare occasions/manually.
-    inputs:
-      parent_branch:
-        required: true
-        type: string
-        default: master
-        description: 'Parent branch to use for PRs'
-
-permissions:
-  contents: read
-
-env:
-  # on PRs from forks, this secret will always be empty, for security reasons
-  USE_APPLI: ${{ secrets.APPLITOOLS_API_KEY && 'true' || '' }}
-
-jobs:
-  test:
-    runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [18.x]
-    steps:
-      - if: ${{ ! env.USE_APPLI }}
-        name: Warn if not using Applitools
-        run: |
-          echo "::error,title=Not using Applitols::APPLITOOLS_API_KEY is empty, disabling Applitools for this run."
-
-      - uses: actions/checkout@v3
-
-      - uses: pnpm/action-setup@v2
-        # uses version from "packageManager" field in package.json
-
-      - name: Setup Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
-        with:
-          cache: pnpm
-          node-version: ${{ matrix.node-version }}
-
-      - name: Install Packages
-        run: |
-          pnpm install --frozen-lockfile
-        env:
-          CYPRESS_CACHE_FOLDER: .cache/Cypress
-
-      - if: ${{ env.USE_APPLI }}
-        name: Notify applitools of new batch
-        # Copied from docs https://applitools.com/docs/topics/integrations/github-integration-ci-setup.html
-        run: curl -L -d '' -X POST "$APPLITOOLS_SERVER_URL/api/externals/github/push?apiKey=$APPLITOOLS_API_KEY&CommitSha=$GITHUB_SHA&BranchName=${APPLITOOLS_BRANCH}$&ParentBranchName=$APPLITOOLS_PARENT_BRANCH"
-        env:
-          # e.g. mermaid-js/mermaid/my-branch
-          APPLITOOLS_BRANCH: ${{ github.repository }}/${{ github.ref_name }}
-          APPLITOOLS_PARENT_BRANCH: ${{ github.inputs.parent_branch }}
-          APPLITOOLS_API_KEY: ${{ secrets.APPLITOOLS_API_KEY }}
-          APPLITOOLS_SERVER_URL: 'https://eyesapi.applitools.com'
-
-      - name: Run E2E Tests
-        run: pnpm run e2e
-        env:
-          CYPRESS_CACHE_FOLDER: .cache/Cypress
-          # Mermaid applitools.config.js uses this to pick batch name.
-          APPLI_BRANCH: ${{ github.ref_name }}
-          APPLITOOLS_BATCH_ID: ${{ github.sha }}
-          # e.g. mermaid-js/mermaid/my-branch
-          APPLITOOLS_BRANCH: ${{ github.repository }}/${{ github.ref_name }}
-          APPLITOOLS_PARENT_BRANCH: ${{ github.inputs.parent_branch }}
-          APPLITOOLS_API_KEY: ${{ secrets.APPLITOOLS_API_KEY }}
-          APPLITOOLS_SERVER_URL: 'https://eyesapi.applitools.com'

.github/workflows/e2e.yml

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

.github/workflows/lint.yml

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

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

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

.github/workflows/release-publish.yml

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

.github/workflows/test.yml

@@ -10,34 +10,25 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [16.x]
     steps:
       - uses: actions/checkout@v3
 
-      - uses: pnpm/action-setup@v2
-        # uses version from "packageManager" field in package.json
-
       - name: Setup Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v3
         with:
-          cache: pnpm
+          cache: yarn
           node-version: ${{ matrix.node-version }}
 
+      - name: Install Yarn
+        run: npm i yarn --global
+
       - name: Install Packages
         run: |
-          pnpm install --frozen-lockfile
+          yarn install --frozen-lockfile
         env:
           CYPRESS_CACHE_FOLDER: .cache/Cypress
 
       - name: Run Unit Tests
         run: |
-          pnpm run ci --coverage
-
-      - 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)
-        # https://github.com/marketplace/actions/coveralls-github-action
-        uses: coverallsapp/github-action@master
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          flag-name: unit
+          yarn ci --coverage

.gitignore

@@ -12,11 +12,7 @@ token
 
 package-lock.json
 
-# ignore files in /.vscode/ except for launch.json and extensions.json
-/.vscode/**
-!/.vscode/launch.json
-!/.vscode/extensions.json
-
+.vscode/
 cypress/platform/current.html
 cypress/platform/experimental.html
 local/
@@ -30,8 +26,3 @@ cypress/snapshots/
 
 # eslint --cache file
 .eslintcache
-.tsbuildinfo
-tsconfig.tsbuildinfo
-knsv*.html
-
-local*.html

.husky/pre-commit

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

.lintstagedrc.json

@@ -1,6 +1,4 @@
 {
-  "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"]
+  "src/docs/**": ["yarn docs:build --git"],
+  "*.{ts,js,json,html,md}": ["eslint --fix", "prettier --write"]
 }

.npmrc

@@ -1,2 +0,0 @@
-auto-install-peers=true
-strict-peer-dependencies=false

.prettierignore

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

.vite/build.ts

@@ -1,138 +0,0 @@
-import { build, InlineConfig } from 'vite';
-import { resolve } from 'path';
-import { fileURLToPath } from 'url';
-import jisonPlugin from './jisonPlugin.js';
-import pkg from '../package.json' assert { type: 'json' };
-
-const { dependencies } = pkg;
-const watch = process.argv.includes('--watch');
-const mermaidOnly = process.argv.includes('--mermaid');
-const __dirname = fileURLToPath(new URL('.', import.meta.url));
-
-type OutputOptions = Exclude<
-  Exclude<InlineConfig['build'], undefined>['rollupOptions'],
-  undefined
->['output'];
-
-const packageOptions = {
-  mermaid: {
-    name: 'mermaid',
-    packageName: 'mermaid',
-    file: 'mermaid.ts',
-  },
-  'mermaid-mindmap': {
-    name: 'mermaid-mindmap',
-    packageName: 'mermaid-mindmap',
-    file: 'detector.ts',
-  },
-  // 'mermaid-example-diagram-detector': {
-  //   name: 'mermaid-example-diagram-detector',
-  //   packageName: 'mermaid-example-diagram',
-  //   file: 'detector.ts',
-  // },
-};
-
-interface BuildOptions {
-  minify: boolean | 'esbuild';
-  core?: boolean;
-  watch?: boolean;
-  entryName: keyof typeof packageOptions;
-}
-
-export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions): InlineConfig => {
-  const external = ['require', 'fs', 'path'];
-  console.log(entryName, packageOptions[entryName]);
-  const { name, file, packageName } = packageOptions[entryName];
-  let output: OutputOptions = [
-    {
-      name,
-      format: 'esm',
-      sourcemap: true,
-      entryFileNames: `${name}.esm${minify ? '.min' : ''}.mjs`,
-    },
-    {
-      name,
-      format: 'umd',
-      sourcemap: true,
-      entryFileNames: `${name}${minify ? '.min' : ''}.js`,
-    },
-  ];
-
-  if (core) {
-    // Core build is used to generate file without bundled dependencies.
-    // This is used by downstream projects to bundle dependencies themselves.
-    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 = [
-      {
-        name,
-        format: 'esm',
-        sourcemap: true,
-        entryFileNames: `${name}.core.mjs`,
-      },
-    ];
-  }
-
-  const config: InlineConfig = {
-    configFile: false,
-    build: {
-      emptyOutDir: false,
-      outDir: resolve(__dirname, `../packages/${packageName}/dist`),
-      lib: {
-        entry: resolve(__dirname, `../packages/${packageName}/src/${file}`),
-        name,
-        // the proper extensions will be added
-        fileName: name,
-      },
-      minify,
-      rollupOptions: {
-        external,
-        output,
-      },
-    },
-    resolve: {
-      extensions: ['.jison', '.js', '.ts', '.json'],
-    },
-    plugins: [jisonPlugin()],
-  };
-
-  if (watch && config.build) {
-    config.build.watch = {
-      include: [
-        'packages/mermaid-mindmap/src/**',
-        'packages/mermaid/src/**',
-        // 'packages/mermaid-example-diagram/src/**',
-      ],
-    };
-  }
-
-  return config;
-};
-
-const buildPackage = async (entryName: keyof typeof packageOptions) => {
-  return Promise.allSettled([
-    build(getBuildConfig({ minify: false, entryName })),
-    build(getBuildConfig({ minify: 'esbuild', entryName })),
-    build(getBuildConfig({ minify: false, core: true, entryName })),
-  ]);
-};
-
-const main = async () => {
-  const packageNames = Object.keys(packageOptions) as (keyof typeof packageOptions)[];
-  for (const pkg of packageNames) {
-    if (mermaidOnly && pkg !== 'mermaid') {
-      continue;
-    }
-    await buildPackage(pkg);
-  }
-};
-
-if (watch) {
-  build(getBuildConfig({ minify: false, watch, core: true, entryName: 'mermaid' }));
-  if (!mermaidOnly) {
-    build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-mindmap' }));
-    // build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' }));
-  }
-} else {
-  void main();
-}

.vite/jisonPlugin.ts

@@ -1,17 +0,0 @@
-import { transformJison } from './jisonTransformer.js';
-const fileRegex = /\.(jison)$/;
-
-export default function jison() {
-  return {
-    name: 'jison',
-
-    transform(src: string, id: string) {
-      if (fileRegex.test(id)) {
-        return {
-          code: transformJison(src),
-          map: null, // provide source map if available
-        };
-      }
-    },
-  };
-}

.vite/jisonTransformer.ts

@@ -1,17 +0,0 @@
-// @ts-ignore No typings for jison
-import jison from 'jison';
-
-export const transformJison = (src: string): string => {
-  // @ts-ignore No typings for jison
-  const parser = new jison.Generator(src, {
-    moduleType: 'js',
-    'token-stack': true,
-  });
-  const source = parser.generate({ moduleMain: '() => {}' });
-  const exporter = `
-	parser.parser = parser;
-	export { parser };
-	export default parser;
-	`;
-  return `${source} ${exporter}`;
-};

.vite/server.ts

@@ -1,37 +0,0 @@
-import express, { NextFunction, Request, Response } from 'express';
-import { createServer as createViteServer } from 'vite';
-// import { getBuildConfig } from './build';
-
-const cors = (req: Request, res: Response, next: NextFunction) => {
-  res.header('Access-Control-Allow-Origin', '*');
-  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
-  res.header('Access-Control-Allow-Headers', 'Content-Type');
-
-  next();
-};
-
-async function createServer() {
-  const app = express();
-
-  // Create Vite server in middleware mode
-  const vite = await createViteServer({
-    configFile: './vite.config.ts',
-    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'));
-
-  app.listen(9000, () => {
-    console.log(`Listening on http://localhost:9000`);
-  });
-}
-
-// build(getBuildConfig({ minify: false, watch: true }));
-createServer();

.vite/tsconfig.json

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

.vscode/extensions.json

@@ -1,8 +0,0 @@
-{
-  "recommendations": [
-    "dbaeumer.vscode-eslint",
-    "esbenp.prettier-vscode",
-    "zixuanchen.vitest-explorer",
-    "luniclynx.bison"
-  ]
-}

.vscode/launch.json

@@ -1,17 +0,0 @@
-{
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "type": "node",
-      "request": "launch",
-      "name": "Debug Current Test File",
-      "autoAttachChildProcesses": true,
-      "skipFiles": ["<node_internals>/**", "**/node_modules/**"],
-      "program": "${workspaceRoot}/node_modules/vitest/vitest.mjs",
-      "args": ["run", "${relativeFile}"],
-      "smartStep": true,
-      "console": "integratedTerminal"
-    }
-  ]
-}

.webpack/loaders/jison.js

@@ -0,0 +1,25 @@
+const { Generator } = require('jison');
+const validate = require('schema-utils');
+
+const schema = {
+  title: 'Jison Parser options',
+  type: 'object',
+  properties: {
+    'token-stack': {
+      type: 'boolean',
+    },
+    debug: {
+      type: 'boolean',
+    },
+  },
+  additionalProperties: false,
+};
+
+module.exports = function jisonLoader(source) {
+  const options = this.getOptions();
+  (validate.validate || validate)(schema, options, {
+    name: 'Jison Loader',
+    baseDataPath: 'options',
+  });
+  return new Generator(source, options).generate();
+};

.webpack/webpack.config.babel.js

@@ -0,0 +1,45 @@
+import { merge, mergeWithCustomize, customizeObject } from 'webpack-merge';
+import nodeExternals from 'webpack-node-externals';
+import baseConfig from './webpack.config.base';
+
+export default (_env, args) => {
+  switch (args.mode) {
+    case 'development':
+      return [
+        baseConfig,
+        merge(baseConfig, {
+          externals: [nodeExternals()],
+          output: {
+            filename: '[name].core.js',
+          },
+        }),
+      ];
+    case 'production':
+      return [
+        // umd
+        merge(baseConfig, {
+          output: {
+            filename: '[name].min.js',
+          },
+        }),
+        // esm
+        mergeWithCustomize({
+          customizeObject: customizeObject({
+            'output.library': 'replace',
+          }),
+        })(baseConfig, {
+          experiments: {
+            outputModule: true,
+          },
+          output: {
+            library: {
+              type: 'module',
+            },
+            filename: '[name].esm.min.mjs',
+          },
+        }),
+      ];
+    default:
+      throw new Error('No matching configuration was found!');
+  }
+};

.webpack/webpack.config.base.js

@@ -0,0 +1,58 @@
+import path from 'path';
+export const resolveRoot = (...relativePath) => path.resolve(__dirname, '..', ...relativePath);
+
+export default {
+  amd: false, // https://github.com/lodash/lodash/issues/3052
+  target: 'web',
+  entry: {
+    mermaid: './src/mermaid',
+  },
+  resolve: {
+    extensions: ['.wasm', '.mjs', '.js', '.ts', '.json', '.jison'],
+    fallback: {
+      fs: false, // jison generated code requires 'fs'
+      path: require.resolve('path-browserify'),
+    },
+  },
+  output: {
+    path: resolveRoot('./dist'),
+    filename: '[name].js',
+    library: {
+      name: 'mermaid',
+      type: 'umd',
+      export: 'default',
+    },
+    globalObject: 'typeof self !== "undefined" ? self : this',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.ts$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.js$/,
+        include: [resolveRoot('./src'), resolveRoot('./node_modules/dagre-d3-renderer/lib')],
+        use: {
+          loader: 'babel-loader',
+        },
+      },
+      {
+        // load scss to string
+        test: /\.scss$/,
+        use: ['css-to-string-loader', 'css-loader', 'sass-loader'],
+      },
+      {
+        test: /\.jison$/,
+        use: {
+          loader: path.resolve(__dirname, './loaders/jison.js'),
+          options: {
+            'token-stack': true,
+          },
+        },
+      },
+    ],
+  },
+  devtool: 'source-map',
+};

.webpack/webpack.config.e2e.babel.js

@@ -0,0 +1,37 @@
+import baseConfig, { resolveRoot } from './webpack.config.base';
+import { merge } from 'webpack-merge';
+
+export default merge(baseConfig, {
+  mode: 'development',
+  entry: {
+    mermaid: './src/mermaid',
+    e2e: './cypress/platform/viewer.js',
+    'bundle-test': './cypress/platform/bundle-test.js',
+  },
+  output: {
+    globalObject: 'window',
+  },
+  devServer: {
+    compress: true,
+    port: 9000,
+    static: [
+      { directory: resolveRoot('cypress', 'platform') },
+      { directory: resolveRoot('dist') },
+      { directory: resolveRoot('demos') },
+    ],
+  },
+  externals: {
+    mermaid: 'mermaid',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+        },
+      },
+    ],
+  },
+});

CODE_OF_CONDUCT.md

@@ -1,128 +0,0 @@
-# Contributor Covenant Code of Conduct
-
-## Our Pledge
-
-We as members, contributors, and leaders pledge to make participation in our
-community a harassment-free experience for everyone, regardless of age, body
-size, visible or invisible disability, ethnicity, sex characteristics, gender
-identity and expression, level of experience, education, socio-economic status,
-nationality, personal appearance, race, religion, or sexual identity
-and orientation.
-
-We pledge to act and interact in ways that contribute to an open, welcoming,
-diverse, inclusive, and healthy community.
-
-## Our Standards
-
-Examples of behavior that contributes to a positive environment for our
-community include:
-
-- Demonstrating empathy and kindness toward other people
-- Being respectful of differing opinions, viewpoints, and experiences
-- Giving and gracefully accepting constructive feedback
-- Accepting responsibility and apologizing to those affected by our mistakes,
-  and learning from the experience
-- Focusing on what is best not just for us as individuals, but for the
-  overall community
-
-Examples of unacceptable behavior include:
-
-- The use of sexualized language or imagery, and sexual attention or
-  advances of any kind
-- Trolling, insulting or derogatory comments, and personal or political attacks
-- Public or private harassment
-- Publishing others' private information, such as a physical or email
-  address, without their explicit permission
-- Other conduct which could reasonably be considered inappropriate in a
-  professional setting
-
-## Enforcement Responsibilities
-
-Community leaders are responsible for clarifying and enforcing our standards of
-acceptable behavior and will take appropriate and fair corrective action in
-response to any behavior that they deem inappropriate, threatening, offensive,
-or harmful.
-
-Community leaders have the right and responsibility to remove, edit, or reject
-comments, commits, code, wiki edits, issues, and other contributions that are
-not aligned to this Code of Conduct, and will communicate reasons for moderation
-decisions when appropriate.
-
-## Scope
-
-This Code of Conduct applies within all community spaces, and also applies when
-an individual is officially representing the community in public spaces.
-Examples of representing our community include using an official e-mail address,
-posting via an official social media account, or acting as an appointed
-representative at an online or offline event.
-
-## Enforcement
-
-Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported to the community leaders responsible for enforcement at security@mermaid.live
-.
-All complaints will be reviewed and investigated promptly and fairly.
-
-All community leaders are obligated to respect the privacy and security of the
-reporter of any incident.
-
-## Enforcement Guidelines
-
-Community leaders will follow these Community Impact Guidelines in determining
-the consequences for any action they deem in violation of this Code of Conduct:
-
-### 1. Correction
-
-**Community Impact**: Use of inappropriate language or other behavior deemed
-unprofessional or unwelcome in the community.
-
-**Consequence**: A private, written warning from community leaders, providing
-clarity around the nature of the violation and an explanation of why the
-behavior was inappropriate. A public apology may be requested.
-
-### 2. Warning
-
-**Community Impact**: A violation through a single incident or series
-of actions.
-
-**Consequence**: A warning with consequences for continued behavior. No
-interaction with the people involved, including unsolicited interaction with
-those enforcing the Code of Conduct, for a specified period of time. This
-includes avoiding interactions in community spaces as well as external channels
-like social media. Violating these terms may lead to a temporary or
-permanent ban.
-
-### 3. Temporary Ban
-
-**Community Impact**: A serious violation of community standards, including
-sustained inappropriate behavior.
-
-**Consequence**: A temporary ban from any sort of interaction or public
-communication with the community for a specified period of time. No public or
-private interaction with the people involved, including unsolicited interaction
-with those enforcing the Code of Conduct, is allowed during this period.
-Violating these terms may lead to a permanent ban.
-
-### 4. Permanent Ban
-
-**Community Impact**: Demonstrating a pattern of violation of community
-standards, including sustained inappropriate behavior, harassment of an
-individual, or aggression toward or disparagement of classes of individuals.
-
-**Consequence**: A permanent ban from any sort of public interaction within
-the community.
-
-## Attribution
-
-This Code of Conduct is adapted from the [Contributor Covenant][homepage],
-version 2.0, available at
-https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
-
-Community Impact Guidelines were inspired by [Mozilla's code of conduct
-enforcement ladder](https://github.com/mozilla/diversity).
-
-[homepage]: https://www.contributor-covenant.org
-
-For answers to common questions about this code of conduct, see the FAQ at
-https://www.contributor-covenant.org/faq. Translations are available at
-https://www.contributor-covenant.org/translations.

CONTRIBUTING.md

@@ -6,24 +6,13 @@ So you want to help? That's great!
 
 Here are a few things to know to get you started on the right path.
 
-Below link will help you making a copy of the repository in your local system.
-
-https://docs.github.com/en/get-started/quickstart/fork-a-repo
-
-## Requirements
-
-- [volta](https://volta.sh/) to manage node versions.
-- [Node.js](https://nodejs.org/en/). `volta install node`
-- [pnpm](https://pnpm.io/) package manager. `volta install pnpm`
-
 ## Development Installation
 
 ```bash
 git clone git@github.com:mermaid-js/mermaid.git
 cd mermaid
-# npx is required for first install as volta support for pnpm is not added yet.
-npx pnpm install
-pnpm test
+yarn
+yarn test
 ```
 
 ## Committing code
@@ -31,8 +20,8 @@ pnpm test
 We make all changes via pull requests. As we have many pull requests from developers new to mermaid, the current approach is to have _knsv, Knut Sveidqvist_ as a main reviewer of changes and merging pull requests. More precisely like this:
 
 - 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 `src/docs` folder is also allowed via direct commits)
+- Smaller low-risk changes like dependencies, documentation etc can be merged by active collaborators
+- documentation (updates to the 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.
 
@@ -48,28 +37,12 @@ Another:
 
 Less strict here, it is OK to commit directly in the `develop` branch if you are a collaborator.
 
-The documentation is written in **Markdown**. For more information about Markdown [see the GitHub Markdown help page](https://help.github.com/en/github/writing-on-github/basic-writing-and-formatting-syntax).
+The documentation is located in the `docs` directory and published using GitHub Pages.
+The documentation site is powered by [Docsify](https://docsify.js.org), a simple documentation site generator.
 
-### Documentation source files are in [`/packages/mermaid/src/docs`](packages/mermaid/src/docs)
+The documentation is written in Markdown, for more information about Markdown [see the GitHub Markdown help page](https://help.github.com/en/github/writing-on-github/basic-writing-and-formatting-syntax).
 
-The source files for the project documentation are located in the [`/packages/mermaid/src/docs`](packages/mermaid/src/docs) directory. This is where you should make changes.
-The files under `/packages/mermaid/src/docs` are processed to generate the published documentation, and the resulting files are put into the `/docs` directory.
-
-```mermaid
-flowchart LR
-  classDef default fill:#fff,color:black,stroke:black
-
-  source["files in /packages/mermaid/src/docs\n(changes should be done here)"] -- automatic processing\nto generate the final documentation--> published["files in /docs\ndisplayed on the official documentation site"]
-
-```
-
-**_DO NOT CHANGE FILES IN `/docs`_**
-
-### The official documentation site
-
-**[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, you need to install `docsify-cli`:
+If you want to preview the documentation site on your machine, you need to install `docsify-cli`:
 
 ```sh
 $ npm i docsify-cli -g
@@ -114,7 +87,7 @@ This is important so that, if someone else does a change to the grammar that doe
 
 This tests the rendering and visual appearance of the diagram. This ensures that the rendering of that feature in the e2e will be reviewed in the release process going forward. Less chance that it breaks!
 
-To start working with the e2e tests, run `pnpm run dev` to start the dev server, after that start cypress by running `pnpm exec cypress open` in the mermaid folder.
+To start working with the e2e tests, run `yarn dev` to start the dev server, after that start cypress by running `cypress open` in the mermaid folder. (Make sure you have path to cypress in order, the binary is located in node_modules/.bin).
 
 The rendering tests are very straightforward to create. There is a function imgSnapshotTest. This function takes a diagram in text form, the mermaid options and renders that diagram in cypress.
 
@@ -148,13 +121,9 @@ it('should render forks and joins', () => {
 
 Finally, if it is not in the documentation, no one will know about it and then **no one will use it**. Wouldn't that be sad? With all the effort that was put into the feature?
 
-The source files for documentation are in `/packages/mermaid/src/docs` and are written in markdown. Just pick the right section and start typing. See the [Committing Documentation](#committing-documentation) section for more about how the documentation is generated.
+The docs are located in the docs folder and are ofc written in markdown. Just pick the right section and start typing. If you want to add to the structure as in adding a new section and new file you do that via the \_navbar.md.
 
-#### 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 `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/
+The changes in master is reflected in https://mermaid-js.github.io/mermaid/ once released the updates are committed to https://mermaid-js.github.io/#/
 
 ## Last words
 

README.md

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

README.zh-CN.md

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

V10-BreakingChanges.md

@@ -1,5 +0,0 @@
-# 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__/MERMAID.js

@@ -0,0 +1,3 @@
+export const curveBasis = 'basis';
+export const curveLinear = 'linear';
+export const curveCardinal = 'cardinal';

__mocks__/d3.js

@@ -1,7 +1,4 @@
-// @ts-nocheck TODO: Fix TS
-import { vi } from 'vitest';
-
-const NewD3 = function () {
+let NewD3 = function () {
   /**
    *
    */
@@ -59,9 +56,9 @@ export const MockD3 = (name, parent) => {
     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);
+  elem.lower = jest.fn(() => elem);
+  elem.attr = jest.fn(() => elem);
+  elem.text = jest.fn(() => elem);
+  elem.style = jest.fn(() => elem);
   return elem;
 };

__mocks__/dagre-d3.ts

@@ -1 +0,0 @@
-// DO NOT delete this file. It is used by vitest to mock the dagre-d3 module.

__mocks__/entity-decode/browser.ts

@@ -1,3 +0,0 @@
-module.exports = function (txt: string) {
-  return txt;
-};

applitools.cnfig.js

@@ -0,0 +1,16 @@
+module.exports = {
+  testConcurrency: 1,
+  // browser: [
+  //   // Add browsers with different viewports
+  //   { width: 800, height: 600, name: 'chrome' },
+  //   { width: 700, height: 500, name: 'firefox' },
+  //   { width: 1600, height: 1200, name: 'ie11' },
+  //   { width: 1024, height: 768, name: 'edgechromium' },
+  //   { width: 800, height: 600, name: 'safari' },
+  //   // Add mobile emulation devices in Portrait mode
+  //   { deviceName: 'iPhone X', screenOrientation: 'portrait' },
+  //   { deviceName: 'Pixel 2', screenOrientation: 'portrait' },
+  // ],
+  // // set batch name to the configuration
+  // batchName: 'Ultrafast Batch',
+};

applitools.config.js

@@ -1,19 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const { defineConfig } = require('cypress');
-
-module.exports = defineConfig({
-  testConcurrency: 1,
-  browser: [
-    // Add browsers with different viewports
-    //   { width: 800, height: 600, name: 'chrome' },
-    //   { width: 700, height: 500, name: 'firefox' },
-    //   { width: 1600, height: 1200, name: 'ie11' },
-    //   { width: 1024, height: 768, name: 'edgechromium' },
-    //   { width: 800, height: 600, name: 'safari' },
-    //   // Add mobile emulation devices in Portrait mode
-    //   { deviceName: 'iPhone X', screenOrientation: 'portrait' },
-    //   { deviceName: 'Pixel 2', screenOrientation: 'portrait' },
-  ],
-  // set batch name to the configuration
-  // batchName: `Mermaid ${process.env.APPLI_BRANCH ?? "'no APPLI_BRANCH set'"}`,
-});

babel.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: 'defaults, ie >= 11, current node',
+      },
+    ],
+  ],
+};

cSpell.json

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

cypress.config.js

@@ -1,22 +1,21 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-
 const { defineConfig } = require('cypress');
 const { addMatchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin');
+require('@applitools/eyes-cypress')(module);
 
 module.exports = defineConfig({
-  projectId: 'n2sma2',
   e2e: {
-    specPattern: 'cypress/integration/**/*.{js,jsx,ts,tsx}',
+    specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
     setupNodeEvents(on, config) {
       addMatchImageSnapshotPlugin(on, config);
       // copy any needed variables from process.env to config.env
       config.env.useAppli = process.env.USE_APPLI ? true : false;
+      config.env.codeBranch = process.env.APPLI_BRANCH;
 
       // do not forget to return the changed config object!
       return config;
     },
+    supportFile: 'cypress/support/index.js',
   },
   video: false,
 });
-
-require('@applitools/eyes-cypress')(module);

cypress/helpers/util.js

@@ -1,8 +1,4 @@
-const utf8ToB64 = (str) => {
-  return window.btoa(unescape(encodeURIComponent(str)));
-};
-
-const batchId = 'mermid-batch' + new Date().getTime();
+import { Base64 } from 'js-base64';
 
 export const mermaidUrl = (graphStr, options, api) => {
   const obj = {
@@ -10,7 +6,7 @@ export const mermaidUrl = (graphStr, options, api) => {
     mermaid: options,
   };
   const objStr = JSON.stringify(obj);
-  let url = 'http://localhost:9000/e2e.html?graph=' + utf8ToB64(objStr);
+  let url = 'http://localhost:9000/e2e.html?graph=' + Base64.encodeURI(objStr);
   if (api) {
     url = 'http://localhost:9000/xss.html?graph=' + graphStr;
   }
@@ -48,16 +44,15 @@ export const imgSnapshotTest = (graphStr, _options, api = false, validation) =>
   }
   const useAppli = Cypress.env('useAppli');
   //const useAppli = false;
+  const branch = Cypress.env('codeBranch');
   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',
+      appName: 'Mermaid-' + branch,
       testName: name,
-      batchName: Cypress.spec.name,
-      batchId: batchId + Cypress.spec.name,
+      batchName: branch,
     });
   }
 
@@ -69,9 +64,7 @@ export const imgSnapshotTest = (graphStr, _options, api = false, validation) =>
   // 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);
@@ -103,16 +96,15 @@ export const urlSnapshotTest = (url, _options, api = false, validation) => {
     options.fontSize = '16px';
   }
   const useAppli = Cypress.env('useAppli');
+  const branch = Cypress.env('codeBranch');
   cy.log('Hello ' + useAppli ? 'Appli' : 'image-snapshot');
   const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
 
   if (useAppli) {
-    cy.log('Opening eyes 2' + Cypress.spec.name);
     cy.eyesOpen({
-      appName: 'Mermaid',
+      appName: 'Mermaid-' + branch,
       testName: name,
-      batchName: Cypress.spec.name,
-      batchId: batchId + Cypress.spec.name,
+      batchName: branch,
     });
   }
 
@@ -122,9 +114,7 @@ export const urlSnapshotTest = (url, _options, api = false, validation) => {
   // Default name to test title
 
   if (useAppli) {
-    cy.log('Check eyes 2' + Cypress.spec.name);
     cy.eyesCheckWindow('Click!');
-    cy.log('Closing eyes 2' + Cypress.spec.name);
     cy.eyesClose();
   } else {
     cy.matchImageSnapshot(name);

cypress/integration/other/configuration.spec.js

@@ -15,13 +15,11 @@ describe('Configuration', () => {
 
       // Check the marker-end property to make sure it is properly set to
       // start with #
-      cy.get('.edgePaths').within(() => {
-        cy.get('path')
-          .first()
-          .should('have.attr', 'marker-end')
-          .should('exist')
-          .and('include', 'url(#');
-      });
+      cy.get('.edgePath path')
+        .first()
+        .should('have.attr', 'marker-end')
+        .should('exist')
+        .and('include', 'url(#');
     });
     it('should handle default value false of arrowMarkerAbsolute', () => {
       renderGraph(
@@ -37,13 +35,11 @@ describe('Configuration', () => {
 
       // Check the marker-end property to make sure it is properly set to
       // start with #
-      cy.get('.edgePaths').within(() => {
-        cy.get('path')
-          .first()
-          .should('have.attr', 'marker-end')
-          .should('exist')
-          .and('include', 'url(#');
-      });
+      cy.get('.edgePath path')
+        .first()
+        .should('have.attr', 'marker-end')
+        .should('exist')
+        .and('include', 'url(#');
     });
     it('should handle arrowMarkerAbsolute explicitly set to false', () => {
       renderGraph(
@@ -61,13 +57,11 @@ describe('Configuration', () => {
 
       // Check the marker-end property to make sure it is properly set to
       // start with #
-      cy.get('.edgePaths').within(() => {
-        cy.get('path')
-          .first()
-          .should('have.attr', 'marker-end')
-          .should('exist')
-          .and('include', 'url(#');
-      });
+      cy.get('.edgePath path')
+        .first()
+        .should('have.attr', 'marker-end')
+        .should('exist')
+        .and('include', 'url(#');
     });
     it('should handle arrowMarkerAbsolute explicitly set to "false" as false', () => {
       renderGraph(
@@ -85,17 +79,15 @@ describe('Configuration', () => {
 
       // Check the marker-end property to make sure it is properly set to
       // start with #
-      cy.get('.edgePaths').within(() => {
-        cy.get('path')
-          .first()
-          .should('have.attr', 'marker-end')
-          .should('exist')
-          .and('include', 'url(#');
-      });
+      cy.get('.edgePath path')
+        .first()
+        .should('have.attr', 'marker-end')
+        .should('exist')
+        .and('include', 'url(#');
     });
     it('should handle arrowMarkerAbsolute set to true', () => {
       renderGraph(
-        `flowchart TD
+        `graph TD
         A[Christmas] -->|Get money| B(Go shopping)
         B --> C{Let me think}
         C -->|One| D[Laptop]
@@ -107,13 +99,11 @@ describe('Configuration', () => {
         }
       );
 
-      cy.get('.edgePaths').within(() => {
-        cy.get('path')
-          .first()
-          .should('have.attr', 'marker-end')
-          .should('exist')
-          .and('include', 'url(http://localhost');
-      });
+      cy.get('.edgePath path')
+        .first()
+        .should('have.attr', 'marker-end')
+        .should('exist')
+        .and('include', 'url(http://localhost');
     });
     it('should not taint the initial configuration when using multiple directives', () => {
       const url = 'http://localhost:9000/regression/issue-1874.html';

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

@@ -1,13 +0,0 @@
-describe('mermaid', () => {
-  describe('registerDiagram', () => {
-    it('should work on @mermaid-js/mermaid-mindmap and mermaid-example-diagram', () => {
-      const url = 'http://localhost:9000/external-diagrams-mindmap.html';
-      cy.visit(url);
-
-      cy.get('svg', {
-        // may be a bit slower than normal, since vite might need to re-compile mermaid/mermaid-mindmap/mermaid-example-diagram
-        timeout: 10000,
-      }).matchImageSnapshot();
-    });
-  });
-});

cypress/integration/other/interaction.spec.js

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

cypress/integration/other/xss.spec.js

@@ -15,7 +15,7 @@ describe('XSS', () => {
 
   it('should not allow tags in the css', () => {
     const str =
-      'eyJjb2RlIjoiJSV7aW5pdDogeyAnZm9udEZhbWlseSc6ICdcXFwiPjwvc3R5bGU+PGltZyBzcmM9eCBvbmVycm9yPXhzc0F0dGFjaygpPid9IH0lJVxuZ3JhcGggTFJcbiAgICAgQSAtLT4gQiIsIm1lcm1haWQiOnsidGhlbWUiOiJkZWZhdWx0IiwiZmxvd2NoYXJ0Ijp7Imh0bWxMYWJlbHMiOmZhbHNlfX0sInVwZGF0ZUVkaXRvciI6ZmFsc2V9';
+      'eyJjb2RlIjoiJSV7aW5pdDogeyAnZm9udEZhbWlseSc6ICdcXFwiPjwvc3R5bGU-PGltZyBzcmM9eCBvbmVycm9yPXhzc0F0dGFjaygpPid9IH0lJVxuZ3JhcGggTFJcbiAgICAgQSAtLT4gQiIsIm1lcm1haWQiOnsidGhlbWUiOiJkZWZhdWx0IiwiZmxvd2NoYXJ0Ijp7Imh0bWxMYWJlbHMiOmZhbHNlfX0sInVwZGF0ZUVkaXRvciI6ZmFsc2V9';
 
     const url = mermaidUrl(
       str,
@@ -81,9 +81,6 @@ describe('XSS', () => {
     cy.get('#the-malware').should('not.exist');
   });
   it('should not allow manipulating antiscript to run javascript using onerror in state diagrams with dagre d3', () => {
-    cy.on('uncaught:exception', (_err, _runnable) => {
-      return false; // continue rendering even if there if mermaid throws an error
-    });
     cy.visit('http://localhost:9000/xss9.html');
     cy.wait(1000);
     cy.get('#the-malware').should('not.exist');

cypress/integration/rendering/flowchart.spec.js

@@ -745,13 +745,13 @@ describe('Graph', () => {
     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 ±10%
+      // 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(300 * 0.9, 300 * 1.1);
+      expect(maxWidthValue).to.be.within(300 * 0.95, 300 * 1.05);
     });
   });
   it('39: should render a flowchart when useMaxWidth is false', () => {
@@ -768,9 +768,9 @@ describe('Graph', () => {
     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 ±10%
+      // 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(300 * 0.9, 300 * 1.1);
+      expect(width).to.be.within(300 * 0.95, 300 * 1.05);
       expect(svg).to.not.have.attr('style');
     });
   });

cypress/integration/rendering/gantt.spec.js

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

cypress/integration/rendering/gitGraph.spec.js

@@ -180,48 +180,7 @@ describe('Git Graph diagram', () => {
       {}
     );
   });
-  it('11: should render a gitgraph with cherry pick commit with custom tag', () => {
-    imgSnapshotTest(
-      `
-    gitGraph
-       commit id: "ZERO"
-       branch develop
-       commit id:"A"
-       checkout main
-       commit id:"ONE"
-       checkout develop
-       commit id:"B"
-       checkout main
-       commit id:"TWO"
-       cherry-pick id:"A" tag: "snapshot"
-       commit id:"THREE"
-       checkout develop
-       commit id:"C"
-      `,
-      {}
-    );
-  });
-  it('11: should render a gitgraph with cherry pick commit with no tag', () => {
-    imgSnapshotTest(
-      `
-    gitGraph
-       commit id: "ZERO"
-       branch develop
-       commit id:"A"
-       checkout main
-       commit id:"ONE"
-       checkout develop
-       commit id:"B"
-       checkout main
-       commit id:"TWO"
-       cherry-pick id:"A" tag: ""
-       commit id:"THREE"
-       checkout develop
-       commit id:"C"
-      `,
-      {}
-    );
-  });
+
   it('11: should render a simple gitgraph with two cherry pick commit', () => {
     imgSnapshotTest(
       `
@@ -248,48 +207,48 @@ describe('Git Graph diagram', () => {
       {}
     );
   });
+
   it('12: should render commits for more than 8 branches', () => {
     imgSnapshotTest(
       `
       gitGraph
       checkout main
-      %% Make sure to manually set the ID of all commits, for consistent visual tests
-      commit id: "1-abcdefg"
+      commit
       checkout main
       branch branch1
-      commit id: "2-abcdefg"
+      commit
       checkout main
       merge branch1
       branch branch2
-      commit id: "3-abcdefg"
+      commit
       checkout main
       merge branch2
       branch branch3
-      commit id: "4-abcdefg"
+      commit
       checkout main
       merge branch3
       branch branch4
-      commit id: "5-abcdefg"
+      commit
       checkout main
       merge branch4
       branch branch5
-      commit id: "6-abcdefg"
+      commit
       checkout main
       merge branch5
       branch branch6
-      commit id: "7-abcdefg"
+      commit
       checkout main
       merge branch6
       branch branch7
-      commit id: "8-abcdefg"
+      commit
       checkout main
       merge branch7
       branch branch8
-      commit id: "9-abcdefg"
+      commit
       checkout main
       merge branch8
       branch branch9
-      commit id: "10-abcdefg"
+      commit
       `,
       {}
     );

cypress/integration/rendering/mermaid.spec.js

@@ -1,75 +0,0 @@
-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

@@ -1,115 +0,0 @@
-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/platform/bundle-test.js

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

cypress/platform/click_security_loose.html

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

cypress/platform/click_security_other.html

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

cypress/platform/click_security_sandbox.html

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

cypress/platform/click_security_strict.html

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

cypress/platform/e2e.html

@@ -2,7 +2,7 @@
   <head>
     <meta charset="utf-8" />
     <!-- <meta charset="iso-8859-15"/> -->
-    <script src="./viewer.js" type="module"></script>
+    <script src="/e2e.js"></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"
@@ -37,7 +37,7 @@
     </style>
   </head>
   <body>
-    <!-- <script src="./mermaid.js"></script> -->
+    <script src="./mermaid.js"></script>
     <script>
       // Notice startOnLoad=false
       // This prevents default handling in mermaid from render before the e2e logic is applied

cypress/platform/empty.html

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

cypress/platform/external-diagrams-mindmap.html

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

cypress/platform/gitgraph.html

@@ -30,31 +30,7 @@
   </head>
   <body>
     <h1>info below</h1>
-
     <pre class="mermaid" style="width: 100%; height: 20%">
-  %%{init: { "logLevel": "debug", "theme": "default" , "gitGraph" : {"showBranches":"false","rotateCommitLabel":"true"},"themeVariables": {
-              "gitBranchLabel0": "#ff0000",
-              "gitBranchLabel1": "#00ff00",
-              "gitBranchLabel2": "#0000ff",
-              "git0": "#550055"
-       } } }%%
-    gitGraph
-      commit
-       branch develop
-       commit
-       commit
-       branch release/1.0.0
-       checkout release/1.0.0
-       commit tag:"1.0.0-beta1"
-       checkout develop
-       commit
-       commit
-       commit
-       commit
-       checkout release/1.0.0
-       merge develop tag: "1.0.0-beta2"
-    </pre>
-    <pre class="mermaid2" style="width: 100%; height: 20%">
     %%{init: { "logLevel": "debug", "theme": "default" , "gitGraph" : {"showBranches":"false"},"themeVariables": {
               "gitBranchLabel0": "#ff0000",
               "gitBranchLabel1": "#00ff00",
@@ -155,7 +131,6 @@
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 1,
-        gitGraph: { rotateCommitLabel: false },
         flowchart: { curve: 'linear', htmlLabels: true },
         // gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50, showSequenceNumbers: true },

cypress/platform/knsv.html

@@ -6,10 +6,6 @@
       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"
@@ -43,18 +39,6 @@
   </head>
   <body>
     <pre class="mermaid2" style="width: 50%">
-flowchart LR
-  subgraph one
-    direction LR
-    A[myClass1] --> B[default]
-    subgraph two
-      direction BT
-      C[myClass2] --> D[default]
-    end
-  end
-
-    </pre>
-    <pre class="mermaid2" style="width: 50%">
 flowchart LR
   classDef aPID stroke:#4e4403,fill:#fdde29,color:#4e4403,rx:5px,ry:5px;
   classDef crm stroke:#333333,fill:#DCDCDC,color:#333333,rx:5px,ry:5px;
@@ -87,33 +71,9 @@ flowchart TD
     end
     end
     </pre>
-    <pre class="mermaid2" style="width: 50%">
+    <pre class="mermaid" style="width: 50%">
 flowchart TD
-
-  release-branch[Create Release Branch]:::relClass
-  develop-branch[Update Develop Branch]:::relClass
-  github-release-draft[GitHub Release Draft]:::relClass
-  trigger-pipeline[Trigger Jenkins pipeline]:::fixClass
-  github-release[GitHub Release]:::postClass
-
-  build-ready --> release-branch
-  build-ready --> develop-branch
-  release-branch --> jenkins-release-build
-  jenkins-release-build --> github-release-draft
-  jenkins-release-build --> install-release
-  install-release --> verify-release
-  jenkins-release-build --> announce
-  github-release-draft --> github-release
-  verify-release --> verify-check
-  verify-check -- Yes --> github-release
-  verify-check -- No --> release-fix
-  release-fix --> release-branch-pr
-  verify-check -- No --> delete-artifacts
-  release-branch-pr --> trigger-pipeline
-  delete-artifacts --> trigger-pipeline
-  trigger-pipeline --> jenkins-release-build
-
-
+id
     </pre>
     <pre class="mermaid2" style="width: 50%">
 flowchart LR
@@ -367,7 +327,6 @@ flowchart TD
     }
     </pre>
 
-    <!-- <script src="./mermaid.js"></script> -->
     <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
@@ -385,7 +344,6 @@ flowchart TD
           htmlLabels: false,
           fontFamily: 'courier',
         },
-        lazyLoadedDiagrams: ['./mermaid-mindmap-detector.js'],
       });
       function callback() {
         alert('It worked');
@@ -399,11 +357,6 @@ flowchart TD
 
         document.getElementsByTagName('body')[0].appendChild(div);
       }
-
-      mermaid.parseError = function (err, hash) {
-        console.error('In parse error:');
-        console.error(err);
-      };
     </script>
   </body>
 </html>

cypress/platform/knsv2.html

@@ -6,10 +6,6 @@
       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"
@@ -29,12 +25,6 @@
       }
       .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;
@@ -55,72 +45,32 @@
   </head>
   <body>
     <div>Security check</div>
-    <pre id="diagram" class="mermaid">
-classDiagram
-        direction LR
-        class Student {
-          -idCard : IdCard
-        }
-        class IdCard{
-          -id : int
-          -name : string
-        }
-        class Bike{
-          -id : int
-          -name : string
-        }
-        Student "1" --o "1" IdCard : carries
-        Student "1" --o "1" Bike : rides
-    </pre>
-    <pre id="diagram" class="mermaid2">
-mindmap
-  root
-    child1((Circle))
-        grandchild 1
-        grandchild 2
-    child2(Round rectangle)
-        grandchild 3
-        grandchild 4
-    child3[Square]
-        grandchild 5
-        ::icon(mdi mdi-fire)
-        gc6((grand<br/>child 6))
-        ::icon(mdi mdi-fire)
-          gc7((grand<br/>grand<br/>child 8))
-        </pre>
-    <pre id="diagram" class="mermaid2">
-      example-diagram
-    </pre>
-
-    <!-- <div id="cy"></div> -->
-    <!-- <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> -->
-    <!-- <script src="./mermaid-example-diagram-detector.js"></script>    -->
-    <!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script> -->
+    <div class="flex">
+      <pre id="diagram" class="mermaid">
+sequenceDiagram
+  Nothing:Valid;
+      </pre>
+      <div id="res" class=""></div>
+    </div>
     <script src="./mermaid.js"></script>
-
     <script>
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };
       mermaid.initialize({
-        theme: 'forest',
-        startOnLoad: true,
-        logLevel: 0,
-        // basePath: './packages/',
-        // themeVariables: { darkMode: true },
-        lazyLoadedDiagrams: [
-          './mermaid-mindmap-detector.esm.mjs',
-          './mermaid-example-diagram-detector.esm.mjs',
-        ],
-        // lazyLoadedDiagrams: ['../../mermaid-mindmap/registry.ts'],
+        startOnLoad: false,
+        // themeVariables: {relationLabelColor: 'red'}
       });
       function callback() {
         alert('It worked');
       }
-      mermaid.parseError = function (err, hash) {
-        console.error('In parse error:');
-        console.error(err);
-      };
+
+      // document.querySelector('#diagram').innerHTML = diagram;
+      try {
+        mermaid.initThrowsErrors(undefined, '#diagram');
+      } catch (err) {
+        console.log('Caught error:', err);
+      }
     </script>
   </body>
 </html>

cypress/platform/per.html

@@ -1,82 +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>
-    <div>Security check</div>
-    <pre id="diagram" class="mermaid">
-flowchart LR
-A-->B
-        </pre
-    >
-    <pre id="diagram" class="mermaid2">
-            mindmap
-          root
-            ch1
-            ch2
-        </pre
-    >
-    <script src="./packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script>
-    <script src="./packages/mermaid-mindmap/dist/mermaid-example-diagram-detector.js"></script>
-    <script src="./packages/mermaid/dist/mermaid.js"></script>
-    <script>
-      mermaid.parseError = function (err, hash) {
-        // console.error('Mermaid error: ', err);
-      };
-      mermaid.initialize({
-        startOnLoad: true,
-        logLevel: 0,
-        basePath: './packages/',
-        // themeVariables: {relationLabelColor: 'red'}
-      });
-      function callback() {
-        alert('It worked');
-      }
-      mermaid.parseError = function (err, hash) {
-        console.error('In parse error:');
-        console.error(err);
-      };
-    </script>
-  </body>
-</html>

cypress/platform/render-after-error.html

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

cypress/platform/rerender.html

@@ -17,9 +17,9 @@
       rerender('XMas');
 
       function rerender(text) {
-        const graphText = `graph TD
+        let graphText = `graph TD
         A[${text}] -->|Get money| B(Go shopping)`;
-        const graph = mermaid.mermaidAPI.render('id', graphText);
+        let graph = mermaid.mermaidAPI.render('id', graphText);
         console.log('\x1b[35m%s\x1b[0m', '>> graph', graph);
         document.getElementById('graph').innerHTML = graph;
       }

cypress/platform/sidv.html

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

cypress/platform/viewer.js

@@ -1,21 +1,16 @@
-import mermaid2 from '../../packages/mermaid/src/mermaid';
-import mindmap from '../../packages/mermaid-mindmap/src/detector';
-
-function b64ToUtf8(str) {
-  return decodeURIComponent(escape(window.atob(str)));
-}
+import { Base64 } from 'js-base64';
+import mermaid2 from '../../src/mermaid';
 
 /**
  * ##contentLoaded Callback function that is called when page is loaded. This functions fetches
- * configuration for mermaid rendering and calls init for rendering the mermaid diagrams on the
- * page.
+ * configuration for mermaid rendering and calls init for rendering the mermaid diagrams on the page.
  */
-const contentLoaded = async function () {
+const contentLoaded = function () {
   let pos = document.location.href.indexOf('?graph=');
   if (pos > 0) {
     pos = pos + 7;
     const graphBase64 = document.location.href.substr(pos);
-    const graphObj = JSON.parse(b64ToUtf8(graphBase64));
+    const graphObj = JSON.parse(Base64.decode(graphBase64));
     if (graphObj.mermaid && graphObj.mermaid.theme === 'dark') {
       document.body.style.background = '#3f3f3f';
     }
@@ -37,9 +32,8 @@ const contentLoaded = async function () {
       document.getElementsByTagName('body')[0].appendChild(div);
     }
 
-    await mermaid2.registerExternalDiagrams([mindmap]);
-    mermaid2.initialize(graphObj.mermaid);
-    mermaid2.init();
+    global.mermaid.initialize(graphObj.mermaid);
+    global.mermaid.init();
   }
 };
 
@@ -72,7 +66,7 @@ const contentLoadedApi = function () {
   if (pos > 0) {
     pos = pos + 7;
     const graphBase64 = document.location.href.substr(pos);
-    const graphObj = JSON.parse(b64ToUtf8(graphBase64));
+    const graphObj = JSON.parse(Base64.decode(graphBase64));
     // const graph = 'hello'
     if (Array.isArray(graphObj.code)) {
       const numCodes = graphObj.code.length;

cypress/platform/webpackUsage.html

@@ -12,8 +12,6 @@
   </head>
   <body>
     <div id="graph-to-be"></div>
-    <script type="module" charset="utf-8">
-      import './bundle-test.js';
-    </script>
+    <script src="./bundle-test.js" charset="utf-8"></script>
   </body>
 </html>

cypress/platform/xss.html

@@ -1,6 +1,6 @@
 <html>
   <head>
-    <script src="./viewer.js" type="module"></script>
+    <script src="/e2e.js"></script>
     <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
     <style>
       .malware {

cypress/platform/xss2.html

@@ -56,7 +56,7 @@
       });
       let cnt = 0;
       let a;
-      const handler = setInterval(() => {
+      let handler = setInterval(() => {
         cnt++;
         a = {};
         if (typeof a.polluted !== 'undefined') {

cypress/platform/xss3.html

@@ -44,7 +44,7 @@
       });
       let cnt = 0;
       let a;
-      const handler = setInterval(() => {
+      let handler = setInterval(() => {
         cnt++;
         a = {};
         if (typeof a.polluted !== 'undefined') {

cypress/plugins/index.js

@@ -0,0 +1,33 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+// module.exports = (on, config) => {
+//   // `on` is used to hook into various events Cypress emits
+//   // `config` is the resolved Cypress config
+// }
+
+const { addMatchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin');
+require('@applitools/eyes-cypress')(module);
+
+module.exports = (on, config) => {
+  addMatchImageSnapshotPlugin(on, config);
+  // copy any needed variables from process.env to config.env
+  config.env.useAppli = process.env.USE_APPLI ? true : false;
+  config.env.codeBranch = process.env.APPLI_BRANCH;
+
+  // do not forget to return the changed config object!
+  return config;
+};
+
+require('@applitools/eyes-cypress')(module);

cypress/support/index.js

@@ -17,6 +17,8 @@ import '@applitools/eyes-cypress/commands';
 
 // Import commands.js using ES2015 syntax:
 import './commands';
+// import '@percy/cypress';
+import '@applitools/eyes-cypress/commands';
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

demos/c4context.html

@@ -1,303 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>C4 Mermaid Quick Test Page</title>
-    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
-    <style>
-      div.mermaid {
-        /* font-family: 'trebuchet ms', verdana, arial; */
-        /*font-family: 'Courier New', Courier, monospace !important;*/
-      }
-    </style>
-  </head>
-
-  <body>
-    <h1>C4 context diagram demos</h1>
-    <pre class="mermaid">
-    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.")
-          Person(customerB, "Banking Customer B")
-          Person_Ext(customerC, "Banking Customer C", "desc")
-
-          Person(customerD, "Banking Customer D", "A customer of the bank, <br/> 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") {
-
-            SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
-
-            System_Boundary(b2, "BankBoundary2") {
-              System(SystemA, "Banking System A")
-              System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
-            }
-
-            System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
-            SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
-
-            Boundary(b3, "BankBoundary3", "boundary") {
-              SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
-              SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
-            }
-          }
-        }
-      
-      BiRel(customerA, SystemAA, "Uses")
-      BiRel(SystemAA, SystemE, "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(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
-      UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
-      UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
-      
-      UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
-    </pre>
-    <hr />
-
-    <pre class="mermaid">
-    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")
-        Container_Ext(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device")
-        Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA")
-        ContainerDb(database, "Database", "SQL Database", "Stores user registration information, hashed auth credentials, access logs, etc.")
-        ContainerDb_Ext(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API")
-
-    }
-
-    System_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
-
-    Rel(customer, web_app, "Uses", "HTTPS")
-    UpdateRelStyle(customer, web_app, $offsetY="60", $offsetX="90")     
-    Rel(customer, spa, "Uses", "HTTPS")
-    UpdateRelStyle(customer, spa, $offsetY="-40")    
-    Rel(customer, mobile_app, "Uses")
-    UpdateRelStyle(customer, mobile_app, $offsetY="-30") 
-
-    Rel(web_app, spa, "Delivers")
-    UpdateRelStyle(web_app, spa, $offsetX="130") 
-    Rel(spa, backend_api, "Uses", "async, JSON/HTTPS")
-    Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS")
-    Rel_Back(database, backend_api, "Reads from and writes to", "sync, JDBC")
-
-    Rel(email_system, customer, "Sends e-mails to")
-    UpdateRelStyle(email_system, customer, $offsetX="-45")    
-    Rel(backend_api, email_system, "Sends e-mails using", "sync, SMTP")
-    UpdateRelStyle(backend_api, email_system, $offsetY="-60")    
-    Rel(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS")
-    UpdateRelStyle(backend_api, banking_system, $offsetY="-50", $offsetX="-140")
-    </pre>
-    <hr />
-
-    <pre class="mermaid">
-    C4Component
-    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(ma, "Mobile App", "Xamarin", "Provides a limited subset ot the internet banking functionality to customers via their mobile mobile device.")
-    ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
-    System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
-
-    Container_Boundary(api, "API Application") {
-        Component(sign, "Sign In Controller", "MVC Rest Controller", "Allows users to sign in to the internet banking system")
-        Component(accounts, "Accounts Summary Controller", "MVC Rest Controller", "Provides customers with a summary of their bank accounts")
-        Component(security, "Security Component", "Spring Bean", "Provides functionality related to singing in, changing passwords, etc.")
-        Component(mbsfacade, "Mainframe Banking System Facade", "Spring Bean", "A facade onto the mainframe banking system.")
-
-        Rel(sign, security, "Uses")
-        Rel(accounts, mbsfacade, "Uses")
-        Rel(security, db, "Read & write to", "JDBC")
-        Rel(mbsfacade, mbs, "Uses", "XML/HTTPS")
-    }
-
-    Rel_Back(spa, sign, "Uses", "JSON/HTTPS")
-    Rel(spa, accounts, "Uses", "JSON/HTTPS")
-
-    Rel(ma, sign, "Uses", "JSON/HTTPS")
-    Rel(ma, accounts, "Uses", "JSON/HTTPS")
-
-    UpdateRelStyle(spa, sign, $offsetY="-40") 
-    UpdateRelStyle(spa, accounts, $offsetX="40", $offsetY="40")
-
-    UpdateRelStyle(ma, sign, $offsetX="-90", $offsetY="40")
-    UpdateRelStyle(ma, accounts, $offsetY="-40")
-
-        UpdateRelStyle(sign, security, $offsetX="-160", $offsetY="10")
-        UpdateRelStyle(accounts, mbsfacade, $offsetX="140", $offsetY="10")
-        UpdateRelStyle(security, db, $offsetY="-40")
-        UpdateRelStyle(mbsfacade, mbs, $offsetY="-40")
-    </pre>
-    <hr />
-
-    <pre class="mermaid">
-    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")
-    </pre>
-    <hr />
-
-    <pre class="mermaid">
-    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(comp, "Customer's computer", "Mircosoft Windows or Apple macOS"){
-        Deployment_Node(browser, "Web Browser", "Google Chrome, Mozilla Firefox,<br/> Apple Safari or Microsoft Edge"){
-            Container(spa, "Single Page Application", "JavaScript and Angular", "Provides all of the Internet Banking functionality to customers via their web browser.")
-        }
-    }
-
-    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.")
-            }
-        }
-        Deployment_Node(bb2, "bigbank-web*** x4", "Ubuntu 16.04 LTS"){
-            Deployment_Node(apache2, "Apache Tomcat", "Apache Tomcat 8.x"){
-                Container(web, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet Banking single page application.")
-            }
-        }
-        Deployment_Node(bigbankdb01, "bigbank-db01", "Ubuntu 16.04 LTS"){
-            Deployment_Node(oracle, "Oracle - Primary", "Oracle 12c"){
-                ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
-            }
-        }
-        Deployment_Node(bigbankdb02, "bigbank-db02", "Ubuntu 16.04 LTS") {
-            Deployment_Node(oracle2, "Oracle - Secondary", "Oracle 12c") {
-                ContainerDb(db2, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
-            }
-        }
-    }
-
-    Rel(mobile, api, "Makes API calls to", "json/HTTPS")
-    Rel(spa, api, "Makes API calls to", "json/HTTPS")
-    Rel_U(web, spa, "Delivers to the customer's web browser")
-    Rel(api, db, "Reads from and writes to", "JDBC")
-    Rel(api, db2, "Reads from and writes to", "JDBC")
-    Rel_R(db, db2, "Replicates data to")
-
-    UpdateRelStyle(spa, api, $offsetY="-40")
-    UpdateRelStyle(web, spa, $offsetY="-40")
-    UpdateRelStyle(api, db, $offsetY="-20", $offsetX="5")
-    UpdateRelStyle(api, db2, $offsetX="-40", $offsetY="-20")
-    UpdateRelStyle(db, db2, $offsetY="-10")
-     </pre>
-    <hr />
-
-    <script src="./mermaid.js"></script>
-    <script>
-      const ALLOWED_TAGS = [
-        'a',
-        'b',
-        'blockquote',
-        'br',
-        'dd',
-        'div',
-        'dl',
-        'dt',
-        'em',
-        'foreignObject',
-        'h1',
-        'h2',
-        'h3',
-        'h4',
-        'h5',
-        'h6',
-        'h7',
-        'h8',
-        'hr',
-        'i',
-        'li',
-        'ul',
-        'ol',
-        'p',
-        'pre',
-        'span',
-        'strike',
-        'strong',
-        'table',
-        'tbody',
-        'td',
-        'tfoot',
-        'th',
-        'thead',
-        'tr',
-      ];
-      mermaid.initialize({
-        theme: 'forest',
-        // themeCSS: '.node rect { fill: red; }',
-        logLevel: 3,
-        securityLevel: 'loose',
-        flowchart: { curve: 'basis' },
-        gantt: { axisFormat: '%m/%d/%Y' },
-        sequence: { actorMargin: 50 },
-        dompurifyConfig: {
-          USE_PROFILES: {
-            svg: true,
-          },
-          ADD_TAGS: ALLOWED_TAGS,
-          ADD_ATTR: ['transform-origin'],
-        },
-        // sequenceDiagram: { actorMargin: 300 } // deprecated
-      });
-    </script>
-    <script>
-      function testClick(nodeId) {
-        console.log('clicked', nodeId);
-        let originalBgColor = document.querySelector('body').style.backgroundColor;
-        document.querySelector('body').style.backgroundColor = 'yellow';
-        setTimeout(function () {
-          document.querySelector('body').style.backgroundColor = originalBgColor;
-        }, 100);
-      }
-    </script>
-    <script>
-      const testLineEndings = (test, input) => {
-        try {
-          mermaid.render(test, input, () => {
-            //no-op
-          });
-        } catch (err) {
-          console.error('Error in %s:\n\n%s', test, err);
-        }
-      };
-
-      testLineEndings('CR', 'graph LR\rsubgraph CR\rA --> B\rend');
-      testLineEndings('LF', 'graph LR\nsubgraph LF\nA --> B\nend');
-      testLineEndings('CRLF', 'graph LR\r\nsubgraph CRLF\r\nA --> B\r\nend');
-    </script>
-  </body>
-</html>

demos/classchart.html

@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>Class diagrams Mermaid Quick Test Page</title>
+    <title>Mermaid Quick Test Page</title>
     <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
     <style>
       div.mermaid {
@@ -14,134 +14,36 @@
   </head>
 
   <body>
-    <h1>Class diagram demos</h1>
-
     <pre class="mermaid">
 		classDiagram
-      accTitle: Demo Class Diagram
-      accDescr: This class diagram show the abstract Animal class, and 3 classes that inherit from it: Duck, Fish, and Zebra.
-
-      Animal <|-- Duck
-      Animal <|-- Fish
-      Animal <|-- Zebra
-      Animal : +int age
-      Animal : +String gender
-      Animal: +isMammal()
-      Animal: +mate()
-
-      class Duck{
-        +String beakColor
-        +swim()
-        +quack()
-      }
-      class Fish{
-        -int sizeInFeet
-        -canEat()
-      }
-      class Zebra{
-        +bool is_wild
-        +run()
-      }
-
+		title Animal Diagram
+		accDescription The animal class diagram
+		Animal <|-- Duck
+		Animal <|-- Fish
+		Animal <|-- Zebra
+		Animal : +int age
+		Animal : +String gender
+		Animal: +isMammal()
+		Animal: +mate()
+		class Duck{
+			+String beakColor
+			+swim()
+			+quack()
+		}
+		class Fish{
+			-int sizeInFeet
+			-canEat()
+		}
+		class Zebra{
+			+bool is_wild
+			+run()
+		}
     </pre>
-    <hr />
-
-    <pre class="mermaid">
-    classDiagram
-    Class01 <|-- AveryLongClass : Cool
-
-    &lt;&lt;interface&gt;&gt; Class01
-    Class03 "0" *-- "0..n" Class04
-    Class05 "1" o-- "many" Class06
-    Class07 .. Class08
-    Class09 "many" --> "1" C2 : Where am i?
-    Class09 "0" --* "1..n" C3
-    Class09 --|> Class07
-    Class07 : equals()
-    Class07 : Object[] elementData
-    Class01 : #size()
-    Class01 : -int chimp
-    Class01 : +int gorilla
-    Class08 <--> C2: Cool label
-      class Class10 {
-      &lt;&lt;service&gt;&gt;
-      int id
-      size()
-      }
-    </pre>
-    <hr />
-
-    <pre class="mermaid">
-    classDiagram
-    class Class01~T~
-    Class01 : #size()
-    Class01 : -int chimp
-    Class01 : +int gorilla
-    class Class10~T~ {
-    &lt;&lt;service&gt;&gt;
-    int id
-    size()
-    }
-    </pre>
-    <hr />
-
-    <pre class="mermaid">
-    classDiagram
-    Class01~T~ <|-- AveryLongClass : Cool
-    &lt;&lt;interface&gt;&gt; Class01
-    Class03~T~ "0" *-- "0..n" Class04
-    Class05 "1" o-- "many" Class06
-    Class07~T~ .. Class08
-    Class09 "many" --> "1" C2 : Where am i?
-      Class09 "0" --* "1..n" C3
-      Class09 --|> Class07
-      Class07 : equals()
-      Class07 : Object[] elementData
-      Class01 : #size()
-      Class01 : -int chimp
-      Class01 : +int gorilla
-      Class08 <--> C2: Cool label
-        class Class10 {
-        &lt;&lt;service&gt;&gt;
-        int id
-        size()
-        }
-    </pre>
-    <hr />
-
-    <pre class="mermaid">
-    classDiagram
-    Interface1 ()-- Interface1Impl
-    </pre>
-    <hr />
-
-    <pre class="mermaid">
-    classDiagram
-    direction LR
-    Animal ()-- Dog
-    Dog : bark()
-    Dog : species()
-    </pre>
-    <hr />
-
-    <pre class="mermaid">
-    classDiagram
-    direction RL
-    Fruit ()-- Apple
-    Apple : color()
-    Apple : -int leafCount()
-    Fruit ()-- Pineapple
-    Pineapple : color()
-    Pineapple : -int leafCount()
-    Pineapple : -int spikeCount()
-    </pre>
-
-    <hr />
 
     <script src="./mermaid.js"></script>
     <script>
       mermaid.initialize({
-        theme: 'default',
+        theme: 'forest',
         // themeCSS: '.node rect { fill: red; }',
         logLevel: 3,
         securityLevel: 'loose',

demos/dataflowchart.html

@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>Data Flow Mermaid Quick Test Page</title>
+    <title>Mermaid Quick Test Page</title>
     <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
     <style>
       div.mermaid {
@@ -13,16 +13,12 @@
     </style>
   </head>
   <body>
-    <h1>Data Flow Diagram demos</h1>
+    <h2>Data Flow Diagram Example</h2>
     <pre class="mermaid">
     flowchart LR
-      accTitle: A simple linear flowchart.
-      accDescr: A Database has input to a circle System has output to a square Customer.
       DataStore[|borders:tb|Database] -->|input| Process((System)) -->|output| Entity[Customer];
     </pre>
 
-    <hr />
-
     <h2>Borders Example</h2>
     <pre class="mermaid">
     flowchart TD

demos/er.html

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

demos/flowchart.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -15,12 +15,10 @@
   <body>
     <h1>Comparison "graph vs. flowchart"</h1>
     <h2>Sample 1</h2>
+
     <h3>graph</h3>
     <pre class="mermaid">
     graph LR
-      accTitle: This is a complicated flow
-      accDescr: This is the descriptoin for the complicated flow.
-
     sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
 
     提交申请
@@ -116,7 +114,6 @@
     sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
     sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
     </pre>
-    <hr />
 
     <h3>flowchart</h3>
     <pre class="mermaid">
@@ -216,36 +213,37 @@
     sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
     sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
     </pre>
-    <hr />
 
+    <hr />
     <h2>Sample 2</h2>
+
     <h3>graph</h3>
     <pre class="mermaid">
     graph TD
-      accTitle: What to buy
-      accDescr: Options of what to buy with Christmas money
-      A[Christmas] -->|Get money| B(Go shopping)
-      B --> C{Let me thinksssssx<br/>sssssssssssssssssssuuu<br />tttsssssssssssssssssssssss}
-      C -->|One| D[Laptop]
-      C -->|Two| E[iPhone]
-      C -->|Three| F[Car]
+    title What to buy
+    accDescription Options of what to buy with Christmas money
+    A[Christmas] -->|Get money| B(Go shopping)
+    B --> C{Let me thinksssssx<br/>sssssssssssssssssssuuu<br />tttsssssssssssssssssssssss}
+    C -->|One| D[Laptop]
+    C -->|Two| E[iPhone]
+    C -->|Three| F[Car]
   </pre>
-    <hr />
 
     <h3>flowchart</h3>
     <pre class="mermaid">
     flowchart TD
-      accTitle: What to buy
-      accDescr: Options of what to buy with Christmas money
-      A[Christmas] -->|Get money| B(Go shopping)
-      B --> C{Let me thinksssssx<br/>sssssssssssssssssssuuu<br />tttsssssssssssssssssssssss}
-      C -->|One| D[Laptop]
-      C -->|Two| E[iPhone]
-      C -->|Three| F[Car]
+    title What to buy
+    accDescription Options of what to buy with Christmas money
+    A[Christmas] -->|Get money| B(Go shopping)
+    B --> C{Let me thinksssssx<br/>sssssssssssssssssssuuu<br />tttsssssssssssssssssssssss}
+    C -->|One| D[Laptop]
+    C -->|Two| E[iPhone]
+    C -->|Three| F[Car]
   </pre>
-    <hr />
 
+    <hr />
     <h2>Sample 3</h2>
+
     <h3>graph</h3>
     <pre class="mermaid">
     graph TD
@@ -256,7 +254,6 @@
     C -->|Two| E[\iPhone\]
     C -->|Three| F[Car]
   </pre>
-    <hr />
 
     <h3>flowchart</h3>
     <pre class="mermaid">
@@ -268,9 +265,10 @@
     C -->|Two| E[\iPhone\]
     C -->|Three| F[Car]
   </pre>
-    <hr />
 
+    <hr />
     <h2>Sample 4</h2>
+
     <h3>graph</h3>
     <pre class="mermaid">
     graph LR
@@ -295,7 +293,6 @@
     35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
     36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
     </pre>
-    <hr />
 
     <h3>flowchart</h3>
     <pre class="mermaid">
@@ -321,9 +318,10 @@
     35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
     36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
     </pre>
-    <hr />
 
+    <hr />
     <h2>Sample 5</h2>
+
     <h3>graph</h3>
     <pre class="mermaid">
     graph TD
@@ -390,7 +388,6 @@
     9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
     9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
     </pre>
-    <hr />
 
     <h3>flowchart</h3>
     <pre class="mermaid">
@@ -458,9 +455,10 @@
     9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
     9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
     </pre>
-    <hr />
 
+    <hr />
     <h2>Sample 6</h2>
+
     <h3>graph</h3>
     <pre class="mermaid">
     graph TB
@@ -468,7 +466,6 @@
       a1-->a2
     end
     </pre>
-    <hr />
 
     <h3>flowchart</h3>
     <pre class="mermaid">
@@ -477,9 +474,10 @@
       a1-->a2
     end
     </pre>
-    <hr />
 
+    <hr />
     <h2>Sample 7</h2>
+
     <h3>graph</h3>
     <pre class="mermaid">
     graph TB
@@ -510,7 +508,6 @@
     style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
     style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
     </pre>
-    <hr />
 
     <h3>flowchart</h3>
     <pre class="mermaid">
@@ -542,9 +539,10 @@
     style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
     style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
     </pre>
-    <hr />
 
+    <hr />
     <h2>Sample 8</h2>
+
     <h3>graph</h3>
     <pre class="mermaid">
     graph LR
@@ -561,7 +559,6 @@
     3000"
     style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
     </pre>
-    <hr />
 
     <h3>flowchart</h3>
     <pre class="mermaid">
@@ -579,9 +576,10 @@
     3000"
     style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
     </pre>
-    <hr />
 
+    <hr />
     <h2>Sample 9</h2>
+
     <h3>graph</h3>
     <pre class="mermaid">
     graph TD
@@ -596,7 +594,6 @@
     class A someclass;
     class C someclass;
   </pre>
-    <hr />
 
     <h3>flowchart</h3>
     <pre class="mermaid">
@@ -612,9 +609,10 @@
     class A someclass;
     class C someclass;
   </pre>
-    <hr />
 
+    <hr />
     <h2>Sample 10</h2>
+
     <h3>graph</h3>
     <pre class="mermaid">
     graph TD
@@ -630,7 +628,6 @@
     class A someclass;
     class C someclass;
   </pre>
-    <hr />
 
     <h3>flowchart</h3>
     <pre class="mermaid">
@@ -647,9 +644,10 @@
     class A someclass;
     class C someclass;
   </pre>
-    <hr />
 
+    <hr />
     <h2>Sample 11</h2>
+
     <h3>graph</h3>
     <pre class="mermaid">
     graph LR
@@ -665,7 +663,6 @@
     class A someclass;
     class C someclass;
   </pre>
-    <hr />
 
     <h3>flowchart</h3>
     <pre class="mermaid">
@@ -682,9 +679,10 @@
     class A someclass;
     class C someclass;
   </pre>
-    <hr />
 
+    <hr />
     <h2>Sample 12</h2>
+
     <h3>graph</h3>
     <pre class="mermaid">
     graph LR
@@ -704,7 +702,6 @@
     classDef someclass fill:#f96;
     class A someclass;
   </pre>
-    <hr />
 
     <h3>flowchart</h3>
     <pre class="mermaid">
@@ -725,9 +722,10 @@
     classDef someclass fill:#f96;
     class A someclass;
   </pre>
-    <hr />
 
+    <hr />
     <h2>Sample 13</h2>
+
     <h3>graph</h3>
     <pre class="mermaid">
     graph LR
@@ -741,7 +739,6 @@
     linkStyle 1 stroke:DarkGray,stroke-width:2px
     linkStyle 2 stroke:DarkGray,stroke-width:2px
   </pre>
-    <hr />
 
     <h3>flowchart</h3>
     <pre class="mermaid">
@@ -756,9 +753,10 @@
     linkStyle 1 stroke:DarkGray,stroke-width:2px
     linkStyle 2 stroke:DarkGray,stroke-width:2px
   </pre>
-    <hr />
 
+    <hr />
     <h2>Sample 14</h2>
+
     <h3>graph</h3>
     <pre class="mermaid">
     graph LR
@@ -768,7 +766,6 @@
     linkStyle 1 stroke:greenyellow,stroke-width:2px
     style C fill:greenyellow,stroke:green,stroke-width:4px
     </pre>
-    <hr />
 
     <h3>flowchart</h3>
     <pre class="mermaid">
@@ -779,9 +776,10 @@
     linkStyle 1 stroke:greenyellow,stroke-width:2px
     style C fill:greenyellow,stroke:green,stroke-width:4px
     </pre>
-    <hr />
 
+    <hr />
     <h2>Sample 15</h2>
+
     <h3>graph</h3>
     <pre class="mermaid">
     graph TB
@@ -800,7 +798,6 @@
     click E "notes://do-your-thing/id" "other protocol test"
     click F "javascript:alert('test')" "script test"
   </pre>
-    <hr />
 
     <h3>flowchart</h3>
     <pre class="mermaid">
@@ -820,9 +817,10 @@
     click E "notes://do-your-thing/id" "other protocol test"
     click F "javascript:alert('test')" "script test"
   </pre>
-    <hr />
 
+    <hr />
     <h2>Sample 16</h2>
+
     <h3>graph</h3>
     <pre class="mermaid">
     graph LR
@@ -839,7 +837,6 @@
     click B "flowchart.html#link-clicked" "link test"
     click D testClick "click test"
   </pre>
-    <hr />
 
     <h3>flowchart</h3>
     <pre class="mermaid">
@@ -857,9 +854,10 @@
     click B "flowchart.html#link-clicked" "link test"
     click D testClick "click test"
   </pre>
-    <hr />
 
+    <hr />
     <h2>Sample 17</h2>
+
     <h3>graph</h3>
     <pre class="mermaid">
     graph TD
@@ -872,7 +870,6 @@
     class A myClass1
     class D myClass2
     </pre>
-    <hr />
 
     <h3>flowchart</h3>
     <pre class="mermaid">
@@ -886,9 +883,10 @@
     class A myClass1
     class D myClass2
     </pre>
-    <hr />
 
+    <hr />
     <h2>Sample 18</h2>
+
     <h3>graph</h3>
     <pre class="mermaid">
     graph LR
@@ -936,7 +934,6 @@
     style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
     style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
     </pre>
-    <hr />
 
     <h3>flowchart</h3>
     <pre class="mermaid">
@@ -985,9 +982,10 @@
     style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
     style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
     </pre>
-    <hr />
 
+    <hr />
     <h2>Sample 19</h2>
+
     <h3>graph</h3>
     <pre class="mermaid">
     graph TB
@@ -1035,7 +1033,6 @@
     style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
     style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
     </pre>
-    <hr />
 
     <h3>flowchart</h3>
     <pre class="mermaid">
@@ -1087,418 +1084,9 @@
     style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
     style O2 stroke:#0000ff,fill:#ccccff,color:#0000ff
     </pre>
-    <hr />
 
     <hr />
 
-    <pre class="mermaid">
-    graph LR
-    sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
-
-    提交申请
-    熊大
-    "];
-    class sid-B3655226-6C29-4D00-B685-3D5C734DC7E1 node-executed;
-    sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A["
-    负责人审批
-    强子
-    "];
-    class sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A node-executed;
-    sid-E27C0367-E6D6-497F-9736-3CDC21FDE221["
-    DBA审批
-    强子
-    "];
-    class sid-E27C0367-E6D6-497F-9736-3CDC21FDE221 node-executed;
-    sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD["
-    SA审批
-    阿美
-    "];
-    class sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD node-executed;
-    sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7["
-    主管审批
-    光头强
-    "];
-    class sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7 node-executed;
-    sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89["
-    DBA确认
-    强子
-    "];
-    class sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89 node-executed;
-    sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937["
-    SA确认
-    阿美
-    "];
-    class sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937 node-executed;
-    sid-4FC27B48-A6F9-460A-A675-021F5854FE22["
-    结束
-    "];
-    class sid-4FC27B48-A6F9-460A-A675-021F5854FE22 node-executed;
-    sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E["
-    SA执行1
-    强子
-    "];
-    class sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E node-executed;
-    sid-6C2120F3-D940-4958-A067-0903DCE879C4["
-    SA执行2
-    强子
-    "];
-    class sid-6C2120F3-D940-4958-A067-0903DCE879C4 node-executed;
-    sid-9180E2A0-5C4B-435F-B42F-0D152470A338["
-    DBA执行1
-    强子
-    "];
-    class sid-9180E2A0-5C4B-435F-B42F-0D152470A338 node-executed;
-    sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD["
-    DBA执行3
-    强子
-    "];
-    class sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD node-executed;
-    sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756["
-    DBA执行2
-    强子
-    "];
-    class sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756 node-executed;
-    sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93["
-    DBA执行4
-    强子
-    "];
-    class sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93 node-executed;
-    sid-1897B30A-9C5C-4D5B-B80B-76A038785070["
-    负责人确认
-    梁静茹
-    "];
-    class sid-1897B30A-9C5C-4D5B-B80B-76A038785070 node-executed;
-    sid-B3655226-6C29-4D00-B685-3D5C734DC7E1-->sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7;
-    sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A-->sid-1897B30A-9C5C-4D5B-B80B-76A038785070;
-    sid-E27C0367-E6D6-497F-9736-3CDC21FDE221-->sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89;
-    sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD-->sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937;
-    sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E-->sid-6C2120F3-D940-4958-A067-0903DCE879C4;
-    sid-9180E2A0-5C4B-435F-B42F-0D152470A338-->sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756;
-    sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD-->sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93;
-    sid-6C2120F3-D940-4958-A067-0903DCE879C4-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
-    sid-1897B30A-9C5C-4D5B-B80B-76A038785070-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
-    sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E;
-    sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89-->sid-9180E2A0-5C4B-435F-B42F-0D152470A338;
-    sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89-->sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD;
-    sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
-    sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
-    sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD;
-    sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-E27C0367-E6D6-497F-9736-3CDC21FDE221;
-    sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-6C2120F3-D940-4958-A067-0903DCE879C4;
-    sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
-    sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
-    </pre>
-    <hr />
-
-    <pre class="mermaid">
-    graph TD
-    A[Christmas] -->|Get money| B(Go shopping)
-    B --> C{Let me thinksssssx<br />sssssssssssssssssssuuu<br />tttsssssssssssssssssssssss}
-    C -->|One| D[Laptop]
-    C -->|Two| E[iPhone]
-    C -->|Three| F[Car]
-    </pre>
-    <hr />
-
-    <pre class="mermaid">
-    graph TD
-    A[/Christmas\]
-    A -->|Get money| B[\Go shopping/]
-    B --> C{Let me thinksssss<br />ssssssssssssssssssssss<br />sssssssssssssssssssssssssss}
-    C -->|One| D[/Laptop/]
-    C -->|Two| E[\iPhone\]
-    C -->|Three| F[Car]
-    </pre>
-    <hr />
-
-    <pre class="mermaid">
-    graph LR
-    47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget)
-    37(SAM.CommonFA.BudgetSubserviceLineVolume)-->48(SAM.CommonFA.CommonFAFinanceBudget)
-    35(SAM.CommonFA.PopulationFME)-->47(SAM.CommonFA.FMESummary)
-    41(SAM.CommonFA.MetricCost)-->47(SAM.CommonFA.FMESummary)
-    44(SAM.CommonFA.MetricOutliers)-->47(SAM.CommonFA.FMESummary)
-    46(SAM.CommonFA.MetricOpportunity)-->47(SAM.CommonFA.FMESummary)
-    40(SAM.CommonFA.OPVisits)-->47(SAM.CommonFA.FMESummary)
-    38(SAM.CommonFA.CommonFAFinanceRefund)-->47(SAM.CommonFA.FMESummary)
-    43(SAM.CommonFA.CommonFAFinancePicuDays)-->47(SAM.CommonFA.FMESummary)
-    42(SAM.CommonFA.CommonFAFinanceNurseryDays)-->47(SAM.CommonFA.FMESummary)
-    45(SAM.CommonFA.MetricPreOpportunity)-->46(SAM.CommonFA.MetricOpportunity)
-    35(SAM.CommonFA.PopulationFME)-->45(SAM.CommonFA.MetricPreOpportunity)
-    41(SAM.CommonFA.MetricCost)-->45(SAM.CommonFA.MetricPreOpportunity)
-    41(SAM.CommonFA.MetricCost)-->44(SAM.CommonFA.MetricOutliers)
-    39(SAM.CommonFA.ChargeDetails)-->43(SAM.CommonFA.CommonFAFinancePicuDays)
-    39(SAM.CommonFA.ChargeDetails)-->42(SAM.CommonFA.CommonFAFinanceNurseryDays)
-    39(SAM.CommonFA.ChargeDetails)-->41(SAM.CommonFA.MetricCost)
-    39(SAM.CommonFA.ChargeDetails)-->40(SAM.CommonFA.OPVisits)
-    35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
-    36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
-    </pre>
-    <hr />
-
-    <pre class="mermaid">
-    graph TD
-    9e122290_1ec3_e711_8c5a_005056ad0002("fa:fa-creative-commons My System | Test Environment")
-    82072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 1")
-    db052290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 2")
-    4e112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Report Server:Service 1")
-    30122290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Report Server:Service 2")
-    5e112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Dedicated Test Business Logic Server:Service 1")
-    c1112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Dedicated Test Business Logic Server:Service 2")
-    b7042290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[SupportDb]")
-    8f102290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[DevelopmentDb]")
-    0e102290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[TestDb]")
-    07132290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[SharedReportingDb]")
-    c7072290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Shared Business Logic Server")
-    ca122290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Shared Report Server")
-    68102290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Dedicated Test Business Logic Server")
-    f4112290_1ec3_e711_8c5a_005056ad0002("fa:fa-database [DBServer\SharedDbInstance]")
-    d6072290_1ec3_e711_8c5a_005056ad0002("fa:fa-server DBServer")
-    71082290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:MSSQLSERVER")
-    c0102290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:SQLAgent")
-    9a072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:SQLBrowser")
-    1d0a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost1")
-    200a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost2")
-    1c0a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost3")
-    9e122290_1ec3_e711_8c5a_005056ad0002-->82072290_1ec3_e711_8c5a_005056ad0002
-    9e122290_1ec3_e711_8c5a_005056ad0002-->db052290_1ec3_e711_8c5a_005056ad0002
-    9e122290_1ec3_e711_8c5a_005056ad0002-->4e112290_1ec3_e711_8c5a_005056ad0002
-    9e122290_1ec3_e711_8c5a_005056ad0002-->30122290_1ec3_e711_8c5a_005056ad0002
-    9e122290_1ec3_e711_8c5a_005056ad0002-->5e112290_1ec3_e711_8c5a_005056ad0002
-    9e122290_1ec3_e711_8c5a_005056ad0002-->c1112290_1ec3_e711_8c5a_005056ad0002
-    82072290_1ec3_e711_8c5a_005056ad0002-->b7042290_1ec3_e711_8c5a_005056ad0002
-    82072290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
-    82072290_1ec3_e711_8c5a_005056ad0002-->0e102290_1ec3_e711_8c5a_005056ad0002
-    82072290_1ec3_e711_8c5a_005056ad0002-->c7072290_1ec3_e711_8c5a_005056ad0002
-    db052290_1ec3_e711_8c5a_005056ad0002-->c7072290_1ec3_e711_8c5a_005056ad0002
-    db052290_1ec3_e711_8c5a_005056ad0002-->82072290_1ec3_e711_8c5a_005056ad0002
-    4e112290_1ec3_e711_8c5a_005056ad0002-->b7042290_1ec3_e711_8c5a_005056ad0002
-    4e112290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
-    4e112290_1ec3_e711_8c5a_005056ad0002-->0e102290_1ec3_e711_8c5a_005056ad0002
-    4e112290_1ec3_e711_8c5a_005056ad0002-->07132290_1ec3_e711_8c5a_005056ad0002
-    4e112290_1ec3_e711_8c5a_005056ad0002-->ca122290_1ec3_e711_8c5a_005056ad0002
-    30122290_1ec3_e711_8c5a_005056ad0002-->ca122290_1ec3_e711_8c5a_005056ad0002
-    30122290_1ec3_e711_8c5a_005056ad0002-->4e112290_1ec3_e711_8c5a_005056ad0002
-    5e112290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
-    5e112290_1ec3_e711_8c5a_005056ad0002-->68102290_1ec3_e711_8c5a_005056ad0002
-    c1112290_1ec3_e711_8c5a_005056ad0002-->68102290_1ec3_e711_8c5a_005056ad0002
-    c1112290_1ec3_e711_8c5a_005056ad0002-->5e112290_1ec3_e711_8c5a_005056ad0002
-    b7042290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
-    8f102290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
-    0e102290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
-    07132290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
-    c7072290_1ec3_e711_8c5a_005056ad0002-->1d0a2290_1ec3_e711_8c5a_005056ad0002
-    ca122290_1ec3_e711_8c5a_005056ad0002-->200a2290_1ec3_e711_8c5a_005056ad0002
-    68102290_1ec3_e711_8c5a_005056ad0002-->1c0a2290_1ec3_e711_8c5a_005056ad0002
-    f4112290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
-    f4112290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
-    f4112290_1ec3_e711_8c5a_005056ad0002-->c0102290_1ec3_e711_8c5a_005056ad0002
-    f4112290_1ec3_e711_8c5a_005056ad0002-->9a072290_1ec3_e711_8c5a_005056ad0002
-    d6072290_1ec3_e711_8c5a_005056ad0002-->1c0a2290_1ec3_e711_8c5a_005056ad0002
-    71082290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
-    c0102290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
-    c0102290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
-    9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
-    9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
-    </pre>
-    <hr />
-
-    <pre class="mermaid">
-    graph TB
-    subgraph One
-    a1-->a2
-    end
-    </pre>
-    <hr />
-
-    <pre class="mermaid">
-    graph TB
-    A
-    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
-    </pre>
-    <hr />
-
-    <pre class="mermaid">
-    graph LR
-    456ac9b0d15a8b7f1e71073221059886[1051 AAA fa:fa-check]
-    f7f580e11d00a75814d2ded41fe8e8fe[1141 BBB fa:fa-check]
-    81dc9bdb52d04dc20036dbd8313ed055[1234 CCC fa:fa-check]
-    456ac9b0d15a8b7f1e71073221059886 -->|Node| f7f580e11d00a75814d2ded41fe8e8fe
-    f7f580e11d00a75814d2ded41fe8e8fe -->|Node| 81dc9bdb52d04dc20036dbd8313ed055
-    click 456ac9b0d15a8b7f1e71073221059886 "/admin/user/view?id=1051" "AAA
-    6000"
-    click f7f580e11d00a75814d2ded41fe8e8fe "/admin/user/view?id=1141" "BBB
-    600"
-    click 81dc9bdb52d04dc20036dbd8313ed055 "/admin/user/view?id=1234" "CCC
-    3000"
-    style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
-    </pre>
-    <hr />
-
-    <pre class="mermaid">
-    graph TD
-    A[Christmas] -->|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]
-    click A "index.html#link-clicked" "link test"
-    click B testClick "click test"
-    classDef someclass fill:#f96;
-    class A someclass;
-    class C someclass;
-    </pre>
-    <hr />
-
-    <pre class="mermaid">
-    graph 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;
-    </pre>
-    <hr />
-
-    <pre class="mermaid">
-    graph LR
-    A[[subroutine 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;
-    </pre>
-    <hr />
-
-    <pre class="mermaid">
-    graph LR
-    A[(cylindrical<br />shape<br />test)]
-    A -->|Get money| B1[(Go shopping 1)]
-    A -->|Get money| B2[(Go shopping 2)]
-    A -->|Get money| B3[(Go shopping 3)]
-    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?)]
-    B1 --> C
-    B2 --> C
-    B3 --> C
-    C -->|One| D[(Laptop)]
-    C -->|Two| E[(iPhone)]
-    C -->|Three| F[(Car)]
-    click A "index.html#link-clicked" "link test"
-    click B testClick "click test"
-    classDef someclass fill:#f96;
-    class A someclass;
-    </pre>
-    <hr />
-
-    <pre class="mermaid">
-    graph LR
-    A1[Multi<br>Line] -->|Multi<br>Line| B1(Multi<br>Line)
-    C1[Multi<br />Line] -->|Multi<br />Line| D1(Multi<br />Line)
-    E1[Multi<br />Line] -->|Multi<br />Line| F1(Multi<br />Line)
-    A2[Multi<br>Line] -->|Multi<br>Line| B2(Multi<br>Line)
-    C2[Multi<br />Line] -->|Multi<br />Line| D2(Multi<br />Line)
-    E2[Multi<br />Line] -->|Multi<br />Line| F2(Multi<br />Line)
-    linkStyle 0 stroke:DarkGray,stroke-width:2px
-    linkStyle 1 stroke:DarkGray,stroke-width:2px
-    linkStyle 2 stroke:DarkGray,stroke-width:2px
-    </pre>
-    <hr />
-
-    <pre class="mermaid">
-    graph LR
-    A(( )) -->|step 1| B(( ))
-    B(( )) -->|step 2| C(( ))
-    C(( )) -->|step 3| D(( ))
-    linkStyle 1 stroke:greenyellow,stroke-width:2px
-    style C fill:greenyellow,stroke:green,stroke-width:4px
-    </pre>
-    <hr />
-
-    <pre class="mermaid">
-    graph TB
-    TITLE["Link Click Events<br>(click the nodes below)"]
-    A["link test (open in same tab)"]
-    B["link test (open in new tab)"]
-    C[anchor test]
-    D[mailto test]
-    E[other protocol test]
-    F[script test]
-    TITLE --> A & B & C & D & E & F
-    click A "https://mermaid-js.github.io/mermaid/#/" "link test (open in same tab)"
-    click B "https://mermaid-js.github.io/mermaid/#/" "link test (open in new tab)" _blank
-    click C "#link-clicked"
-    click D "mailto:user@user.user" "mailto test"
-    click E "notes://do-your-thing/id" "other protocol test"
-    click F "javascript:alert('test')" "script test"
-    </pre>
-    <hr />
-
-    <pre class="mermaid">
-    graph LR
-    A[red<br>text] -->|red<br>text| B(blue<br>text)
-    C[/red<br />text/] -->|blue<br />text| D{blue<br />text}
-    E{{default<br />style}} -->|default<br />style| F([default<br />style])
-    linkStyle default color:Sienna;
-    linkStyle 0 color:red;
-    linkStyle 1 stroke:DarkGray,stroke-width:2px,color:#0000ff
-    style A color:red;
-    style B color:blue;
-    style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
-    style D stroke:#0000ff,fill:#ccccff,color:#0000ff
-    click B "index.html#link-clicked" "link test"
-    click D testClick "click test"
-    </pre>
-    <hr />
-
-    <pre class="mermaid">
-    graph TD
-    A[myClass1] --> B[default] & C[default]
-    B[default] & C[default] --> D[myClass2]
-    classDef default stroke-width:2px,fill:none,stroke:silver
-    classDef node color:red
-    classDef myClass1 color:#0000ff
-    classDef myClass2 stroke:#0000ff,fill:#ccccff
-    class A myClass1
-    class D myClass2
-    </pre>
-    <hr />
-
     <h1 id="link-clicked">Anchor for "link-clicked" test</h1>
 
     <script src="./mermaid.js"></script>

demos/gantt.html

@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>Gantt | Mermaid Quick Test Page</title>
+    <title>Mermaid Quick Test Page</title>
     <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
     <style>
       div.mermaid {
@@ -13,174 +13,22 @@
   </head>
 
   <body>
-    <h1>Gantt chart diagram demos</h1>
     <!-- accDescription Tasks for Q4 -->
     <pre class="mermaid">
-      gantt
-        title A Gantt Diagram
-        accTitle: A simple sample gantt diagram
-        accDescr: 2 sections with 2 tasks each, from 2014
-        dateFormat  YYYY-MM-DD
-        section Section
-        A task           :a1, 2014-01-01, 30d
-        Another task     :after a1  , 20d
-        section Another
-        Task in sec      :2014-01-12  , 12d
-        another task      : 24d
-    </pre>
-    <hr />
+gantt
+  title A Gantt Diagram
+  accDescription Remaining Q4 Tasks
+  dateFormat  YYYY-MM-DD
+  section Section
+  A task           :a1, 2014-01-01, 30d
+  Another task     :after a1  , 20d
+  section Another
+  Task in sec      :2014-01-12  , 12d
+  another task      : 24d
 
-    <pre class="mermaid">
-    gantt
-      title Airworks roadmap
-      dateFormat YYYY-MM-DD
-      axisFormat %m-%d %a
-      excludes	weekends, 2021-10-01,2021-10-04,2021-10-05,2021-10-06,2021-10-07
-      includes 2021-10-09
 
-      section Airworks 3.4.1
-      开发	:b, 2021-10-07, 5d
-      测试	:after b, 4d
-      OK  :milestore
-      section Airworks 3.4.2
-      开发	:a, 2021-10-09, 4d
-      测试	:after a, 4d
-    </pre>
-    <hr />
-
-    <pre class="mermaid">
-    gantt
-    title Exclusive end dates (Manual date should end on 3d)
-    dateFormat YYYY-MM-DD
-    axisFormat %d
-    section Section1
-    2 Days: 1, 2019-01-01,2d
-    Manual Date: 2, 2019-01-01,2019-01-03
-    </pre>
-    <hr />
-
-    <pre class="mermaid">
-    gantt
-    title Inclusive end dates (Manual date should end on 4th)
-    dateFormat YYYY-MM-DD
-    axisFormat %d
-    inclusiveEndDates
-    section Section1
-    2 Days: 1, 2019-01-01,2d
-    Manual Date: 2, 2019-01-01,2019-01-03
-    </pre>
-    <hr />
-
-    <pre class="mermaid">
-    gantt
-    title Hide today marker (vertical line should not be visible)
-    dateFormat YYYY-MM-DD
-    axisFormat %d
-    todayMarker off
-    section Section1
-    Today: 1, -1h
-    </pre>
-    <hr />
-
-    <pre class="mermaid">
-    gantt
-    title Style today marker (vertical line should be 5px wide and half-transparent blue)
-    dateFormat YYYY-MM-DD
-    axisFormat %d
-    todayMarker stroke-width:5px,stroke:#00f,opacity:0.5
-    section Section1
-    Today: 1, -1h
-    </pre>
-    <hr />
-
-    <pre class="mermaid">
-    gantt
-    dateFormat YYYY-MM-DD
-    axisFormat %d/%m
-    title Adding GANTT diagram to mermaid
-    excludes weekdays 2014-01-10
-
-    section A section
-    Completed task :done, des1, 2014-01-06,2014-01-08
-    Active task :active, des2, 2014-01-09, 3d
-    Future task : des3, after des2, 5d
-    Future task2 : des4, after des3, 5d
-
-    section Critical tasks
-    Completed task in the critical line :crit, done, 2014-01-06,24h
-    Implement parser and jison :crit, done, after des1, 2d
-    Create tests for parser :crit, active, 3d
-    Future task in critical line :crit, 5d
-    Create tests for renderer :2d
-    Add to mermaid :1d
-
-    section Documentation
-    Describe gantt syntax :active, a1, after des1, 3d
-    Add gantt diagram to demo page :after a1 , 20h
-    Add another diagram to demo page :doc1, after a1 , 48h
-
-    section Clickable
-    Visit mermaidjs :active, cl1, 2014-01-07,2014-01-10
-    Calling a Callback (look at the console log) :cl2, after cl1, 3d
-
-    click cl1 href "https://mermaidjs.github.io/"
-    click cl2 call ganttTestClick("test", test, test)
-
-    section Last section
-    Describe gantt syntax :after doc1, 3d
-    Add gantt diagram to demo page : 20h
-    Add another diagram to demo page : 48h
-    </pre>
-    <hr />
-
-    <pre class="mermaid">
-    gantt
-    dateFormat YYYY-MM-DD
-    axisFormat %d/%m
-    title GANTT diagram with multiline section titles
-    excludes weekdays 2014-01-10
-
-    section A section<br>multiline
-    Completed task : done, des1, 2014-01-06,2014-01-08
-    Active task : active, des2, 2014-01-09, 3d
-    Future task : des3, after des2, 5d
-    Future task2 : des4, after des3, 5d
-
-    section Critical tasks<br />multiline
-    Completed task in the critical line : crit, done, 2014-01-06, 24h
-    Implement parser and jison : crit, done, after des1, 2d
-    Create tests for parser : crit, active, 3d
-    Future task in critical line : crit, 5d
-    Create tests for renderer : 2d
-    Add to mermaid : 1d
-
-    section Documentation<br />multiline
-    Describe gantt syntax : active, a1, after des1, 3d
-    Add gantt diagram to demo page : after a1, 20h
-    Add another diagram to demo page : doc1, after a1, 48h
-
-    section Last section<br />multiline
-    Describe gantt syntax : after doc1, 3d
-    Add gantt diagram to demo page : 20h
-    Add another diagram to demo page : 48h
-    </pre>
-    <hr />
-
-    <script>
-      function ganttTestClick(a, b, c) {
-        console.log('a:', a);
-        console.log('b:', b);
-        console.log('c:', c);
-      }
-      function testClick(nodeId) {
-        console.log('clicked', nodeId);
-        let originalBgColor = document.querySelector('body').style.backgroundColor;
-        document.querySelector('body').style.backgroundColor = 'yellow';
-        setTimeout(function () {
-          document.querySelector('body').style.backgroundColor = originalBgColor;
-        }, 100);
-      }
-    </script>
+</pre
+    >
 
     <script src="./mermaid.js"></script>
     <script>

demos/git.html

@@ -1,95 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>Git Graphs Mermaid Quick Test Page</title>
-    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
-    <style>
-      div.mermaid {
-        /* font-family: 'trebuchet ms', verdana, arial; */
-        font-family: 'Courier New', Courier, monospace !important;
-      }
-    </style>
-  </head>
-
-  <body>
-    <h1>Git diagram demo</h1>
-    <pre class="mermaid">
-    gitGraph:
-    options
-    {
-    "nodeSpacing": 50,
-    "nodeRadius": 5
-    }
-    end
-    branch master
-    commit
-    branch newbranch
-    checkout newbranch
-    commit
-    commit
-    checkout master
-    commit
-    commit
-    merge newbranch
-    </pre>
-
-    <script src="./mermaid.js"></script>
-    <script>
-      const ALLOWED_TAGS = [
-        'a',
-        'b',
-        'blockquote',
-        'br',
-        'dd',
-        'div',
-        'dl',
-        'dt',
-        'em',
-        'foreignObject',
-        'h1',
-        'h2',
-        'h3',
-        'h4',
-        'h5',
-        'h6',
-        'h7',
-        'h8',
-        'hr',
-        'i',
-        'li',
-        'ul',
-        'ol',
-        'p',
-        'pre',
-        'span',
-        'strike',
-        'strong',
-        'table',
-        'tbody',
-        'td',
-        'tfoot',
-        'th',
-        'thead',
-        'tr',
-      ];
-      mermaid.initialize({
-        theme: 'default',
-        // themeCSS: '.node rect { fill: red; }',
-        logLevel: 3,
-        securityLevel: 'loose',
-        flowchart: { curve: 'basis' },
-        gantt: { axisFormat: '%m/%d/%Y' },
-        sequence: { actorMargin: 50 },
-        dompurifyConfig: {
-          USE_PROFILES: {
-            svg: true,
-          },
-          ADD_TAGS: ALLOWED_TAGS,
-          ADD_ATTR: ['transform-origin'],
-        },
-      });
-    </script>
-  </body>
-</html>

demos/journey.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -14,20 +14,17 @@
   </head>
 
   <body>
-    <h1>Journey diagram demo</h1>
     <pre class="mermaid">
-         journey
-    title My working day
-      accTitle: Very simple journey demo
-      accDescr: 2 main sections: work and home, each with just a few tasks
-
-    section Go to work
-      Make tea: 5: Me
-      Go upstairs: 3: Me
-      Do work: 1: Me, Cat
-    section Go home
-      Go downstairs: 5: Me
-      Sit down: 3: Me
+        journey
+        title My day
+        accDescription A user journey diagram of a typical day in my life
+        section Go to work
+          Make tea: 5: Me
+          Go upstairs: 3: Me
+          Do work: 1: Me, Cat
+        section Go home
+          Go downstairs: 5: Me
+          Sit down: 5: Me
 				</pre>
 
     <script src="./mermaid.js"></script>

demos/pie.html

@@ -1,53 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>Mermaid Quick Test Page</title>
-    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
-    <style>
-      div.mermaid {
-        /* font-family: 'trebuchet ms', verdana, arial; */
-        font-family: 'Courier New', Courier, monospace !important;
-      }
-    </style>
-  </head>
-
-  <body>
-    <h1>Pie chart demos</h1>
-    <pre class="mermaid">
-      pie title Pets adopted by volunteers
-      accTitle: simple pie char demo
-      accDescr: pie chart with 3 sections: dogs, cats, rats. Most are dogs.
-    "Dogs" : 386
-    "Cats" : 85
-    "Rats" : 15
-    </pre>
-
-    <hr />
-    <pre class="mermaid">
-    pie
-      title Key elements in Product X
-        accTitle: Key elements in Product X
-      accDescr: This is a pie chart showing the key elements in Product X.
-      "Calcium" : 42.96
-      "Potassium" : 50.05
-      "Magnesium" : 10.01
-      "Iron" :  5
-    </pre>
-
-    <script type="module">
-      import mermaid from '../packages/mermaid';
-      mermaid.initialize({
-        theme: 'forest',
-        // themeCSS: '.node rect { fill: red; }',
-        logLevel: 3,
-        securityLevel: 'loose',
-        // flowchart: { curve: 'basis' },
-        // gantt: { axisFormat: '%m/%d/%Y' },
-        sequence: { actorMargin: 50 },
-        // sequenceDiagram: { actorMargin: 300 } // deprecated
-      });
-    </script>
-  </body>
-</html>

demos/requirements.html

@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>Requirements Mermaid Quick Test Page</title>
+    <title>Mermaid Quick Test Page</title>
     <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
     <style>
       div.mermaid {
@@ -14,12 +14,9 @@
   </head>
 
   <body>
-    <h1>Requirement diagram demos</h1>
     <pre class="mermaid">
 	requirementDiagram
-	  accTitle: Requirments demo in black and white
-		accDescr: A series of requirement boxes showing relationships among them. Has meaningless task names
-
+	title This is a title
 	requirement test_req {
 	id: 1
 	text: the test text.
@@ -87,82 +84,11 @@
 	test_req <- copies - test_entity2
 		</pre
     >
-    <hr />
-
-    <pre class="mermaid">
-    requirementDiagram
-
-    requirement An Example {
-    id: 1
-    text: the test text.
-    risk: high
-    verifymethod: test
-    }
-
-    functionalRequirement Random Name {
-    id: 1.1
-    text: the second test text.
-    risk: low
-    verifymethod: inspection
-    }
-
-    performanceRequirement Something Else {
-    id: 1.2
-    text: the third test text.
-    risk: medium
-    verifymethod: demonstration
-    }
-
-    interfaceRequirement test_req4 {
-    id: 1.2.1
-    text: the fourth test text.
-    risk: medium
-    verifymethod: analysis
-    }
-
-    physicalRequirement test_req5 {
-    id: 1.2.2
-    text: the fifth test text.
-    risk: medium
-    verifymethod: analysis
-    }
-
-    designConstraint test_req6 {
-    id: 1.2.3
-    text: really long text to test overflow. really long text to test overflow. really long text to test overflow.
-    risk: medium
-    verifymethod: analysis
-    }
-
-    element test_entity {
-    type: simulation
-    }
-
-    element test_entity2 {
-    type: word doc
-    docRef: reqs/test_entity
-    }
-
-    element test_entity3 {
-    type: "test suite"
-    docRef: github.com/all_the_tests
-    }
-
-
-    test_entity - satisfies -> Random Name
-    An Example - traces -> Random Name
-    An Example - contains -> Something Else
-    Something Else - contains -> test_req4
-    test_req4 - derives -> test_req5
-    test_req5 - refines -> test_req6
-    test_entity3 - verifies -> test_req5
-    An Example <- copies - test_entity2
-    </pre>
 
     <script src="./mermaid.js"></script>
     <script>
       mermaid.initialize({
-        theme: 'neutral',
+        theme: 'forest',
         // themeCSS: '.node rect { fill: red; }',
         logLevel: 3,
         securityLevel: 'loose',

demos/sequence.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -14,124 +14,51 @@
   </head>
 
   <body>
-    <h1>Sequence diagram demos</h1>
     <pre class="mermaid">
 		sequenceDiagram
-			accTitle: test the accTitle
-			accDescr: Test a description
-
-			participant Alice
-			participant Bob
-			participant John as John<br />Second Line
-			autonumber 10 10
-			rect rgb(200, 220, 100)
-			rect rgb(200, 255, 200)
-
-			Alice ->> Bob: Hello Bob, how are you?
-			Bob-->>John: How about you John?
-			end
-
-			Bob--x Alice: I am good thanks!
-			Bob-x John: I am good thanks!
-			Note right of John: John thinks a long<br />long time, so long<br />that the text does<br />not fit on a row.
-
-			Bob-->Alice: Checking with John...
-			Note over John:wrap: John looks like he's still thinking, so Bob prods him a bit.
-			Bob-x John: Hey John - we're still waiting to know<br />how you're doing
-			Note over John:nowrap: John's trying hard not to break his train of thought.
-			Bob-x John:wrap: John! Are you still debating about how you're doing? How long does it take??
-			Note over John: After a few more moments, John<br />finally snaps out of it.
-			end
-
-			autonumber off
-			alt either this
-			Alice->>+John: Yes
-			John-->>-Alice: OK
-			else or this
-			autonumber
-			Alice->>John: No
-			else or this will happen
-			Alice->John: Maybe
-			end
-			autonumber 200
-			par this happens in parallel
-			Alice -->> Bob: Parallel message 1
-			and
-			Alice -->> John: Parallel message 2
-			end
+		title: FancySequenceDiagram
+		accDescription Test a description
+		participant Alice
+		participant Bob
+		participant John as John<br />Second Line
+		autonumber 10 10
+		rect rgb(200, 220, 100)
+		rect rgb(200, 255, 200)
+		Alice ->> Bob: Hello Bob, how are you?
+		Bob-->>John: How about you John?
+		end
+		Bob--x Alice: I am good thanks!
+		Bob-x John: I am good thanks!
+		Note right of John: John thinks a long<br />long time, so long<br />that the text does<br />not fit on a row.
+		Bob-->Alice: Checking with John...
+		Note over John:wrap: John looks like he's still thinking, so Bob prods him a bit.
+		Bob-x John: Hey John - we're still waiting to know<br />how you're doing
+		Note over John:nowrap: John's trying hard not to break his train of thought.
+		Bob-x John:wrap: John! Are you still debating about how you're doing? How long does it take??
+		Note over John: After a few more moments, John<br />finally snaps out of it.
+		end
+		autonumber off
+		alt either this
+		Alice->>+John: Yes
+    John-->>-Alice: OK
+		else or this
+		autonumber
+		Alice->>John: No
+		else or this will happen
+		Alice->John: Maybe
+		end
+		autonumber 200
+		par this happens in parallel
+		Alice -->> Bob: Parallel message 1
+		and
+		Alice -->> John: Parallel message 2
+		end
 	</pre>
-    <hr />
-    <pre class="mermaid">
-    sequenceDiagram
-      accTitle: Sequence diagram title is here
-      accDescr: Hello friends
-
-    participant Alice
-    participant Bob
-    participant John as John<br />Second Line
-    rect rgb(200, 220, 100)
-    rect rgb(200, 255, 200)
-    Alice ->> Bob: Hello Bob, how are you?
-    Bob-->>John: How about you John?
-    end
-    Bob--x Alice: I am good thanks!
-    Bob-x John: I am good thanks!
-    Note right of John: John thinks a long<br />long time, so long<br />that the text does<br />not fit on a row.
-    Bob-->Alice: Checking with John...
-    Note over John:wrap: John looks like he's still thinking, so Bob prods him a bit.
-    Bob-x John: Hey John - we're still waiting to know<br />how you're doing
-    Note over John:nowrap: John's trying hard not to break his train of thought.
-    Bob-x John:wrap: John! Are you still debating about how you're doing? How long does it take??
-    Note over John: After a few more moments, John<br />finally snaps out of it.
-    end
-    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
-    </pre>
-    <hr />
-
-    <pre class="mermaid">
-    sequenceDiagram
-    participant 1 as multiline<br>using #lt;br#gt;
-    participant 2 as multiline<br />using #lt;br/#gt;
-    participant 3 as multiline<br />using #lt;br /#gt;
-    participant 4 as multiline<br />using #lt;br /#gt;
-    1->>2: multiline<br>using #lt;br#gt;
-    note right of 2: multiline<br>using #lt;br#gt;
-    2->>3: multiline<br />using #lt;br/#gt;
-    note right of 3: multiline<br />using #lt;br/#gt;
-    3->>4: multiline<br />using #lt;br /#gt;
-    note right of 4: multiline<br />using #lt;br /#gt;
-    4->>1: multiline<br />using #lt;br /#gt;
-    note right of 1: multiline<br />using #lt;br /#gt;
-    </pre>
-    <hr />
-
-    <pre class="mermaid">
-    sequenceDiagram
-    autonumber
-    Alice->>John: Hello John,<br>how are you?
-    autonumber 50 10
-    Alice->>John: John,<br />can you hear me?
-    John-->>Alice: Hi Alice,<br />I can hear you!
-    autonumber off
-    John-->>Alice: I feel great!
-    </pre>
-    <hr />
 
     <script src="./mermaid.js"></script>
     <script>
       mermaid.initialize({
-        theme: 'base',
+        theme: 'forest',
         // themeCSS: '.node rect { fill: red; }',
         logLevel: 3,
         securityLevel: 'loose',

demos/state.html

@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>States Mermaid Quick Test Page</title>
+    <title>Mermaid Quick Test Page</title>
     <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
     <style>
       div.mermaid {
@@ -14,69 +14,24 @@
   </head>
 
   <body>
-    <h1>State diagram demos</h1>
     <pre class="mermaid">
 		stateDiagram
-		  accTitle: This is the accessible title
-      accDescr:This is an accessible description
-      State1 --> State2
+		title This is a title
+        accDescription This is an accessible description
+        State1
     </pre>
 
-    <hr />
-
     <pre class="mermaid">
 		stateDiagram-v2
-		  accTitle: This is the accessible title
-      accDescr: This is an accessible description
-      [*] --> Still
-      Still --> [*]
-      Still --> Moving
-      Moving --> Still
-      Moving --> Crash
-      Crash --> [*]
-    </pre>
-
-    <hr />
-
-    <pre class="mermaid">
-    stateDiagram
-      accTitle: very very simple state
-    accDescr: This is a state diagram showing one state
-    State1
-    </pre>
-
-    <hr />
-
-    <pre class="mermaid">
-    stateDiagram
-    [*] --> First
-    state First {
-    [*] --> second
-    second --> [*]
-    }
-    </pre>
-    <pre class="mermaid">
-    stateDiagram
-    State1: The state with a note
-    note right of State1
-    Important information! You can write
-    notes.
-    end note
-    State1 --> State2
-    note left of State2 : This is the note to the left.
-    </pre>
-    <pre class="mermaid">
-    stateDiagram
-    State1
-    note right of State1
-    Line1<br>Line2<br />Line3<br />Line4<br />Line5
-    end note
+		title This is a title
+        accDescription This is an accessible description
+        State1
     </pre>
 
     <script src="./mermaid.js"></script>
     <script>
       mermaid.initialize({
-        theme: 'base',
+        theme: 'forest',
         // themeCSS: '.node rect { fill: red; }',
         logLevel: 3,
         securityLevel: 'loose',

docs/8.6.0_docs.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
 
 # Version 8.6.0 Changes
 
@@ -77,19 +77,7 @@ When deployed within code, init is called before the graph/diagram description.
 
 **for example**:
 
-```mermaid-example
-%%{init: {"theme": "default", "logLevel": 1 }}%%
- graph LR
-  a-->b
-  b-->c
-  c-->d
-  d-->e
-  e-->f
-  f-->g
-  g-->
-```
-
-```mermaid
+```mmd
 %%{init: {"theme": "default", "logLevel": 1 }}%%
  graph LR
   a-->b

docs/CHANGELOG.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
 
 # Change Log
 
@@ -42,13 +42,7 @@ It is also possible to override site-wide theme settings locally, for a specific
 
 **Following is an example:**
 
-```mermaid-example
-%%{init: {'theme':'base'}}%%
-  graph TD
-    a --> b
-```
-
-```mermaid
+```mmd
 %%{init: {'theme':'base'}}%%
   graph TD
     a --> b
@@ -64,25 +58,7 @@ The easiest way to make a custom theme is to start with the base theme, and just
 
 Here is an example of overriding `primaryColor` and giving everything a different look, using `%%init%%`.
 
-```mermaid-example
-%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
-        graph TD
-          A[Christmas] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
-```
-
-```mermaid
+```mmd
 %%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
         graph TD
           A[Christmas] -->|Get money| B(Go shopping)

docs/Configuration.md

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

docs/README.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
 
 # About Mermaid
 
@@ -10,7 +10,7 @@ It is a JavaScript based diagramming and charting tool that renders Markdown-ins
 
 <img src="img/header.png" alt="" />
 
-[![Build 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_)
+[![Build Status](https://travis-ci.org/mermaid-js/mermaid.svg?branch=master)](https://travis-ci.org/mermaid-js/mermaid) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
 
 <!-- Mermaid book banner -->
 
@@ -49,15 +49,7 @@ In our release process we rely heavily on visual regression tests using [applito
 
 ### [Flowchart](./flowchart.md?id=flowcharts-basic-syntax)
 
-```mermaid-example
-graph TD;
-    A-->B;
-    A-->C;
-    B-->D;
-    C-->D;
-```
-
-```mermaid
+```mmd
 graph TD;
     A-->B;
     A-->C;
@@ -69,21 +61,7 @@ graph TD;
 
 ### [Sequence diagram](./sequenceDiagram.md)
 
-```mermaid-example
-sequenceDiagram
-    participant Alice
-    participant Bob
-    Alice->>John: Hello John, how are you?
-    loop Healthcheck
-        John->>John: Fight against hypochondria
-    end
-    Note right of John: Rational thoughts <br/>prevail!
-    John-->>Alice: Great!
-    John->>Bob: How about you?
-    Bob-->>John: Jolly good!
-```
-
-```mermaid
+```mmd
 sequenceDiagram
     participant Alice
     participant Bob
@@ -101,20 +79,7 @@ sequenceDiagram
 
 ### [Gantt diagram](./gantt.md)
 
-```mermaid-example
-gantt
-dateFormat  YYYY-MM-DD
-title Adding GANTT diagram to mermaid
-excludes weekdays 2014-01-10
-
-section A section
-Completed task            :done,    des1, 2014-01-06,2014-01-08
-Active task               :active,  des2, 2014-01-09, 3d
-Future task               :         des3, after des2, 5d
-Future task2               :         des4, after des3, 5d
-```
-
-```mermaid
+```mmd
 gantt
 dateFormat  YYYY-MM-DD
 title Adding GANTT diagram to mermaid
@@ -131,24 +96,7 @@ Future task2               :         des4, after des3, 5d
 
 ### [Class diagram](./classDiagram.md)
 
-```mermaid-example
-classDiagram
-Class01 <|-- AveryLongClass : Cool
-Class03 *-- Class04
-Class05 o-- Class06
-Class07 .. Class08
-Class09 --> C2 : Where am i?
-Class09 --* C3
-Class09 --|> Class07
-Class07 : equals()
-Class07 : Object[] elementData
-Class01 : size()
-Class01 : int chimp
-Class01 : int gorilla
-Class08 <--> C2: Cool label
-```
-
-```mermaid
+```mmd
 classDiagram
 Class01 <|-- AveryLongClass : Cool
 Class03 *-- Class04
@@ -197,15 +145,7 @@ Class08 <--> C2: Cool label
 
 ### [Entity Relationship Diagram - :exclamation: experimental](./entityRelationshipDiagram.md)
 
-```mermaid-example
-erDiagram
-    CUSTOMER ||--o{ ORDER : places
-    ORDER ||--|{ LINE-ITEM : contains
-    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
-
-```
-
-```mermaid
+```mmd
 erDiagram
     CUSTOMER ||--o{ ORDER : places
     ORDER ||--|{ LINE-ITEM : contains
@@ -217,19 +157,7 @@ erDiagram
 
 ### [User Journey Diagram](./user-journey.md)
 
-```mermaid-example
-journey
-    title My working day
-    section Go to work
-      Make tea: 5: Me
-      Go upstairs: 3: Me
-      Do work: 1: Me, Cat
-    section Go home
-      Go downstairs: 5: Me
-      Sit down: 5: Me
-```
-
-```mermaid
+```mmd
 journey
     title My working day
     section Go to work
@@ -271,16 +199,16 @@ To Deploy Mermaid:
 
 ### [Mermaid API](./Setup.md):
 
-**To deploy mermaid without a bundler, one can insert a `script` tag with an absolute address and a `mermaid.initialize` call into the HTML like so:**
+**To deploy mermaid without a bundler, one can insert a `script` tag with an absolute address and a `mermaidAPI` call into the HTML like so:**
 
 ```html
-<script type="module">
-  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
+<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+<script>
   mermaid.initialize({ startOnLoad: true });
 </script>
 ```
 
-**Doing so will command the mermaid parser to look for the `<div>` or `<pre>` tags with `class="mermaid"`. From these tags mermaid will try to read the diagram/chart definitions and render them into SVG charts.**
+**Doing so will command the mermaid parser to look for the `<div>` tags with `class="mermaid"`. From these tags mermaid will try to read the diagram/chart definitions and render them into SVG charts.**
 
 **Examples can be found at** [Other examples](/examples)
 
@@ -347,7 +275,7 @@ Update version number in `package.json`.
 npm publish
 ```
 
-The above command generates files into the `dist` folder and publishes them to \<npmjs.org>.
+The above command generates files into the `dist` folder and publishes them to npmjs.org.
 
 ## Related projects
 
@@ -363,7 +291,7 @@ Detailed information about how to contribute can be found in the [contribution g
 
 ## Security and safe diagrams
 
-For public sites, it can be precarious to retrieve text from users on the internet, storing that content for presentation in a browser at a later stage. The reason is that the user content can contain embedded malicious scripts that will run when the data is presented. For Mermaid this is a risk, specially as mermaid diagrams contain many characters that are used in html which makes the standard sanitation unusable as it also breaks the diagrams. We still make an effort to sanitize the incoming code and keep refining the process but it is hard to guarantee that there are no loop holes.
+For public sites, it can be precarious to retrieve text from users on the internet, storing that content for presentation in a browser at a later stage. The reason is that the user content can contain embedded malicious scripts that will run when the data is presented. For Mermaid this is a risk, specially as mermaid diagrams contain many characters that are used in html which makes the standard sanitation unusable as it also breaks the diagrams. We still make an effort to sanitise the incoming code and keep refining the process but it is hard to guarantee that there are no loop holes.
 
 As an extra level of security for sites with external users we are happy to introduce a new security level in which the diagram is rendered in a sandboxed iframe preventing JavaScript in the code from being executed. This is a great step forward for better security.
 

docs/SUMMARY.md

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