Merge branch 'develop' into bug/2234_class-diagram-call-addClass-if-needed

Feature/5114 add parallel commit config

.eslintrc.cjs

@@ -48,8 +48,11 @@ module.exports = {
     'no-prototype-builtins': 'off',
     'no-unused-vars': 'off',
     'cypress/no-async-tests': 'off',
+    '@typescript-eslint/consistent-type-imports': 'error',
+    '@typescript-eslint/no-explicit-any': 'warn',
     '@typescript-eslint/no-floating-promises': 'error',
     '@typescript-eslint/no-misused-promises': 'error',
+    '@typescript-eslint/no-unused-vars': 'warn',
     '@typescript-eslint/ban-ts-comment': [
       'error',
       {

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -17,6 +17,9 @@ body:
         - Use a clear and concise title
         - Fill out the text fields with as much detail as possible.
         - Never be shy to give us screenshots and/or code samples. It will help!
+
+        There is a chance that the bug is already fixed in the git `develop` branch, but is not released yet. 
+        So please check in [Live Editor - Develop](https://develop.git.mermaid.live) before raising an issue.
   - type: textarea
     attributes:
       label: Description
@@ -43,7 +46,7 @@ body:
     attributes:
       label: Code Sample
       description: |-
-        If applicable, add the code sample or a link to the [Live Editor](https://mermaid.live).
+        If applicable, add the code sample or a link to the [Live Editor - Develop](https://develop.git.mermaid.live).
         Any text pasted here will be rendered as a Code block.
       render: text
   - type: textarea

.github/ISSUE_TEMPLATE/config.yml

@@ -7,8 +7,14 @@ contact_links:
     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
+    url: https://mermaid.js.org
     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.
+  - name: Live Editor - Develop
+    url: https://develop.git.mermaid.live
+    about: Try unreleased changes in the develop branch.
+  - name: Live Editor - Next
+    url: https://next.git.mermaid.live
+    about: Try unreleased changes in the next branch.

.github/lychee.toml

@@ -0,0 +1,44 @@
+#############################  Display  #############################
+
+# Verbose program output
+# Accepts log level: "error", "warn", "info", "debug", "trace"
+verbose = "debug"
+
+# Don't show interactive progress bar while checking links.
+no_progress = true
+
+#############################  Cache  ###############################
+
+# Enable link caching. This can be helpful to avoid checking the same links on
+# multiple runs.
+cache = true
+
+# Discard all cached requests older than this duration.
+max_cache_age = "1d"
+
+#############################  Requests  ############################
+
+# Comma-separated list of accepted status codes for valid links.
+accept = [200, 429]
+
+#############################  Exclusions  ##########################
+
+# Exclude URLs and mail addresses from checking (supports regex).
+exclude = [
+# Network error: Forbidden
+"https://codepen.io",
+
+# Timeout error, maybe Twitter has anti-bot defenses against GitHub's CI servers?
+"https://twitter.com/mermaidjs_",
+
+# Don't check files that are generated during the build via `pnpm docs:code`
+'packages/mermaid/src/docs/config/setup/*',
+
+# Ignore slack invite
+"https://join.slack.com/"
+]
+
+# Exclude all private IPs from checking.
+# Equivalent to setting `exclude_private`, `exclude_link_local`, and
+# `exclude_loopback` to true.
+exclude_all_private = true

.github/pr-labeler.yml

@@ -1,4 +1,22 @@
-'Type: Bug / Error': ['bug/*', fix/*]
-'Type: Enhancement': ['feature/*', 'feat/*']
-'Type: Other': ['other/*', 'chore/*', 'test/*', 'refactor/*']
-'Area: Documentation': ['docs/*']
+# yaml-language-server: $schema=https://raw.githubusercontent.com/release-drafter/release-drafter/master/schema.json
+autolabeler:
+  - label: 'Type: Bug / Error'
+    branch:
+      - '/bug\/.+/'
+      - '/fix\/.+/'
+  - label: 'Type: Enhancement'
+    branch:
+      - '/feature\/.+/'
+      - '/feat\/.+/'
+  - label: 'Type: Other'
+    branch:
+      - '/other\/.+/'
+      - '/chore\/.+/'
+      - '/test\/.+/'
+      - '/refactor\/.+/'
+  - label: 'Area: Documentation'
+    branch:
+      - '/docs\/.+/'
+
+template: |
+  This field is unused, as we only use this config file for labeling PRs.

.github/pull_request_template.md

@@ -14,5 +14,5 @@ Make sure you
 
 - [ ] :book: have read the [contribution guidelines](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md)
 - [ ] :computer: have added necessary unit/e2e tests.
-- [ ] :notebook: have added documentation. Make sure [`MERMAID_RELEASE_VERSION`](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/docs/community/development.md#3-update-documentation) is used for all new features.
+- [ ] :notebook: have added documentation. Make sure [`MERMAID_RELEASE_VERSION`](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/docs/community/contributing.md#update-documentation) is used for all new features.
 - [ ] :bookmark: targeted `develop` branch

.github/release-drafter.yml

@@ -1,19 +1,30 @@
 name-template: '$NEXT_PATCH_VERSION'
 tag-template: '$NEXT_PATCH_VERSION'
 categories:
+  - title: '🚨 **Breaking Changes**'
+    labels:
+      - 'Breaking Change'
   - title: '🚀 Features'
     labels:
       - 'Type: Enhancement'
+      - 'feature' # deprecated, new PRs shouldn't have this
   - title: '🐛 Bug Fixes'
     labels:
       - 'Type: Bug / Error'
+      - 'fix' # deprecated, new PRs shouldn't have this
   - title: '🧰 Maintenance'
-    label: 'Type: Other'
+    labels:
+      - 'Type: Other'
+      - 'chore' # deprecated, new PRs shouldn't have this
+  - title: '⚡️ Performance'
+    labels:
+      - 'Type: Performance'
+  - title: '📚 Documentation'
+    labels:
+      - 'Area: Documentation'
 change-template: '- $TITLE (#$NUMBER) @$AUTHOR'
 sort-by: title
 sort-direction: ascending
-branches:
-  - develop
 exclude-labels:
   - 'Skip changelog'
 no-changes-template: 'This release contains minor changes and bugfixes.'

.github/workflows/build-docs.yml

@@ -16,12 +16,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - uses: pnpm/action-setup@v2
 
       - name: Setup Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           cache: pnpm
           node-version: 18
@@ -29,7 +29,7 @@ jobs:
       - name: Install Packages
         run: pnpm install --frozen-lockfile
 
-      - name: Verify release verion
+      - name: Verify release version
         if: ${{ github.event_name == 'push' && (github.ref == 'refs/heads/master' || startsWith(github.ref, 'refs/heads/release')) }}
         run: pnpm --filter mermaid run docs:verify-version
 

.github/workflows/build.yml

@@ -19,13 +19,13 @@ jobs:
       matrix:
         node-version: [18.x]
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - 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
+        uses: actions/setup-node@v4
         with:
           cache: pnpm
           node-version: ${{ matrix.node-version }}

.github/workflows/check-readme-in-sync.yml

@@ -18,7 +18,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Check for difference in README.md and docs/README.md
         run: |

.github/workflows/checks.yml

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

.github/workflows/codeql.yml

@@ -29,7 +29,7 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL

.github/workflows/dependency-review.yml

@@ -1,6 +1,6 @@
 # Dependency Review Action
 #
-# This Action will scan dependency manifest files that change as part of a Pull Reqest, surfacing known-vulnerable versions of the packages declared or updated in the PR. Once installed, if the workflow run is marked as required, PRs introducing known-vulnerable packages will be blocked from merging.
+# This Action will scan dependency manifest files that change as part of a Pull Request, surfacing known-vulnerable versions of the packages declared or updated in the PR. Once installed, if the workflow run is marked as required, PRs introducing known-vulnerable packages will be blocked from merging.
 #
 # Source repository: https://github.com/actions/dependency-review-action
 # Public documentation: https://docs.github.com/en/code-security/supply-chain-security/understanding-your-software-supply-chain/about-dependency-review#dependency-review-enforcement
@@ -15,6 +15,6 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: 'Checkout Repository'
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: 'Dependency Review'
         uses: actions/dependency-review-action@v3

.github/workflows/e2e-applitools.yml

@@ -28,15 +28,15 @@ jobs:
       - 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."
+          echo "::error,title=Not using Applitools::APPLITOOLS_API_KEY is empty, disabling Applitools for this run."
 
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - 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
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
 

.github/workflows/e2e.yml

@@ -1,32 +1,87 @@
+# We use github cache to save snapshots between runs.
+# For PRs and MergeQueues, the target commit is used, and for push events, github.event.previous is used.
+# If a snapshot for a given Hash is not found, we checkout that commit, run the tests and cache the snapshots.
+# These are then downloaded before running the E2E, providing the reference snapshots.
+# If there are any errors, the diff image is uploaded to artifacts, and the user is notified.
+
 name: E2E
 
 on:
   push:
+    branches-ignore:
+      - 'gh-readonly-queue/**'
   pull_request:
   merge_group:
 
 permissions:
   contents: read
 
+env:
+  # For PRs and MergeQueues, the target commit is used, and for push events, github.event.previous is used.
+  targetHash: ${{ github.event.pull_request.base.sha || github.event.merge_group.base_sha || github.event.before }}
+
 jobs:
+  cache:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v2
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18.x
+
+      - name: Cache snapshots
+        id: cache-snapshot
+        uses: actions/cache@v4
+        with:
+          save-always: true
+          path: ./cypress/snapshots
+          key: ${{ runner.os }}-snapshots-${{ env.targetHash }}
+
+      # If a snapshot for a given Hash is not found, we checkout that commit, run the tests and cache the snapshots.
+      - name: Switch to base branch
+        if: ${{ steps.cache-snapshot.outputs.cache-hit != 'true' }}
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ env.targetHash }}
+
+      - name: Cypress run
+        uses: cypress-io/github-action@v4
+        id: cypress-snapshot-gen
+        if: ${{ steps.cache-snapshot.outputs.cache-hit != 'true' }}
+        with:
+          start: pnpm run dev
+          wait-on: 'http://localhost:9000'
+          browser: chrome
+
   e2e:
     runs-on: ubuntu-latest
+    needs: cache
     strategy:
       fail-fast: false
       matrix:
         node-version: [18.x]
         containers: [1, 2, 3, 4]
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - 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
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
 
+      # These cached snapshots are downloaded, providing the reference snapshots.
+      - name: Cache snapshots
+        id: cache-snapshot
+        uses: actions/cache/restore@v3
+        with:
+          path: ./cypress/snapshots
+          key: ${{ runner.os }}-snapshots-${{ env.targetHash }}
+
       # Install NPM dependencies, cache them correctly
       # and run all Cypress tests
       - name: Cypress run
@@ -38,6 +93,7 @@ jobs:
         with:
           start: pnpm run dev:coverage
           wait-on: 'http://localhost:9000'
+          browser: chrome
           # 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 != '' }}
@@ -46,6 +102,7 @@ jobs:
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
           VITEST_COVERAGE: true
           CYPRESS_COMMIT: ${{ github.sha }}
+
       - name: Upload Coverage to Codecov
         uses: codecov/codecov-action@v3
         # Run step only pushes to develop and pull_requests
@@ -57,9 +114,55 @@ jobs:
           fail_ci_if_error: false
           verbose: true
           token: 6845cc80-77ee-4e17-85a1-026cd95e0766
+
+      # We upload the artifacts into numbered archives to prevent overwriting
       - name: Upload Artifacts
-        uses: actions/upload-artifact@v3
-        if: ${{ failure() && steps.cypress.conclusion == 'failure' }}
+        uses: actions/upload-artifact@v4
+        if: ${{ always() }}
+        with:
+          name: snapshots-${{ matrix.containers }}
+          retention-days: 1
+          path: ./cypress/snapshots
+
+  combineArtifacts:
+    needs: e2e
+    runs-on: ubuntu-latest
+    if: ${{ always() }}
+    steps:
+      # Download all snapshot artifacts and merge them into a single folder
+      - name: Download All Artifacts
+        uses: actions/download-artifact@v4
+        with:
+          path: snapshots
+          pattern: snapshots-*
+          merge-multiple: true
+
+      # For successful push events, we save the snapshots cache
+      - name: Save snapshots cache
+        id: cache-upload
+        if: ${{ github.event_name == 'push' && needs.e2e.result != 'failure' }}
+        uses: actions/cache/save@v3
+        with:
+          path: ./snapshots
+          key: ${{ runner.os }}-snapshots-${{ github.event.after }}
+
+      - name: Flatten images to a folder
+        if: ${{ needs.e2e.result == 'failure'  }}
+        run: |
+          mkdir errors
+          cd snapshots
+          find . -mindepth 2 -type d -name "*__diff_output__*" -exec sh -c 'mv "$0"/*.png ../errors/' {} \;
+
+      - name: Upload Error snapshots
+        if: ${{ needs.e2e.result == 'failure' }}
+        uses: actions/upload-artifact@v4
+        id: upload-artifacts
         with:
           name: error-snapshots
-          path: cypress/snapshots/**/__diff_output__/*
+          retention-days: 10
+          path: errors/
+
+      - name: Notify Users
+        if: ${{ needs.e2e.result == 'failure' }}
+        run: |
+          echo "::error title=Visual tests failed::You can view images that failed by downloading the error-snapshots artifact: ${{ steps.upload-artifacts.outputs.artifact-url }}"

.github/workflows/link-checker.yml

@@ -20,13 +20,13 @@ on:
     - cron: '30 8 * * *'
 
 jobs:
-  linkChecker:
+  link-checker:
     runs-on: ubuntu-latest
     permissions:
       # lychee only uses the GITHUB_TOKEN to avoid rate-limiting
       contents: read
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Restore lychee cache
         uses: actions/cache@v3
@@ -36,13 +36,10 @@ jobs:
           restore-keys: cache-lychee-
 
       - name: Link Checker
-        uses: lycheeverse/lychee-action@v1.8.0
+        uses: lycheeverse/lychee-action@v1.9.1
         with:
           args: >-
-            --verbose
-            --no-progress
-            --cache
-            --max-cache-age 1d
+            --config .github/lychee.toml
             packages/mermaid/src/docs/**/*.md
             README.md
             README.zh-CN.md

.github/workflows/lint.yml

@@ -20,13 +20,13 @@ jobs:
       matrix:
         node-version: [18.x]
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - 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
+        uses: actions/setup-node@v4
         with:
           cache: pnpm
           node-version: ${{ matrix.node-version }}
@@ -66,6 +66,20 @@ jobs:
             exit 1
           fi
 
+      - name: Verify no circular dependencies
+        working-directory: ./packages/mermaid
+        shell: bash
+        run: |
+          if ! pnpm run --filter mermaid checkCircle; then
+            ERROR_MESSAGE='Circular dependency detected.'
+            ERROR_MESSAGE+=' This should be fixed by removing the circular dependency.'
+            ERROR_MESSAGE+=' Run `pnpm run --filter mermaid checkCircle` on your local machine'
+            ERROR_MESSAGE+=' to see the circular dependency.'
+            echo "::error title=Lint failure::${ERROR_MESSAGE}"
+            # make sure to return an error exitcode so that GitHub actions shows a red-cross
+            exit 1
+          fi
+
       - name: Verify Docs
         id: verifyDocs
         working-directory: ./packages/mermaid

.github/workflows/pr-labeler-config-validator.yml

@@ -1,23 +0,0 @@
-name: Validate PR Labeler Configuration
-on:
-  push:
-    paths:
-      - .github/workflows/pr-labeler-config-validator.yml
-      - .github/workflows/pr-labeler.yml
-      - .github/pr-labeler.yml
-  pull_request:
-    paths:
-      - .github/workflows/pr-labeler-config-validator.yml
-      - .github/workflows/pr-labeler.yml
-      - .github/pr-labeler.yml
-
-jobs:
-  pr-labeler:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout Repository
-        uses: actions/checkout@v3
-      - name: Validate Configuration
-        uses: Yash-Singh1/pr-labeler-config-validator@releases/v0.0.3
-        with:
-          configuration-path: .github/pr-labeler.yml

.github/workflows/pr-labeler.yml

@@ -1,13 +1,31 @@
 name: Apply labels to PR
 on:
   pull_request_target:
-    types: [opened]
+    # required for pr-labeler to support PRs from forks
+    # ===================== ⛔ ☢️ 🚫 ⚠️ Warning ⚠️ 🚫 ☢️ ⛔ =======================
+    # Be very careful what you put in this GitHub Action workflow file to avoid
+    # malicious PRs from getting access to the Mermaid-js repo.
+    #
+    # Please read the following first before reviewing/merging:
+    # - https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows#pull_request_target
+    # - https://securitylab.github.com/research/github-actions-preventing-pwn-requests/
+    types: [opened, reopened, synchronize]
+
+permissions:
+  contents: read
 
 jobs:
   pr-labeler:
     runs-on: ubuntu-latest
+    permissions:
+      contents: read # read permission is required to read config file
+      pull-requests: write # write permission is required to label PRs
     steps:
       - name: Label PR
-        uses: TimonVS/pr-labeler-action@v4
+        uses: release-drafter/release-drafter@v5
+        with:
+          config-name: pr-labeler.yml
+          disable-autolabeler: false
+          disable-releaser: true
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/publish-docs.yml

@@ -23,12 +23,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - uses: pnpm/action-setup@v2
 
       - name: Setup Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           cache: pnpm
           node-version: 18

.github/workflows/release-draft.yml

@@ -3,13 +3,21 @@ name: Draft Release
 on:
   push:
     branches:
-      - develop
+      - master
+
+permissions:
+  contents: read
 
 jobs:
   draft-release:
     runs-on: ubuntu-latest
+    permissions:
+      contents: write # write permission is required to create a github release
+      pull-requests: read # required to read PR titles/labels
     steps:
       - name: Draft Release
-        uses: toolmantim/release-drafter@v5
+        uses: release-drafter/release-drafter@v5
+        with:
+          disable-autolabeler: true
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

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

@@ -9,14 +9,14 @@ jobs:
   publish-preview:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
       - uses: pnpm/action-setup@v2
 
       - name: Setup Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           cache: pnpm
           node-version: 18.x

.github/workflows/release-publish.yml

@@ -8,14 +8,14 @@ jobs:
   publish:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: fregante/setup-git-user@v2
 
       - uses: pnpm/action-setup@v2
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js v18
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           cache: pnpm
           node-version: 18.x

.github/workflows/test.yml

@@ -12,13 +12,13 @@ jobs:
       matrix:
         node-version: [18.x]
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - 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
+        uses: actions/setup-node@v4
         with:
           cache: pnpm
           node-version: ${{ matrix.node-version }}

.github/workflows/update-browserlist.yml

@@ -8,11 +8,18 @@ jobs:
   update-browser-list:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - run: npx browserslist@latest --update-db
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v2
+      - run: npx update-browserslist-db@latest
       - name: Commit changes
         uses: EndBug/add-and-commit@v9
         with:
           author_name: ${{ github.actor }}
           author_email: ${{ github.actor }}@users.noreply.github.com
           message: 'chore: update browsers list'
+          push: false
+      - name: Create Pull Request
+        uses: peter-evans/create-pull-request@v5
+        with:
+          branch: update-browserslist
+          title: Update Browserslist

.gitignore

@@ -43,3 +43,7 @@ stats/
 **/contributor-names.json
 .pnpm-store
 .nyc_output
+
+demos/dev/**
+!/demos/dev/example.html
+tsx-0/**

.lintstagedrc.mjs

@@ -6,6 +6,6 @@ export default {
     // https://prettier.io/docs/en/cli.html#--cache
     'prettier --write',
   ],
-  'cSpell.json': ['ts-node-esm scripts/fixCSpell.ts'],
+  'cSpell.json': ['tsx scripts/fixCSpell.ts'],
   '**/*.jison': ['pnpm -w run lint:jison'],
 };

.lycheeignore

@@ -1,17 +0,0 @@
-# These links are ignored by our link checker https://github.com/lycheeverse/lychee
-# The file allows you to list multiple regular expressions for exclusion (one pattern per line).
-
-# Network error: Forbidden
-https://codepen.io
-
-# Timeout error, maybe Twitter has anti-bot defenses against GitHub's CI servers?
-https://twitter.com/mermaidjs_
-
-# Don't check files that are generated during the build via `pnpm docs:code`
-packages/mermaid/src/docs/config/setup/*
-
-# Ignore localhost
-http://localhost:3333/
-
-# Ignore slack invite
-https://join.slack.com/

.npmrc

@@ -1,2 +1,3 @@
+registry=https://registry.npmjs.org
 auto-install-peers=true
 strict-peer-dependencies=false

.prettierignore

@@ -10,3 +10,6 @@ stats
 .nyc_output
 # Autogenerated by `pnpm run --filter mermaid types:build-config`
 packages/mermaid/src/config.type.ts
+# Ignore the files creates in /demos/dev except for example.html
+demos/dev/**
+!/demos/dev/example.html

.vite/build.ts

@@ -117,6 +117,9 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
         output,
       },
     },
+    define: {
+      'import.meta.vitest': 'undefined',
+    },
     resolve: {
       extensions: [],
     },

.vite/jsonSchemaPlugin.ts

@@ -18,6 +18,7 @@ const MERMAID_CONFIG_DIAGRAM_KEYS = [
   'er',
   'pie',
   'quadrantChart',
+  'xyChart',
   'requirement',
   'mindmap',
   'timeline',

.vscode/launch.json

@@ -18,7 +18,8 @@
       "type": "node",
       "request": "launch",
       "args": ["scripts/docs.cli.mts"],
-      "runtimeArgs": ["--loader", "ts-node/esm"],
+      // we'll need to change this to --import in Node.JS v20.6.0 and up
+      "runtimeArgs": ["--loader", "tsx/esm"],
       "cwd": "${workspaceRoot}/packages/mermaid",
       "skipFiles": ["<node_internals>/**", "**/node_modules/**"],
       "smartStep": true,

CHANGELOG.md

@@ -68,7 +68,7 @@ try {
 
 ### Init deprecated and InitThrowsErrors removed
 
-The config passed to `init` was not being used eariler.
+The config passed to `init` was not being used earlier.
 It will now be used.
 The `init` function is deprecated and will be removed in the next major release.
 init currently works as a wrapper to `initialize` and `run`.
@@ -195,7 +195,7 @@ mermaid.run({
 - "Cannot activate" in sequenceDiagram [\#647](https://github.com/knsv/mermaid/issues/647)
 - Link \("click" statement\) in flowchart does not work in exported SVG [\#646](https://github.com/knsv/mermaid/issues/646)
 - How to pass styling [\#639](https://github.com/knsv/mermaid/issues/639)
-- The live editor cant show seq diagram with notes for 8.0.0-alpha.3 [\#638](https://github.com/knsv/mermaid/issues/638)
+- The live editor can't show seq diagram with notes for 8.0.0-alpha.3 [\#638](https://github.com/knsv/mermaid/issues/638)
 - import mermaid.css with ES6 + NPM [\#634](https://github.com/knsv/mermaid/issues/634)
 - Actor line cuts through other elements [\#633](https://github.com/knsv/mermaid/issues/633)
 - Graph TD line out of the picture \(left side\) [\#630](https://github.com/knsv/mermaid/issues/630)
@@ -504,7 +504,7 @@ mermaid.run({
 
 - Docs css: code hard to read [\#324](https://github.com/knsv/mermaid/issues/324)
 - About Markpad integration [\#323](https://github.com/knsv/mermaid/issues/323)
-- How to link backwords in flowchat? [\#321](https://github.com/knsv/mermaid/issues/321)
+- How to link backwards in flowchat? [\#321](https://github.com/knsv/mermaid/issues/321)
 - Help with editor [\#310](https://github.com/knsv/mermaid/issues/310)
 - +1 [\#293](https://github.com/knsv/mermaid/issues/293)
 - Basic chart does not render on Chome, but does in Firefox [\#290](https://github.com/knsv/mermaid/issues/290)
@@ -619,7 +619,7 @@ mermaid.run({
 - render to png from the cli does not display the marker-end arrow heads [\#181](https://github.com/knsv/mermaid/issues/181)
 - Links in sequence diagrams [\#159](https://github.com/knsv/mermaid/issues/159)
 - comment characters `%%` cause parse error [\#141](https://github.com/knsv/mermaid/issues/141)
-- Add a reversed assymetric shape [\#124](https://github.com/knsv/mermaid/issues/124)
+- Add a reversed asymmetric shape [\#124](https://github.com/knsv/mermaid/issues/124)
 - Add syntax for double headed arrows [\#123](https://github.com/knsv/mermaid/issues/123)
 - Support for font-awesome [\#49](https://github.com/knsv/mermaid/issues/49)
 
@@ -659,7 +659,7 @@ mermaid.run({
 - Auto linewrap for notes in sequence diagrams [\#178](https://github.com/knsv/mermaid/issues/178)
 - Execute code after initialize [\#176](https://github.com/knsv/mermaid/issues/176)
 - Autoscaling for all diagram types [\#175](https://github.com/knsv/mermaid/issues/175)
-- Problem wit click event callback [\#174](https://github.com/knsv/mermaid/issues/174)
+- Problem with click event callback [\#174](https://github.com/knsv/mermaid/issues/174)
 - How to escape characters? [\#170](https://github.com/knsv/mermaid/issues/170)
 - it can not work [\#167](https://github.com/knsv/mermaid/issues/167)
 - UML Class diagram [\#154](https://github.com/knsv/mermaid/issues/154)
@@ -762,7 +762,7 @@ mermaid.run({
 - subgraph background is black in rendered flowchart PNG via CLI [\#121](https://github.com/knsv/mermaid/issues/121)
 - Integrate editor at https://github.com/naseer/mermaid-webapp [\#110](https://github.com/knsv/mermaid/issues/110)
 - Internet Explorer Support [\#99](https://github.com/knsv/mermaid/issues/99)
-- Assymetric shapes not documented [\#82](https://github.com/knsv/mermaid/issues/82)
+- Asymmetric shapes not documented [\#82](https://github.com/knsv/mermaid/issues/82)
 - NoModificationAllowedError [\#23](https://github.com/knsv/mermaid/issues/23)
 - Improve arrows [\#3](https://github.com/knsv/mermaid/issues/3)
 
@@ -908,7 +908,7 @@ mermaid.run({
 
 - Question marks don't render properly with /dist/mermaid.full.min.js [\#30](https://github.com/knsv/mermaid/issues/30)
 - Error with some characters [\#25](https://github.com/knsv/mermaid/issues/25)
-- Provide parse function in browser widthout `require`? [\#21](https://github.com/knsv/mermaid/issues/21)
+- Provide parse function in browser without `require`? [\#21](https://github.com/knsv/mermaid/issues/21)
 - Better label text support [\#18](https://github.com/knsv/mermaid/issues/18)
 - Cap-cased words break parser [\#8](https://github.com/knsv/mermaid/issues/8)
 

CODE_OF_CONDUCT.md

@@ -59,8 +59,8 @@ 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
-.
+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

CONTRIBUTING.md

@@ -1,71 +0,0 @@
-# Contributing
-
-Please read in detail about how to contribute documentation and code on the [Mermaid documentation site.](https://mermaid-js.github.io/mermaid/#/development)
-
----
-
-# Mermaid contribution cheat-sheet
-
-## 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
-
-If you don't have direct access to push to mermaid repositories, make a fork first. Then clone. Or clone directly from mermaid-js:
-
-```bash
-git clone git@github.com:mermaid-js/mermaid.git
-cd mermaid
-```
-
-Install required packages:
-
-```bash
-# npx is required for first install as volta support for pnpm is not added yet.
-npx pnpm install
-pnpm test
-```
-
-### Docker
-
-If you are using docker and docker-compose, you have self-documented `run` bash script, which is a convenient alias for docker-compose commands:
-
-```bash
-./run install # npx pnpm install
-./run test # pnpm test
-```
-
-## Testing
-
-```bash
-# Run unit test
-pnpm test
-# Run unit test in watch mode
-pnpm test:watch
-# Run E2E test
-pnpm e2e
-# Debug E2E tests
-pnpm dev
-pnpm cypress:open # in another terminal
-```
-
-## Branch name format:
-
-```text
-   [feature | bug | chore | docs]/[issue number]_[short description using dashes ('-') or underscores ('_') instead of spaces]
-```
-
-eg: `feature/2945_state-diagram-new-arrow-florbs`, `bug/1123_fix_random_ugly_red_text`
-
-## Documentation
-
-Documentation is necessary for all non bugfix/refactoring changes.
-
-Only make changes to files are in [`/packages/mermaid/src/docs`](packages/mermaid/src/docs)
-
-**_DO NOT CHANGE FILES IN `/docs`_**
-
-[Join our slack community if you want closer contact!](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)

CONTRIBUTING.md

@@ -0,0 +1 @@
+./packages/mermaid/src/docs/community/contributing.md

Dockerfile

@@ -0,0 +1,2 @@
+FROM node:18.19.0-alpine3.18 AS base
+RUN wget -qO- https://get.pnpm.io/install.sh | ENV="$HOME/.shrc" SHELL="$(which sh)" sh -

README.md

@@ -20,6 +20,9 @@ Generate diagrams from markdown-like text.
 <p align="center">
 <a href="./README.zh-CN.md">简体中文</a>
 </p>
+<p align="center">
+Try Live Editor previews of future releases: <a href="https://develop.git.mermaid.live/" title="Try the mermaid version from the develop branch.">Develop</a> | <a href="https://next.git.mermaid.live/" title="Try the mermaid version from the next branch.">Next</a>
+</p>
 
 <br>
 <br>
@@ -31,7 +34,7 @@ Generate diagrams from markdown-like text.
 [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid)
 [![NPM Downloads](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid)
 [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
-[![Twitter Follow](https://img.shields.io/badge/Social-mermaidjs__-blue?style=social&logo=twitter)](https://twitter.com/mermaidjs_)
+[![Twitter Follow](https://img.shields.io/badge/Social-mermaidjs__-blue?style=social&logo=X)](https://twitter.com/mermaidjs_)
 
 <img src="./img/header.png" alt="" />
 
@@ -41,6 +44,22 @@ Generate diagrams from markdown-like text.
 
 <a href="https://mermaid-js.github.io/mermaid/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/intro/img/book-banner-post-release.jpg" alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a>
 
+## Table of content
+
+<details>
+<summary>Expand contents</summary>
+
+- [About](#about)
+- [Examples](#examples)
+- [Release](#release)
+- [Related projects](#related-projects)
+- [Contributors](#contributors)
+- [Security and safe diagrams](#security-and-safe-diagrams)
+- [Reporting vulnerabilities](#reporting-vulnerabilities)
+- [Appreciation](#appreciation)
+
+</details>
+
 ## About
 
 <!-- <Main description>   -->
@@ -55,12 +74,12 @@ Mermaid addresses this problem by enabling users to create easily modifiable dia
 <br/>
 
 Mermaid allows even non-programmers to easily create detailed diagrams through the [Mermaid Live Editor](https://mermaid.live/).<br/>
-[Tutorials](./docs/config/Tutorials.md) has video tutorials.
-Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/ecosystem/integrations.md).
+For video tutorials, visit our [Tutorials](./docs/ecosystem/tutorials.md) page.
+Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/ecosystem/integrations-community.md).
 
-You can also use Mermaid within [GitHub](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) as well many of your other favorite applications—check out the list of [Integrations and Usages of Mermaid](./docs/ecosystem/integrations.md).
+You can also use Mermaid within [GitHub](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) as well many of your other favorite applications—check out the list of [Integrations and Usages of Mermaid](./docs/ecosystem/integrations-community.md).
 
-For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./docs/community/n00b-overview.md), [Usage](./docs/config/usage.md) and [Tutorials](./docs/config/Tutorials.md).
+For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./docs/intro/getting-started.md), [Usage](./docs/config/usage.md) and [Tutorials](./docs/ecosystem/tutorials.md).
 
 In our release process we rely heavily on visual regression tests using [applitools](https://applitools.com/). Applitools is a great service which has been easy to use and integrate with our tests.
 
@@ -165,13 +184,7 @@ class Class10 {
   int id
   size()
 }
-namespace Namespace01 {
-  class Class11
-  class Class12 {
-    int id
-    size()
-  }
-}
+
 ```
 
 ```mermaid
@@ -191,13 +204,7 @@ class Class10 {
   int id
   size()
 }
-namespace Namespace01 {
-  class Class11
-  class Class12 {
-    int id
-    size()
-  }
-}
+
 ```
 
 ### State diagram [<a href="https://mermaid-js.github.io/mermaid/#/stateDiagram">docs</a> - <a href="https://mermaid.live/edit#pako:eNpdkEFvgzAMhf8K8nEqpYSNthx22Xbcqcexg0sCiZQQlDhIFeK_L8A6TfXp6fOz9ewJGssFVOAJSbwr7ByadGR1n8T6evpO0vQ1uZDSekOrXGFsPqJPO6q-2-imH8f_0TeHXm50lfelsAMjnEHFY6xpMdRAUhhRQxUlFy0GTTXU_RytYeAx-AdXZB1ULWovdoCB7OXWN1CRC-Ju-r3uz6UtchGHJqDbsPygU57iysb2reoWHpyOWBINvsqypb3vFMlw3TfWZF5xiY7keC6zkpUnZIUojwW-FAVvrvn51LLnvOXHQ84Q5nn-AVtLcwk">live editor</a>]

README.zh-CN.md

@@ -12,7 +12,7 @@ Mermaid
 <p>
 
 <p align="center">
-<a href="https://mermaid.live/"><b>Live Editor!</b></a>
+<a href="https://mermaid.live/"><b>实时编辑器!</b></a>
 </p>
 <p align="center">
  <a href="https://mermaid.js.org">📖 文档</a> | <a href="https://mermaid.js.org/intro/">🚀 入门</a> | <a href="https://www.jsdelivr.com/package/npm/mermaid">🌐 CDN</a> | <a href="https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE" title="Slack invite">🙌 加入我们</a>
@@ -21,6 +21,10 @@ Mermaid
 <a href="./README.md">English</a>
 </p>
 
+<p align="center">
+尝试未来版本的实时编辑器预览: <a href="https://develop.git.mermaid.live/" title="尝试来自develop分支的mermaid版本。">Develop</a> | <a href="https://next.git.mermaid.live/" title="尝试来自next分支的mermaid版本。">Next</a>
+</p>
+
 <br>
 <br>
 
@@ -31,7 +35,7 @@ Mermaid
 [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid)
 [![NPM Downloads](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid)
 [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
-[![Twitter Follow](https://img.shields.io/badge/Social-mermaidjs__-blue?style=social&logo=twitter)](https://twitter.com/mermaidjs_)
+[![Twitter Follow](https://img.shields.io/badge/Social-mermaidjs__-blue?style=social&logo=X)](https://twitter.com/mermaidjs_)
 
 <img src="./img/header.png" alt="" />
 
@@ -53,9 +57,9 @@ Mermaid 是一个基于 Javascript 的图表绘制工具，通过解析类 Markd
 Mermaid 通过允许用户创建便于修改的图表来解决这一难题，它也可以作为生产脚本（或其他代码）的一部分。<br/>
 <br/>
 Mermaid 甚至能让非程序员也能通过 [Mermaid Live Editor](https://mermaid.live/) 轻松创建详细的图表。<br/>
-你可以访问 [教程](./docs/config/Tutorials.md) 来查看 Live Editor 的视频教程，也可以查看 [Mermaid 的集成和使用](./docs/ecosystem/integrations.md) 这个清单来检查你的文档工具是否已经集成了 Mermaid 支持。
+你可以访问 [教程](./docs/ecosystem/tutorials.md) 来查看 Live Editor 的视频教程，也可以查看 [Mermaid 的集成和使用](./docs/ecosystem/integrations-community.md) 这个清单来检查你的文档工具是否已经集成了 Mermaid 支持。
 
-如果想要查看关于 Mermaid 更详细的介绍及基础使用方式，可以查看 [入门指引](./docs/community/n00b-overview.md), [用法](./docs/config/usage.md) 和 [教程](./docs/config/Tutorials.md).
+如果想要查看关于 Mermaid 更详细的介绍及基础使用方式，可以查看 [入门指引](./docs/intro/getting-started.md), [用法](./docs/config/usage.md) 和 [教程](./docs/ecosystem/tutorials.md).
 
 <!-- </Main description> -->
 

__mocks__/pieRenderer.js

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

__mocks__/pieRenderer.ts

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

cSpell.json

@@ -22,9 +22,11 @@
     "brkt",
     "brolin",
     "brotli",
+    "catmull",
     "città",
     "classdef",
     "codedoc",
+    "codemia",
     "colour",
     "commitlint",
     "cpettitt",
@@ -38,12 +40,16 @@
     "docsy",
     "doku",
     "dompurify",
+    "dont",
+    "doublecircle",
     "edgechromium",
+    "elems",
     "elkjs",
     "elle",
     "faber",
     "flatmap",
     "foswiki",
+    "frontmatter",
     "ftplugin",
     "gantt",
     "gitea",
@@ -91,10 +97,12 @@
     "nextra",
     "nikolay",
     "nirname",
+    "npmjs",
     "orlandoni",
     "pathe",
     "pbrolin",
     "phpbb",
+    "pixelmatch",
     "plantuml",
     "playfair",
     "pnpm",
@@ -106,6 +114,7 @@
     "rects",
     "reda",
     "redmine",
+    "regexes",
     "rehype",
     "roledescription",
     "rozhkov",
@@ -116,6 +125,7 @@
     "sidharth",
     "sidharthv",
     "sphinxcontrib",
+    "ssim",
     "startx",
     "starty",
     "statediagram",
@@ -149,9 +159,11 @@
     "vitepress",
     "vueuse",
     "xlink",
+    "xychart",
     "yash",
     "yokozuna",
-    "zenuml"
+    "zenuml",
+    "zune"
   ],
   "patterns": [
     { "name": "Markdown links", "pattern": "\\((.*)\\)", "description": "" },

cypress.config.cjs

@@ -6,10 +6,18 @@ const coverage = require('@cypress/code-coverage/task');
 
 module.exports = defineConfig({
   projectId: 'n2sma2',
+  viewportWidth: 1440,
+  viewportHeight: 1024,
   e2e: {
-    specPattern: 'cypress/integration/**/*.{js,jsx,ts,tsx}',
+    specPattern: 'cypress/integration/**/*.{js,ts}',
     setupNodeEvents(on, config) {
       coverage(on, config);
+      on('before:browser:launch', (browser = {}, launchOptions) => {
+        if (browser.name === 'chrome' && browser.isHeadless) {
+          launchOptions.args.push('--window-size=1440,1024', '--force-device-scale-factor=1');
+        }
+        return launchOptions;
+      });
       addMatchImageSnapshotPlugin(on, config);
       // copy any needed variables from process.env to config.env
       config.env.useAppli = process.env.USE_APPLI ? true : false;

cypress/helpers/util.ts

@@ -10,7 +10,7 @@ interface CypressConfig {
 type CypressMermaidConfig = MermaidConfig & CypressConfig;
 
 interface CodeObject {
-  code: string;
+  code: string | string[];
   mermaid: CypressMermaidConfig;
 }
 
@@ -18,10 +18,14 @@ const utf8ToB64 = (str: string): string => {
   return Buffer.from(decodeURIComponent(encodeURIComponent(str))).toString('base64');
 };
 
-const batchId: string = 'mermaid-batch-' + Cypress.env('CYPRESS_COMMIT') || Date.now().toString();
+const batchId: string =
+  'mermaid-batch-' +
+  (Cypress.env('useAppli')
+    ? Date.now().toString()
+    : Cypress.env('CYPRESS_COMMIT') || Date.now().toString());
 
 export const mermaidUrl = (
-  graphStr: string,
+  graphStr: string | string[],
   options: CypressMermaidConfig,
   api: boolean
 ): string => {
@@ -48,29 +52,21 @@ export const imgSnapshotTest = (
   api = false,
   validation?: any
 ): void => {
-  cy.log(JSON.stringify(_options));
-  const options: CypressMermaidConfig = Object.assign(_options);
-  if (!options.fontFamily) {
-    options.fontFamily = 'courier';
-  }
-  if (!options.sequence) {
-    options.sequence = {};
-  }
-  if (!options.sequence || (options.sequence && !options.sequence.actorFontFamily)) {
-    options.sequence.actorFontFamily = 'courier';
-  }
-  if (options.sequence && !options.sequence.noteFontFamily) {
-    options.sequence.noteFontFamily = 'courier';
-  }
-  options.sequence.actorFontFamily = 'courier';
-  options.sequence.noteFontFamily = 'courier';
-  options.sequence.messageFontFamily = 'courier';
-  if (options.sequence && !options.sequence.actorFontFamily) {
-    options.sequence.actorFontFamily = 'courier';
-  }
-  if (!options.fontSize) {
-    options.fontSize = 16;
-  }
+  const options: CypressMermaidConfig = {
+    ..._options,
+    fontFamily: _options.fontFamily || 'courier',
+    // @ts-ignore TODO: Fix type of fontSize
+    fontSize: _options.fontSize || '16px',
+    sequence: {
+      ...(_options.sequence || {}),
+      actorFontFamily: 'courier',
+      noteFontFamily:
+        _options.sequence && _options.sequence.noteFontFamily
+          ? _options.sequence.noteFontFamily
+          : 'courier',
+      messageFontFamily: 'courier',
+    },
+  };
 
   const url: string = mermaidUrl(graphStr, options, api);
   openURLAndVerifyRendering(url, options, validation);
@@ -78,16 +74,15 @@ export const imgSnapshotTest = (
 
 export const urlSnapshotTest = (
   url: string,
-  _options: CypressMermaidConfig,
+  options: CypressMermaidConfig,
   _api = false,
   validation?: any
 ): void => {
-  const options: CypressMermaidConfig = Object.assign(_options);
   openURLAndVerifyRendering(url, options, validation);
 };
 
 export const renderGraph = (
-  graphStr: string,
+  graphStr: string | string[],
   options: CypressMermaidConfig = {},
   api = false
 ): void => {

cypress/integration/other/configuration.spec.js

@@ -117,7 +117,6 @@ describe('Configuration', () => {
     });
     it('should not taint the initial configuration when using multiple directives', () => {
       const url = 'http://localhost:9000/regression/issue-1874.html';
-      cy.viewport(1440, 1024);
       cy.visit(url);
 
       cy.get('svg');

cypress/integration/other/rerender.spec.js

@@ -1,14 +1,12 @@
 describe('Rerendering', () => {
   it('should be able to render after an error has occurred', () => {
     const url = 'http://localhost:9000/render-after-error.html';
-    cy.viewport(1440, 1024);
     cy.visit(url);
     cy.get('#graphDiv').should('exist');
   });
 
   it('should be able to render and rerender a graph via API', () => {
     const url = 'http://localhost:9000/rerender.html';
-    cy.viewport(1440, 1024);
     cy.visit(url);
     cy.get('#graph [id^=flowchart-A]').should('have.text', 'XMas');
 

cypress/integration/other/xss.spec.js

@@ -132,4 +132,9 @@ describe('XSS', () => {
     cy.wait(1000);
     cy.get('#the-malware').should('not.exist');
   });
+  it('should sanitize backticks in class names properly', () => {
+    cy.visit('http://localhost:9000/xss24.html');
+    cy.wait(1000);
+    cy.get('#the-malware').should('not.exist');
+  });
 });

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

@@ -386,30 +386,6 @@ describe('Class diagram V2', () => {
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
   });
-
-  it('18: should handle the direction statement with LR', () => {
-    imgSnapshotTest(
-      `
-      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
-
-      `,
-      { logLevel: 1, flowchart: { htmlLabels: false } }
-    );
-  });
   it('17a: should handle the direction statement with BT', () => {
     imgSnapshotTest(
       `
@@ -457,7 +433,31 @@ describe('Class diagram V2', () => {
     );
   });
 
-  it('18: should render a simple class diagram with notes', () => {
+  it('18a: should handle the direction statement with LR', () => {
+    imgSnapshotTest(
+      `
+      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
+
+      `,
+      { logLevel: 1, flowchart: { htmlLabels: false } }
+    );
+  });
+
+  it('18b: should render a simple class diagram with notes', () => {
     imgSnapshotTest(
       `
       classDiagram-v2
@@ -562,4 +562,23 @@ class C13["With Città foreign language"]
       `
     );
   });
+  it('should render a simple class diagram with no members', () => {
+    imgSnapshotTest(
+      `
+      classDiagram-v2
+        class Class10
+        `,
+      { logLevel: 1, flowchart: { htmlLabels: false } }
+    );
+  });
+  it('should render a simple class diagram with style definition', () => {
+    imgSnapshotTest(
+      `
+      classDiagram-v2
+        class Class10
+        style Class10 fill:#f9f,stroke:#333,stroke-width:4px
+        `,
+      { logLevel: 1, flowchart: { htmlLabels: false } }
+    );
+  });
 });

cypress/integration/rendering/classDiagram.spec.js

@@ -501,4 +501,16 @@ describe('Class diagram', () => {
         B : -methods()
       `);
   });
+
+  it('should handle notes with anchor tag having target attribute', () => {
+    renderGraph(
+      `classDiagram
+        class test { }
+        note for test "<a href='https://mermaid.js.org/' target="_blank"><code>note about mermaid</code></a>"`
+    );
+
+    cy.get('svg').then((svg) => {
+      cy.get('a').should('have.attr', 'target', '_blank').should('have.attr', 'rel', 'noopener');
+    });
+  });
 });

cypress/integration/rendering/conf-and-directives.spec.js

@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util.ts';
+import { imgSnapshotTest, urlSnapshotTest } from '../../helpers/util.ts';
 
 describe('Configuration and directives - nodes should be light blue', () => {
   it('No config - use default', () => {
@@ -14,7 +14,6 @@ describe('Configuration and directives - nodes should be light blue', () => {
         `,
       {}
     );
-    cy.get('svg');
   });
   it('Settings from initialize - nodes should be green', () => {
     imgSnapshotTest(
@@ -28,7 +27,6 @@ graph TD
           end          `,
       { theme: 'forest' }
     );
-    cy.get('svg');
   });
   it('Settings from initialize overriding themeVariable - nodes should be red', () => {
     imgSnapshotTest(
@@ -46,7 +44,6 @@ graph TD
         `,
       { theme: 'base', themeVariables: { primaryColor: '#ff0000' }, logLevel: 0 }
     );
-    cy.get('svg');
   });
   it('Settings from directive - nodes should be grey', () => {
     imgSnapshotTest(
@@ -62,7 +59,24 @@ graph TD
         `,
       {}
     );
-    cy.get('svg');
+  });
+  it('Settings from frontmatter - nodes should be grey', () => {
+    imgSnapshotTest(
+      `
+---
+config:
+  theme: neutral
+---
+graph TD
+          A(Start) --> B[/Another/]
+          A[/Another/] --> C[End]
+          subgraph section
+            B
+            C
+          end
+        `,
+      {}
+    );
   });
 
   it('Settings from directive overriding theme variable - nodes should be red', () => {
@@ -79,7 +93,6 @@ graph TD
         `,
       {}
     );
-    cy.get('svg');
   });
   it('Settings from initialize and directive - nodes should be grey', () => {
     imgSnapshotTest(
@@ -95,7 +108,6 @@ graph TD
         `,
       { theme: 'forest' }
     );
-    cy.get('svg');
   });
   it('Theme from initialize, directive overriding theme variable - nodes should be red', () => {
     imgSnapshotTest(
@@ -111,8 +123,71 @@ graph TD
         `,
       { theme: 'base' }
     );
-    cy.get('svg');
   });
+  it('Theme from initialize, frontmatter overriding theme variable - nodes should be red', () => {
+    imgSnapshotTest(
+      `
+---
+config:
+  theme: base
+  themeVariables:
+    primaryColor: '#ff0000'
+---
+graph TD
+          A(Start) --> B[/Another/]
+          A[/Another/] --> C[End]
+          subgraph section
+            B
+            C
+          end
+        `,
+      { theme: 'forest' }
+    );
+  });
+  it('Theme from initialize, frontmatter overriding theme variable, directive overriding primaryColor - nodes should be red', () => {
+    imgSnapshotTest(
+      `
+---
+config:
+  theme: base
+  themeVariables:
+    primaryColor: '#00ff00'
+---
+%%{init: {'theme': 'base', 'themeVariables':{ 'primaryColor': '#ff0000'}}}%%
+graph TD
+          A(Start) --> B[/Another/]
+          A[/Another/] --> C[End]
+          subgraph section
+            B
+            C
+          end
+        `,
+      { theme: 'forest' }
+    );
+  });
+
+  it('should render if values are not quoted properly', () => {
+    // #ff0000 is not quoted properly, and will evaluate to null.
+    // This test ensures that the rendering still works.
+    imgSnapshotTest(
+      `---
+config:
+  theme: base
+  themeVariables:
+    primaryColor: #ff0000
+---
+graph TD
+          A(Start) --> B[/Another/]
+          A[/Another/] --> C[End]
+          subgraph section
+            B
+            C
+          end
+        `,
+      { theme: 'forest' }
+    );
+  });
+
   it('Theme variable from initialize, theme from directive - nodes should be red', () => {
     imgSnapshotTest(
       `
@@ -127,14 +202,11 @@ graph TD
         `,
       { themeVariables: { primaryColor: '#ff0000' } }
     );
-    cy.get('svg');
   });
   describe('when rendering several diagrams', () => {
     it('diagrams should not taint later diagrams', () => {
       const url = 'http://localhost:9000/theme-directives.html';
-      cy.visit(url);
-      cy.get('svg');
-      cy.matchImageSnapshot('conf-and-directives.spec-when-rendering-several-diagrams-diagram-1');
+      urlSnapshotTest(url, {});
     });
   });
 });

cypress/integration/rendering/debug.spec.js

@@ -1,12 +0,0 @@
-import { imgSnapshotTest } from '../../helpers/util.ts';
-
-describe('Flowchart', () => {
-  it('34: testing the label width in percy', () => {
-    imgSnapshotTest(
-      `graph TD
-      A[Christmas]
-      `,
-      { theme: 'forest', fontFamily: '"Noto Sans SC", sans-serif' }
-    );
-  });
-});

cypress/integration/rendering/erDiagram.spec.js

@@ -305,4 +305,21 @@ ORDER ||--|{ LINE-ITEM : contains
       {}
     );
   });
+
+  it('should render entities with entity name aliases', () => {
+    imgSnapshotTest(
+      `
+    erDiagram
+      p[Person] {
+        varchar(64) firstName
+        varchar(64) lastName
+      }
+      c["Customer Account"] {
+        varchar(128) email
+      }
+      p ||--o| c : has
+      `,
+      { logLevel: 1 }
+    );
+  });
 });

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

@@ -449,7 +449,7 @@ flowchart TD
       { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
-  it('65: text-color from classes', () => {
+  it('65-1: text-color from classes', () => {
     imgSnapshotTest(
       `
       flowchart LR
@@ -460,6 +460,31 @@ flowchart TD
       { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
+  it('65-2: bold text from classes', () => {
+    imgSnapshotTest(
+      `
+      flowchart
+        classDef cat fill:#f9d5e5, stroke:#233d4d,stroke-width:2px, font-weight:bold;
+        CS(A long bold text to be viewed):::cat
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('65-3: bigger font from classes', () => {
+    imgSnapshotTest(
+      `
+flowchart
+  Node1:::class1 --> Node2:::class2
+  Node1:::class1 --> Node3:::class2
+  Node3 --> Node4((I am a circle)):::larger
+
+  classDef class1 fill:lightblue
+  classDef class2 fill:pink
+  classDef larger font-size:30px,fill:yellow
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
   it('66: More nested subgraph cases (TB)', () => {
     imgSnapshotTest(
       `
@@ -704,6 +729,37 @@ A ~~~ B
       {}
     );
   });
+
+  it('5064: Should render when subgraph child has links to outside node and subgraph', () => {
+    imgSnapshotTest(
+      `flowchart TB
+    Out --> In
+    subgraph Sub
+      In
+    end
+    Sub --> In`
+    );
+  });
+
+  it('5059: Should render when subgraph contains only subgraphs, has link to outside and itself is part of a link', () => {
+    imgSnapshotTest(
+      `flowchart
+
+      subgraph Main
+        subgraph Child1
+          Node1
+          Node2
+        end
+        subgraph Child2
+          Node3
+          Node4
+        end
+      end
+      Main --> Out1
+      Child2 --> Out2`
+    );
+  });
+
   describe('Markdown strings flowchart (#4220)', () => {
     describe('html labels', () => {
       it('With styling and classes', () => {
@@ -849,4 +905,93 @@ end
       });
     });
   });
+  describe('Subgraph title margins', () => {
+    it('Should render subgraphs with title margins set (LR)', () => {
+      imgSnapshotTest(
+        `flowchart LR
+
+          subgraph TOP
+              direction TB
+              subgraph B1
+                  direction RL
+                  i1 -->f1
+              end
+              subgraph B2
+                  direction BT
+                  i2 -->f2
+              end
+          end
+          A --> TOP --> B
+          B1 --> B2
+        `,
+        { flowchart: { subGraphTitleMargin: { top: 10, bottom: 5 } } }
+      );
+    });
+    it('Should render subgraphs with title margins set (TD)', () => {
+      imgSnapshotTest(
+        `flowchart TD
+
+          subgraph TOP
+              direction LR
+              subgraph B1
+                  direction RL
+                  i1 -->f1
+              end
+              subgraph B2
+                  direction BT
+                  i2 -->f2
+              end
+          end
+          A --> TOP --> B
+          B1 --> B2
+        `,
+        { flowchart: { subGraphTitleMargin: { top: 8, bottom: 16 } } }
+      );
+    });
+    it('Should render subgraphs with title margins set (LR) and htmlLabels set to false', () => {
+      imgSnapshotTest(
+        `flowchart LR
+
+          subgraph TOP
+              direction TB
+              subgraph B1
+                  direction RL
+                  i1 -->f1
+              end
+              subgraph B2
+                  direction BT
+                  i2 -->f2
+              end
+          end
+          A --> TOP --> B
+          B1 --> B2
+        `,
+        {
+          htmlLabels: false,
+          flowchart: { htmlLabels: false, subGraphTitleMargin: { top: 10, bottom: 5 } },
+        }
+      );
+    });
+    it('Should render subgraphs with title margins and edge labels', () => {
+      imgSnapshotTest(
+        `flowchart LR
+
+          subgraph TOP
+              direction TB
+              subgraph B1
+                  direction RL
+                  i1 --lb1-->f1
+              end
+              subgraph B2
+                  direction BT
+                  i2 --lb2-->f2
+              end
+          end
+          A --lb3--> TOP --lb4--> B
+          B1 --lb5--> B2
+        `,
+        { flowchart: { subGraphTitleMargin: { top: 10, bottom: 5 } } }
+      );
+    });
+  });
 });

cypress/integration/rendering/flowchart.spec.js

@@ -891,4 +891,27 @@ graph TD
       { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
+  it('66: apply class called default on node called default', () => {
+    imgSnapshotTest(
+      `
+      graph TD
+        classDef default fill:#a34,stroke:#000,stroke-width:4px,color:#fff 
+        hello --> default
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+
+  it('67: should be able to style default node independently', () => {
+    imgSnapshotTest(
+      `
+    flowchart TD
+      classDef default fill:#a34
+      hello --> default
+
+      style default stroke:#000,stroke-width:4px
+    `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
 });

cypress/integration/rendering/gantt.spec.js

@@ -245,7 +245,10 @@ describe('Gantt diagram', () => {
       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(984 * 0.95, 984 * 1.05);
+      expect(maxWidthValue).to.be.within(
+        Cypress.config().viewportWidth * 0.95,
+        Cypress.config().viewportWidth * 1.05
+      );
     });
   });
 
@@ -285,11 +288,11 @@ describe('Gantt diagram', () => {
       { gantt: { useMaxWidth: false } }
     );
     cy.get('svg').should((svg) => {
-      // const height = parseFloat(svg.attr('height'));
       const width = parseFloat(svg.attr('width'));
-      // use within because the absolute value can be slightly different depending on the environment ±5%
-      // expect(height).to.be.within(484 * 0.95, 484 * 1.05);
-      expect(width).to.be.within(984 * 0.95, 984 * 1.05);
+      expect(width).to.be.within(
+        Cypress.config().viewportWidth * 0.95,
+        Cypress.config().viewportWidth * 1.05
+      );
       expect(svg).to.not.have.attr('style');
     });
   });
@@ -330,6 +333,48 @@ describe('Gantt diagram', () => {
     );
   });
 
+  it('should render a gantt diagram with tick is 2 milliseconds', () => {
+    imgSnapshotTest(
+      `
+      gantt
+        title A Gantt Diagram
+        dateFormat   SSS
+        axisFormat   %Lms
+        tickInterval 2millisecond
+        excludes     weekends
+
+        section Section
+        A task           : a1, 000, 6ms
+        Another task     : after a1, 6ms
+        section Another
+        Task in sec      : a2, 006, 3ms
+        another task     : 3ms
+      `,
+      {}
+    );
+  });
+
+  it('should render a gantt diagram with tick is 2 seconds', () => {
+    imgSnapshotTest(
+      `
+      gantt
+        title A Gantt Diagram
+        dateFormat   ss
+        axisFormat   %Ss
+        tickInterval 2second
+        excludes     weekends
+
+        section Section
+        A task           : a1, 00, 6s
+        Another task     : after a1, 6s
+        section Another
+        Task in sec      : 06, 3s
+        another task     : 3s
+      `,
+      {}
+    );
+  });
+
   it('should render a gantt diagram with tick is 15 minutes', () => {
     imgSnapshotTest(
       `
@@ -478,6 +523,32 @@ describe('Gantt diagram', () => {
     );
   });
 
+  // TODO: fix it
+  //
+  // This test is skipped deliberately
+  // because it fails and blocks our development pipeline
+  // It was added as an attempt to fix gantt performance issues
+  //
+  // https://github.com/mermaid-js/mermaid/issues/3274
+  //
+  it.skip('should render a gantt diagram with very large intervals, skipping excludes if interval > 5 years', () => {
+    imgSnapshotTest(
+      `gantt
+        title A long Gantt Diagram
+        dateFormat   YYYY-MM-DD
+        axisFormat   %m-%d
+        tickInterval 1day
+        excludes     weekends
+        section Section
+        A task           : a1, 9999-10-01, 30d
+        Another task     : after a1, 20d
+        section Another
+        Task in sec      : 2022-10-20, 12d
+        another task     : 24d
+      `
+    );
+  });
+
   it('should render when compact is true', () => {
     imgSnapshotTest(
       `

cypress/integration/rendering/gitGraph.spec.js

@@ -26,7 +26,7 @@ describe('Git Graph diagram', () => {
       `gitGraph
        commit id: "Normal Commit"
        commit id: "Reverse Commit" type: REVERSE
-       commit id: "Hightlight Commit" type: HIGHLIGHT
+       commit id: "Highlight Commit" type: HIGHLIGHT
       `,
       {}
     );
@@ -36,7 +36,7 @@ describe('Git Graph diagram', () => {
       `gitGraph
        commit id: "Normal Commit with tag" tag: "v1.0.0"
        commit id: "Reverse Commit with tag" type: REVERSE tag: "RC_1"
-       commit id: "Hightlight Commit" type: HIGHLIGHT  tag: "8.8.4"
+       commit id: "Highlight Commit" type: HIGHLIGHT  tag: "8.8.4"
       `,
       {}
     );
@@ -102,7 +102,7 @@ describe('Git Graph diagram', () => {
       {}
     );
   });
-  it('8: should render a simple gitgraph with more than 8 branchs &  overriding variables', () => {
+  it('8: should render a simple gitgraph with more than 8 branches &  overriding variables', () => {
     imgSnapshotTest(
       `%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
         'gitBranchLabel0': '#ffffff',
@@ -358,7 +358,7 @@ gitGraph
       `gitGraph TB:
        commit id: "Normal Commit"
        commit id: "Reverse Commit" type: REVERSE
-       commit id: "Hightlight Commit" type: HIGHLIGHT
+       commit id: "Highlight Commit" type: HIGHLIGHT
       `,
       {}
     );
@@ -368,7 +368,7 @@ gitGraph
       `gitGraph TB:
        commit id: "Normal Commit with tag" tag: "v1.0.0"
        commit id: "Reverse Commit with tag" type: REVERSE tag: "RC_1"
-       commit id: "Hightlight Commit" type: HIGHLIGHT  tag: "8.8.4"
+       commit id: "Highlight Commit" type: HIGHLIGHT  tag: "8.8.4"
       `,
       {}
     );
@@ -434,7 +434,7 @@ gitGraph
       {}
     );
   });
-  it('22: should render a simple gitgraph with more than 8 branchs &  overriding variables | Vertical Branch', () => {
+  it('22: should render a simple gitgraph with more than 8 branches &  overriding variables | Vertical Branch', () => {
     imgSnapshotTest(
       `%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
         'gitBranchLabel0': '#ffffff',
@@ -701,4 +701,246 @@ gitGraph TB:
       {}
     );
   });
+  it('34: should render a simple gitgraph with two branches from same commit', () => {
+    imgSnapshotTest(
+      `gitGraph
+      commit id:"1-abcdefg"
+      commit id:"2-abcdefg"
+      branch feature-001
+      commit id:"3-abcdefg"
+      commit id:"4-abcdefg"
+      checkout main
+      branch feature-002
+      commit id:"5-abcdefg"
+      checkout feature-001
+      merge feature-002
+      `,
+      {}
+    );
+  });
+  it('35: should render a simple gitgraph with two branches from same commit | Vertical Branch', () => {
+    imgSnapshotTest(
+      `gitGraph TB:
+      commit id:"1-abcdefg"
+      commit id:"2-abcdefg"
+      branch feature-001
+      commit id:"3-abcdefg"
+      commit id:"4-abcdefg"
+      checkout main
+      branch feature-002
+      commit id:"5-abcdefg"
+      checkout feature-001
+      merge feature-002
+      `,
+      {}
+    );
+  });
+  it('36: should render GitGraph with branch that is not used immediately', () => {
+    imgSnapshotTest(
+      `gitGraph LR:
+      commit id:"1-abcdefg"
+      branch x
+      checkout main
+      commit id:"2-abcdefg"
+      checkout x
+      commit id:"3-abcdefg"
+      checkout main
+      merge x
+      `,
+      {}
+    );
+  });
+  it('37: should render GitGraph with branch that is not used immediately | Vertical Branch', () => {
+    imgSnapshotTest(
+      `gitGraph TB:
+      commit id:"1-abcdefg"
+      branch x
+      checkout main
+      commit id:"2-abcdefg"
+      checkout x
+      commit id:"3-abcdefg"
+      checkout main
+      merge x
+      `,
+      {}
+    );
+  });
+  it('38: should render GitGraph with branch and sub-branch neither of which used immediately', () => {
+    imgSnapshotTest(
+      `gitGraph LR:
+      commit id:"1-abcdefg"
+      branch x
+      checkout main
+      commit id:"2-abcdefg"
+      checkout x
+      commit id:"3-abcdefg"
+      checkout main
+      merge x
+      checkout x
+      branch y
+      checkout x
+      commit id:"4-abcdefg"
+      checkout y
+      commit id:"5-abcdefg"
+      checkout x
+      merge y
+      `,
+      {}
+    );
+  });
+  it('39: should render GitGraph with branch and sub-branch neither of which used immediately | Vertical Branch', () => {
+    imgSnapshotTest(
+      `gitGraph TB:
+      commit id:"1-abcdefg"
+      branch x
+      checkout main
+      commit id:"2-abcdefg"
+      checkout x
+      commit id:"3-abcdefg"
+      checkout main
+      merge x
+      checkout x
+      branch y
+      checkout x
+      commit id:"4-abcdefg"
+      checkout y
+      commit id:"5-abcdefg"
+      checkout x
+      merge y
+      `,
+      {}
+    );
+  });
+  it('40: should render a simple gitgraph with cherry pick merge commit', () => {
+    imgSnapshotTest(
+      `gitGraph
+      commit id: "ZERO"
+      branch feature
+      branch release
+      checkout feature
+      commit id: "A"
+      commit id: "B"
+      checkout main
+      merge feature id: "M"
+      checkout release
+      cherry-pick id: "M" parent:"B"`
+    );
+  });
+  it('41: should render default GitGraph with parallelCommits set to false', () => {
+    imgSnapshotTest(
+      `gitGraph
+      commit id:"1-abcdefg"
+      commit id:"2-abcdefg"
+      branch develop
+      commit id:"3-abcdefg"
+      commit id:"4-abcdefg"
+      checkout main
+      branch feature
+      commit id:"5-abcdefg"
+      commit id:"6-abcdefg"
+      checkout main
+      commit id:"7-abcdefg"
+      commit id:"8-abcdefg"
+      `,
+      { gitGraph: { parallelCommits: false } }
+    );
+  });
+  it('42: should render GitGraph with parallel commits', () => {
+    imgSnapshotTest(
+      `gitGraph
+      commit id:"1-abcdefg"
+      commit id:"2-abcdefg"
+      branch develop
+      commit id:"3-abcdefg"
+      commit id:"4-abcdefg"
+      checkout main
+      branch feature
+      commit id:"5-abcdefg"
+      commit id:"6-abcdefg"
+      checkout main
+      commit id:"7-abcdefg"
+      commit id:"8-abcdefg"
+      `,
+      { gitGraph: { parallelCommits: true } }
+    );
+  });
+  it('43: should render GitGraph with parallel commits | Vertical Branch', () => {
+    imgSnapshotTest(
+      `gitGraph TB:
+      commit id:"1-abcdefg"
+      commit id:"2-abcdefg"
+      branch develop
+      commit id:"3-abcdefg"
+      commit id:"4-abcdefg"
+      checkout main
+      branch feature
+      commit id:"5-abcdefg"
+      commit id:"6-abcdefg"
+      checkout main
+      commit id:"7-abcdefg"
+      commit id:"8-abcdefg"
+      `,
+      { gitGraph: { parallelCommits: true } }
+    );
+  });
+  it('44: should render GitGraph with unconnected branches and no parallel commits', () => {
+    imgSnapshotTest(
+      `gitGraph
+      branch dev
+      branch v2
+      branch feat
+      commit id:"1-abcdefg"
+      commit id:"2-abcdefg"
+      checkout main
+      commit id:"3-abcdefg"
+      checkout dev
+      commit id:"4-abcdefg"
+      checkout v2
+      commit id:"5-abcdefg"
+      checkout main
+      commit id:"6-abcdefg"
+      `,
+      { gitGraph: { parallelCommits: false } }
+    );
+  });
+  it('45: should render GitGraph with unconnected branches and parallel commits', () => {
+    imgSnapshotTest(
+      `gitGraph
+      branch dev
+      branch v2
+      branch feat
+      commit id:"1-abcdefg"
+      commit id:"2-abcdefg"
+      checkout main
+      commit id:"3-abcdefg"
+      checkout dev
+      commit id:"4-abcdefg"
+      checkout v2
+      commit id:"5-abcdefg"
+      checkout main
+      commit id:"6-abcdefg"
+      `,
+      { gitGraph: { parallelCommits: true } }
+    );
+  });
+  it('46: should render GitGraph with unconnected branches and parallel commits | Vertical Branch', () => {
+    imgSnapshotTest(
+      `gitGraph TB:
+      branch dev
+      branch v2
+      branch feat
+      commit id:"1-abcdefg"
+      commit id:"2-abcdefg"
+      checkout main
+      commit id:"3-abcdefg"
+      checkout dev
+      commit id:"4-abcdefg"
+      checkout v2
+      commit id:"5-abcdefg"
+      checkout main
+      commit id:"6-abcdefg"
+      `,
+      { gitGraph: { parallelCommits: true } }
+    );
+  });
 });

cypress/integration/rendering/marker_unique_id.spec.js

@@ -0,0 +1,10 @@
+import { urlSnapshotTest } from '../../helpers/util.ts';
+
+describe('Marker Unique IDs Per Diagram', () => {
+  it('should render a blue arrow tip in second digram', () => {
+    urlSnapshotTest('http://localhost:9000/marker_unique_id.html', {
+      logLevel: 1,
+      flowchart: { htmlLabels: false },
+    });
+  });
+});

cypress/integration/rendering/pie.spec.ts

@@ -1,89 +1,85 @@
 import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
 
-describe('Pie Chart', () => {
+describe('pie chart', () => {
   it('should render a simple pie diagram', () => {
     imgSnapshotTest(
+      `pie title Sports in Sweden
+        "Bandy": 40
+        "Ice-Hockey": 80
+        "Football": 90
       `
-    pie title Sports in Sweden
-       "Bandy" : 40
-       "Ice-Hockey" : 80
-       "Football" : 90
-      `,
-      {}
     );
-    cy.get('svg');
   });
+
   it('should render a simple pie diagram with long labels', () => {
     imgSnapshotTest(
+      `pie title NETFLIX
+        "Time spent looking for movie": 90
+        "Time spent watching it": 10
       `
-      pie title NETFLIX
-         "Time spent looking for movie" : 90
-         "Time spent watching it" : 10
-        `,
-      {}
     );
-    cy.get('svg');
   });
+
   it('should render a simple pie diagram with capital letters for labels', () => {
     imgSnapshotTest(
+      `pie title What Voldemort doesn't have?
+        "FRIENDS": 2
+        "FAMILY": 3
+        "NOSE": 45
       `
-      pie title What Voldemort doesn't have?
-         "FRIENDS" : 2
-         "FAMILY" : 3
-         "NOSE" : 45
-        `,
-      {}
     );
-    cy.get('svg');
   });
+
   it('should render a pie diagram when useMaxWidth is true (default)', () => {
     renderGraph(
-      `
-    pie title Sports in Sweden
-       "Bandy" : 40
-       "Ice-Hockey" : 80
-       "Football" : 90
+      `pie title Sports in Sweden
+        "Bandy": 40
+        "Ice-Hockey": 80
+        "Football": 90
       `,
       { pie: { useMaxWidth: true } }
     );
     cy.get('svg').should((svg) => {
       expect(svg).to.have.attr('width', '100%');
-      // expect(svg).to.have.attr('height');
-      // const height = parseFloat(svg.attr('height'));
-      // expect(height).to.eq(450);
       const style = svg.attr('style');
       expect(style).to.match(/^max-width: [\d.]+px;$/);
       const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
-      expect(maxWidthValue).to.eq(984);
+      expect(maxWidthValue).to.be.within(590, 600); // depends on installed fonts: 596.2 on my PC, 597.5 on CI
     });
   });
+
   it('should render a pie diagram when useMaxWidth is false', () => {
     renderGraph(
-      `
-    pie title Sports in Sweden
-       "Bandy" : 40
-       "Ice-Hockey" : 80
-       "Football" : 90
+      `pie title Sports in Sweden
+        "Bandy": 40
+        "Ice-Hockey": 80
+        "Football": 90
       `,
       { pie: { useMaxWidth: false } }
     );
     cy.get('svg').should((svg) => {
-      // const height = parseFloat(svg.attr('height'));
       const width = parseFloat(svg.attr('width'));
-      // expect(height).to.eq(450);
-      expect(width).to.eq(984);
+      expect(width).to.be.within(590, 600); // depends on installed fonts: 596.2 on my PC, 597.5 on CI
       expect(svg).to.not.have.attr('style');
     });
   });
-  it('should render a pie diagram when textPosition is set', () => {
+
+  it('should render a pie diagram when textPosition is setted', () => {
     imgSnapshotTest(
-      `
-        pie
+      `pie
         "Dogs": 50
         "Cats": 25
       `,
       { logLevel: 1, pie: { textPosition: 0.9 } }
     );
-    cy.get('svg');
+  });
+
+  it('should render a pie diagram with showData', () => {
+    imgSnapshotTest(
+      `pie showData
+        "Dogs": 50
+        "Cats": 25
+      `
+    );
   });
 });

cypress/integration/rendering/quadrantChart.spec.js

@@ -160,4 +160,70 @@ describe('Quadrant Chart', () => {
     );
     cy.get('svg');
   });
+  it('should render x-axis labels in the center, if x-axis has two labels', () => {
+    imgSnapshotTest(
+      `
+  quadrantChart
+    title Reach and engagement of campaigns
+    x-axis Low Reach --> High Reach
+    y-axis Low Engagement
+    quadrant-1 We should expand
+    quadrant-2 Need to promote
+    quadrant-3 Re-evaluate
+    quadrant-4 May be improved
+    Campaign A: [0.3, 0.6]
+    Campaign B: [0.45, 0.23]
+    Campaign C: [0.57, 0.69]
+    Campaign D: [0.78, 0.34]
+    Campaign E: [0.40, 0.34]
+    Campaign F: [0.35, 0.78]
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('should render y-axis labels in the center, if y-axis has two labels', () => {
+    imgSnapshotTest(
+      `
+  quadrantChart
+    title Reach and engagement of campaigns
+    x-axis Low Reach
+    y-axis Low Engagement --> High Engagement
+    quadrant-1 We should expand
+    quadrant-2 Need to promote
+    quadrant-3 Re-evaluate
+    quadrant-4 May be improved
+    Campaign A: [0.3, 0.6]
+    Campaign B: [0.45, 0.23]
+    Campaign C: [0.57, 0.69]
+    Campaign D: [0.78, 0.34]
+    Campaign E: [0.40, 0.34]
+    Campaign F: [0.35, 0.78]
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('should render both axes labels on the left and bottom, if both axes have only one label', () => {
+    imgSnapshotTest(
+      `
+  quadrantChart
+    title Reach and engagement of campaigns
+    x-axis Reach -->
+    y-axis Engagement -->
+    quadrant-1 We should expand
+    quadrant-2 Need to promote
+    quadrant-3 Re-evaluate
+    quadrant-4 May be improved
+    Campaign A: [0.3, 0.6]
+    Campaign B: [0.45, 0.23]
+    Campaign C: [0.57, 0.69]
+    Campaign D: [0.78, 0.34]
+    Campaign E: [0.40, 0.34]
+    Campaign F: [0.35, 0.78]
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
 });

cypress/integration/rendering/sequencediagram.spec.js

@@ -930,4 +930,36 @@ context('Sequence diagram', () => {
       });
     });
   });
+  context('render after error', () => {
+    it('should render diagram after fixing destroy participant error', () => {
+      cy.on('uncaught:exception', (err) => {
+        return false;
+      });
+
+      renderGraph([
+        `sequenceDiagram
+    Alice->>Bob: Hello Bob, how are you ?
+    Bob->>Alice: Fine, thank you. And you?
+    create participant Carl
+    Alice->>Carl: Hi Carl!
+    create actor D as Donald
+    Carl->>D: Hi!
+    destroy Carl
+    Alice-xCarl: We are too many
+    destroy Bo
+    Bob->>Alice: I agree`,
+        `sequenceDiagram
+    Alice->>Bob: Hello Bob, how are you ?
+    Bob->>Alice: Fine, thank you. And you?
+    create participant Carl
+    Alice->>Carl: Hi Carl!
+    create actor D as Donald
+    Carl->>D: Hi!
+    destroy Carl
+    Alice-xCarl: We are too many
+    destroy Bob
+    Bob->>Alice: I agree`,
+      ]);
+    });
+  });
 });

cypress/integration/rendering/timeline.spec.ts

@@ -57,7 +57,7 @@ describe('Timeline diagram', () => {
       {}
     );
   });
-  it('5: should render a simple timeline with directive overriden colors', () => {
+  it('5: should render a simple timeline with directive overridden colors', () => {
     imgSnapshotTest(
       ` %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
               'cScale0': '#ff0000',

cypress/integration/rendering/xyChart.spec.js

@@ -0,0 +1,322 @@
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
+
+describe('XY Chart', () => {
+  it('should render the simplest possible chart', () => {
+    imgSnapshotTest(
+      `
+      xychart-beta
+        line [10, 30, 20]
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('Should render a complete chart', () => {
+    imgSnapshotTest(
+      `
+      xychart-beta
+        title "Sales Revenue"
+        x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
+        y-axis "Revenue (in $)" 4000 --> 11000
+        bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+        line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+      `,
+      {}
+    );
+  });
+  it('Should render a chart without title', () => {
+    imgSnapshotTest(
+      `
+      xychart-beta
+        x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
+        y-axis "Revenue (in $)" 4000 --> 11000
+        bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+        line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('y-axis title not required', () => {
+    imgSnapshotTest(
+      `
+      xychart-beta
+        x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
+        y-axis 4000 --> 11000
+        bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+        line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('Should render a chart without y-axis with different range', () => {
+    imgSnapshotTest(
+      `
+      xychart-beta
+        x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
+        bar [5000, 6000, 7500, 8200, 9500, 10500, 14000, 3200, 9200, 9900, 3400, 6000]
+        line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800]
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('x axis title not required', () => {
+    imgSnapshotTest(
+      `
+      xychart-beta
+        x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
+        bar [5000, 6000, 7500, 8200, 9500, 10500, 14000, 3200, 9200, 9900, 3400, 6000]
+        line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800]
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('Multiple plots can be rendered', () => {
+    imgSnapshotTest(
+      `
+      xychart-beta
+        line [23, 46, 77, 34]
+        line [45, 32, 33, 12]
+        bar [87, 54, 99, 85]
+        line [78, 88, 22, 4]
+        line [22, 29, 75, 33]
+        bar [52, 96, 35, 10]
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('Decimals and negative numbers are supported', () => {
+    imgSnapshotTest(
+      `
+      xychart-beta
+        y-axis -2.4 --> 3.5
+        line [+1.3, .6, 2.4, -.34]
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('Render spark line with "plotReservedSpacePercent"', () => {
+    imgSnapshotTest(
+      `
+      ---
+      config:
+        theme: dark
+        xyChart:
+          width: 200
+          height: 20
+          plotReservedSpacePercent: 100
+      ---
+      xychart-beta
+        line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('Render spark bar without displaying other property', () => {
+    imgSnapshotTest(
+      `
+      ---
+      config:
+        theme: dark
+        xyChart:
+          width: 200
+          height: 20
+          xAxis:
+            showLabel: false
+            showTitle: false
+            showTick: false
+            showAxisLine: false
+          yAxis:
+            showLabel: false
+            showTitle: false
+            showTick: false
+            showAxisLine: false
+      ---
+      xychart-beta
+        bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('Should use all the config from directive', () => {
+    imgSnapshotTest(
+      `
+      %%{init: {"xyChart": {"width": 1000, "height": 600, "titlePadding": 5, "titleFontSize": 10, "xAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5},  "yAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5}, "plotBorderWidth": 5, "chartOrientation": "horizontal", "plotReservedSpacePercent": 60  }}}%%
+      xychart-beta
+        title "Sales Revenue"
+        x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
+        y-axis "Revenue (in $)" 4000 --> 11000
+        bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+        line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('Should use all the config from yaml', () => {
+    imgSnapshotTest(
+      `
+      ---
+      config:
+        theme: forest
+        xyChart:
+          width: 1000
+          height: 600
+          titlePadding: 5
+          titleFontSize: 10
+          xAxis:
+            labelFontSize: 20
+            labelPadding: 10
+            titleFontSize: 30
+            titlePadding: 20
+            tickLength: 10
+            tickWidth: 5
+            axisLineWidth: 5
+          yAxis:
+            labelFontSize: 20
+            labelPadding: 10
+            titleFontSize: 30
+            titlePadding: 20
+            tickLength: 10
+            tickWidth: 5
+            axisLineWidth: 5
+          chartOrientation: horizontal
+          plotReservedSpacePercent: 60
+      ---
+      xychart-beta
+        title "Sales Revenue"
+        x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
+        y-axis "Revenue (in $)" 4000 --> 11000
+        bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+        line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('Render with show axis title false', () => {
+    imgSnapshotTest(
+      `
+      ---
+      config:
+        xyChart:
+          xAxis:
+            showTitle: false
+          yAxis:
+            showTitle: false
+      ---
+      xychart-beta
+        title "Sales Revenue"
+        x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
+        y-axis "Revenue (in $)" 4000 --> 11000
+        bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+        line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('Render with show axis label false', () => {
+    imgSnapshotTest(
+      `
+      ---
+      config:
+        xyChart:
+          xAxis:
+            showLabel: false
+          yAxis:
+            showLabel: false
+      ---
+      xychart-beta
+        title "Sales Revenue"
+        x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
+        y-axis "Revenue (in $)" 4000 --> 11000
+        bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+        line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('Render with show axis tick false', () => {
+    imgSnapshotTest(
+      `
+      ---
+      config:
+        xyChart:
+          xAxis:
+            showTick: false
+          yAxis:
+            showTick: false
+      ---
+      xychart-beta
+        title "Sales Revenue"
+        x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
+        y-axis "Revenue (in $)" 4000 --> 11000
+        bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+        line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('Render with show axis line false', () => {
+    imgSnapshotTest(
+      `
+      ---
+      config:
+        xyChart:
+          xAxis:
+            showAxisLine: false
+          yAxis:
+            showAxisLine: false
+      ---
+      xychart-beta
+        title "Sales Revenue"
+        x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
+        y-axis "Revenue (in $)" 4000 --> 11000
+        bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+        line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('Render all the theme color', () => {
+    imgSnapshotTest(
+      `
+      ---
+      config:
+        themeVariables:
+          xyChart:
+            titleColor: "#ff0000"
+            backgroundColor: "#f0f8ff"
+            yAxisLabelColor: "#ee82ee"
+            yAxisTitleColor: "#7fffd4"
+            yAxisTickColor: "#87ceeb"
+            yAxisLineColor: "#ff6347"
+            xAxisLabelColor: "#7fffd4"
+            xAxisTitleColor: "#ee82ee"
+            xAxisTickColor: "#ff6347"
+            xAxisLineColor: "#87ceeb"
+            plotColorPalette: "#008000, #faba63"
+      ---
+      xychart-beta
+        title "Sales Revenue"
+        x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
+        y-axis "Revenue (in $)" 4000 --> 11000
+        bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+        line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+});

cypress/platform/knsv2.html

@@ -58,11 +58,29 @@
   </head>
   <body>
     <pre id="diagram" class="mermaid">
----
-title: Simple flowchart with invisible edges
----
-flowchart TD
-A ~~~ B
+flowchart TB
+    C & D & E & F & G & H & I & J & K & L & M & N & O & P & Q & R & S & T & U & V & W & X & Y & Z & A1 & A2 & A3 & A4 & A5 & A6 & A7 & A8
+      ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+    C & D & E & F & G & H & I & J & K & L & M & N & O & P & Q & R & S & T & U & V & W & X & Y & Z & A1 & A2 & A3 & A4 & A5 & A6 & A7 & A8
+
+    </pre>
+    <pre id="diagram" class="mermaid2">
+    flowchart TB
+      A & A & A & A & A & A & A & A --->  C & D & E & F & G & H & I & J & K & L & M & N & O & P & Q & R & S & T & U & V & W & X & Y & Z
+    </pre>
+    <pre id="diagram" class="mermaid2">
+    flowchart TB
+      A1 & A2 & A3 & A4 & A5 & A6 & A7 & A8 -->  C & D & E & F & G & H & I & J & K & L & M & N & O & P & Q & R & S & T & U & V & W & X & Y & Z
+    </pre>
+    <pre id="diagram" class="mermaid2">
+flowchart
+Node1:::class1 --> Node2:::class2
+Node1:::class1 --> Node3:::class2
+Node3 --> Node4((I am a circle)):::larger
+
+classDef class1 fill:lightblue
+classDef class2 fill:pink
+classDef larger font-size:30px,fill:yellow
       </pre
     >
     <pre id="diagram" class="mermaid2">
@@ -432,6 +450,7 @@ mindmap
           messageFontFamily: 'courier',
         },
         fontSize: 16,
+        logLevel: 0,
       });
       function callback() {
         alert('It worked');

cypress/platform/marker_unique_id.html

@@ -0,0 +1,53 @@
+<html>
+  <head> </head>
+  <body>
+    <h1>Example</h1>
+    <pre class="mermaid">
+      %%{init:{"theme":"base", "themeVariables": {"lineColor":"red"}}}%%
+      flowchart LR
+      subgraph red
+      A --> B
+      end
+    </pre>
+    <pre class="mermaid">
+      %%{init:{"theme":"base", "themeVariables": {"lineColor":"blue"}}}%%
+      flowchart LR
+      subgraph black
+      A --> B
+      end
+    </pre>
+    <pre class="mermaid">
+      ---
+      config:
+        theme: base
+        themeVariables:
+          lineColor: yellow
+      ---
+      flowchart LR
+      subgraph red
+      A --> B
+      end
+    </pre>
+    <pre class="mermaid">
+      ---
+      config:
+        theme: base
+        themeVariables:
+          lineColor: green
+      ---
+      flowchart LR
+      subgraph black
+      A --> B
+      end
+    </pre>
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
+      mermaid.initialize({ startOnLoad: false, logLevel: 0 });
+      await mermaid.run();
+
+      if (window.Cypress) {
+        window.rendered = true;
+      }
+    </script>
+  </body>
+</html>

cypress/platform/theme-directives.html

@@ -1,15 +1,6 @@
 <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); */
@@ -122,26 +113,21 @@
 
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
-      mermaid.parseError = function (err, hash) {
-        // console.error('Mermaid error: ', err);
-      };
+
       mermaid.initialize({
-        // theme: 'dark',
-        // theme: 'dark',
-        // arrowMarkerAbsolute: true,
-        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,
-        // flowchart: { useMaxWidth: true },
         graph: { curve: 'cardinal', htmlLabels: false },
-        // gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50, showSequenceNumbers: true },
-        // sequenceDiagram: { actorMargin: 300 } // deprecated
         fontFamily: '"arial", sans-serif',
         curve: 'cardinal',
         securityLevel: 'strict',
+        startOnLoad: false,
       });
-      function callback() {
-        alert('It worked');
+
+      await mermaid.run();
+
+      if (window.Cypress) {
+        window.rendered = true;
       }
     </script>
   </body>

cypress/platform/xss10.html

@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     </style>
+    <script>
+      function xssAttack() {
+        const div = document.createElement('div');
+        div.id = 'the-malware';
+        div.className = 'malware';
+        div.innerHTML = 'XSS Succeeded';
+        document.getElementsByTagName('body')[0].appendChild(div);
+        throw new Error('XSS Succeeded');
+      }
+    </script>
   </head>
   <body>
     <div>Security check</div>

cypress/platform/xss11.html

@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     </style>
+    <script>
+      function xssAttack() {
+        const div = document.createElement('div');
+        div.id = 'the-malware';
+        div.className = 'malware';
+        div.innerHTML = 'XSS Succeeded';
+        document.getElementsByTagName('body')[0].appendChild(div);
+        throw new Error('XSS Succeeded');
+      }
+    </script>
   </head>
   <body>
     <div>Security check</div>

cypress/platform/xss12.html

@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     </style>
+    <script>
+      function xssAttack() {
+        const div = document.createElement('div');
+        div.id = 'the-malware';
+        div.className = 'malware';
+        div.innerHTML = 'XSS Succeeded';
+        document.getElementsByTagName('body')[0].appendChild(div);
+        throw new Error('XSS Succeeded');
+      }
+    </script>
   </head>
   <body>
     <div>Security check</div>

cypress/platform/xss13.html

@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     </style>
+    <script>
+      function xssAttack() {
+        const div = document.createElement('div');
+        div.id = 'the-malware';
+        div.className = 'malware';
+        div.innerHTML = 'XSS Succeeded';
+        document.getElementsByTagName('body')[0].appendChild(div);
+        throw new Error('XSS Succeeded');
+      }
+    </script>
   </head>
   <body>
     <div>Security check</div>

cypress/platform/xss15.html

@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     </style>
+    <script>
+      function xssAttack() {
+        const div = document.createElement('div');
+        div.id = 'the-malware';
+        div.className = 'malware';
+        div.innerHTML = 'XSS Succeeded';
+        document.getElementsByTagName('body')[0].appendChild(div);
+        throw new Error('XSS Succeeded');
+      }
+    </script>
   </head>
   <body>
     <div>Security check</div>

cypress/platform/xss16.html

@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     </style>
+    <script>
+      function xssAttack() {
+        const div = document.createElement('div');
+        div.id = 'the-malware';
+        div.className = 'malware';
+        div.innerHTML = 'XSS Succeeded';
+        document.getElementsByTagName('body')[0].appendChild(div);
+        throw new Error('XSS Succeeded');
+      }
+    </script>
   </head>
   <body>
     <div>Security check</div>

cypress/platform/xss17.html

@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     </style>
+    <script>
+      function xssAttack() {
+        const div = document.createElement('div');
+        div.id = 'the-malware';
+        div.className = 'malware';
+        div.innerHTML = 'XSS Succeeded';
+        document.getElementsByTagName('body')[0].appendChild(div);
+        throw new Error('XSS Succeeded');
+      }
+    </script>
   </head>
   <body>
     <div>Security check</div>

cypress/platform/xss18.html

@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     </style>
+    <script>
+      function xssAttack() {
+        const div = document.createElement('div');
+        div.id = 'the-malware';
+        div.className = 'malware';
+        div.innerHTML = 'XSS Succeeded';
+        document.getElementsByTagName('body')[0].appendChild(div);
+        throw new Error('XSS Succeeded');
+      }
+    </script>
   </head>
   <body>
     <div>Security check</div>

cypress/platform/xss19.html

@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     </style>
+    <script>
+      function xssAttack() {
+        const div = document.createElement('div');
+        div.id = 'the-malware';
+        div.className = 'malware';
+        div.innerHTML = 'XSS Succeeded';
+        document.getElementsByTagName('body')[0].appendChild(div);
+        throw new Error('XSS Succeeded');
+      }
+    </script>
   </head>
   <body>
     <div>Security check</div>

cypress/platform/xss20.html

@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     </style>
+    <script>
+      function xssAttack() {
+        const div = document.createElement('div');
+        div.id = 'the-malware';
+        div.className = 'malware';
+        div.innerHTML = 'XSS Succeeded';
+        document.getElementsByTagName('body')[0].appendChild(div);
+        throw new Error('XSS Succeeded');
+      }
+    </script>
   </head>
   <body>
     <div>Security check</div>

cypress/platform/xss21.html

@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     </style>
+    <script>
+      function xssAttack() {
+        const div = document.createElement('div');
+        div.id = 'the-malware';
+        div.className = 'malware';
+        div.innerHTML = 'XSS Succeeded';
+        document.getElementsByTagName('body')[0].appendChild(div);
+        throw new Error('XSS Succeeded');
+      }
+    </script>
   </head>
   <body>
     <div>Security check</div>

cypress/platform/xss23-css.html

@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     </style>
+    <script>
+      function xssAttack() {
+        const div = document.createElement('div');
+        div.id = 'the-malware';
+        div.className = 'malware';
+        div.innerHTML = 'XSS Succeeded';
+        document.getElementsByTagName('body')[0].appendChild(div);
+        throw new Error('XSS Succeeded');
+      }
+    </script>
   </head>
   <body>
     <div>Security check</div>

cypress/platform/xss24.html

@@ -0,0 +1,109 @@
+<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>
+    <script>
+      function xssAttack() {
+        const div = document.createElement('div');
+        div.id = 'the-malware';
+        div.className = 'malware';
+        div.innerHTML = 'XSS Succeeded';
+        document.getElementsByTagName('body')[0].appendChild(div);
+        throw new Error('XSS Succeeded');
+      }
+    </script>
+  </head>
+  <body>
+    <div>Security check</div>
+    <div class="flex">
+      <div id="diagram" class="mermaid"></div>
+      <div id="res" class=""></div>
+    </div>
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
+      mermaid.parseError = function (err, hash) {
+        // console.error('Mermaid error: ', err);
+      };
+      mermaid.initialize({
+        theme: 'forest',
+        arrowMarkerAbsolute: true,
+        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
+        logLevel: 0,
+        state: {
+          defaultRenderer: 'dagre-wrapper',
+        },
+        flowchart: {
+          // defaultRenderer: 'dagre-wrapper',
+          nodeSpacing: 10,
+          curve: 'cardinal',
+          htmlLabels: true,
+        },
+        htmlLabels: false,
+        // gantt: { axisFormat: '%m/%d/%Y' },
+        sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
+        // sequenceDiagram: { actorMargin: 300 } // deprecated
+        // fontFamily: '"times", sans-serif',
+        // fontFamily: 'courier',
+        fontSize: 18,
+        curve: 'basis',
+        securityLevel: 'strict',
+        startOnLoad: false,
+        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
+        // themeVariables: {relationLabelColor: 'red'}
+      });
+      function callback() {
+        alert('It worked');
+      }
+
+      let diagram = 'classDiagram\n';
+      diagram += '`Class<img src=x on';
+      diagram += 'error=xssAttack()>` <|-- `Class2<img src=x on';
+      diagram += 'error=xssAttack()>`';
+
+      console.log(diagram);
+      // document.querySelector('#diagram').innerHTML = diagram;
+      const { svg } = await mermaid.render('diagram', diagram);
+      document.querySelector('#res').innerHTML = svg;
+    </script>
+  </body>
+</html>

cypress/platform/xss5.html

@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     </style>
+    <script>
+      function xssAttack() {
+        const div = document.createElement('div');
+        div.id = 'the-malware';
+        div.className = 'malware';
+        div.innerHTML = 'XSS Succeeded';
+        document.getElementsByTagName('body')[0].appendChild(div);
+        throw new Error('XSS Succeeded');
+      }
+    </script>
   </head>
   <body>
     <div>Security check</div>
@@ -84,14 +94,6 @@
       function callback() {
         alert('It worked');
       }
-      function xssAttack() {
-        const div = document.createElement('div');
-        div.id = 'the-malware';
-        div.className = 'malware';
-        div.innerHTML = 'XSS Succeeded';
-        document.getElementsByTagName('body')[0].appendChild(div);
-        throw new Error('XSS Succeeded');
-      }
       let diagram = 'graph LR\n';
       diagram += 'B-->D("<img onerror=location=`java';
       // diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";

cypress/platform/xss6.html

@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     </style>
+    <script>
+      function xssAttack() {
+        const div = document.createElement('div');
+        div.id = 'the-malware';
+        div.className = 'malware';
+        div.innerHTML = 'XSS Succeeded';
+        document.getElementsByTagName('body')[0].appendChild(div);
+        throw new Error('XSS Succeeded');
+      }
+    </script>
   </head>
   <body>
     <div>Security check</div>

cypress/platform/xss7.html

@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     </style>
+    <script>
+      function xssAttack() {
+        const div = document.createElement('div');
+        div.id = 'the-malware';
+        div.className = 'malware';
+        div.innerHTML = 'XSS Succeeded';
+        document.getElementsByTagName('body')[0].appendChild(div);
+        throw new Error('XSS Succeeded');
+      }
+    </script>
   </head>
   <body>
     <div>Security check</div>

cypress/platform/xss8.html

@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     </style>
+    <script>
+      function xssAttack() {
+        const div = document.createElement('div');
+        div.id = 'the-malware';
+        div.className = 'malware';
+        div.innerHTML = 'XSS Succeeded';
+        document.getElementsByTagName('body')[0].appendChild(div);
+        throw new Error('XSS Succeeded');
+      }
+    </script>
   </head>
   <body>
     <div>Security check</div>

cypress/platform/xss9.html

@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     </style>
+    <script>
+      function xssAttack() {
+        const div = document.createElement('div');
+        div.id = 'the-malware';
+        div.className = 'malware';
+        div.innerHTML = 'XSS Succeeded';
+        document.getElementsByTagName('body')[0].appendChild(div);
+        throw new Error('XSS Succeeded');
+      }
+    </script>
   </head>
   <body>
     <div>Security check</div>

cypress/support/commands.js

@@ -24,8 +24,18 @@
 // -- This is will overwrite an existing command --
 // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
 
-// import '@percy/cypress';
-
 import { addMatchImageSnapshotCommand } from 'cypress-image-snapshot/command';
 
+// The SSIM comparison method can be used if the pixelmatch is throwing lots of false positives.
+// SSIM actually does not catch minute changes in the image, so it is not as accurate as pixelmatch.
+// addMatchImageSnapshotCommand({
+//   comparisonMethod: 'ssim',
+//   failureThreshold: 0.01,
+//   failureThresholdType: 'percent',
+//   customDiffConfig: {
+//     ssim: 'fast',
+//   },
+//   blur: 1,
+// });
+
 addMatchImageSnapshotCommand();

demos/c4context.html

@@ -173,7 +173,7 @@
         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(comp, "Customer's computer", "Microsoft 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.")
         }

demos/classchart.html

@@ -38,12 +38,14 @@
         +quack()
       }
       class Fish{
-        -int sizeInFeet
+        -Listint sizeInFeet
         -canEat()
       }
       class Zebra{
         +bool is_wild
-        +run()
+        +run(List~T~, List~OT~)
+        %% +run-composite(List~T, K~)
+        +run-nested(List~List~OT~~)
       }
 
     </pre>
@@ -80,6 +82,7 @@
     Class01 : #size()
     Class01 : -int chimp
     Class01 : +int gorilla
+    Class01 : +abstractAttribute string*
     class Class10~T~ {
     &lt;&lt;service&gt;&gt;
     int id
@@ -122,6 +125,8 @@
     classDiagram
     direction LR
     Animal ()-- Dog
+    Animal ()-- Cat
+    note for Cat "should have no members area"
     Dog : bark()
     Dog : species()
     </pre>
@@ -151,6 +156,7 @@
         ~InternalProperty : string
         ~AnotherInternalProperty : List~List~string~~
       }
+      class People List~List~Person~~
     </pre>
     <hr />
 

demos/dev/example.html

@@ -0,0 +1,34 @@
+<!--Do not edit this file-->
+<!--Duplicate this file to any name you like, run `pnpm dev`, open http://localhost:9000/dev/name.html to view-->
+<html>
+  <head>
+    <title>Mermaid development page</title>
+  </head>
+  <body>
+    <pre id="diagram" class="mermaid">
+graph TB
+      a --> b
+      a --> c
+      b --> d
+      c --> d
+    </pre>
+
+    <div id="dynamicDiagram"></div>
+
+    <script type="module">
+      import mermaid from '/mermaid.esm.mjs';
+      mermaid.parseError = function (err, hash) {
+        console.error('Mermaid error: ', err);
+      };
+      mermaid.initialize({
+        startOnLoad: true,
+        logLevel: 0,
+      });
+      const value = `graph TD\nHello --> World`;
+      const el = document.getElementById('dynamicDiagram');
+      const { svg } = await mermaid.render('dd', value);
+      console.log(svg);
+      el.innerHTML = svg;
+    </script>
+  </body>
+</html>

demos/er.html

@@ -21,6 +21,8 @@
     <pre class="mermaid">
       ---
       title: This is a title
+      config:
+        theme: forest
       ---
       erDiagram
         %% title This is a title
@@ -108,6 +110,35 @@
         }
         MANUFACTURER only one to zero or more CAR : makes
     </pre>
+    <hr />
+
+    <pre class="mermaid">
+    erDiagram
+      p[Person] {
+          string firstName
+          string lastName
+      }
+      a["Customer Account"] {
+          string email
+      }
+      p ||--o| a : has
+    </pre>
+    <hr />
+
+    <pre class="mermaid">
+    erDiagram
+      _customer_order {
+          bigint id PK
+          bigint customer_id FK
+          text shipping_address 
+          text delivery_method 
+          timestamp_with_time_zone ordered_at 
+          numeric total_tax_amount 
+          numeric total_price 
+          text payment_method 
+      }
+    </pre>
+    <hr />
 
     <script type="module">
       import mermaid from './mermaid.esm.mjs';

demos/flowchart.html

@@ -22,7 +22,7 @@
     ---
     graph LR
       accTitle: This is a complicated flow
-      accDescr: This is the descriptoin for the complicated flow.
+      accDescr: This is the description for the complicated flow.
 
     sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
 
@@ -123,6 +123,13 @@
 
     <h3>flowchart</h3>
     <pre class="mermaid">
+    ---
+    title: This is another complicated flow
+    config:
+      theme: base
+      flowchart:
+        curve: cardinal
+    ---
     flowchart LR
     sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
 

demos/git.html

@@ -14,30 +14,364 @@
   </head>
 
   <body>
-    <h1>Git diagram demo</h1>
+    <h1>Git graph demo</h1>
+    <h2>Simple "branch and merge" graph</h2>
     <pre class="mermaid">
     ---
-    title: Simple Git diagram
+    title: Simple "branch and merge" (left-to-right)
     ---
-    gitGraph:
-    options
-    {
-    "nodeSpacing": 50,
-    "nodeRadius": 5
-    }
-    end
-    branch master
+    gitGraph LR:
     commit
     branch newbranch
     checkout newbranch
     commit
+    checkout main
+    merge newbranch
+    </pre>
+    <pre class="mermaid">
+    ---
+    title: Simple "branch and merge" (top-to-bottom)
+    ---
+    gitGraph TB:
     commit
-    checkout master
+    branch newbranch
+    checkout newbranch
     commit
+    checkout main
+    merge newbranch
+    </pre>
+    <h2>Continuous development graph</h2>
+    <pre class="mermaid">
+    ---
+    title: Continuous development (left-to-right)
+    ---
+    gitGraph LR:
+    commit
+    branch develop
+    checkout develop
+    commit
+    checkout main
+    merge develop
+    checkout develop
+    commit
+    checkout main
+    merge develop
+    </pre>
+    <pre class="mermaid">
+    ---
+    title: Continuous development (top-to-bottom)
+    ---
+    gitGraph TB:
+    commit
+    branch develop
+    checkout develop
+    commit
+    checkout main
+    merge develop
+    checkout develop
+    commit
+    checkout main
+    merge develop
+    </pre>
+    <h2>Merge feature to advanced main graph</h2>
+    <pre class="mermaid">
+    ---
+    title: Merge feature to advanced main (left-to-right)
+    ---
+    gitGraph LR:
+    commit
+    branch newbranch
+    checkout newbranch
+    commit
+    checkout main
     commit
     merge newbranch
     </pre>
-
+    <pre class="mermaid">
+    ---
+    title: Merge feature to advanced main (top-to-bottom)
+    ---
+    gitGraph TB:
+    commit
+    branch newbranch
+    checkout newbranch
+    commit
+    checkout main
+    commit
+    merge newbranch
+    </pre>
+    <h2>Two-way merges</h2>
+    <pre class="mermaid">
+    ---
+    title: Two-way merges (left-to-right)
+    ---
+    gitGraph LR:
+    commit
+    branch develop
+    checkout develop
+    commit
+    checkout main
+    merge develop
+    commit
+    checkout develop
+    merge main
+    commit
+    checkout main
+    merge develop
+    </pre>
+    <pre class="mermaid">
+    ---
+    title: Two-way merges (top-to-bottom)
+    ---
+    gitGraph TB:
+    commit
+    branch develop
+    checkout develop
+    commit
+    checkout main
+    merge develop
+    commit
+    checkout develop
+    merge main
+    commit
+    checkout main
+    merge develop
+    </pre>
+    <h2>Cherry-pick from branch graph</h2>
+    <pre class="mermaid">
+    ---
+    title: Cherry-pick from branch (left-to-right)
+    ---
+    gitGraph LR:
+    commit
+    branch newbranch
+    checkout newbranch
+    commit id: "Pick me"
+    checkout main
+    commit
+    checkout newbranch
+    commit
+    checkout main
+    cherry-pick id: "Pick me"
+    </pre>
+    <pre class="mermaid">
+    ---
+    title: Cherry-pick from branch (top-to-bottom)
+    ---
+    gitGraph TB:
+    commit
+    branch newbranch
+    checkout newbranch
+    commit id: "Pick me"
+    checkout main
+    commit
+    checkout newbranch
+    commit
+    checkout main
+    cherry-pick id: "Pick me"
+    </pre>
+    <h2>Cherry-pick from main graph</h2>
+    <pre class="mermaid">
+    ---
+    title: Cherry-pick from main (left-to-right)
+    ---
+    gitGraph LR:
+    commit
+    branch develop
+    commit
+    checkout main
+    commit id:"A"
+    checkout develop
+    commit
+    cherry-pick id: "A"
+    </pre>
+    <pre class="mermaid">
+    ---
+    title: Cherry-pick from main (top-to-bottom)
+    ---
+    gitGraph TB:
+    commit
+    branch develop
+    commit
+    checkout main
+    commit id:"A"
+    checkout develop
+    commit
+    cherry-pick id: "A"
+    </pre>
+    <h2>Cherry-pick then merge graph</h2>
+    <pre class="mermaid">
+    ---
+    title: Cherry-pick then merge (left-to-right)
+    ---
+    gitGraph LR:
+    commit
+    branch newbranch
+    checkout newbranch
+    commit id: "Pick me"
+    checkout main
+    commit
+    checkout newbranch
+    commit
+    checkout main
+    cherry-pick id: "Pick me"
+    merge newbranch
+    </pre>
+    <pre class="mermaid">
+    ---
+    title: Cherry-pick then merge (top-to-bottom)
+    ---
+    gitGraph TB:
+    commit
+    branch newbranch
+    checkout newbranch
+    commit id: "Pick me"
+    checkout main
+    commit
+    checkout newbranch
+    commit
+    checkout main
+    cherry-pick id: "Pick me"
+    merge newbranch
+    </pre>
+    <h2>Merge from main onto undeveloped branch graph</h2>
+    <pre class="mermaid">
+    ---
+    title: Merge from main onto undeveloped branch (left-to-right)
+    ---
+    gitGraph LR:
+    commit
+    branch develop
+    commit
+    checkout main
+    commit
+    checkout develop
+    merge main
+    </pre>
+    <pre class="mermaid">
+    ---
+    title: Merge from main onto undeveloped branch (top-to-bottom)
+    ---
+    gitGraph TB:
+    commit
+    branch develop
+    commit
+    checkout main
+    commit
+    checkout develop
+    merge main
+    </pre>
+    <h2>Merge from main onto developed branch graph</h2>
+    <pre class="mermaid">
+    ---
+    title: Merge from main onto developed branch (left-to-right)
+    ---
+    gitGraph LR:
+    commit
+    branch develop
+    commit
+    checkout main
+    commit
+    checkout develop
+    commit
+    merge main
+    </pre>
+    <pre class="mermaid">
+    ---
+    title: Merge from main onto developed branch (top-to-bottom)
+    ---
+    gitGraph TB:
+    commit
+    branch develop
+    commit
+    checkout main
+    commit
+    checkout develop
+    commit
+    merge main
+    </pre>
+    <h2>Two branches from same commit graph</h2>
+    <pre class="mermaid">
+    ---
+    title: Two branches from same commit (left-to-right)
+    ---
+    gitGraph LR:
+    commit
+    commit
+    branch feature-001
+    commit
+    commit
+    checkout main
+    branch feature-002
+    commit
+    checkout feature-001
+    merge feature-002
+    </pre>
+    <pre class="mermaid">
+    ---
+    title: Two branches from same commit (top-to-bottom)
+    ---
+    gitGraph TB:
+    commit
+    commit
+    branch feature-001
+    commit
+    commit
+    checkout main
+    branch feature-002
+    commit
+    checkout feature-001
+    merge feature-002
+    </pre>
+    <h2>Three branches and a cherry-pick from each graph</h2>
+    <pre class="mermaid">
+    ---
+    title: Three branches and a cherry-pick from each (left-to-right)
+    ---
+    gitGraph LR:
+    commit id: "ZERO"
+    branch develop
+    commit id:"A"
+    checkout main
+    commit id:"ONE"
+    checkout develop
+    commit id:"B"
+    branch featureA
+    commit id:"FIX"
+    commit id: "FIX-2"
+    checkout main
+    commit id:"TWO"
+    cherry-pick id:"A"
+    commit id:"THREE"
+    cherry-pick id:"FIX"
+    checkout develop
+    commit id:"C"
+    merge featureA
+    </pre>
+    <pre class="mermaid">
+    ---
+    title: Three branches and a cherry-pick from each (top-to-bottom)
+    ---
+    gitGraph TB:
+    commit id: "ZERO"
+    branch develop
+    commit id:"A"
+    checkout main
+    commit id:"ONE"
+    checkout develop
+    commit id:"B"
+    branch featureA
+    commit id:"FIX"
+    commit id: "FIX-2"
+    checkout main
+    commit id:"TWO"
+    cherry-pick id:"A"
+    commit id:"THREE"
+    cherry-pick id:"FIX"
+    checkout develop
+    commit id:"C"
+    merge featureA
+    </pre>
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
       const ALLOWED_TAGS = [

demos/index.html

@@ -60,6 +60,9 @@
       <li>
         <h2><a href="./quadrantchart.html">Quadrant charts</a></h2>
       </li>
+      <li>
+        <h2><a href="./xychart.html">XY charts</a></h2>
+      </li>
       <li>
         <h2><a href="./requirements.html">Requirements</a></h2>
       </li>

demos/pie.html

@@ -7,7 +7,6 @@
     <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>
@@ -19,35 +18,30 @@
       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
+        "Dogs": 386
+        "Cats": 85
+        "Rats": 15
     </pre>
 
     <hr />
     <pre class="mermaid">
-    %%{init: {"pie": {"textPosition": 0.9}, "themeVariables": {"pieOuterStrokeWidth": "5px"}} }%%
+      %%{init: {"pie": {"textPosition": 0.9}, "themeVariables": {"pieOuterStrokeWidth": "5px"}}}%%
       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
+        "Calcium": 42.96
+        "Potassium": 50.05
+        "Magnesium": 10.01
+        "Iron": 5
     </pre>
 
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
       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>

demos/requirements.html

@@ -17,7 +17,7 @@
     <h1>Requirement diagram demos</h1>
     <pre class="mermaid">
 	requirementDiagram
-	  accTitle: Requirments demo in black and white
+	  accTitle: Requirements demo in black and white
 		accDescr: A series of requirement boxes showing relationships among them. Has meaningless task names
 
 	requirement test_req {

demos/sankey.html

@@ -3,20 +3,43 @@
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>States Mermaid Quick Test Page</title>
+    <title>Sankey 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>Sankey diagram demos</h1>
+    <h2>FY20-21 Performance</h2>
+    <pre class="mermaid">
+      ---
+      config:
+        sankey:
+          showValues: true
+          prefix: $
+          suffix: B
+          width: 800
+          nodeAlignment: left
+      ---
+      sankey-beta
+        Revenue,Expenses,10
+        Revenue,Profit,10
+        Expenses,Manufacturing,5
+        Expenses,Tax,3
+        Expenses,Research,2
+    </pre>
+
     <h2>Energy flow</h2>
     <pre class="mermaid">
+      ---
+      config:
+        sankey:
+          useMaxWidth: true
+          showValues: false
+          width: 1200
+          height: 600
+          linkColor: gradient
+          nodeAlignment: justify
+      ---
       sankey-beta
 
       Agricultural 'waste',Bio-conversion,124.729
@@ -95,13 +118,7 @@
         theme: 'default',
         logLevel: 3,
         securityLevel: 'loose',
-        sankey: {
-          title: 'Hey, this is Sankey-Beta',
-          width: 1200,
-          height: 600,
-          linkColor: 'gradient',
-          nodeAlignment: 'justify',
-        },
+        startOnLoad: true,
       });
     </script>
   </body>

demos/state.html

@@ -183,7 +183,7 @@
     </pre>
     <hr />
 
-    <h2>Compsite states can link to themselves</h2>
+    <h2>Composite states can link to themselves</h2>
     <pre class="mermaid">
       stateDiagram-v2
             state Active {
@@ -199,7 +199,7 @@
       stateDiagram-v2
       [*] --> S1
       S1 --> S2: This long line uses a br tag<br />to create multiple<br />lines.
-      S1 --> S3: This transition descripton uses \na newline character\nto create multiple\nlines.
+      S1 --> S3: This transition description uses \na newline character\nto create multiple\nlines.
 
     </pre>
     <hr />

demos/xychart.html

@@ -0,0 +1,184 @@
+<!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>XY Charts demos</h1>
+    <pre class="mermaid">
+    xychart-beta
+    title "Sales Revenue (in $)"
+    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
+    y-axis "Revenue (in $)" 4000 --> 11000
+    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+    </pre>
+    <hr />
+    <h1>XY Charts horizontal</h1>
+    <pre class="mermaid">
+    xychart-beta horizontal
+    title "Basic xychart"
+    x-axis "this is x axis" [category1, "category 2", category3, category4]
+    y-axis yaxisText 10 --> 150
+    bar "sample bat" [52, 96, 35, 10]
+    line [23, 46, 75, 43]
+    </pre>
+    <hr />
+    <h1>XY Charts only lines and bar</h1>
+    <pre class="mermaid">
+    xychart-beta
+    line [23, 46, 77, 34]
+    line [45, 32, 33, 12]
+    line [87, 54, 99, 85]
+    line [78, 88, 22, 4]
+    line [22, 29, 75, 33]
+    bar [52, 96, 35, 10]
+    </pre>
+
+    <hr />
+    <h1>XY Charts with +ve and -ve numbers</h1>
+    <pre class="mermaid">
+    xychart-beta
+    line [+1.3, .6, 2.4, -.34]
+    </pre>
+
+    <h1>XY Charts Bar with multiple category</h1>
+    <pre class="mermaid">
+    xychart-beta
+    title "Basic xychart with many categories"
+    x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7]
+    y-axis yaxisText 10 --> 150
+    bar "sample bar" [52, 96, 35, 10, 87, 34, 67, 99]
+    </pre>
+
+    <h1>XY Charts line with multiple category</h1>
+    <pre class="mermaid">
+    xychart-beta
+    title "Line chart with many category"
+    x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7]
+    y-axis yaxisText 10 --> 150
+    line "sample line" [52, 96, 35, 10, 87, 34, 67, 99]
+    </pre>
+
+    <h1>XY Charts category with large text</h1>
+    <pre class="mermaid">
+    xychart-beta
+    title "Basic xychart with many categories with category overlap"
+    x-axis "this is x axis" [category1, "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.", category3, category4, category5, category6, category7]
+    y-axis yaxisText 10 --> 150
+    bar "sample bar" [52, 96, 35, 10, 87, 34, 67, 99]
+    </pre>
+
+    <h1>sparkline demo</h1>
+    <pre class="mermaid">
+---
+config:
+  theme: dark
+  xyChart:
+    width: 200
+    height: 20
+    plotReservedSpacePercent: 100
+---
+    xychart-beta
+      line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
+    </pre>
+
+    <h1>sparkBar demo</h1>
+    <pre class="mermaid">
+---
+config:
+  theme: dark
+  xyChart:
+    width: 200
+    height: 20
+    plotReservedSpacePercent: 100
+---
+    xychart-beta
+      bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
+    </pre>
+
+    <h1>XY Charts demos with all configs</h1>
+    <pre class="mermaid">
+---
+config:
+  theme: forest
+  xyChart:
+    width: 1000
+    height: 600
+    titlePadding: 5
+    titleFontSize: 10
+    xAxis:
+      labelFontSize: 20
+      labelPadding: 10
+      titleFontSize: 30
+      titlePadding: 20
+      tickLength: 10
+      tickWidth: 5
+      axisLineWidth: 5
+    yAxis:
+      labelFontSize: 20
+      labelPadding: 10
+      titleFontSize: 30
+      titlePadding: 20
+      tickLength: 10
+      tickWidth: 5
+      axisLineWidth: 5
+    chartOrientation: horizontal
+    plotReservedSpacePercent: 60
+---
+    xychart-beta
+      title "Sales Revene"
+      x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
+      y-axis "Revenue (in $)" 4000 --> 11000
+      bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+      line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+
+    </pre>
+    <h1>XY Charts demos with all theme config</h1>
+    <pre class="mermaid">
+---
+config:
+  themeVariables:
+    xyChart:
+      titleColor: "#ff0000"
+      backgroundColor: "#f0f8ff"
+      yAxisLabelColor: "#ee82ee"
+      yAxisTitleColor: "#7fffd4"
+      yAxisTickColor: "#87ceeb"
+      yAxisLineColor: "#ff6347"
+      xAxisLabelColor: "#7fffd4"
+      xAxisTitleColor: "#ee82ee"
+      xAxisTickColor: "#ff6347"
+      xAxisLineColor: "#87ceeb"
+      plotColorPalette: "#008000, #faba63"
+---
+    xychart-beta
+      title "Sales Revene"
+      x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
+      y-axis "Revenue (in $)" 4000 --> 11000
+      bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+      line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+
+    </pre>
+    <hr />
+
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
+      mermaid.initialize({
+        theme: 'default',
+        logLevel: 3,
+        securityLevel: 'loose',
+      });
+    </script>
+  </body>
+</html>

docker-compose.yml

@@ -1,13 +1,16 @@
 version: '3.9'
 services:
   mermaid:
-    image: node:18.17.0-alpine3.18
+    build:
+      context: .
+      dockerfile: Dockerfile
     stdin_open: true
     tty: true
     working_dir: /mermaid
-    mem_limit: '2G'
+    mem_limit: '8G'
+    entrypoint: '/mermaid/docker-entrypoint.sh'
     environment:
-      - NODE_OPTIONS=--max_old_space_size=2048
+      - NODE_OPTIONS=--max_old_space_size=8192
     volumes:
       - ./:/mermaid
       - root_cache:/root/.cache
@@ -17,7 +20,7 @@ services:
       - 9000:9000
       - 3333:3333
   cypress:
-    image: cypress/included:12.17.2
+    image: cypress/included:12.17.4
     stdin_open: true
     tty: true
     working_dir: /mermaid

docker-entrypoint.sh

@@ -0,0 +1,3 @@
+#!/bin/sh
+source /root/.shrc
+exec "$@"