Revert "Fix Requirement overflow"

.build/common.ts

@@ -1,9 +1,3 @@
-export interface PackageOptions {
-  name: string;
-  packageName: string;
-  file: string;
-}
-
 /**
  * Shared common options for both ESBuild and Vite
  */
@@ -33,4 +27,4 @@ export const packageOptions = {
     packageName: 'mermaid-layout-elk',
     file: 'layouts.ts',
   },
-} as const satisfies Record<string, PackageOptions>;
+} as const;

.build/jsonSchema.ts

@@ -19,14 +19,12 @@ const MERMAID_CONFIG_DIAGRAM_KEYS = [
   'xyChart',
   'requirement',
   'mindmap',
-  'kanban',
   'timeline',
   'gitGraph',
   'c4',
   'sankey',
   'block',
   'packet',
-  'architecture',
 ] as const;
 
 /**

.changeset/README.md

@@ -1,8 +0,0 @@
-# Changesets
-
-Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
-with multi-package repos, or single-package repos to help you version and publish your code. You can
-find the full documentation for it [in our repository](https://github.com/changesets/changesets)
-
-We have a quick list of common questions to get you started engaging with this project in
-[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

.changeset/angry-bags-brake.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: architecture diagrams no longer grow to extreme heights due to conflicting alignments

.changeset/bright-ads-exist.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-Fixes for consistent edge id creation & handling edge cases for animate edge feature

.changeset/chatty-elephants-warn.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-Fix for issue #6195 - allowing @ signs inside node labels

.changeset/chilly-years-cheat.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: `mermaidAPI.getDiagramFromText()` now returns a new different db for each class diagram

.changeset/config.json

@@ -1,12 +0,0 @@
-{
-  "$schema": "https://unpkg.com/@changesets/config@3.0.0/schema.json",
-  "changelog": ["@changesets/changelog-github", { "repo": "mermaid-js/mermaid" }],
-  "commit": false,
-  "fixed": [],
-  "linked": [],
-  "access": "public",
-  "baseBranch": "master",
-  "updateInternalDependencies": "patch",
-  "bumpVersionsWithWorkspaceProtocolOnly": true,
-  "ignore": ["@mermaid-js/docs", "@mermaid-js/webpack-test", "@mermaid-js/mermaid-example-diagram"]
-}

.changeset/dull-tips-cough.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: revert state db to resolve getData returning empty nodes and edges

.changeset/great-ghosts-rule.md

@@ -1,8 +0,0 @@
----
-'mermaid': minor
----
-
-Flowchart new syntax for node metadata bugs
-
-- Incorrect label mapping for nodes when using `&`
-- Syntax error when `}` with trailing spaces before new line

.changeset/hungry-guests-drive.md

@@ -1,5 +0,0 @@
----
-'@mermaid-js/layout-elk': patch
----
-
-fix: Updated offset calculations for diamond shape when handling intersections

.changeset/many-brooms-promise.md

@@ -1,5 +0,0 @@
----
-'mermaid': minor
----
-
-Adding support for animation of flowchart edges

.changeset/new-kiwis-listen.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: `mermaidAPI.getDiagramFromText()` now returns a new different db for each flowchart

.changeset/stupid-dots-do.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Gantt, Sankey and User Journey diagram are now able to pick font-family from mermaid config.

.changeset/witty-crews-smell.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-`mermaidAPI.getDiagramFromText()` now returns a new different db for each state diagram

.cspell/code-terms.txt

@@ -26,7 +26,6 @@ concat
 controlx
 controly
 CSSCLASS
-curv
 CYLINDEREND
 CYLINDERSTART
 DAGA
@@ -56,7 +55,6 @@ GENERICTYPE
 getBoundarys
 grammr
 graphtype
-halign
 iife
 interp
 introdcued
@@ -68,7 +66,6 @@ Kaufmann
 keyify
 LABELPOS
 LABELTYPE
-layoutstop
 lcov
 LEFTOF
 Lexa
@@ -123,8 +120,6 @@ SUBROUTINEEND
 SUBROUTINESTART
 Subschemas
 substr
-SVGG
-SVGSVG
 TAGEND
 TAGSTART
 techn
@@ -141,7 +136,6 @@ tsdoc
 typeof
 typestr
 unshift
-urlsafe
 verifymethod
 VERIFYMTHD
 WARN_DOCSDIR_DOESNT_MATCH

.cspell/cspell.config.yaml

@@ -28,9 +28,6 @@ dictionaryDefinitions:
   - name: suggestions
     words:
       - none
-      - disp
-      - subproc
-      - tria
     suggestWords:
       - seperator:separator
       - vertice:vertex

.cspell/libraries.txt

@@ -24,14 +24,11 @@ Doctave
 DokuWiki
 dompurify
 elkjs
-fcose
 fontawesome
-Forgejo
 Foswiki
 Gitea
 graphlib
 Grav
-icones
 iconify
 Inkdrop
 jiti
@@ -47,7 +44,6 @@ mdbook
 Mermerd
 mkdocs
 Nextra
-NODECOUNT
 nodenext
 npmjs
 pageview
@@ -59,17 +55,14 @@ presetAttributify
 pyplot
 redmine
 rehype
-RIGHTDOWN
 roughjs
 rscratch
 shiki
-Slidev
 sparkline
 sphinxcontrib
 ssim
 stylis
 Swimm
-topdown
 tsbuildinfo
 tseslint
 Tuleap

.cspell/mermaid-terms.txt

@@ -1,18 +1,15 @@
 Adamiecki
 arrowend
-Bendpoints
 bmatrix
 braintree
 catmull
 compositTitleSize
-curv
 doublecircle
 elems
 gantt
 gitgraph
 gzipped
 handDrawn
-kanban
 knsv
 Knut
 marginx
@@ -26,7 +23,6 @@ multigraph
 nodesep
 NOTEGROUP
 Pinterest
-procs
 rankdir
 ranksep
 rect

.cspell/misc-terms.txt

@@ -4,4 +4,3 @@ handDrawn
 KOEPF
 neato
 newbranch
-validify

.esbuild/build.ts

@@ -8,10 +8,7 @@ import { defaultOptions, getBuildConfig } from './util.js';
 const shouldVisualize = process.argv.includes('--visualize');
 
 const buildPackage = async (entryName: keyof typeof packageOptions) => {
-  const commonOptions: MermaidBuildOptions = {
-    ...defaultOptions,
-    options: packageOptions[entryName],
-  } as const;
+  const commonOptions: MermaidBuildOptions = { ...defaultOptions, entryName } as const;
   const buildConfigs: MermaidBuildOptions[] = [
     // package.mjs
     { ...commonOptions },
@@ -43,7 +40,7 @@ const buildPackage = async (entryName: keyof typeof packageOptions) => {
         continue;
       }
       const fileName = Object.keys(metafile.outputs)
-        .find((file) => !file.includes('chunks') && file.endsWith('js'))!
+        .find((file) => !file.includes('chunks') && file.endsWith('js'))
         .replace('dist/', '');
       // Upload metafile into https://esbuild.github.io/analyze/
       await writeFile(`stats/${fileName}.meta.json`, JSON.stringify(metafile));

.esbuild/server.ts

@@ -9,18 +9,13 @@ import { generateLangium } from '../.build/generateLangium.js';
 import { defaultOptions, getBuildConfig } from './util.js';
 
 const configs = Object.values(packageOptions).map(({ packageName }) =>
-  getBuildConfig({
-    ...defaultOptions,
-    minify: false,
-    core: false,
-    options: packageOptions[packageName],
-  })
+  getBuildConfig({ ...defaultOptions, minify: false, core: false, entryName: packageName })
 );
 const mermaidIIFEConfig = getBuildConfig({
   ...defaultOptions,
   minify: false,
   core: false,
-  options: packageOptions.mermaid,
+  entryName: 'mermaid',
   format: 'iife',
 });
 configs.push(mermaidIIFEConfig);

.esbuild/util.ts

@@ -3,7 +3,7 @@ import { fileURLToPath } from 'url';
 import type { BuildOptions } from 'esbuild';
 import { readFileSync } from 'fs';
 import jsonSchemaPlugin from './jsonSchemaPlugin.js';
-import type { PackageOptions } from '../.build/common.js';
+import { packageOptions } from '../.build/common.js';
 import { jisonPlugin } from './jisonPlugin.js';
 
 const __dirname = fileURLToPath(new URL('.', import.meta.url));
@@ -13,10 +13,10 @@ export interface MermaidBuildOptions extends BuildOptions {
   core: boolean;
   metafile: boolean;
   format: 'esm' | 'iife';
-  options: PackageOptions;
+  entryName: keyof typeof packageOptions;
 }
 
-export const defaultOptions: Omit<MermaidBuildOptions, 'entryName' | 'options'> = {
+export const defaultOptions: Omit<MermaidBuildOptions, 'entryName'> = {
   minify: false,
   metafile: false,
   core: false,
@@ -52,14 +52,9 @@ const getFileName = (fileName: string, { core, format, minify }: MermaidBuildOpt
 };
 
 export const getBuildConfig = (options: MermaidBuildOptions): BuildOptions => {
-  const {
-    core,
-    metafile,
-    format,
-    minify,
-    options: { name, file, packageName },
-  } = options;
+  const { core, entryName, metafile, format, minify } = options;
   const external: string[] = ['require', 'fs', 'path'];
+  const { name, file, packageName } = packageOptions[entryName];
   const outFileName = getFileName(name, options);
   const output: BuildOptions = buildOptions({
     absWorkingDir: resolve(__dirname, `../packages/${packageName}`),

.github/lychee.toml

@@ -44,10 +44,7 @@ exclude = [
 "https://chromewebstore.google.com",
 
 # Drupal 403
-"https://(www.)?drupal.org",
-
-# Swimm returns 404, eventhough the link is valid
-"https://docs.swimm.io"
+"https://(www.)?drupal.org"
 ]
 
 # Exclude all private IPs from checking.

.github/pull_request_template.md

@@ -15,4 +15,4 @@ Make sure you
 - [ ] :book: have read the [contribution guidelines](https://mermaid.js.org/community/contributing.html)
 - [ ] :computer: have added necessary unit/e2e tests.
 - [ ] :notebook: have added documentation. Make sure [`MERMAID_RELEASE_VERSION`](https://mermaid.js.org/community/contributing.html#update-documentation) is used for all new features.
-- [ ] :butterfly: If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running `pnpm changeset` and following the prompts. Changesets that add features should be `minor` and those that fix bugs should be `patch`. Please prefix changeset messages with `feat:`, `fix:`, or `chore:`.
+- [ ] :bookmark: targeted `develop` branch

.github/release-drafter.yml

@@ -0,0 +1,36 @@
+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'
+    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
+exclude-labels:
+  - 'Skip changelog'
+no-changes-template: 'This release contains minor changes and bugfixes.'
+template: |
+  # Release Notes
+
+  $CHANGES
+
+  🎉 **Thanks to all contributors helping with this release!** 🎉

.github/workflows/autofix.yml

@@ -2,24 +2,20 @@ name: autofix.ci # needed to securely identify the workflow
 
 on:
   pull_request:
-    branches-ignore:
-      - 'renovate/**'
 permissions:
   contents: read
 
-concurrency: ${{ github.workflow }}-${{ github.ref }}
-
 jobs:
   autofix:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+      - uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
+      - uses: pnpm/action-setup@v4
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js
-        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
+        uses: actions/setup-node@v4
         with:
           cache: pnpm
           node-version-file: '.node-version'
@@ -42,4 +38,4 @@ jobs:
         working-directory: ./packages/mermaid
         run: pnpm run docs:build
 
-      - uses: autofix-ci/action@551dded8c6cc8a1054039c8bc0b8b48c51dfc6ef # main
+      - uses: autofix-ci/action@ff86a557419858bb967097bfc916833f5647fa8c

.github/workflows/build-docs.yml

@@ -8,8 +8,6 @@ on:
   pull_request:
   merge_group:
 
-concurrency: ${{ github.workflow }}-${{ github.ref }}
-
 permissions:
   contents: read
 
@@ -18,12 +16,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+        uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
+      - uses: pnpm/action-setup@v4
 
       - name: Setup Node.js
-        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
+        uses: actions/setup-node@v4
         with:
           cache: pnpm
           node-version-file: '.node-version'

.github/workflows/build.yml

@@ -0,0 +1,49 @@
+name: Build
+
+on:
+  push: {}
+  merge_group:
+  pull_request:
+    types:
+      - opened
+      - synchronize
+      - ready_for_review
+
+permissions:
+  contents: read
+
+jobs:
+  build-mermaid:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+        # uses version from "packageManager" field in package.json
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          cache: pnpm
+          node-version-file: '.node-version'
+
+      - name: Install Packages
+        run: |
+          pnpm install --frozen-lockfile
+        env:
+          CYPRESS_CACHE_FOLDER: .cache/Cypress
+
+      - name: Run Build
+        run: pnpm run build
+
+      - name: Upload Mermaid Build as Artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: mermaid-build
+          path: packages/mermaid/dist
+
+      - name: Upload Mermaid Mindmap Build as Artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: mermaid-mindmap-build
+          path: packages/mermaid-mindmap/dist

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

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

.github/workflows/checks.yml

@@ -0,0 +1,26 @@
+on:
+  push:
+  merge_group:
+  pull_request:
+    types:
+      - opened
+      - synchronize
+      - ready_for_review
+
+name: Static analysis on Test files
+
+jobs:
+  check-tests:
+    runs-on: ubuntu-latest
+    name: check tests
+    if: github.repository_owner == 'mermaid-js'
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - uses: testomatio/check-tests@stable
+        with:
+          framework: cypress
+          tests: './cypress/e2e/**/**.spec.js'
+          token: ${{ secrets.GITHUB_TOKEN }}
+          has-tests-label: true

.github/workflows/codeql.yml

@@ -11,9 +11,6 @@ on:
       - synchronize
       - ready_for_review
 
-permissions: # added using https://github.com/step-security/secure-repo
-  contents: read
-
 jobs:
   analyze:
     name: Analyze
@@ -32,11 +29,11 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+        uses: actions/checkout@v4
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@c36620d31ac7c881962c3d9dd939c40ec9434f2b # v3.26.12
+        uses: github/codeql-action/init@v3
         with:
           config-file: ./.github/codeql/codeql-config.yml
           languages: ${{ matrix.language }}
@@ -48,7 +45,7 @@ jobs:
       # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
       # If this step fails, then you should remove it and run the build manually (see below)
       - name: Autobuild
-        uses: github/codeql-action/autobuild@c36620d31ac7c881962c3d9dd939c40ec9434f2b # v3.26.12
+        uses: github/codeql-action/autobuild@v3
 
       # ℹ️ Command-line programs to run using the OS shell.
       # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
@@ -62,4 +59,4 @@ jobs:
       #   make release
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@c36620d31ac7c881962c3d9dd939c40ec9434f2b # v3.26.12
+        uses: github/codeql-action/analyze@v3

.github/workflows/dependency-review.yml

@@ -15,6 +15,6 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: 'Checkout Repository'
-        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+        uses: actions/checkout@v4
       - name: 'Dependency Review'
-        uses: actions/dependency-review-action@5a2ce3f5b92ee19cbb1541a4984c76d921601d7c # v4.3.4
+        uses: actions/dependency-review-action@v4

.github/workflows/e2e-applitools.yml

@@ -11,8 +11,6 @@ on:
         default: master
         description: 'Parent branch to use for PRs'
 
-concurrency: ${{ github.workflow }}-${{ github.ref }}
-
 permissions:
   contents: read
 
@@ -32,13 +30,13 @@ jobs:
         run: |
           echo "::error,title=Not using Applitools::APPLITOOLS_API_KEY is empty, disabling Applitools for this run."
 
-      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+      - uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
+      - uses: pnpm/action-setup@v4
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js
-        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
+        uses: actions/setup-node@v4
         with:
           node-version-file: '.node-version'
 
@@ -54,7 +52,7 @@ jobs:
           APPLITOOLS_SERVER_URL: 'https://eyesapi.applitools.com'
 
       - name: Cypress run
-        uses: cypress-io/github-action@d79d2d530a66e641eb4a5f227e13bc985c60b964 # v4.2.2
+        uses: cypress-io/github-action@v4
         id: cypress
         with:
           start: pnpm run dev

.github/workflows/e2e-timings.yml

@@ -1,53 +0,0 @@
-name: E2E - Generate Timings
-
-on:
-  # run this workflow every night at 3am
-  schedule:
-    - cron: '28 3 * * *'
-  # or when the user triggers it from GitHub Actions page
-  workflow_dispatch:
-
-concurrency: ${{ github.workflow }}-${{ github.ref }}
-
-permissions:
-  contents: write
-
-jobs:
-  timings:
-    runs-on: ubuntu-latest
-    container:
-      image: cypress/browsers:node-20.11.0-chrome-121.0.6167.85-1-ff-120.0-edge-121.0.2277.83-1
-      options: --user 1001
-    steps:
-      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
-      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
-      - name: Setup Node.js
-        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
-        with:
-          node-version-file: '.node-version'
-      - name: Install dependencies
-        uses: cypress-io/github-action@0da3c06ed8217b912deea9d8ee69630baed1737e # v6.7.6
-        with:
-          runTests: false
-      - name: Cypress run
-        uses: cypress-io/github-action@0da3c06ed8217b912deea9d8ee69630baed1737e # v6.7.6
-        id: cypress
-        with:
-          install: false
-          start: pnpm run dev:coverage
-          wait-on: 'http://localhost:9000'
-          browser: chrome
-          publish-summary: false
-        env:
-          VITEST_COVERAGE: true
-          CYPRESS_COMMIT: ${{ github.sha }}
-          SPLIT: 1
-          SPLIT_INDEX: 0
-          SPLIT_FILE: 'cypress/timings.json'
-      - name: Commit changes
-        uses: EndBug/add-and-commit@a94899bca583c204427a224a7af87c02f9b325d5 # v9.1.4
-        with:
-          add: 'cypress/timings.json'
-          author_name: 'github-actions[bot]'
-          author_email: '41898282+github-actions[bot]@users.noreply.github.com'
-          message: 'chore: update E2E timings'

.github/workflows/e2e.yml

@@ -2,18 +2,11 @@ name: E2E
 
 on:
   push:
-    branches:
-      - develop
-      - master
-      - release/**
+    branches-ignore:
+      - 'gh-readonly-queue/**'
   pull_request:
-  issue_comment:
-    types:
-      - created
   merge_group:
 
-concurrency: ${{ github.workflow }}-${{ github.ref }}
-
 permissions:
   contents: read
 
@@ -31,26 +24,23 @@ env:
       ) || 
       github.event.before
     }}
-  # Check if this is a new comment with '/visual-test'
-  RUN_VISUAL_TEST: >-
-    ${{ github.event_name == 'issue_comment' && github.event.action == 'created' && contains(github.event.comment.body, '/visual-test') && github.event.issue.pull_request != null }}
+  shouldRunParallel: ${{ secrets.CYPRESS_RECORD_KEY != '' && !(github.event_name == 'push' && github.ref == 'refs/heads/develop') }}
 jobs:
   cache:
-    if: ${{ github.event_name != 'issue_comment' || contains(github.event.comment.body, '/visual-test') }}
     runs-on: ubuntu-latest
     container:
       image: cypress/browsers:node-20.11.0-chrome-121.0.6167.85-1-ff-120.0-edge-121.0.2277.83-1
       options: --user 1001
     steps:
-      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
-      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
       - name: Setup Node.js
-        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
+        uses: actions/setup-node@v4
         with:
           node-version-file: '.node-version'
       - name: Cache snapshots
         id: cache-snapshot
-        uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 # v4.0.2
+        uses: actions/cache@v4
         with:
           save-always: true
           path: ./cypress/snapshots
@@ -59,13 +49,13 @@ jobs:
       # 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@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+        uses: actions/checkout@v4
         with:
           ref: ${{ env.targetHash }}
 
       - name: Install dependencies
         if: ${{ steps.cache-snapshot.outputs.cache-hit != 'true' }}
-        uses: cypress-io/github-action@0da3c06ed8217b912deea9d8ee69630baed1737e # v6.7.6
+        uses: cypress-io/github-action@v6
         with:
           # just perform install
           runTests: false
@@ -86,28 +76,28 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        containers: [1, 2, 3, 4, 5]
+        containers: [1, 2, 3, 4]
     steps:
-      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+      - uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
+      - uses: pnpm/action-setup@v4
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js
-        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
+        uses: actions/setup-node@v4
         with:
           node-version-file: '.node-version'
 
       # These cached snapshots are downloaded, providing the reference snapshots.
       - name: Cache snapshots
         id: cache-snapshot
-        uses: actions/cache/restore@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 # v4.0.2
+        uses: actions/cache/restore@v4
         with:
           path: ./cypress/snapshots
           key: ${{ runner.os }}-snapshots-${{ env.targetHash }}
 
       - name: Install dependencies
-        uses: cypress-io/github-action@0da3c06ed8217b912deea9d8ee69630baed1737e # v6.7.6
+        uses: cypress-io/github-action@v6
         with:
           runTests: false
 
@@ -123,8 +113,11 @@ jobs:
       # Install NPM dependencies, cache them correctly
       # and run all Cypress tests
       - name: Cypress run
-        uses: cypress-io/github-action@0da3c06ed8217b912deea9d8ee69630baed1737e # v6.7.6
+        uses: cypress-io/github-action@v6
         id: cypress
+        # If CYPRESS_RECORD_KEY is set, run in parallel on all containers
+        # Otherwise (e.g. if running from fork), we run on a single container only
+        if: ${{ env.shouldRunParallel == 'true' || ( matrix.containers == 1 ) }}
         with:
           install: false
           start: pnpm run dev:coverage
@@ -132,22 +125,19 @@ jobs:
           browser: chrome
           # Disable recording if we don't have an API key
           # e.g. if this action was run from a fork
-          record: ${{ env.RUN_VISUAL_TEST == 'true' && secrets.CYPRESS_RECORD_KEY != '' }}
+          record: ${{ env.shouldRunParallel == 'true' }}
+          parallel: ${{ env.shouldRunParallel == 'true' }}
         env:
-          # Only set Argos environment variables if the visual test comment trigger is present
-          ARGOS_TOKEN: ${{ env.RUN_VISUAL_TEST == 'true' && secrets.ARGOS_TOKEN || '' }}
-          ARGOS_PARALLEL: ${{ env.RUN_VISUAL_TEST == 'true' }}
-          ARGOS_PARALLEL_TOTAL: ${{ env.RUN_VISUAL_TEST == 'true' && strategy.job-total || 1 }}
-          ARGOS_PARALLEL_INDEX: ${{ env.RUN_VISUAL_TEST == 'true' && matrix.containers || 1 }}
-          CYPRESS_COMMIT: ${{ github.sha }}
-          CYPRESS_RECORD_KEY: ${{ env.RUN_VISUAL_TEST == 'true' && secrets.CYPRESS_RECORD_KEY || ''}}
-          SPLIT: ${{ strategy.job-total }}
-          SPLIT_INDEX: ${{ strategy.job-index }}
-          SPLIT_FILE: 'cypress/timings.json'
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
           VITEST_COVERAGE: true
+          CYPRESS_COMMIT: ${{ github.sha }}
+          ARGOS_TOKEN: ${{ secrets.ARGOS_TOKEN }}
+          ARGOS_PARALLEL: ${{ env.shouldRunParallel == 'true' }}
+          ARGOS_PARALLEL_TOTAL: 4
+          ARGOS_PARALLEL_INDEX: ${{ matrix.containers }}
 
       - name: Upload Coverage to Codecov
-        uses: codecov/codecov-action@e28ff129e5465c2c0dcc6f003fc735cb6ae0c673 # v4.5.0
+        uses: codecov/codecov-action@v4
         # Run step only pushes to develop and pull_requests
         if: ${{ steps.cypress.conclusion == 'success' && (github.event_name == 'pull_request' || github.ref == 'refs/heads/develop')}}
         with:

.github/workflows/issue-triage.yml

@@ -4,17 +4,11 @@ on:
   issues:
     types: [opened]
 
-permissions: # added using https://github.com/step-security/secure-repo
-  contents: read
-
 jobs:
   triage:
-    permissions:
-      issues: write # for andymckay/labeler to label issues
-      pull-requests: write # for andymckay/labeler to label PRs
     runs-on: ubuntu-latest
     steps:
-      - uses: andymckay/labeler@e6c4322d0397f3240f0e7e30a33b5c5df2d39e90 # 1.0.4
+      - uses: andymckay/labeler@1.0.4
         with:
           repo-token: '${{ secrets.GITHUB_TOKEN }}'
           add-labels: 'Status: Triage'

.github/workflows/link-checker.yml

@@ -19,9 +19,6 @@ on:
     # * is a special character in YAML so you have to quote this string
     - cron: '30 8 * * *'
 
-permissions: # added using https://github.com/step-security/secure-repo
-  contents: read
-
 jobs:
   link-checker:
     runs-on: ubuntu-latest
@@ -29,17 +26,17 @@ jobs:
       # lychee only uses the GITHUB_TOKEN to avoid rate-limiting
       contents: read
     steps:
-      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+      - uses: actions/checkout@v4
 
       - name: Restore lychee cache
-        uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 # v4.0.2
+        uses: actions/cache@v4
         with:
           path: .lycheecache
           key: cache-lychee-${{ github.sha }}
           restore-keys: cache-lychee-
 
       - name: Link Checker
-        uses: lycheeverse/lychee-action@c053181aa0c3d17606addfe97a9075a32723548a # v1.9.3
+        uses: lycheeverse/lychee-action@v1.9.3
         with:
           args: >-
             --config .github/lychee.toml

.github/workflows/lint.yml

@@ -4,32 +4,26 @@ on:
   push:
   merge_group:
   pull_request:
+    types:
+      - opened
+      - synchronize
+      - ready_for_review
   workflow_dispatch:
 
-concurrency: ${{ github.workflow }}-${{ github.ref }}
-
 permissions:
   contents: write
 
 jobs:
-  docker-lint:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
-
-      - uses: hadolint/hadolint-action@54c9adbab1582c2ef04b2016b760714a4bfde3cf # v3.1.0
-        with:
-          verbose: true
   lint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+      - uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
+      - uses: pnpm/action-setup@v4
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js
-        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
+        uses: actions/setup-node@v4
         with:
           cache: pnpm
           node-version-file: '.node-version'
@@ -88,10 +82,3 @@ jobs:
         working-directory: ./packages/mermaid
         continue-on-error: ${{ github.event_name == 'push' }}
         run: pnpm run docs:verify
-
-      - uses: testomatio/check-tests@0ea638fcec1820cf2e7b9854fdbdd04128a55bd4 # stable
-        with:
-          framework: cypress
-          tests: './cypress/e2e/**/**.spec.js'
-          token: ${{ secrets.GITHUB_TOKEN }}
-          has-tests-label: true

.github/workflows/pr-labeler.yml

@@ -22,7 +22,7 @@ jobs:
       pull-requests: write # write permission is required to label PRs
     steps:
       - name: Label PR
-        uses: release-drafter/release-drafter@3f0f87098bd6b5c5b9a36d49c41d998ea58f9348 # v6.0.0
+        uses: release-drafter/release-drafter@v6
         with:
           config-name: pr-labeler.yml
           disable-autolabeler: false

.github/workflows/publish-docs.yml

@@ -23,12 +23,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+        uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
+      - uses: pnpm/action-setup@v4
 
       - name: Setup Node.js
-        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
+        uses: actions/setup-node@v4
         with:
           cache: pnpm
           node-version-file: '.node-version'
@@ -37,13 +37,13 @@ jobs:
         run: pnpm install --frozen-lockfile
 
       - name: Setup Pages
-        uses: actions/configure-pages@1f0c5cde4bc74cd7e1254d0cb4de8d49e9068c7d # v4.0.0
+        uses: actions/configure-pages@v4
 
       - name: Run Build
         run: pnpm --filter mermaid run docs:build:vitepress
 
       - name: Upload artifact
-        uses: actions/upload-pages-artifact@56afc609e74202658d3ffba0e8f6dda462b719fa # v3.0.1
+        uses: actions/upload-pages-artifact@v3
         with:
           path: packages/mermaid/src/vitepress/.vitepress/dist
 
@@ -56,4 +56,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@d6db90164ac5ed86f2b6aed7e0febac5b3c0c03e # v4.0.5
+        uses: actions/deploy-pages@v4

.github/workflows/release-draft.yml

@@ -0,0 +1,23 @@
+name: Draft Release
+
+on:
+  push:
+    branches:
+      - 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: release-drafter/release-drafter@v6
+        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@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
-      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
+      - uses: pnpm/action-setup@v4
 
       - name: Setup Node.js
-        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
+        uses: actions/setup-node@v4
         with:
           cache: pnpm
           node-version-file: '.node-version'
@@ -28,7 +28,7 @@ jobs:
           CYPRESS_CACHE_FOLDER: .cache/Cypress
 
       - name: Install Json
-        run: npm i json@11.0.0 --global
+        run: npm i json --global
 
       - name: Publish
         working-directory: ./packages/mermaid

.github/workflows/release-preview.yml

@@ -1,43 +0,0 @@
-name: Preview release
-
-on:
-  pull_request:
-    branches: [develop]
-    types: [opened, synchronize, labeled, ready_for_review]
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.event.number }}
-  cancel-in-progress: true
-
-permissions:
-  contents: read
-  actions: write
-
-jobs:
-  preview:
-    if: ${{ github.repository_owner == 'mermaid-js' }}
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      id-token: write
-      issues: write
-      pull-requests: write
-    name: Publish preview release
-    timeout-minutes: 5
-    steps:
-      - name: Checkout Repo
-        uses: actions/checkout@f43a0e5ff2bd294095638e18286ca9a3d1956744 # v3.6.0
-
-      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
-
-      - name: Setup Node.js
-        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
-        with:
-          cache: pnpm
-          node-version-file: '.node-version'
-
-      - name: Install Packages
-        run: pnpm install --frozen-lockfile
-
-      - name: Publish packages
-        run: pnpx pkg-pr-new publish --pnpm './packages/*'

.github/workflows/release-publish.yml

@@ -0,0 +1,47 @@
+name: Publish release
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: fregante/setup-git-user@v2
+
+      - uses: pnpm/action-setup@v4
+        # uses version from "packageManager" field in package.json
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          cache: pnpm
+          node-version-file: '.node-version'
+
+      - name: Install Packages
+        run: |
+          pnpm install --frozen-lockfile
+          npm i json --global
+        env:
+          CYPRESS_CACHE_FOLDER: .cache/Cypress
+
+      - name: Prepare release
+        run: |
+          VERSION=${GITHUB_REF:10}
+          echo "Preparing release $VERSION"
+          git checkout -t origin/release/$VERSION
+          npm version --no-git-tag-version --allow-same-version $VERSION
+          git add package.json
+          git commit -nm "Bump version $VERSION"
+          git checkout -t origin/master
+          git merge -m "Release $VERSION" --no-ff release/$VERSION
+          git push --no-verify
+
+      - name: Publish
+        run: |
+          npm set //registry.npmjs.org/:_authToken $NPM_TOKEN
+          npm publish
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/release.yml

@@ -1,46 +0,0 @@
-name: Release
-
-on:
-  push:
-    branches:
-      - master
-
-concurrency: ${{ github.workflow }}-${{ github.ref }}
-
-permissions: # added using https://github.com/step-security/secure-repo
-  contents: read
-
-jobs:
-  release:
-    if: github.repository == 'mermaid-js/mermaid'
-    permissions:
-      contents: write # to create release (changesets/action)
-      id-token: write # OpenID Connect token needed for provenance
-      pull-requests: write # to create pull request (changesets/action)
-    name: Release
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout Repo
-        uses: actions/checkout@f43a0e5ff2bd294095638e18286ca9a3d1956744 # v3.6.0
-
-      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
-
-      - name: Setup Node.js
-        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
-        with:
-          cache: pnpm
-          node-version-file: '.node-version'
-
-      - name: Install Packages
-        run: pnpm install --frozen-lockfile
-
-      - name: Create Release Pull Request or Publish to npm
-        id: changesets
-        uses: changesets/action@3de3850952bec538fde60aac71731376e57b9b57 # v1.4.8
-        with:
-          version: pnpm changeset:version
-          publish: pnpm changeset:publish
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-          NPM_CONFIG_PROVENANCE: true

.github/workflows/scorecard.yml

@@ -1,37 +0,0 @@
-name: Scorecard supply-chain security
-on:
-  branch_protection_rule:
-  push:
-    branches:
-      - develop
-  schedule:
-    - cron: 29 15 * * 0
-permissions: read-all
-jobs:
-  analysis:
-    name: Scorecard analysis
-    permissions:
-      id-token: write
-      security-events: write
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
-        with:
-          persist-credentials: false
-      - name: Run analysis
-        uses: ossf/scorecard-action@dc50aa9510b46c811795eb24b2f1ba02a914e534 # v2.3.3
-        with:
-          results_file: results.sarif
-          results_format: sarif
-          publish_results: true
-      - name: Upload artifact
-        uses: actions/upload-artifact@65c4c4a1ddee5b72f698fdd19549f0f0fb45cf08 # v4.6.0
-        with:
-          name: SARIF file
-          path: results.sarif
-          retention-days: 5
-      - name: Upload to code-scanning
-        uses: github/codeql-action/upload-sarif@c36620d31ac7c881962c3d9dd939c40ec9434f2b # v3.26.12
-        with:
-          sarif_file: results.sarif

.github/workflows/test.yml

@@ -9,13 +9,13 @@ jobs:
   unit-test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+      - uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
+      - uses: pnpm/action-setup@v4
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js
-        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
+        uses: actions/setup-node@v4
         with:
           cache: pnpm
           node-version-file: '.node-version'
@@ -38,13 +38,8 @@ jobs:
         run: |
           pnpm exec vitest run ./packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts --coverage
 
-      - name: Verify out-of-tree build with TypeScript
-        if: ${{ github.repository == 'mermaid-js/mermaid' }}
-        run: |
-          pnpm test:check:tsc
-
       - name: Upload Coverage to Codecov
-        uses: codecov/codecov-action@e28ff129e5465c2c0dcc6f003fc735cb6ae0c673 # v4.5.0
+        uses: codecov/codecov-action@v4
         # Run step only pushes to develop and pull_requests
         if: ${{ github.event_name == 'pull_request' || github.ref == 'refs/heads/develop' }}
         with:

.github/workflows/unlock-reopened-issues.yml

@@ -8,6 +8,6 @@ jobs:
   triage:
     runs-on: ubuntu-latest
     steps:
-      - uses: Dunning-Kruger/unlock-issues@b06b7f7e5c3f2eaa1c6d5d89f40930e4d6d9699e # v1
+      - uses: Dunning-Kruger/unlock-issues@v1
         with:
           repo-token: '${{ secrets.GITHUB_TOKEN }}'

.github/workflows/update-browserlist.yml

@@ -8,18 +8,18 @@ jobs:
   update-browser-list:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
-      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
       - run: npx update-browserslist-db@latest
       - name: Commit changes
-        uses: EndBug/add-and-commit@a94899bca583c204427a224a7af87c02f9b325d5 # v9.1.4
+        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@c5a7806660adbe173f04e3e038b0ccdcd758773c # v6.1.0
+        uses: peter-evans/create-pull-request@v6
         with:
           branch: update-browserslist
           title: Update Browserslist

.hadolint.yaml

@@ -1,2 +0,0 @@
-ignored:
-  - DL3002 # TODO: Last USER should not be root

.husky/pre-commit

@@ -1,2 +1,4 @@
-#!/usr/bin/env sh
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
 NODE_OPTIONS="--max_old_space_size=8192" pnpm run pre-commit

.vscode/launch.json

@@ -12,18 +12,18 @@
       "args": ["run", "${relativeFile}"],
       "smartStep": true,
       "console": "integratedTerminal"
+    },
+    {
+      "name": "Docs generation",
+      "type": "node",
+      "request": "launch",
+      "args": ["scripts/docs.cli.mts"],
+      // 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,
+      "internalConsoleOptions": "openOnSessionStart"
     }
-    // {
-    //   "name": "Docs generation",
-    //   "type": "node",
-    //   "request": "launch",
-    //   "args": ["scripts/docs.cli.mts"],
-    //   // 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,
-    //   "internalConsoleOptions": "openOnSessionStart"
-    // }
   ]
 }

Dockerfile

@@ -1,13 +1,2 @@
-FROM node:20.12.2-alpine3.19@sha256:7a91aa397f2e2dfbfcdad2e2d72599f374e0b0172be1d86eeb73f1d33f36a4b2
-
-USER 0:0
-
-RUN corepack enable \
-    && corepack enable pnpm
-
-RUN apk add --no-cache git~=2.43.4 \
-    && git config --add --system safe.directory /mermaid
-
-ENV NODE_OPTIONS="--max_old_space_size=8192"
-
-EXPOSE 9000 3333
+FROM node:20.12.2-alpine3.19 AS base
+RUN wget -qO- https://get.pnpm.io/install.sh | ENV="$HOME/.shrc" SHELL="$(which sh)" sh -

Pulling-from-remote.md

@@ -1,9 +0,0 @@
-Pulling from remote repo
-
-```
-git remote add os_repo git@github.com:mermaid-js/mermaid.git
-git pull os_repo main
-git pull os_repo
-git pull os_repo master
-git pull os_repo 5237-unified-layout-common-renderer
-```

README.md

@@ -35,8 +35,7 @@ Try Live Editor previews of future releases: <a href="https://develop.git.mermai
 [![NPM Downloads](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid)
 [![Join our Discord!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=discord&label=discord)](https://discord.gg/AgrbSrBer3)
 [![Twitter Follow](https://img.shields.io/badge/Social-mermaidjs__-blue?style=social&logo=X)](https://twitter.com/mermaidjs_)
-[![Covered by Argos Visual Testing](https://argos-ci.com/badge.svg)](https://argos-ci.com?utm_source=mermaid&utm_campaign=oss)
-[![OpenSSF Scorecard](https://api.securityscorecards.dev/projects/github.com/mermaid-js/mermaid/badge)](https://securityscorecards.dev/viewer/?uri=github.com/mermaid-js/mermaid)
+[![Covered by Argos Visual Testing](https://argos-ci.com/badge.svg)](https://argos-ci.com)
 
 <img src="./img/header.png" alt="" />
 
@@ -83,10 +82,6 @@ You can also use Mermaid within [GitHub](https://github.blog/2022-02-14-include-
 
 For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](https://mermaid.js.org/intro/getting-started.html), [Usage](https://mermaid.js.org/config/usage.html) and [Tutorials](https://mermaid.js.org/ecosystem/tutorials.html).
 
-Our PR Visual Regression Testing is powered by [Argos](https://argos-ci.com/?utm_source=mermaid&utm_campaign=oss) with their generous Open Source plan. It makes the process of reviewing PRs with visual changes a breeze.
-
-[![Covered by Argos Visual Testing](https://argos-ci.com/badge-large.svg)](https://argos-ci.com?utm_source=mermaid&utm_campaign=oss)
-
 In our release process we rely heavily on visual regression tests using [applitools](https://applitools.com/). Applitools is a great service which has been easy to use and integrate with our tests.
 
 <a href="https://applitools.com/">
@@ -95,10 +90,6 @@ In our release process we rely heavily on visual regression tests using [applito
 
 <!-- </Main description> -->
 
-## Mermaid AI Bot
-
-[Mermaid](https://codeparrot.ai/oracle?owner=mermaid-js&repo=mermaid) Bot will help you understand this repository better. You can ask for code examples, installation guide, debugging help and much more.
-
 ## Examples
 
 **The following are some examples of the diagrams, charts and graphs that can be made using Mermaid. Click here to jump into the [text syntax](https://mermaid.js.org/intro/syntax-reference.html).**
@@ -439,7 +430,7 @@ A quick note from Knut Sveidqvist:
 >
 > _Thank you to [Tyler Long](https://github.com/tylerlong) who has been a collaborator since April 2017._
 >
-> _Thank you to the ever-growing list of [contributors](https://github.com/mermaid-js/mermaid/graphs/contributors) that brought the project this far!_
+> _Thank you to the ever-growing list of [contributors](https://github.com/knsv/mermaid/graphs/contributors) that brought the project this far!_
 
 ---
 

README.zh-CN.md

@@ -358,7 +358,7 @@ _很不幸的是，鱼与熊掌不可兼得，在这个场景下它意味着在
 
 > _特别感谢 [d3](https://d3js.org/) 和 [dagre-d3](https://github.com/cpettitt/dagre-d3) 这两个优秀的项目，它们提供了图形布局和绘图工具库！_ > _同样感谢 [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) 提供了时序图语法的使用。 感谢 Jessica Peter 提供了甘特图渲染的灵感。_ > _感谢 [Tyler Long](https://github.com/tylerlong) 从 2017 年四月开始成为了项目的合作者。_
 >
-> _感谢越来越多的 [贡献者们](https://github.com/mermaid-js/mermaid/graphs/contributors)，没有你们，就没有这个项目的今天！_
+> _感谢越来越多的 [贡献者们](https://github.com/knsv/mermaid/graphs/contributors)，没有你们，就没有这个项目的今天！_
 
 ---
 

cypress.config.ts

@@ -1,9 +1,8 @@
-import eyesPlugin from '@applitools/eyes-cypress';
-import { registerArgosTask } from '@argos-ci/cypress/task';
-import coverage from '@cypress/code-coverage/task';
 import { defineConfig } from 'cypress';
 import { addMatchImageSnapshotPlugin } from 'cypress-image-snapshot/plugin';
-import cypressSplit from 'cypress-split';
+import coverage from '@cypress/code-coverage/task';
+import eyesPlugin from '@applitools/eyes-cypress';
+import { registerArgosTask } from '@argos-ci/cypress/task';
 
 export default eyesPlugin(
   defineConfig({
@@ -14,7 +13,6 @@ export default eyesPlugin(
       specPattern: 'cypress/integration/**/*.{js,ts}',
       setupNodeEvents(on, config) {
         coverage(on, config);
-        cypressSplit(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');
@@ -23,11 +21,7 @@ export default eyesPlugin(
         });
         // copy any needed variables from process.env to config.env
         config.env.useAppli = process.env.USE_APPLI ? true : false;
-        // only use Argos on CI in the mermaid-js/mermaid repository
-        config.env.useArgos =
-          !!process.env.CI &&
-          process.env.GITHUB_REPOSITORY === 'mermaid-js/mermaid' &&
-          !!process.env.ARGOS_TOKEN;
+        config.env.useArgos = !!process.env.CI;
 
         if (config.env.useArgos) {
           registerArgosTask(on, config, {

cypress/helpers/util.ts

@@ -29,7 +29,6 @@ export const mermaidUrl = (
   options: CypressMermaidConfig,
   api: boolean
 ): string => {
-  options.handDrawnSeed = 1;
   const codeObject: CodeObject = {
     code: graphStr,
     mermaid: options,
@@ -74,7 +73,7 @@ export const imgSnapshotTest = (
 
 export const urlSnapshotTest = (
   url: string,
-  options: CypressMermaidConfig = {},
+  options: CypressMermaidConfig,
   _api = false,
   validation?: any
 ): void => {
@@ -132,10 +131,3 @@ export const verifyScreenshot = (name: string): void => {
     cy.matchImageSnapshot(name);
   }
 };
-
-export const verifyNumber = (value: number, expected: number, deltaPercent = 10): void => {
-  expect(value).to.be.within(
-    expected * (1 - deltaPercent / 100),
-    expected * (1 + deltaPercent / 100)
-  );
-};

cypress/integration/rendering/architecture.spec.ts

@@ -1,233 +0,0 @@
-import { imgSnapshotTest, urlSnapshotTest } from '../../helpers/util.ts';
-
-describe.skip('architecture diagram', () => {
-  it('should render a simple architecture diagram with groups', () => {
-    imgSnapshotTest(
-      `architecture-beta
-                group api(cloud)[API]
-
-                service db(database)[Database] in api
-                service disk1(disk)[Storage] in api
-                service disk2(disk)[Storage] in api
-                service server(server)[Server] in api
-                service gateway(internet)[Gateway] 
-
-                db L--R server
-                disk1 T--B server
-                disk2 T--B db
-                server T--B gateway
-            `
-    );
-  });
-  it('should render an architecture diagram with groups within groups', () => {
-    imgSnapshotTest(
-      `architecture-beta
-                group api[API]
-                group public[Public API] in api
-                group private[Private API] in api
-        
-                service serv1(server)[Server] in public
-        
-                service serv2(server)[Server] in private
-                service db(database)[Database] in private
-        
-                service gateway(internet)[Gateway] in api
-        
-                serv1 B--T serv2
-                serv2 L--R db
-                serv1 L--R gateway
-            `
-    );
-  });
-  it('should render an architecture diagram with the fallback icon', () => {
-    imgSnapshotTest(
-      `architecture-beta
-                service unknown(iconnamedoesntexist)[Unknown Icon]
-            `
-    );
-  });
-  it('should render an architecture diagram with split directioning', () => {
-    imgSnapshotTest(
-      `architecture-beta
-                service db(database)[Database]
-                service s3(disk)[Storage]
-                service serv1(server)[Server 1]
-                service serv2(server)[Server 2]
-                service disk(disk)[Disk]
-        
-                db L--R s3
-                serv1 L--T s3
-                serv2 L--B s3
-                serv1 T--B disk
-            `
-    );
-  });
-  it('should render an architecture diagram with directional arrows', () => {
-    imgSnapshotTest(
-      `architecture-beta
-                service servC(server)[Server 1]
-                service servL(server)[Server 2]
-                service servR(server)[Server 3]
-                service servT(server)[Server 4]
-                service servB(server)[Server 5]
-        
-                servC (L--R) servL
-                servC (R--L) servR
-                servC (T--B) servT
-                servC (B--T) servB
-        
-                servL (T--L) servT
-                servL (B--L) servB
-                servR (T--R) servT
-                servR (B--R) servB
-            `
-    );
-  });
-  it('should render an architecture diagram with group edges', () => {
-    imgSnapshotTest(
-      `architecture-beta
-                group left_group(cloud)[Left]
-                group right_group(cloud)[Right]
-                group top_group(cloud)[Top]
-                group bottom_group(cloud)[Bottom]
-                group center_group(cloud)[Center]
-        
-                service left_disk(disk)[Disk] in left_group
-                service right_disk(disk)[Disk] in right_group
-                service top_disk(disk)[Disk] in top_group
-                service bottom_disk(disk)[Disk] in bottom_group
-                service center_disk(disk)[Disk] in center_group
-        
-                left_disk{group} (R--L) center_disk{group}
-                right_disk{group} (L--R) center_disk{group}
-                top_disk{group} (B--T) center_disk{group}
-                bottom_disk{group} (T--B) center_disk{group}
-            `
-    );
-  });
-  it('should render an architecture diagram with edge labels', () => {
-    imgSnapshotTest(
-      `architecture-beta
-                service servC(server)[Server 1]
-                service servL(server)[Server 2]
-                service servR(server)[Server 3]
-                service servT(server)[Server 4]
-                service servB(server)[Server 5]
-        
-                servC L-[Label]-R servL
-                servC R-[Label]-L servR
-                servC T-[Label]-B servT
-                servC B-[Label]-T servB
-        
-                servL T-[Label]-L servT
-                servL B-[Label]-L servB
-                servR T-[Label]-R servT
-                servR B-[Label]-R servB
-            `
-    );
-  });
-  it('should render an architecture diagram with simple junction edges', () => {
-    imgSnapshotTest(
-      `architecture-beta
-                service left_disk(disk)[Disk]
-                service top_disk(disk)[Disk]
-                service bottom_disk(disk)[Disk]
-                service top_gateway(internet)[Gateway]
-                service bottom_gateway(internet)[Gateway]
-                junction juncC
-                junction juncR
-        
-                left_disk R--L juncC
-                top_disk B--T juncC
-                bottom_disk T--B juncC
-                juncC R--L juncR
-                top_gateway B--T juncR
-                bottom_gateway T--B juncR
-            `
-    );
-  });
-  it('should render an architecture diagram with complex junction edges', () => {
-    imgSnapshotTest(
-      `architecture-beta
-                group left
-                group right
-                service left_disk(disk)[Disk] in left
-                service top_disk(disk)[Disk] in left
-                service bottom_disk(disk)[Disk] in left
-                service top_gateway(internet)[Gateway] in right
-                service bottom_gateway(internet)[Gateway] in right
-                junction juncC in left
-                junction juncR in right
-        
-                left_disk R--L juncC
-                top_disk B--T juncC
-                bottom_disk T--B juncC
-        
-        
-                top_gateway (B--T juncR
-                bottom_gateway (T--B juncR
-        
-                juncC{group} R--L) juncR{group}
-            `
-    );
-  });
-
-  it('should render an architecture diagram with a resonable height', () => {
-    imgSnapshotTest(
-      `architecture-beta
-              group federated(cloud)[Federated Environment]
-                  service server1(server)[System] in federated
-                  service edge(server)[Edge Device] in federated
-                  server1:R -- L:edge
-
-              group on_prem(cloud)[Hub]
-                  service firewall(server)[Firewall Device] in on_prem
-                  service server(server)[Server] in on_prem
-                  firewall:R -- L:server
-
-                  service db1(database)[db1] in on_prem
-                  service db2(database)[db2] in on_prem
-                  service db3(database)[db3] in on_prem
-                  service db4(database)[db4] in on_prem
-                  service db5(database)[db5] in on_prem
-                  service db6(database)[db6] in on_prem
-
-                  junction mid in on_prem
-                  server:B -- T:mid
-
-                  junction 1Leftofmid in on_prem
-                  1Leftofmid:R -- L:mid
-                  1Leftofmid:B -- T:db1
-
-                  junction 2Leftofmid in on_prem
-                  2Leftofmid:R -- L:1Leftofmid
-                  2Leftofmid:B -- T:db2
-
-                  junction 3Leftofmid in on_prem
-                  3Leftofmid:R -- L:2Leftofmid
-                  3Leftofmid:B -- T:db3
-
-                  junction 1RightOfMid in on_prem
-                  mid:R -- L:1RightOfMid
-                  1RightOfMid:B -- T:db4
-                  
-                  junction 2RightOfMid in on_prem
-                  1RightOfMid:R -- L:2RightOfMid
-                  2RightOfMid:B -- T:db5        
-                  
-                  junction 3RightOfMid in on_prem
-                  2RightOfMid:R -- L:3RightOfMid
-                  3RightOfMid:B -- T:db6         
-
-                  edge:R -- L:firewall
-      `
-    );
-  });
-});
-
-// Skipped as the layout is not deterministic, and causes issues in E2E tests.
-describe.skip('architecture - external', () => {
-  it('should allow adding external icons', () => {
-    urlSnapshotTest('http://localhost:9000/architecture-external.html');
-  });
-});

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

@@ -581,63 +581,4 @@ class C13["With Città foreign language"]
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
   });
-
-  it('renders a class diagram with a generic class in a namespace', () => {
-    const diagramDefinition = `
-      classDiagram-v2
-      namespace Company.Project.Module {
-        class GenericClass~T~ {
-          +addItem(item: T)
-          +getItem() T
-        }
-      }
-    `;
-
-    imgSnapshotTest(diagramDefinition);
-  });
-
-  it('renders a class diagram with nested namespaces and relationships', () => {
-    const diagramDefinition = `
-      classDiagram-v2
-      namespace Company.Project.Module.SubModule {
-        class Report {
-          +generatePDF(data: List)
-          +generateCSV(data: List)
-        }
-      }
-      namespace Company.Project.Module {
-        class Admin {
-          +generateReport()
-        }
-      }
-      Admin --> Report : generates
-    `;
-
-    imgSnapshotTest(diagramDefinition);
-  });
-
-  it('renders a class diagram with multiple classes and relationships in a namespace', () => {
-    const diagramDefinition = `
-      classDiagram-v2
-      namespace Company.Project.Module {
-        class User {
-          +login(username: String, password: String)
-          +logout()
-        }
-        class Admin {
-          +addUser(user: User)
-          +removeUser(user: User)
-          +generateReport()
-        }
-        class Report {
-          +generatePDF(reportData: List)
-          +generateCSV(reportData: List)
-        }
-      }
-      Admin --> User : manages
-      Admin --> Report : generates
-    `;
-
-    imgSnapshotTest(diagramDefinition);
-  });
 });

cypress/integration/rendering/erDiagram.spec.js

@@ -321,37 +321,4 @@ ORDER ||--|{ LINE-ITEM : contains
       { logLevel: 1 }
     );
   });
-
-  it('should render relationship labels with line breaks', () => {
-    imgSnapshotTest(
-      `
-    erDiagram
-      p[Person] {
-          string firstName
-          string lastName
-      }
-      a["Customer Account"] {
-          string email
-      }
-
-      b["Customer Account Secondary"] {
-        string email
-      }
-      
-      c["Customer Account Tertiary"] {
-        string email
-      }
-      
-      d["Customer Account Nth"] {
-        string email
-      }
-
-      p ||--o| a : "has<br />one"
-      p ||--o| b : "has<br />one<br />two"
-      p ||--o| c : "has<br />one<br/>two<br />three"
-      p ||--o| d : "has<br />one<br />two<br/>three<br />...<br/>Nth"
-      `,
-      { logLevel: 1 }
-    );
-  });
 });

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

@@ -1,6 +1,6 @@
-import { imgSnapshotTest, renderGraph, verifyNumber } from '../../helpers/util.ts';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
 
-describe('Flowchart ELK', () => {
+describe.skip('Flowchart ELK', () => {
   it('1-elk: should render a simple flowchart', () => {
     imgSnapshotTest(
       `flowchart-elk TD
@@ -109,7 +109,7 @@ describe('Flowchart ELK', () => {
       const style = svg.attr('style');
       expect(style).to.match(/^max-width: [\d.]+px;$/);
       const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
-      verifyNumber(maxWidthValue, 380);
+      expect(maxWidthValue).to.be.within(230 * 0.95, 230 * 1.05);
     });
   });
   it('8-elk: should render a flowchart when useMaxWidth is false', () => {
@@ -128,7 +128,7 @@ describe('Flowchart ELK', () => {
       const width = parseFloat(svg.attr('width'));
       // use within because the absolute value can be slightly different depending on the environment ±5%
       // expect(height).to.be.within(446 * 0.95, 446 * 1.05);
-      verifyNumber(width, 380);
+      expect(width).to.be.within(230 * 0.95, 230 * 1.05);
       expect(svg).to.not.have.attr('style');
     });
   });
@@ -692,7 +692,7 @@ A --> B
       {}
     );
     cy.get('svg').should((svg) => {
-      const edges = svg[0].querySelectorAll('.edges > path');
+      const edges = svg.querySelectorAll('.edges > path');
       edges.forEach((edge) => {
         expect(edge).to.have.class('flowchart-link');
       });
@@ -739,7 +739,7 @@ NL\`") --"\`1o **bold**\`"--> c
           { flowchart: { titleTopMargin: 0 } }
         );
       });
-      it.skip('Wrapping long text with a new line', () => {
+      it('Wrapping long text with a new line', () => {
         imgSnapshotTest(
           `%%{init: {"flowchart": {"htmlLabels": true}} }%%
 flowchart-elk LR
@@ -841,7 +841,7 @@ end
           { flowchart: { titleTopMargin: 0 } }
         );
       });
-      it('Sub graphs', () => {
+      it('Sub graphs and markdown strings', () => {
         imgSnapshotTest(
           `---
 config:
@@ -857,196 +857,6 @@ flowchart LR
     D --> E
       A["A"]
 
-`,
-          { flowchart: { titleTopMargin: 0 } }
-        );
-      });
-      it('6080: should handle diamond shape intersections', () => {
-        imgSnapshotTest(
-          `---
-config:
-  layout: elk
----
-flowchart LR
- subgraph s1["Untitled subgraph"]
-        n1["Evaluate"]
-        n2["Option 1"]
-        n3["Option 2"]
-        n4["fa:fa-car Option 3"]
-  end
- subgraph s2["Untitled subgraph"]
-        n5["Evaluate"]
-        n6["Option 1"]
-        n7["Option 2"]
-        n8["fa:fa-car Option 3"]
-  end
-    A["Start"] -- Some text --> B("Continue")
-    B --> C{"Evaluate"}
-    C -- One --> D["Option 1"]
-    C -- Two --> E["Option 2"]
-    C -- Three --> F["fa:fa-car Option 3"]
-    n1 -- One --> n2
-    n1 -- Two --> n3
-    n1 -- Three --> n4
-    n5 -- One --> n6
-    n5 -- Two --> n7
-    n5 -- Three --> n8
-    n1@{ shape: diam}
-    n2@{ shape: rect}
-    n3@{ shape: rect}
-    n4@{ shape: rect}
-    n5@{ shape: diam}
-    n6@{ shape: rect}
-    n7@{ shape: rect}
-    n8@{ shape: rect}
-
-`,
-          { flowchart: { titleTopMargin: 0 } }
-        );
-      });
-
-      it('6088-1: should handle diamond shape intersections', () => {
-        imgSnapshotTest(
-          `---
-config:
-  layout: elk
----
-      flowchart LR
-      subgraph S2
-      subgraph s1["APA"]
-      D{"Use the editor"}
-      end
-
-
-      D -- Mermaid js --> I{"fa:fa-code Text"}
-            D --> I
-            D --> I
-
-      end
-`,
-          { flowchart: { titleTopMargin: 0 } }
-        );
-      });
-
-      it('6088-2: should handle diamond shape intersections', () => {
-        imgSnapshotTest(
-          `---
-config:
-  layout: elk
----
-      flowchart LR
-      a
-      subgraph s0["APA"]
-      subgraph s8["APA"]
-      subgraph s1["APA"]
-        D{"X"}
-        E[Q]
-      end
-      subgraph s3["BAPA"]
-        F[Q]
-        I
-      end
-            D --> I
-            D --> I
-            D --> I
-
-      I{"X"}
-      end
-      end
-
-`,
-          { flowchart: { titleTopMargin: 0 } }
-        );
-      });
-
-      it('6088-3: should handle diamond shape intersections', () => {
-        imgSnapshotTest(
-          `---
-config:
-  layout: elk
----
-      flowchart LR
-      a
-        D{"Use the editor"}
-
-      D -- Mermaid js --> I{"fa:fa-code Text"}
-      D-->I
-      D-->I
-
-`,
-          { flowchart: { titleTopMargin: 0 } }
-        );
-      });
-
-      it('6088-4: should handle diamond shape intersections', () => {
-        imgSnapshotTest(
-          `---
-config:
-  layout: elk
----
-flowchart LR
- subgraph s1["Untitled subgraph"]
-        n1["Evaluate"]
-        n2["Option 1"]
-        n3["Option 2"]
-        n4["fa:fa-car Option 3"]
-  end
- subgraph s2["Untitled subgraph"]
-        n5["Evaluate"]
-        n6["Option 1"]
-        n7["Option 2"]
-        n8["fa:fa-car Option 3"]
-  end
-    A["Start"] -- Some text --> B("Continue")
-    B --> C{"Evaluate"}
-    C -- One --> D["Option 1"]
-    C -- Two --> E["Option 2"]
-    C -- Three --> F["fa:fa-car Option 3"]
-    n1 -- One --> n2
-    n1 -- Two --> n3
-    n1 -- Three --> n4
-    n5 -- One --> n6
-    n5 -- Two --> n7
-    n5 -- Three --> n8
-    n1@{ shape: diam}
-    n2@{ shape: rect}
-    n3@{ shape: rect}
-    n4@{ shape: rect}
-    n5@{ shape: diam}
-    n6@{ shape: rect}
-    n7@{ shape: rect}
-    n8@{ shape: rect}
-
-`,
-          { flowchart: { titleTopMargin: 0 } }
-        );
-      });
-
-      it('6088-5: should handle diamond shape intersections', () => {
-        imgSnapshotTest(
-          `---
-config:
-  layout: elk
----
-flowchart LR
-    A{A} --> B & C
-
-`,
-          { flowchart: { titleTopMargin: 0 } }
-        );
-      });
-      it('6088-6: should handle diamond shape intersections', () => {
-        imgSnapshotTest(
-          `---
-config:
-  layout: elk
----
-flowchart LR
-    A{A} --> B & C
-    subgraph "subbe"
-      A
-    end
-
 `,
           { flowchart: { titleTopMargin: 0 } }
         );

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

@@ -12,6 +12,7 @@ describe('Flowchart HandDrawn', () => {
       `,
       {
         look: 'handDrawn',
+        handDrawnSeed: 0,
         flowchart: { htmlLabels: false },
         fontFamily: 'courier',
       }
@@ -29,6 +30,7 @@ describe('Flowchart HandDrawn', () => {
       `,
       {
         look: 'handDrawn',
+        handDrawnSeed: 0,
         flowchart: { htmlLabels: true },
         fontFamily: 'courier',
       }
@@ -45,7 +47,7 @@ describe('Flowchart HandDrawn', () => {
       C -->|Two| E[iPhone]
       C -->|Three| F[Car]
       `,
-      { look: 'handDrawn', fontFamily: 'courier' }
+      { look: 'handDrawn', handDrawnSeed: 0, fontFamily: 'courier' }
     );
   });
 
@@ -60,7 +62,7 @@ describe('Flowchart HandDrawn', () => {
       C -->|Two| E[\\iPhone\\]
       C -->|Three| F[Car]
       `,
-      { look: 'handDrawn', fontFamily: 'courier' }
+      { look: 'handDrawn', handDrawnSeed: 0, fontFamily: 'courier' }
     );
   });
 
@@ -76,7 +78,7 @@ describe('Flowchart HandDrawn', () => {
       classDef processHead fill:#888888,color:white,font-weight:bold,stroke-width:3px,stroke:#001f3f
       class 1A,1B,D,E processHead
       `,
-      { look: 'handDrawn', fontFamily: 'courier' }
+      { look: 'handDrawn', handDrawnSeed: 0, fontFamily: 'courier' }
     );
   });
 
@@ -105,7 +107,7 @@ describe('Flowchart HandDrawn', () => {
       35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
       36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
       `,
-      { look: 'handDrawn', fontFamily: 'courier' }
+      { look: 'handDrawn', handDrawnSeed: 0, fontFamily: 'courier' }
     );
   });
 
@@ -176,7 +178,7 @@ describe('Flowchart HandDrawn', () => {
       9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
       9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
       `,
-      { look: 'handDrawn', fontFamily: 'courier' }
+      { look: 'handDrawn', handDrawnSeed: 0, fontFamily: 'courier' }
     );
   });
 
@@ -185,7 +187,7 @@ describe('Flowchart HandDrawn', () => {
       `
     graph TB;subgraph "number as labels";1;end;
       `,
-      { look: 'handDrawn', fontFamily: 'courier' }
+      { look: 'handDrawn', handDrawnSeed: 0, fontFamily: 'courier' }
     );
   });
 
@@ -197,7 +199,7 @@ describe('Flowchart HandDrawn', () => {
         a1-->a2
       end
       `,
-      { look: 'handDrawn', fontFamily: 'courier' }
+      { look: 'handDrawn', handDrawnSeed: 0, fontFamily: 'courier' }
     );
   });
 
@@ -209,7 +211,7 @@ describe('Flowchart HandDrawn', () => {
         a1-->a2
       end
       `,
-      { look: 'handDrawn', fontFamily: 'courier' }
+      { look: 'handDrawn', handDrawnSeed: 0, fontFamily: 'courier' }
     );
   });
 
@@ -244,7 +246,7 @@ describe('Flowchart HandDrawn', () => {
       style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
       style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
       `,
-      { look: 'handDrawn', fontFamily: 'courier' }
+      { look: 'handDrawn', handDrawnSeed: 0, fontFamily: 'courier' }
     );
   });
 
@@ -346,7 +348,7 @@ describe('Flowchart HandDrawn', () => {
       sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
       sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
       `,
-      { look: 'handDrawn', fontFamily: 'courier' }
+      { look: 'handDrawn', handDrawnSeed: 0, fontFamily: 'courier' }
     );
   });
 
@@ -362,6 +364,7 @@ describe('Flowchart HandDrawn', () => {
       `,
       {
         look: 'handDrawn',
+        handDrawnSeed: 0,
         listUrl: false,
         listId: 'color styling',
         fontFamily: 'courier',
@@ -387,6 +390,7 @@ describe('Flowchart HandDrawn', () => {
       `,
       {
         look: 'handDrawn',
+        handDrawnSeed: 0,
         listUrl: false,
         listId: 'color styling',
         fontFamily: 'courier',
@@ -407,6 +411,7 @@ describe('Flowchart HandDrawn', () => {
       `,
       {
         look: 'handDrawn',
+        handDrawnSeed: 0,
         flowchart: { htmlLabels: false },
         fontFamily: 'courier',
       }
@@ -430,6 +435,7 @@ describe('Flowchart HandDrawn', () => {
       `,
       {
         look: 'handDrawn',
+        handDrawnSeed: 0,
         flowchart: { htmlLabels: false },
         fontFamily: 'courier',
       }
@@ -451,6 +457,7 @@ describe('Flowchart HandDrawn', () => {
       `,
       {
         look: 'handDrawn',
+        handDrawnSeed: 0,
         flowchart: { htmlLabels: false },
         fontFamily: 'courier',
       }
@@ -464,6 +471,7 @@ describe('Flowchart HandDrawn', () => {
       `,
       {
         look: 'handDrawn',
+        handDrawnSeed: 0,
         flowchart: { htmlLabels: false },
         fontFamily: 'courier',
       }
@@ -477,6 +485,7 @@ describe('Flowchart HandDrawn', () => {
       `,
       {
         look: 'handDrawn',
+        handDrawnSeed: 0,
         flowchart: { htmlLabels: false },
         fontFamily: 'courier',
       }
@@ -491,6 +500,7 @@ describe('Flowchart HandDrawn', () => {
       `,
       {
         look: 'handDrawn',
+        handDrawnSeed: 0,
         flowchart: { htmlLabels: false },
         fontFamily: 'courier',
       }
@@ -517,6 +527,7 @@ describe('Flowchart HandDrawn', () => {
       class A someclass;`,
       {
         look: 'handDrawn',
+        handDrawnSeed: 0,
         flowchart: { htmlLabels: false },
         fontFamily: 'courier',
       }
@@ -533,7 +544,7 @@ describe('Flowchart HandDrawn', () => {
       C -->|Two| E[iPhone]
       C -->|Three| F[fa:fa-car Car]
       `,
-      { look: 'handDrawn', flowchart: { nodeSpacing: 50 }, fontFamily: 'courier' }
+      { look: 'handDrawn', handDrawnSeed: 0, flowchart: { nodeSpacing: 50 }, fontFamily: 'courier' }
     );
   });
 
@@ -549,6 +560,7 @@ describe('Flowchart HandDrawn', () => {
       `,
       {
         look: 'handDrawn',
+        handDrawnSeed: 0,
         flowchart: { rankSpacing: '100' },
         fontFamily: 'courier',
       }
@@ -566,6 +578,7 @@ describe('Flowchart HandDrawn', () => {
       `,
       {
         look: 'handDrawn',
+        handDrawnSeed: 0,
         flowchart: { htmlLabels: false },
         fontFamily: 'courier',
       }
@@ -590,7 +603,7 @@ describe('Flowchart HandDrawn', () => {
       click E "notes://do-your-thing/id" "other protocol test"
       click F "javascript:alert('test')" "script test"
       `,
-      { look: 'handDrawn', securityLevel: 'loose', fontFamily: 'courier' }
+      { look: 'handDrawn', handDrawnSeed: 0, securityLevel: 'loose', fontFamily: 'courier' }
     );
   });
 
@@ -610,7 +623,7 @@ describe('Flowchart HandDrawn', () => {
       click B "index.html#link-clicked" "link test"
       click D testClick "click test"
       `,
-      { look: 'handDrawn', flowchart: { htmlLabels: true } }
+      { look: 'handDrawn', handDrawnSeed: 0, flowchart: { htmlLabels: true } }
     );
   });
 
@@ -632,6 +645,7 @@ describe('Flowchart HandDrawn', () => {
       `,
       {
         look: 'handDrawn',
+        handDrawnSeed: 0,
         flowchart: { htmlLabels: false },
         fontFamily: 'courier',
       }
@@ -650,7 +664,7 @@ describe('Flowchart HandDrawn', () => {
       class A myClass1
       class D myClass2
       `,
-      { look: 'handDrawn', flowchart: { htmlLabels: true } }
+      { look: 'handDrawn', handDrawnSeed: 0, flowchart: { htmlLabels: true } }
     );
   });
 
@@ -668,6 +682,7 @@ describe('Flowchart HandDrawn', () => {
       `,
       {
         look: 'handDrawn',
+        handDrawnSeed: 0,
         flowchart: { htmlLabels: false },
         fontFamily: 'courier',
       }
@@ -696,6 +711,7 @@ describe('Flowchart HandDrawn', () => {
       `,
       {
         look: 'handDrawn',
+        handDrawnSeed: 0,
         flowchart: { htmlLabels: false },
         fontFamily: 'courier',
       }
@@ -712,6 +728,7 @@ describe('Flowchart HandDrawn', () => {
       `,
       {
         look: 'handDrawn',
+        handDrawnSeed: 0,
         flowchart: { htmlLabels: false },
         fontFamily: 'courier',
       }
@@ -735,6 +752,7 @@ describe('Flowchart HandDrawn', () => {
       `,
       {
         look: 'handDrawn',
+        handDrawnSeed: 0,
         flowchart: { htmlLabels: false },
         fontFamily: 'courier',
       }
@@ -751,7 +769,7 @@ describe('Flowchart HandDrawn', () => {
       C -->|Two| E[iPhone]
       C -->|Three| F[fa:fa-car Car]
       `,
-      { look: 'handDrawn', flowchart: { diagramPadding: 0 } }
+      { look: 'handDrawn', handDrawnSeed: 0, flowchart: { diagramPadding: 0 } }
     );
   });
 
@@ -760,7 +778,7 @@ describe('Flowchart HandDrawn', () => {
       `graph TD
       A[Christmas]
       `,
-      { look: 'handDrawn', handDrawnSeed: 1 }
+      { look: 'handDrawn', handDrawnSeed: 0 }
     );
   });
 
@@ -778,7 +796,7 @@ describe('Flowchart HandDrawn', () => {
       C -----> E4
       C ======> E5
       `,
-      { look: 'handDrawn', handDrawnSeed: 1 }
+      { look: 'handDrawn', handDrawnSeed: 0 }
     );
   });
   it('FDH36: should render escaped without html labels', () => {
@@ -786,7 +804,7 @@ describe('Flowchart HandDrawn', () => {
       `graph TD
         a["<strong>Haiya</strong>"]-->b
       `,
-      { look: 'handDrawn', htmlLabels: false, flowchart: { htmlLabels: false } }
+      { look: 'handDrawn', handDrawnSeed: 0, htmlLabels: false, flowchart: { htmlLabels: false } }
     );
   });
   it('FDH37: should render non-escaped with html labels', () => {
@@ -796,6 +814,7 @@ describe('Flowchart HandDrawn', () => {
       `,
       {
         look: 'handDrawn',
+        handDrawnSeed: 0,
         htmlLabels: true,
         flowchart: { htmlLabels: true },
         securityLevel: 'loose',
@@ -811,7 +830,7 @@ describe('Flowchart HandDrawn', () => {
       C -->|Two| E[iPhone]
       C -->|Three| F[fa:fa-car Car]
       `,
-      { look: 'handDrawn', flowchart: { useMaxWidth: true } }
+      { look: 'handDrawn', handDrawnSeed: 0, flowchart: { useMaxWidth: true } }
     );
     cy.get('svg').should((svg) => {
       expect(svg).to.have.attr('width', '100%');
@@ -834,7 +853,7 @@ describe('Flowchart HandDrawn', () => {
       C -->|Two| E[iPhone]
       C -->|Three| F[fa:fa-car Car]
       `,
-      { look: 'handDrawn', flowchart: { useMaxWidth: false } }
+      { look: 'handDrawn', handDrawnSeed: 0, flowchart: { useMaxWidth: false } }
     );
     cy.get('svg').should((svg) => {
       // const height = parseFloat(svg.attr('height'));
@@ -855,6 +874,7 @@ describe('Flowchart HandDrawn', () => {
       `,
       {
         look: 'handDrawn',
+        handDrawnSeed: 0,
         htmlLabels: true,
         flowchart: { htmlLabels: true },
         securityLevel: 'loose',
@@ -884,6 +904,7 @@ describe('Flowchart HandDrawn', () => {
       `,
       {
         look: 'handDrawn',
+        handDrawnSeed: 0,
         htmlLabels: true,
         flowchart: { htmlLabels: true },
         securityLevel: 'loose',
@@ -898,6 +919,7 @@ graph TD
       `,
       {
         look: 'handDrawn',
+        handDrawnSeed: 0,
         htmlLabels: true,
         flowchart: { htmlLabels: true },
         securityLevel: 'loose',
@@ -915,6 +937,7 @@ graph TD
       `,
       {
         look: 'handDrawn',
+        handDrawnSeed: 0,
         htmlLabels: true,
         flowchart: { htmlLabels: true },
         securityLevel: 'loose',
@@ -954,6 +977,7 @@ graph TD
       `,
       {
         look: 'handDrawn',
+        handDrawnSeed: 0,
         htmlLabels: true,
         flowchart: { htmlLabels: true },
         securityLevel: 'loose',
@@ -975,6 +999,7 @@ graph TD
       `,
       {
         look: 'handDrawn',
+        handDrawnSeed: 0,
         htmlLabels: true,
         flowchart: { htmlLabels: true },
         securityLevel: 'loose',
@@ -991,6 +1016,7 @@ graph TD
       `,
       {
         look: 'handDrawn',
+        handDrawnSeed: 0,
         htmlLabels: true,
         flowchart: { htmlLabels: true },
         securityLevel: 'loose',
@@ -1001,11 +1027,12 @@ graph TD
     imgSnapshotTest(
       `
       graph TD
-        classDef default fill:#a34,stroke:#000,stroke-width:4px,color:#fff
+        classDef default fill:#a34,stroke:#000,stroke-width:4px,color:#fff 
         hello --> default
       `,
       {
         look: 'handDrawn',
+        handDrawnSeed: 0,
         htmlLabels: true,
         flowchart: { htmlLabels: true },
         securityLevel: 'loose',
@@ -1024,6 +1051,7 @@ graph TD
     `,
       {
         look: 'handDrawn',
+        handDrawnSeed: 0,
         flowchart: { htmlLabels: true },
         securityLevel: 'loose',
       }

cypress/integration/rendering/flowchart-shape-alias.spec.ts

@@ -1,142 +0,0 @@
-import { imgSnapshotTest } from '../../helpers/util.ts';
-
-const aliasSet1 = ['process', 'rect', 'proc', 'rectangle'] as const;
-
-const aliasSet2 = ['event', 'rounded'] as const;
-
-const aliasSet3 = ['stadium', 'pill', 'terminal'] as const;
-
-const aliasSet4 = ['fr-rect', 'subproc', 'subprocess', 'framed-rectangle', 'subroutine'] as const;
-
-const aliasSet5 = ['db', 'database', 'cylinder', 'cyl'] as const;
-
-const aliasSet6 = ['diam', 'decision', 'diamond'] as const;
-
-const aliasSet7 = ['hex', 'hexagon', 'prepare'] as const;
-
-const aliasSet8 = ['lean-r', 'lean-right', 'in-out'] as const;
-
-const aliasSet9 = ['lean-l', 'lean-left', 'out-in'] as const;
-
-const aliasSet10 = ['trap-b', 'trapezoid-bottom', 'priority'] as const;
-
-const aliasSet11 = ['trap-t', 'trapezoid-top', 'manual'] as const;
-
-const aliasSet12 = ['dbl-circ', 'double-circle'] as const;
-
-const aliasSet13 = ['notched-rectangle', 'card', 'notch-rect'] as const;
-
-const aliasSet14 = [
-  'lin-rect',
-  'lined-rectangle',
-  'lin-proc',
-  'lined-process',
-  'shaded-process',
-] as const;
-
-const aliasSet15 = ['sm-circ', 'small-circle', 'start'] as const;
-
-const aliasSet16 = ['fr-circ', 'framed-circle', 'stop'] as const;
-
-const aliasSet17 = ['fork', 'join'] as const;
-// brace-r', 'braces'
-const aliasSet18 = ['comment', 'brace-l'] as const;
-
-const aliasSet19 = ['bolt', 'com-link', 'lightning-bolt'] as const;
-
-const aliasSet20 = ['doc', 'document'] as const;
-
-const aliasSet21 = ['delay', 'half-rounded-rectangle'] as const;
-
-const aliasSet22 = ['h-cyl', 'das', 'horizontal-cylinder'] as const;
-
-const aliasSet23 = ['lin-cyl', 'disk', 'lined-cylinder'] as const;
-
-const aliasSet24 = ['curv-trap', 'display', 'curved-trapezoid'] as const;
-
-const aliasSet25 = ['div-rect', 'div-proc', 'divided-rectangle', 'divided-process'] as const;
-
-const aliasSet26 = ['extract', 'tri', 'triangle'] as const;
-
-const aliasSet27 = ['win-pane', 'internal-storage', 'window-pane'] as const;
-
-const aliasSet28 = ['f-circ', 'junction', 'filled-circle'] as const;
-
-const aliasSet29 = ['lin-doc', 'lined-document'] as const;
-
-const aliasSet30 = ['notch-pent', 'loop-limit', 'notched-pentagon'] as const;
-
-const aliasSet31 = ['flip-tri', 'manual-file', 'flipped-triangle'] as const;
-
-const aliasSet32 = ['sl-rect', 'manual-input', 'sloped-rectangle'] as const;
-
-const aliasSet33 = ['docs', 'documents', 'st-doc', 'stacked-document'] as const;
-
-const aliasSet34 = ['procs', 'processes', 'st-rect', 'stacked-rectangle'] as const;
-
-const aliasSet35 = ['flag', 'paper-tape'] as const;
-
-const aliasSet36 = ['bow-rect', 'stored-data', 'bow-tie-rectangle'] as const;
-
-const aliasSet37 = ['cross-circ', 'summary', 'crossed-circle'] as const;
-
-const aliasSet38 = ['tag-doc', 'tagged-document'] as const;
-
-const aliasSet39 = ['tag-rect', 'tag-proc', 'tagged-rectangle', 'tagged-process'] as const;
-
-const aliasSet40 = ['collate', 'hourglass'] as const;
-
-// Aggregate all alias sets into a single array
-const aliasSets = [
-  aliasSet1,
-  aliasSet2,
-  aliasSet3,
-  aliasSet4,
-  aliasSet5,
-  aliasSet6,
-  aliasSet7,
-  aliasSet8,
-  aliasSet9,
-  aliasSet10,
-  aliasSet11,
-  aliasSet12,
-  aliasSet13,
-  aliasSet14,
-  aliasSet15,
-  aliasSet16,
-  aliasSet17,
-  aliasSet18,
-  aliasSet19,
-  aliasSet20,
-  aliasSet21,
-  aliasSet22,
-  aliasSet23,
-  aliasSet24,
-  aliasSet25,
-  aliasSet26,
-  aliasSet27,
-  aliasSet28,
-  aliasSet29,
-  aliasSet30,
-  aliasSet31,
-  aliasSet32,
-  aliasSet33,
-  aliasSet34,
-  aliasSet35,
-  aliasSet36,
-  aliasSet37,
-  aliasSet38,
-  aliasSet39,
-] as const;
-
-aliasSets.forEach((aliasSet) => {
-  describe(`Test ${aliasSet.join(',')} `, () => {
-    it(`All ${aliasSet.join(',')} should render same shape`, () => {
-      let flowchartCode = `flowchart \n`;
-      aliasSet.forEach((alias, index) => {
-        flowchartCode += ` n${index}@{ shape: ${alias}, label: "${alias}" }\n`;
-      });
-      imgSnapshotTest(flowchartCode);
-    });
-  });
-});

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

@@ -99,7 +99,7 @@ describe('Flowchart v2', () => {
       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(417 * 0.95, 417 * 1.05);
+      expect(maxWidthValue).to.be.within(446 * 0.95 - 1, 446 * 1.05);
     });
   });
   it('8: should render a flowchart when useMaxWidth is false', () => {
@@ -118,7 +118,7 @@ describe('Flowchart v2', () => {
       const width = parseFloat(svg.attr('width'));
       // use within because the absolute value can be slightly different depending on the environment ±5%
       // expect(height).to.be.within(446 * 0.95, 446 * 1.05);
-      expect(width).to.be.within(417 * 0.95, 417 * 1.05);
+      expect(width).to.be.within(446 * 0.95 - 1, 446 * 1.05);
       expect(svg).to.not.have.attr('style');
     });
   });
@@ -786,7 +786,7 @@ A ~~~ B
       `---
       title: Subgraph nodeSpacing and rankSpacing example
       config:
-        flowchart:
+        flowchart: 
           nodeSpacing: 250
           rankSpacing: 250
       ---
@@ -1052,65 +1052,5 @@ end
         }
       );
     });
-    it('Should render self-loops', () => {
-      imgSnapshotTest(
-        `flowchart
-          A --> A
-          subgraph B
-            B1 --> B1
-          end
-          subgraph C
-            subgraph C1
-              C2 --> C2
-              subgraph D
-                D1 --> D1
-              end
-              D --> D
-            end
-            C1 --> C1
-          end
-        `,
-        {
-          flowchart: { subGraphTitleMargin: { top: 10, bottom: 5 } },
-        }
-      );
-    });
-  });
-  describe('New @ sytax for node metadata edge cases', () => {
-    it('should be possible to use @  syntax to add labels on multi nodes', () => {
-      imgSnapshotTest(
-        `flowchart TB
-       n2["label for n2"] &   n4@{ label: "labe for n4"}   & n5@{ label: "labe for n5"}
-        `,
-        {}
-      );
-    });
-    it('should be possible to use @  syntax to add labels with trail spaces and &', () => {
-      imgSnapshotTest(
-        `flowchart TB
-       n2["label for n2"] &   n4@{ label: "labe for n4"}   & n5@{ label: "labe for n5"}   
-        `,
-        {}
-      );
-    });
-    it('should be possible to use @  syntax to add labels with trail spaces', () => {
-      imgSnapshotTest(
-        `flowchart TB
-       n2["label for n2"]
-       n4@{ label: "labe for n4"}
-       n5@{ label: "labe for n5"}  
-        `,
-        {}
-      );
-    });
-    it('should be possible to use @  syntax to add labels with trail spaces and edge/link', () => {
-      imgSnapshotTest(
-        `flowchart TD
-    A["A"] --> B["for B"] &    C@{ label: "for c"} & E@{label : "for E"}  
-    D@{label: "for D"}     
-        `,
-        {}
-      );
-    });
   });
 });

cypress/integration/rendering/iconShape.spec.ts

@@ -1,143 +0,0 @@
-import { imgSnapshotTest } from '../../helpers/util';
-
-const looks = ['classic', 'handDrawn'] as const;
-const directions = [
-  'TB',
-  //'BT',
-  'LR',
-  //  'RL'
-] as const;
-const forms = [undefined, 'square', 'circle', 'rounded'] as const;
-const labelPos = [undefined, 't', 'b'] as const;
-
-looks.forEach((look) => {
-  directions.forEach((direction) => {
-    forms.forEach((form) => {
-      labelPos.forEach((pos) => {
-        describe(`Test iconShape in ${form ? `${form} form,` : ''} ${look} look and dir ${direction} with label position ${pos ? pos : 'not defined'}`, () => {
-          it(`without label`, () => {
-            let flowchartCode = `flowchart ${direction}\n`;
-            flowchartCode += `  nA --> nAA@{ icon: 'fa:bell'`;
-            if (form) {
-              flowchartCode += `, form: '${form}'`;
-            }
-            flowchartCode += ` }\n`;
-            imgSnapshotTest(flowchartCode, { look });
-          });
-
-          it(`with label`, () => {
-            let flowchartCode = `flowchart ${direction}\n`;
-            flowchartCode += `  nA --> nAA@{ icon: 'fa:bell', label: 'This is a label for icon shape'`;
-            if (form) {
-              flowchartCode += `, form: '${form}'`;
-            }
-            if (pos) {
-              flowchartCode += `, pos: '${pos}'`;
-            }
-            flowchartCode += ` }\n`;
-            imgSnapshotTest(flowchartCode, { look });
-          });
-
-          it(`with very long label`, () => {
-            let flowchartCode = `flowchart ${direction}\n`;
-            flowchartCode += `  nA --> nAA@{ icon: 'fa:bell', label: 'This is a very very very very very long long long label for icon shape'`;
-            if (form) {
-              flowchartCode += `, form: '${form}'`;
-            }
-            if (pos) {
-              flowchartCode += `, pos: '${pos}'`;
-            }
-            flowchartCode += ` }\n`;
-            imgSnapshotTest(flowchartCode, { look });
-          });
-
-          it(`with markdown htmlLabels:true`, () => {
-            let flowchartCode = `flowchart ${direction}\n`;
-            flowchartCode += `  nA --> nAA@{ icon: 'fa:bell', label: 'This is **bold** </br>and <strong>strong</strong> for icon shape'`;
-            if (form) {
-              flowchartCode += `, form: '${form}'`;
-            }
-            if (pos) {
-              flowchartCode += `, pos: '${pos}'`;
-            }
-            flowchartCode += ` }\n`;
-            imgSnapshotTest(flowchartCode, { look });
-          });
-
-          it(`with markdown htmlLabels:false`, () => {
-            let flowchartCode = `flowchart ${direction}\n`;
-            flowchartCode += `  nA --> nAA@{ icon: 'fa:bell', label: 'This is **bold** </br>and <strong>strong</strong> for icon shape'`;
-            if (form) {
-              flowchartCode += `, form: '${form}'`;
-            }
-            if (pos) {
-              flowchartCode += `, pos: '${pos}'`;
-            }
-            flowchartCode += ` }\n`;
-            imgSnapshotTest(flowchartCode, {
-              look,
-              htmlLabels: false,
-              flowchart: { htmlLabels: false },
-            });
-          });
-
-          it(`with styles`, () => {
-            let flowchartCode = `flowchart ${direction}\n`;
-            flowchartCode += `  nA --> nAA@{ icon: 'fa:bell', label: 'new icon shape'`;
-            if (form) {
-              flowchartCode += `, form: '${form}'`;
-            }
-            if (pos) {
-              flowchartCode += `, pos: '${pos}'`;
-            }
-            flowchartCode += ` }\n`;
-            flowchartCode += `  style nAA fill:#f9f,stroke:#333,stroke-width:4px \n`;
-            imgSnapshotTest(flowchartCode, { look });
-          });
-
-          it(`with classDef`, () => {
-            let flowchartCode = `flowchart ${direction}\n`;
-            flowchartCode += `  classDef customClazz fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5\n`;
-            flowchartCode += `  nA --> nAA@{ icon: 'fa:bell', label: 'new icon shape'`;
-            if (form) {
-              flowchartCode += `, form: '${form}'`;
-            }
-            if (pos) {
-              flowchartCode += `, pos: '${pos}'`;
-            }
-            flowchartCode += ` }\n`;
-            flowchartCode += `  nAA:::customClazz\n`;
-            imgSnapshotTest(flowchartCode, { look });
-          });
-        });
-      });
-    });
-  });
-});
-
-describe('Test iconShape with different h', () => {
-  it('with different h', () => {
-    let flowchartCode = `flowchart TB\n`;
-    const icon = 'fa:bell';
-    const iconHeight = 64;
-    flowchartCode += `  nA --> nAA@{ icon: '${icon}', label: 'icon with different h', h: ${iconHeight} }\n`;
-    imgSnapshotTest(flowchartCode);
-  });
-});
-
-describe('Test colored iconShape', () => {
-  it('with no styles', () => {
-    let flowchartCode = `flowchart TB\n`;
-    const icon = 'fluent-emoji:tropical-fish';
-    flowchartCode += `  nA --> nAA@{ icon: '${icon}', form: 'square', label: 'icon with color' }\n`;
-    imgSnapshotTest(flowchartCode);
-  });
-
-  it('with styles', () => {
-    let flowchartCode = `flowchart TB\n`;
-    const icon = 'fluent-emoji:tropical-fish';
-    flowchartCode += `  nA --> nAA@{ icon: '${icon}', form: 'square', label: 'icon with color' }\n`;
-    flowchartCode += `  style nAA fill:#f9f,stroke:#333,stroke-width:4px \n`;
-    imgSnapshotTest(flowchartCode);
-  });
-});

cypress/integration/rendering/imageShape.spec.ts

@@ -1,103 +0,0 @@
-import { imgSnapshotTest } from '../../helpers/util';
-
-const looks = ['classic', 'handDrawn'] as const;
-const directions = [
-  'TB',
-  //'BT',
-  'LR',
-  //  'RL'
-] as const;
-const labelPos = [undefined, 't', 'b'] as const;
-
-looks.forEach((look) => {
-  directions.forEach((direction) => {
-    labelPos.forEach((pos) => {
-      describe(`Test imageShape in ${look} look and dir ${direction} with label position ${pos ? pos : 'not defined'}`, () => {
-        it(`without label`, () => {
-          let flowchartCode = `flowchart ${direction}\n`;
-          flowchartCode += `  nA --> A@{ img: 'https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg', w: '100', h: '100' }\n`;
-          imgSnapshotTest(flowchartCode, { look });
-        });
-
-        it(`with label`, () => {
-          let flowchartCode = `flowchart ${direction}\n`;
-          flowchartCode += `  nA --> A@{ img: 'https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg', label: 'This is a label for image shape'`;
-
-          flowchartCode += `, w: '100', h: '200'`;
-          if (pos) {
-            flowchartCode += `, pos: '${pos}'`;
-          }
-          flowchartCode += ` }\n`;
-          imgSnapshotTest(flowchartCode, { look });
-        });
-
-        it(`with very long label`, () => {
-          let flowchartCode = `flowchart ${direction}\n`;
-          flowchartCode += `  nA --> A@{ img: 'https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg', label: 'This is a very very very very very long long long label for image shape'`;
-
-          flowchartCode += `, w: '100', h: '250'`;
-          if (pos) {
-            flowchartCode += `, pos: '${pos}'`;
-          }
-          flowchartCode += ` }\n`;
-          imgSnapshotTest(flowchartCode, { look });
-        });
-
-        it(`with markdown htmlLabels:true`, () => {
-          let flowchartCode = `flowchart ${direction}\n`;
-          flowchartCode += `  nA --> A@{ img: 'https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg', label: 'This is **bold** </br>and <strong>strong</strong> for image shape'`;
-
-          flowchartCode += `, w: '550', h: '200'`;
-          if (pos) {
-            flowchartCode += `, pos: '${pos}'`;
-          }
-          flowchartCode += ` }\n`;
-          imgSnapshotTest(flowchartCode, { look, htmlLabels: true });
-        });
-
-        it(`with markdown htmlLabels:false`, () => {
-          let flowchartCode = `flowchart ${direction}\n`;
-          flowchartCode += `  nA --> A@{ img: 'https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg', label: 'This is **bold** </br>and <strong>strong</strong> for image shape'`;
-          flowchartCode += `, w: '250', h: '200'`;
-
-          if (pos) {
-            flowchartCode += `, pos: '${pos}'`;
-          }
-          flowchartCode += ` }\n`;
-          imgSnapshotTest(flowchartCode, {
-            look,
-            htmlLabels: false,
-            flowchart: { htmlLabels: false },
-          });
-        });
-
-        it(`with styles`, () => {
-          let flowchartCode = `flowchart ${direction}\n`;
-          flowchartCode += `  nA --> A@{ img: 'https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg', label: 'new image shape'`;
-          flowchartCode += `, w: '550', h: '200'`;
-
-          if (pos) {
-            flowchartCode += `, pos: '${pos}'`;
-          }
-          flowchartCode += ` }\n`;
-          flowchartCode += `  style A fill:#f9f,stroke:#333,stroke-width:4px \n`;
-          imgSnapshotTest(flowchartCode, { look });
-        });
-
-        it(`with classDef`, () => {
-          let flowchartCode = `flowchart ${direction}\n`;
-          flowchartCode += `  classDef customClazz fill:#bbf,stroke:#f66,stroke-width:2px,color:#000000,stroke-dasharray: 5 5\n`;
-          flowchartCode += `  nA --> A@{ img: 'https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg', label: 'new image shape'`;
-
-          flowchartCode += `, w: '500', h: '550'`;
-          if (pos) {
-            flowchartCode += `, pos: '${pos}'`;
-          }
-          flowchartCode += ` }\n`;
-          flowchartCode += `  A:::customClazz\n`;
-          imgSnapshotTest(flowchartCode, { look });
-        });
-      });
-    });
-  });
-});

cypress/integration/rendering/kanban.spec.ts

@@ -1,136 +0,0 @@
-import { imgSnapshotTest } from '../../helpers/util.ts';
-
-describe('Kanban diagram', () => {
-  it('1: should render a kanban with a single section', () => {
-    imgSnapshotTest(
-      `kanban
-  id1[Todo]
-    docs[Create Documentation]
-    docs[Create Blog about the new diagram]
-      `,
-      {}
-    );
-  });
-  it('2: should render a kanban with multiple sections', () => {
-    imgSnapshotTest(
-      `kanban
-  id1[Todo]
-    docs[Create Documentation]
-  id2
-    docs[Create Blog about the new diagram]
-      `,
-      {}
-    );
-  });
-  it('3: should render a kanban with a single wrapping node', () => {
-    imgSnapshotTest(
-      `kanban
-  id1[Todo]
-    id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char, wrapping]
-      `,
-      {}
-    );
-  });
-  it('4: should handle the height of a section with a wrapping node at the end', () => {
-    imgSnapshotTest(
-      `kanban
-  id1[Todo]
-    id2[One line]
-    id3[Title of diagram is more than 100 chars when user duplicates diagram with 100 char, wrapping]
-      `,
-      {}
-    );
-  });
-  it('5: should handle the height of a section with a wrapping node at the top', () => {
-    imgSnapshotTest(
-      `kanban
-  id1[Todo]
-    id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char, wrapping]
-    id3[One line]
-      `,
-      {}
-    );
-  });
-  it('6: should handle the height of a section with a wrapping node in the middle', () => {
-    imgSnapshotTest(
-      `kanban
-  id1[Todo]
-    id2[One line]
-    id3[Title of diagram is more than 100 chars when user duplicates diagram with 100 char, wrapping]
-    id4[One line]
-      `,
-      {}
-    );
-  });
-  it('6: should handle assigments', () => {
-    imgSnapshotTest(
-      `kanban
-  id1[Todo]
-    docs[Create Documentation]
-  id2[In progress]
-    docs[Create Blog about the new diagram]@{ assigned: 'knsv' }
-      `,
-      {}
-    );
-  });
-  it('7: should handle prioritization', () => {
-    imgSnapshotTest(
-      `kanban
-  id2[In progress]
-    vh[Very High]@{ priority: 'Very High' }
-    h[High]@{ priority: 'High' }
-    m[Default priority]
-    l[Low]@{ priority: 'Low' }
-    vl[Very Low]@{ priority: 'Very Low' }
-      `,
-      {}
-    );
-  });
-  it('7: should handle external tickets', () => {
-    imgSnapshotTest(
-      `kanban
-  id1[Todo]
-    docs[Create Documentation]
-  id2[In progress]
-    docs[Create Blog about the new diagram]@{ ticket: MC-2037 }
-      `,
-      {}
-    );
-  });
-  it('8: should handle assignments, prioritization and tickets ids in the same item', () => {
-    imgSnapshotTest(
-      `kanban
-  id2[In progress]
-    docs[Create Blog about the new diagram]@{ priority: 'Very Low', ticket: MC-2037, assigned: 'knsv' }
-      `,
-      {}
-    );
-  });
-  it('10: Full example', () => {
-    imgSnapshotTest(
-      `---
-config:
-  kanban:
-    ticketBaseUrl: 'https://abc123.atlassian.net/browse/#TICKET#'
----
-kanban
-  id1[Todo]
-    docs[Create Documentation]
-    docs[Create Blog about the new diagram]
-  id7[In progress]
-    id6[Create renderer so that it works in all cases. We also add som extra text here for testing purposes. And some more just for the extra flare.]
-    id8[Design grammar]@{ assigned: 'knsv' }
-  id9[Ready for deploy]
-  id10[Ready for test]
-  id11[Done]
-    id5[define getData]
-    id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: MC-2036, priority: 'Very High'}
-    id3[Update DB function]@{ ticket: MC-2037, assigned: knsv, priority: 'High' }
-    id4[Create parsing tests]@{ ticket: MC-2038, assigned: 'K.Sveidqvist', priority: 'High' }
-    id66[last item]@{ priority: 'Very Low', assigned: 'knsv' }
-  id12[Can't reproduce]
-      `,
-      {}
-    );
-  });
-});

cypress/integration/rendering/newShapes.spec.ts

@@ -1,146 +0,0 @@
-import { imgSnapshotTest } from '../../helpers/util.ts';
-
-const looks = ['classic', 'handDrawn'] as const;
-const directions = [
-  'TB',
-  //'BT',
-  'LR',
-  //'RL'
-] as const;
-const newShapesSet1 = [
-  'triangle',
-  'sloped-rectangle',
-  'horizontal-cylinder',
-  'flipped-triangle',
-  'hourglass',
-] as const;
-const newShapesSet2 = [
-  'tagged-rectangle',
-  'documents',
-  'lightning-bolt',
-  'filled-circle',
-  'window-pane',
-] as const;
-
-const newShapesSet3 = [
-  'curved-trapezoid',
-  'bow-rect',
-  'tagged-document',
-  'divided-rectangle',
-  'crossed-circle',
-] as const;
-
-const newShapesSet4 = [
-  'document',
-  'notched-pentagon',
-  'lined-cylinder',
-  'stacked-document',
-  'half-rounded-rectangle',
-] as const;
-
-const newShapesSet5 = [
-  'lined-document',
-  'tagged-document',
-  'brace-l',
-  'comment',
-  'braces',
-  'brace-r',
-] as const;
-
-const newShapesSet6 = ['brace-r', 'braces'] as const;
-// Aggregate all shape sets into a single array
-const newShapesSets = [
-  newShapesSet1,
-  newShapesSet2,
-  newShapesSet3,
-  newShapesSet4,
-  newShapesSet5,
-  newShapesSet6,
-];
-
-looks.forEach((look) => {
-  directions.forEach((direction) => {
-    newShapesSets.forEach((newShapesSet) => {
-      describe(`Test ${newShapesSet.join(', ')} in ${look} look and dir ${direction}`, () => {
-        it(`without label`, () => {
-          let flowchartCode = `flowchart ${direction}\n`;
-          newShapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape} }\n`;
-          });
-          imgSnapshotTest(flowchartCode, { look });
-        });
-
-        it(`with label`, () => {
-          let flowchartCode = `flowchart ${direction}\n`;
-          newShapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is a label for ${newShape} shape' }\n`;
-          });
-          imgSnapshotTest(flowchartCode, { look });
-        });
-
-        it(`connect all shapes with each other`, () => {
-          let flowchartCode = `flowchart ${direction}\n`;
-          newShapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index}${index}@{ shape: ${newShape}, label: 'This is a label for ${newShape} shape' }\n`;
-          });
-          for (let i = 0; i < newShapesSet.length; i++) {
-            for (let j = i + 1; j < newShapesSet.length; j++) {
-              flowchartCode += `  n${i}${i} --> n${j}${j}\n`;
-            }
-          }
-          if (!(direction === 'TB' && look === 'handDrawn' && newShapesSet === newShapesSet1)) {
-            //skip this test, works in real. Need to look
-            imgSnapshotTest(flowchartCode, { look });
-          }
-        });
-
-        it(`with very long label`, () => {
-          let flowchartCode = `flowchart ${direction}\n`;
-          newShapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is a very very very very very long long long label for ${newShape} shape' }\n`;
-          });
-          imgSnapshotTest(flowchartCode, { look });
-        });
-
-        it(`with markdown htmlLabels:true`, () => {
-          let flowchartCode = `flowchart ${direction}\n`;
-          newShapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is **bold** </br>and <strong>strong</strong> for ${newShape} shape' }\n`;
-          });
-          imgSnapshotTest(flowchartCode, { look });
-        });
-
-        it(`with markdown htmlLabels:false`, () => {
-          let flowchartCode = `flowchart ${direction}\n`;
-          newShapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is **bold** </br>and <strong>strong</strong> for ${newShape} shape' }\n`;
-          });
-          imgSnapshotTest(flowchartCode, {
-            look,
-            htmlLabels: false,
-            flowchart: { htmlLabels: false },
-          });
-        });
-
-        it(`with styles`, () => {
-          let flowchartCode = `flowchart ${direction}\n`;
-          newShapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'new ${newShape} shape' }\n`;
-            flowchartCode += `  style n${index}${index} fill:#f9f,stroke:#333,stroke-width:4px \n`;
-          });
-          imgSnapshotTest(flowchartCode, { look });
-        });
-
-        it(`with classDef`, () => {
-          let flowchartCode = `flowchart ${direction}\n`;
-          flowchartCode += `  classDef customClazz fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5\n`;
-          newShapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'new ${newShape} shape' }\n`;
-            flowchartCode += `  n${index}${index}:::customClazz\n`;
-          });
-          imgSnapshotTest(flowchartCode, { look });
-        });
-      });
-    });
-  });
-});

cypress/integration/rendering/oldShapes.spec.ts

@@ -1,107 +0,0 @@
-import { imgSnapshotTest } from '../../helpers/util';
-
-const looks = ['classic', 'handDrawn'] as const;
-const directions = [
-  'TB',
-  //'BT',
-  'LR',
-  //'RL'
-] as const;
-
-const shapesSet1 = ['text', 'card', 'lin-rect', 'diamond', 'hexagon'] as const;
-
-// removing labelRect, need have alias for it
-const shapesSet2 = ['rounded', 'rect', 'start', 'stop'] as const;
-
-const shapesSet3 = ['fork', 'choice', 'note', 'stadium', 'odd'] as const;
-
-const shapesSet4 = ['subroutine', 'cylinder', 'circle', 'doublecircle', 'odd'] as const;
-
-const shapesSet5 = ['anchor', 'lean-r', 'lean-l', 'trap-t', 'trap-b'] as const;
-
-// Aggregate all shape sets into a single array
-const shapesSets = [shapesSet1, shapesSet2, shapesSet3, shapesSet4, shapesSet5] as const;
-
-looks.forEach((look) => {
-  directions.forEach((direction) => {
-    shapesSets.forEach((shapesSet) => {
-      describe(`Test ${shapesSet.join(', ')} in ${look} look and dir ${direction}`, () => {
-        it(`without label`, () => {
-          let flowchartCode = `flowchart ${direction}\n`;
-          shapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape} }\n`;
-          });
-          imgSnapshotTest(flowchartCode, { look });
-        });
-
-        it(`with label`, () => {
-          let flowchartCode = `flowchart ${direction}\n`;
-          shapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is a label for ${newShape} shape' }\n`;
-          });
-          imgSnapshotTest(flowchartCode, { look });
-        });
-
-        it(`connect all shapes with each other`, () => {
-          let flowchartCode = `flowchart ${direction}\n`;
-          shapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index}${index}@{ shape: ${newShape}, label: 'This is a label for ${newShape} shape' }\n`;
-          });
-          for (let i = 0; i < shapesSet.length; i++) {
-            for (let j = i + 1; j < shapesSet.length; j++) {
-              flowchartCode += `  n${i}${i} --> n${j}${j}\n`;
-            }
-          }
-          imgSnapshotTest(flowchartCode, { look });
-        });
-
-        it(`with very long label`, () => {
-          let flowchartCode = `flowchart ${direction}\n`;
-          shapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is a very very very very very long long long label for ${newShape} shape' }\n`;
-          });
-          imgSnapshotTest(flowchartCode, { look });
-        });
-
-        it(`with markdown htmlLabels:true`, () => {
-          let flowchartCode = `flowchart ${direction}\n`;
-          shapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is **bold** </br>and <strong>strong</strong> for ${newShape} shape' }\n`;
-          });
-          imgSnapshotTest(flowchartCode, { look });
-        });
-
-        it(`with markdown htmlLabels:false`, () => {
-          let flowchartCode = `flowchart ${direction}\n`;
-          shapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is **bold** </br>and <strong>strong</strong> for ${newShape} shape' }\n`;
-          });
-          imgSnapshotTest(flowchartCode, {
-            look,
-            htmlLabels: false,
-            flowchart: { htmlLabels: false },
-          });
-        });
-
-        it(`with styles`, () => {
-          let flowchartCode = `flowchart ${direction}\n`;
-          shapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'new ${newShape} shape' }\n`;
-            flowchartCode += `  style n${index}${index} fill:#f9f,stroke:#333,stroke-width:4px \n`;
-          });
-          imgSnapshotTest(flowchartCode, { look });
-        });
-
-        it(`with classDef`, () => {
-          let flowchartCode = `flowchart ${direction}\n`;
-          flowchartCode += `  classDef customClazz fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5\n`;
-          shapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'new ${newShape} shape' }\n`;
-            flowchartCode += `  n${index}${index}:::customClazz\n`;
-          });
-          imgSnapshotTest(flowchartCode, { look });
-        });
-      });
-    });
-  });
-});

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

@@ -460,7 +460,7 @@ stateDiagram-v2
     [*] --> State1
     State1 --> [*]
       `,
-      { state: { useMaxWidth: true }, look: 'classic' }
+      { state: { useMaxWidth: true } }
     );
     cy.get('svg').should((svg) => {
       expect(svg).to.have.attr('width', '100%');
@@ -482,7 +482,7 @@ stateDiagram-v2
     [*] --> State1
     State1 --> [*]
       `,
-      { state: { useMaxWidth: false }, look: 'classic' }
+      { state: { useMaxWidth: false } }
     );
     cy.get('svg').should((svg) => {
       // const height = parseFloat(svg.attr('height'));

cypress/integration/rendering/stateDiagram.spec.js

@@ -338,7 +338,7 @@ describe('State diagram', () => {
     [*] --> State1
     State1 --> [*]
       `,
-      { state: { useMaxWidth: true }, look: 'classic', theme: 'default' }
+      { state: { useMaxWidth: true } }
     );
     cy.get('svg').should((svg) => {
       expect(svg).to.have.attr('width', '100%');
@@ -361,7 +361,7 @@ describe('State diagram', () => {
     [*] --> State1
     State1 --> [*]
       `,
-      { state: { useMaxWidth: false }, look: 'classic', theme: 'default' }
+      { state: { useMaxWidth: false } }
     );
     cy.get('svg').should((svg) => {
       // const height = parseFloat(svg.attr('height'));

cypress/platform/architecture-external.html

@@ -1,52 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>Architecture Mermaid 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>
-    <h2>External Icons Demo</h2>
-    <pre class="mermaid">
-    architecture-beta
-      service s3(logos:aws-s3)[Cloud Store]
-      service ec2(logos:aws-ec2)[Server]
-      service api(logos:aws-api-gateway)[Api Gateway]
-      service fa(fa:image)[Font Awesome Icon]
-    </pre>
-
-    <script type="module">
-      import mermaid from './mermaid.esm.mjs';
-      mermaid.initialize({
-        startOnLoad: false,
-        logLevel: 0,
-      });
-      mermaid.registerIconPacks([
-        {
-          name: 'logos',
-          loader: () =>
-            fetch('https://unpkg.com/@iconify-json/logos/icons.json').then((res) => res.json()),
-        },
-        {
-          name: 'fa',
-          loader: () =>
-            fetch('https://unpkg.com/@iconify-json/fa6-regular/icons.json').then((res) =>
-              res.json()
-            ),
-        },
-      ]);
-      await mermaid.run();
-      if (window.Cypress) {
-        window.rendered = true;
-      }
-    </script>
-  </body>
-</html>

cypress/platform/ash.html

@@ -1,221 +0,0 @@
-<html>
-  <head>
-    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
-    />
-    <link
-      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
-      rel="stylesheet"
-    />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-
-    <style>
-      body {
-        /* background: rgb(221, 208, 208); */
-        /* background: #333; */
-        font-family: 'Arial';
-        /* font-size: 18px !important; */
-      }
-
-      h1 {
-        color: grey;
-      }
-
-      .mermaid2 {
-        display: none;
-      }
-
-      .mermaid svg {
-        /* font-size: 18px !important; */
-
-        /* background-color: #efefef;
-        background-image: radial-gradient(#fff 51%, transparent 91%),
-          radial-gradient(#fff 51%, transparent 91%);
-        background-size: 20px 20px;
-        background-position:
-          0 0,
-          10px 10px;
-        background-repeat: repeat; */
-      }
-
-      .malware {
-        position: fixed;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: 150px;
-        background: red;
-        color: black;
-        display: flex;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        font-family: monospace;
-        font-size: 72px;
-      }
-
-      /* tspan {
-              font-size: 6px !important;
-            } */
-    </style>
-  </head>
-
-  <body>
-    <pre id="diagram" class="mermaid">
-flowchart
-   node
-   rounded(rounded)
-   id1([This is the text in the box])
-   id2((circle))
-   id3(((double circle)))
-   id4>Asymetrical]
-   id5{This is the text in the box}
-   id6{{This is the text in the box}}
-   id7[/This is the text in the box/]
-   id8[\This is the text in the box\]
-   A[/Christmas\]
-   B[\Christmas/]
-   sub[[subroutine]]
-   db[(Database)]
-    
-
-      </pre
-    >
-    <pre id="diagram" class="mermaid">
----
-config: 
-      theme: default
-      look: classic
----
-flowchart
-   node
-   rounded(rounded)
-   id1([This is the text in the box])
-   id2((circle))
-   id3(((double circle)))
-   id4>Asymetrical]
-   id5{This is the text in the box}
-   id6{{This is the text in the box}}
-   id7[/This is the text in the box/]
-   id8[\This is the text in the box\]
-   B[/Christmas\]
-   sub[[subroutine]]
-   db[(Database)]
-    
-
-            
-
-      </pre
-    >
-    <pre id="diagram" class="mermaid">
-stateDiagram
-    [*] --> Active
-    Active --> Inactive
-    Inactive --> Active
-    Active --> [*]
-    </pre>
-
-    <pre id="diagram" class="mermaid2">
-flowchart
-   a_a(Aftonbladet) --> b_b[gorilla]:::apa --> c_c{chimp}:::apa -->a_a
-        a_a --> c --> d_d --> c_c
-        classDef apa fill:#f9f,stroke:#333,stroke-width:4px;
-        class a_a apa;
-        click a_a "http://www.aftonbladet.se" "bookmark"
-        click c_c callback "new tooltip"
-      </pre
-    >
-    <pre id="diagram2" class="mermaid2">
-flowchart LR
-    id1(Start)-->id2(Stop)
-    style id1 fill:#f9f,stroke:#333,stroke-width:4px
-    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
-
-      
-    </pre>
-
-    <pre id="diagram3" class="mermaid2">
-      flowchart LR
-    A:::foo & B:::bar --> C:::foobar
-    classDef foo stroke:#f00
-    classDef bar stroke:#0f0
-    classDef ash color:red
-    class C ash
-    style C stroke:#00f, fill:black
-
-    </pre>
-
-    <pre id="diagram4" class="mermaid2">
-      stateDiagram
-    A:::foo 
-    B:::bar --> C:::foobar
-    classDef foo stroke:#f00
-    classDef bar stroke:#0f0
-    style C stroke:#00f, fill:black, color:white
-
-    </pre>
-
-    <script type="module">
-      import mermaid from './mermaid.esm.mjs';
-      import layouts from './mermaid-layout-elk.esm.mjs';
-      mermaid.registerLayoutLoaders(layouts);
-      mermaid.parseError = function (err, hash) {
-        console.error('Mermaid error: ', err);
-      };
-      window.callback = function () {
-        alert('A callback was triggered');
-      };
-      mermaid.initialize({
-        theme: 'neo',
-        look: 'neo',
-        // handdrawnSeed: 12,
-        // look: 'handdrawn',
-        // 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
-        // layout: 'dagre',
-        // layout: 'elk',
-        // layout: 'fixed',
-        // htmlLabels: false,
-        flowchart: { titleTopMargin: 10 },
-        // fontFamily: 'Caveat',
-        // fontFamily: 'Kalam',
-        // fontFamily: 'courier',
-        fontFamily: 'arial',
-        sequence: {
-          actorFontFamily: 'courier',
-          noteFontFamily: 'courier',
-          messageFontFamily: 'courier',
-        },
-        fontSize: 12,
-        logLevel: 0,
-        securityLevel: 'loose',
-      });
-      function callback() {
-        alert('It worked');
-      }
-      mermaid.parseError = function (err, hash) {
-        console.error('In parse error:');
-        console.error(err);
-      };
-    </script>
-  </body>
-</html>

cypress/platform/flowchart-refactor.html

@@ -822,7 +822,7 @@ flowchart LR
 
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
-      import layouts from './mermaid-layout-elk.esm.mjs';
+      import { layouts } from './mermaid-layout-elk.esm.mjs';
       mermaid.registerLayoutLoaders(layouts);
       mermaid.parseError = function (err, hash) {};
 

cypress/platform/flowchart-sate.html

@@ -147,7 +147,7 @@ flowchart LR
 
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
-      import layouts from './mermaid-layout-elk.esm.mjs';
+      import { layouts } from './mermaid-layout-elk.esm.mjs';
       mermaid.registerLayoutLoaders(layouts);
       mermaid.parseError = function (err, hash) {};
 

cypress/platform/knsv-dark.html

@@ -1,164 +0,0 @@
-<html>
-  <head>
-    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
-    />
-    <link
-      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
-      rel="stylesheet"
-    />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-
-    <style>
-      body {
-        /* background: rgb(221, 208, 208); */
-        background: #333;
-        font-family: 'Arial';
-        /* font-size: 18px !important; */
-      }
-
-      h1 {
-        color: grey;
-      }
-
-      .mermaid2 {
-        display: none;
-      }
-
-      .mermaid svg {
-        /* font-size: 18px !important; */
-
-        /* background-color: #efefef;
-        background-image: radial-gradient(#fff 51%, transparent 91%),
-          radial-gradient(#fff 51%, transparent 91%);
-        background-size: 20px 20px;
-        background-position:
-          0 0,
-          10px 10px;
-        background-repeat: repeat; */
-      }
-
-      .malware {
-        position: fixed;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: 150px;
-        background: red;
-        color: black;
-        display: flex;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        font-family: monospace;
-        font-size: 72px;
-      }
-
-      /* tspan {
-              font-size: 6px !important;
-            } */
-    </style>
-  </head>
-
-  <body>
-    <pre id="diagram" class="mermaid">
-flowchart
-      A --> B & C
-      subgraph apa
-        D --> E
-      end
-      </pre
-    >
-    <pre id="diagram2" class="mermaid2">
-flowchart LR
-    id1(Start)-->id2(Stop)
-    style id1 fill:#f9f,stroke:#333,stroke-width:4px
-    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
-
-
-    </pre>
-
-    <pre id="diagram3" class="mermaid2">
-      flowchart LR
-    A:::foo & B:::bar --> C:::foobar
-    classDef foo stroke:#f00
-    classDef bar stroke:#0f0
-    classDef ash color:red
-    class C ash
-    style C stroke:#00f, fill:black
-
-    </pre>
-
-    <pre id="diagram4" class="mermaid2">
-      stateDiagram
-    A:::foo
-    B:::bar --> C:::foobar
-    classDef foo stroke:#f00
-    classDef bar stroke:#0f0
-    style C stroke:#00f, fill:black, color:white
-
-    </pre>
-
-    <script type="module">
-      import mermaid from './mermaid.esm.mjs';
-      import layouts from './mermaid-layout-elk.esm.mjs';
-      mermaid.registerLayoutLoaders(layouts);
-      mermaid.parseError = function (err, hash) {
-        console.error('Mermaid error: ', err);
-      };
-      window.callback = function () {
-        alert('A callback was triggered');
-      };
-      mermaid.initialize({
-        theme: 'neo-dark',
-        // handdrawnSeed: 12,
-        look: 'neo',
-        // 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
-        // layout: 'dagre',
-        // layout: 'elk',
-        // layout: 'fixed',
-        // htmlLabels: false,
-        flowchart: { titleTopMargin: 10 },
-        // fontFamily: 'Caveat',
-        // fontFamily: 'Kalam',
-        // fontFamily: 'courier',
-        fontFamily: 'arial',
-        sequence: {
-          actorFontFamily: 'courier',
-          noteFontFamily: 'courier',
-          messageFontFamily: 'courier',
-        },
-        fontSize: 12,
-        logLevel: 0,
-        securityLevel: 'loose',
-      });
-      function callback() {
-        alert('It worked');
-      }
-      mermaid.parseError = function (err, hash) {
-        console.error('In parse error:');
-        console.error(err);
-      };
-    </script>
-  </body>
-</html>

cypress/platform/knsv-pos.html

@@ -1,206 +0,0 @@
-<html>
-  <head>
-    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
-    />
-    <link
-      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
-      rel="stylesheet"
-    />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-
-    <style>
-      body {
-        /* background: rgb(221, 208, 208); */
-        /* background: #333; */
-        font-family: 'Arial';
-        /* font-size: 18px !important; */
-      }
-
-      h1 {
-        color: grey;
-      }
-
-      .mermaid2 {
-        display: none;
-      }
-
-      .mermaid svg {
-        /* font-size: 18px !important; */
-
-        /* background-color: #efefef;
-        background-image: radial-gradient(#fff 51%, transparent 91%),
-          radial-gradient(#fff 51%, transparent 91%);
-        background-size: 20px 20px;
-        background-position:
-          0 0,
-          10px 10px;
-        background-repeat: repeat; */
-      }
-
-      .malware {
-        position: fixed;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: 150px;
-        background: red;
-        color: black;
-        display: flex;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        font-family: monospace;
-        font-size: 72px;
-      }
-
-      /* tspan {
-              font-size: 6px !important;
-            } */
-    </style>
-  </head>
-
-  <body>
-    <pre id="diagram" class="mermaid"></pre>
-
-    <script type="module">
-      import mermaid from './mermaid.esm.mjs';
-      import layouts from './mermaid-layout-elk.esm.mjs';
-      mermaid.registerLayoutLoaders(layouts);
-      mermaid.parseError = function (err, hash) {
-        console.error('Mermaid error: ', err);
-      };
-      mermaid.initialize({
-        startOnLoad: false,
-        // look: 'handdrawn',
-        // layout: 'elk',
-        fontFamily: 'Kalam',
-        sequence: {
-          actorFontFamily: 'courier',
-          noteFontFamily: 'courier',
-          messageFontFamily: 'courier',
-        },
-        flowchart: {
-          // curve: 'cardinal',
-          // edgeDebug: true,
-        },
-        logLevel: 0,
-      });
-      mermaid.parseError = function (err, hash) {
-        console.error('In parse error:');
-        console.error(err);
-      };
-      let code = `---
-config:
-  state:
-    curve: line
----
-      stateDiagram
-        S:S
-        T:T
-        U:U
-        state Z {
-          state X {
-            Y:Ypsilon
-          }
-        }
-        A
-
-        S --> T: angrepp
-        T --> U
-        T --> V
-      C
-      D
-      E
-
-              `;
-      code = `
-flowchart TB
-    n3["Untitled Node"] --> n5["Untitled Node"] & n6["Untitled Node"] & n7["Untitled Node"] & n8["Untitled Node"] & n9["Untitled Node"]
-      `;
-
-      let positions = {
-        nodes: {
-          S: { x: 0, y: 0 },
-          T: { x: 100, y: 100, width: 100, height: 100 },
-          U: { x: 250, y: 260 },
-          V: { x: 300, y: 120 },
-          Z: { x: 300, y: 10, width: 160, height: 100 },
-          X: { x: 300, y: 20, width: 80, height: 60 },
-          Y: { x: 300, y: 30, width: 50, height: 20 },
-          A: { x: 300, y: 75, width: 20, height: 20 },
-        },
-        edges: {
-          edge0: {
-            points: [
-              { x: 0, y: 0 },
-              { x: 50, y: 0 },
-              { x: 100, y: 100 },
-            ],
-          },
-          edge1: {
-            // points: [
-            //   { x: 100, y: 100 },
-            //   { x: 200, y: 200 },
-            // ],
-            points: [
-              { x: 100, y: 100 },
-              { x: 150, y: 120 },
-              { x: 190.19453144073486, y: 120 },
-              { x: 190.19453144073486, y: 152.1556251525879 },
-              { x: 250, y: 152.1556251525879 },
-              { x: 250, y: 160 },
-            ],
-          },
-          edge2: {
-            points: [
-              { x: 100, y: 100 },
-              { x: 175, y: 80 },
-              { x: 200, y: 120 },
-              { x: 300, y: 100 },
-            ],
-          },
-        },
-      };
-
-      positions = JSON.parse(
-        '{"nodes":{"n3":{"x":360.885009765625,"y":7.677405834197998,"width":120.59375,"height":45.00000762939453},"n5":{"x":546.1309814453125,"y":190.24496459960938,"width":120.59375,"height":45},"n6":{"x":694.6719360351562,"y":167.00001525878906,"width":120.59375,"height":45},"n7":{"x":72.29684925079346,"y":167.00001525878906,"width":120.59370994567871,"height":45},"n8":{"x":250.27700805664062,"y":183.1090545654297,"width":120.59375,"height":45},"n9":{"x":393.2580871582031,"y":197.45834350585938,"width":120.59375,"height":45}},"edges":{"L_n3_n5_0":{"points":[{"x":383.71510673157036,"y":30.177409648895264},{"x":383.71510673157036,"y":98.96118712425232},{"x":523.300888350029,"y":98.96118712425232},{"x":523.300888350029,"y":167.74496459960938}],"start":"n3","end":"n5"},"L_n3_n6_1":{"points":[{"x":408.02337350122014,"y":30.177409648895264},{"x":408.02337350122014,"y":87.33871245384216},{"x":647.533580291497,"y":87.33871245384216},{"x":647.533580291497,"y":144.50001525878906}],"start":"n3","end":"n6"},"L_n3_n7_2":{"points":[{"x":320.12974762228504,"y":30.177409648895264},{"x":270.12974762228504,"y":87.33871245384216},{"x":113.05210448440184,"y":87.33871245384216},{"x":113.05210448440184,"y":144.50001525878906}],"start":"n3","end":"n7"},"L_n3_n8_3":{"points":[{"x":346.6989693425486,"y":30.177409648895264},{"x":346.6989693425486,"y":95.39323210716248},{"x":264.4630460745863,"y":95.39323210716248},{"x":264.4630460745863,"y":160.6090545654297}],"start":"n3","end":"n8"},"L_n3_n9_4":{"points":[{"x":364.7230894682698,"y":30.177409648895264},{"x":364.7230894682698,"y":102.56787657737732},{"x":389.42000810627434,"y":102.56787657737732},{"x":389.42000810627434,"y":174.95834350585938}],"start":"n3","end":"n9"}}}'
-      );
-
-      // console.log('positions:', positions);
-      const { svg } = await mermaid.render('the-id-of-the-svg', code, undefined, positions);
-      // if (window?.calcIntersections2) {
-      //   const int = await calcIntersections2(
-      //     { id: 'a', shape: 'rect', x: 100, y: 100, width: 100, height: 100 },
-      //     { id: 'a', shape: 'rect', x: 300, y: 100, width: 100, height: 100 }
-      //   );
-      //   console.log('Intersections', int);
-      // } else {
-      //   console.error('calcIntersections not found');
-      // }
-      // console.log(JSON.stringify(positions));
-      const elem = document.querySelector('#diagram');
-      elem.innerHTML = svg;
-    </script>
-  </body>
-</html>

cypress/platform/knsv-recursive.html

@@ -1,272 +0,0 @@
-<html>
-  <head>
-    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
-    />
-    <link
-      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
-      rel="stylesheet"
-    />
-    <link
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
-      rel="stylesheet"
-    />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Recursive:wght@300..1000&display=swap"
-      rel="stylesheet"
-    />
-
-    <style>
-      .recursive-500 {
-        font-family: 'Recursive', serif;
-        font-optical-sizing: auto;
-        font-weight: 500;
-        font-style: normal;
-        font-variation-settings:
-          'slnt' 0,
-          'CASL' 0,
-          'CRSV' 0.5,
-          'MONO' 0;
-      }
-      body {
-        /* background: rgb(221, 208, 208); */
-        /* background: #333; */
-        /* font-family: 'Arial'; */
-        font-family: 'Recursive', serif;
-        font-optical-sizing: auto;
-        font-weight: 500;
-        font-style: normal;
-        font-variation-settings:
-          'slnt' 0,
-          'CASL' 0,
-          'CRSV' 0.5,
-          'MONO' 0;
-        /* color: white; */
-        /* font-size: 18px !important; */
-      }
-      .gridify.tiny {
-        background-image: linear-gradient(
-            transparent 11px,
-            rgba(220, 220, 200, 0.8) 12px,
-            transparent 12px
-          ),
-          linear-gradient(90deg, transparent 11px, rgba(220, 220, 200, 0.8) 12px, transparent 12px);
-        background-size:
-          100% 12px,
-          12px 100%;
-      }
-
-      .gridify.dots {
-        background-image: radial-gradient(
-          circle at center,
-          rgba(220, 220, 200, 0.8) 1px,
-          transparent 1px
-        );
-        background-size: 24px 24px;
-      }
-
-      h1 {
-        color: grey;
-      }
-
-      .mermaid2 {
-        display: none;
-      }
-
-      .mermaid svg {
-        font-size: 16px !important;
-        font-family: 'Recursive', serif;
-        font-optical-sizing: auto;
-        font-weight: 500;
-        font-style: normal;
-        font-variation-settings:
-          'slnt' 0,
-          'CASL' 0,
-          'CRSV' 0.5,
-          'MONO' 0;
-      }
-
-      pre {
-        width: 100%;
-        /*box-shadow: 4px 4px 0px 0px #0000000F;*/
-      }
-    </style>
-  </head>
-
-  <body class="gridify dots">
-    <p class="mb-20">Test Diagram</p>
-    <div class="w-full h-64">
-      <pre id="diagram4" class="mermaid">
----
-config:
-  theme: neo
-  layout: dagre
----
-flowchart TD
-    A{"Diamond"} --- n1["Rectangle"] & n2["Rounded"] & n3(["Stadium"])
-    n1 --x n4["Rounded"]
-    n2 --o n5["Hexagon"]
-    n3 --> n6["Parallelogram"]
-    n5 o--o n7["Trapezoid"]
-    n4 x--x n8["Lean Right"]
-    n6 <--> n9(("Circle"))
-    n8 --> n10["Rose"]
-    n7 --> n11["Pine"]
-    n9 --> n12["Peach"]
-    n2@{ shape: rounded}
-    n4@{ shape: rounded}
-    n5@{ shape: hex}
-    n6@{ shape: lean-l}
-    n7@{ shape: trap-b}
-    n8@{ shape: lean-r}
-
-     n10:::Rose
-     n11:::Pine
-     n12:::Peach
-    classDef Rose stroke-width:1px, stroke-dasharray:none, stroke:#FF5978, fill:#FFDFE5, color:#8E2236
-    classDef Pine stroke-width:1px, stroke-dasharray:none, stroke:#254336, fill:#27654A, color:#FFFFFF
-    classDef Peach stroke-width:1px, stroke-dasharray:none, stroke:#FBB35A, fill:#FFEFDB, color:#8F632D
-    n10 --x End
-    n11 --x End
-    n12 --x End
-
-    </pre
-      >
-      <pre id="diagram4" class="mermaid">
----
-config:
-  look: classic
-  theme: forest
-  layout: dagre
----
-flowchart TD
-    A{"Diamond"} --- n1["Rectangle"] & n2["Rounded"] & n3(["Stadium"])
-    n1 --x n4["Rounded"]
-    n2 --o n5["Hexagon"]
-    n3 --> n6["Parallelogram"]
-    n5 o--o n7["Trapezoid"]
-    n4 x--x n8["Lean Right"]
-    n6 <--> n9(("Circle"))
-    n8 --> n10["Rose"]
-    n7 --> n11["Pine"]
-    n9 --> n12["Peach"]
-    n2@{ shape: rounded}
-    n4@{ shape: rounded}
-    n5@{ shape: hex}
-    n6@{ shape: lean-l}
-    n7@{ shape: trap-b}
-    n8@{ shape: lean-r}
-
-     n10:::Rose
-     n11:::Pine
-     n12:::Peach
-    classDef Rose stroke-width:1px, stroke-dasharray:none, stroke:#FF5978, fill:#FFDFE5, color:#8E2236
-    classDef Pine stroke-width:1px, stroke-dasharray:none, stroke:#254336, fill:#27654A, color:#FFFFFF
-    classDef Peach stroke-width:1px, stroke-dasharray:none, stroke:#FBB35A, fill:#FFEFDB, color:#8F632D
-    n10 --x End
-    n11 --x End
-    n12 --x End
-
-    </pre
-      >
-    </div>
-
-    <script type="module">
-      import mermaid from './mermaid.esm.mjs';
-      import layouts from './mermaid-layout-elk.esm.mjs';
-
-      const staticBellIconPack = {
-        prefix: 'fa6-regular',
-        icons: {
-          bell: {
-            body: '<path fill="currentColor" d="M224 0c-17.7 0-32 14.3-32 32v19.2C119 66 64 130.6 64 208v25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416h400c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6c-28.3-35.5-43.8-79.6-43.8-125V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32m0 96c61.9 0 112 50.1 112 112v25.4c0 47.9 13.9 94.6 39.7 134.6H72.3c25.8-40 39.7-86.7 39.7-134.6V208c0-61.9 50.1-112 112-112m64 352H160c0 17 6.7 33.3 18.7 45.3S207 512 224 512s33.3-6.7 45.3-18.7S288 465 288 448"/>',
-            width: 448,
-          },
-        },
-        width: 512,
-        height: 512,
-      };
-
-      mermaid.registerIconPacks([
-        {
-          name: 'logos',
-          loader: () =>
-            fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then((res) => res.json()),
-        },
-        {
-          name: 'fa',
-          loader: () => staticBellIconPack,
-        },
-      ]);
-      mermaid.registerLayoutLoaders(layouts);
-      mermaid.parseError = function (err, hash) {
-        console.error('Mermaid error: ', err);
-      };
-      window.callback = function () {
-        alert('A callback was triggered');
-      };
-      function callback() {
-        alert('It worked');
-      }
-      await mermaid.initialize({
-        startOnLoad: false,
-        theme: 'redux',
-        // theme: 'default',
-        // theme: 'forest',
-        // handDrawnSeed: 12,
-        look: 'neo',
-        // 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
-        // layout: 'dagre',
-        // layout: 'elk',
-        // layout: 'fixed',
-        // htmlLabels: false,
-        flowchart: { titleTopMargin: 10 },
-
-        // fontFamily: 'Caveat',
-        // fontFamily: 'Kalam',
-        // fontFamily: 'courier',
-        fontFamily: 'Recursive',
-        sequence: {
-          actorFontFamily: 'courier',
-          noteFontFamily: 'courier',
-          messageFontFamily: 'courier',
-        },
-        kanban: {
-          htmlLabels: false,
-        },
-        fontSize: 16,
-        logLevel: 0,
-        securityLevel: 'loose',
-        callback,
-      });
-      // setTimeout(() => {
-      mermaid.init(undefined, document.querySelectorAll('.mermaid'));
-      // }, 1000);
-      mermaid.parseError = function (err, hash) {
-        console.error('In parse error:');
-        console.error(err);
-      };
-    </script>
-  </body>
-</html>

cypress/platform/knsv-reset.html

@@ -1,306 +0,0 @@
-<html>
-  <head>
-    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
-    />
-    <link
-      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
-      rel="stylesheet"
-    />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-
-    <style>
-      body {
-        /* background: rgb(221, 208, 208); */
-        /* background: #333; */
-        font-family: 'Arial';
-        /* font-size: 18px !important; */
-      }
-
-      h1 {
-        color: grey;
-      }
-
-      .mermaid2 {
-        display: none;
-      }
-
-      .mermaid svg {
-        /* font-size: 18px !important; */
-
-        /* background-color: #efefef;
-        background-image: radial-gradient(#fff 51%, transparent 91%),
-          radial-gradient(#fff 51%, transparent 91%);
-        background-size: 20px 20px;
-        background-position:
-          0 0,
-          10px 10px;
-        background-repeat: repeat; */
-      }
-
-      .malware {
-        position: fixed;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: 150px;
-        background: red;
-        color: black;
-        display: flex;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        font-family: monospace;
-        font-size: 72px;
-      }
-
-      /* tspan {
-              font-size: 6px !important;
-            } */
-    </style>
-  </head>
-
-  <body>
-    <pre id="diagram" class="mermaid"></pre>
-    <pre id="diagram2" class="mermaid"></pre>
-
-    <script type="module">
-      import mermaid from './mermaid.esm.mjs';
-      import layouts from './mermaid-layout-elk.esm.mjs';
-      mermaid.registerLayoutLoaders(layouts);
-      mermaid.parseError = function (err, hash) {
-        console.error('Mermaid error: ', err);
-      };
-
-      mermaid.parseError = function (err, hash) {
-        console.error('In parse error:');
-        console.error(err);
-      };
-      let code = `
-      stateDiagram
-        S:S
-        T:T
-        U:U
-        state Z {
-          state X {
-            Y:Ypsilon
-          }
-        }
-        A
-
-        S --> T: angrepp
-        S --> T: angrepp
-        T --> U
-        Y --> V
-      C
-      D
-      E
-
-              `;
-      code = `
-flowchart TB
-    c1-->a2
-    subgraph one
-    a1-->a2
-    end
-    subgraph two
-    b1-->b2
-    end
-    subgraph three
-    c1-->c2
-    end
-
-              `;
-      //       code = `
-      // flowchart BT
-      // A
-      //     subgraph one
-      //     a1 --> a2
-      //     end
-      //     subgraph two
-      //       a3
-      //     end
-
-      //               `;
-      //       code = `
-      // flowchart TB
-      //     subgraph one
-      //     a1-->a2
-      //     end`;
-      // let positions = JSON.parse(
-      //   '{"nodes":{"S":{"x":30.78125,"y":43.5},"Y":{"x":127.94140625,"y":50}},"edges":{}}'
-      // );
-
-      function exctractPositions(svg) {
-        const positions = { nodes: {}, edges: {} };
-
-        // Extract the viewbox paddings - TOSDO: update in collab
-        const viewBox = svg.getAttribute('viewBox').split(' ');
-        const viewBoxX = parseFloat(viewBox[0]);
-        const viewBoxY = parseFloat(viewBox[1]);
-        // console.log('viewBox:', viewBoxX, viewBoxY);
-        svg.querySelectorAll('[data-et="node"]').forEach((node) => {
-          if (node.tagName === 'g') {
-            // console.log('node:', node);
-            const id = node.dataset.id;
-            const bbox = node.getBBox();
-            const transform = node.getAttribute('transform');
-            const x = parseFloat(transform.split(',')[0].split('(')[1]);
-            const y = parseFloat(transform.split(',')[1].split(')')[0]);
-
-            // Get the bounding rectangle of the element
-            const rect = node.getBoundingClientRect();
-
-            // Get the absolute position relative to the document
-            const absoluteX = rect.left + window.pageXOffset + viewBoxX;
-            const absoluteY = rect.top + window.pageYOffset + viewBoxY;
-
-            positions.nodes[id] = {
-              x: absoluteX + rect.width / 2,
-              y: absoluteY + rect.height / 2,
-              width: rect.width,
-              height: rect.height,
-            };
-          }
-        });
-        svg.querySelectorAll('[data-et="cluster"]').forEach((node) => {
-          // console.log('cluster:', node);
-          if (node.tagName === 'g') {
-            const id = node.dataset.id;
-            // console.log('cluster:', node);
-
-            const transform = node.getAttribute('transform');
-            const rect = node.getBoundingClientRect();
-
-            // Get the absolute position relative to the document
-            const absoluteX = rect.left + window.pageXOffset + viewBoxX;
-            const absoluteY = rect.top + window.pageYOffset + viewBoxY;
-
-            positions.nodes[id] = {
-              x: absoluteX + rect.width / 2,
-              y: absoluteY + rect.height / 2,
-              width: rect.width,
-              height: rect.height,
-            };
-          }
-        });
-        svg.querySelectorAll('[data-et="edge"]').forEach((edge) => {
-          // if (node.tagName === 'g') {
-          const path = edge.getBoundingClientRect();
-
-          // Get the absolute position relative to the document
-          const absoluteX = path.left + window.pageXOffset + viewBoxX;
-          const absoluteY = path.top + window.pageYOffset + viewBoxY;
-          console.log(
-            'absoluteX:',
-            absoluteX,
-            'absoluteY:',
-            absoluteY,
-            'offset',
-            window.pageXOffset
-          );
-          const id = edge.dataset.id;
-          const points = JSON.parse(atob(edge.dataset.points));
-          console.log('edge:', points, absoluteX, absoluteY);
-          let minX = 10000;
-          let minY = 10000;
-          points.forEach((point) => {
-            if (point.x < minX) {
-              minX = point.x;
-            }
-            if (point.y < minY) {
-              minY = point.y;
-            }
-          });
-          let dx = absoluteX - minX;
-          let dy = absoluteY - minY;
-          if (dx < 1) {
-            dx = 0;
-          }
-          if (dy < 1) {
-            dy = 0;
-          }
-          positions.edges[id] = {
-            points: points.map((point) => {
-              console.log('point:', point.y, absoluteY);
-              return {
-                x: point.x + dx,
-                y: point.y + dy,
-              };
-            }),
-          };
-          // }
-        });
-        return positions;
-      }
-
-      const mode = 'reset';
-      if (mode === 'reset') {
-        mermaid.initialize({
-          startOnLoad: false,
-          layout: 'elk',
-          fontFamily: 'Kalam',
-          sequence: {
-            actorFontFamily: 'courier',
-            noteFontFamily: 'courier',
-            messageFontFamily: 'courier',
-          },
-          logLevel: 5,
-        });
-        const { svg } = await mermaid.render('the-id-of-the-svg', code);
-        const elem = document.querySelector('#diagram');
-        elem.innerHTML = svg;
-        elem.classList.remove('mermaid');
-        const positions = exctractPositions(elem.firstChild);
-        // console.log('Positions:', JSON.stringify(positions));
-        const { svg: svg2 } = await mermaid.render(
-          'the-id-of-the-svg2',
-          '---\n  config:\n    layout: fixed\n---' + code,
-          undefined,
-          positions
-        );
-        // console.log('svg2', svg2);
-        const elem2 = document.querySelector('#diagram2');
-        elem2.innerHTML = svg2;
-      } else {
-        mermaid.initialize({
-          startOnLoad: false,
-          // look: 'handdrawn',
-          layout: 'fixed',
-          fontFamily: 'Kalam',
-          sequence: {
-            actorFontFamily: 'courier',
-            noteFontFamily: 'courier',
-            messageFontFamily: 'courier',
-          },
-          logLevel: 0,
-        });
-        const { svg } = await mermaid.render('the-id-of-the-svg', code, undefined, positions);
-
-        // console.log(JSON.stringify(positions));
-        const elem = document.querySelector('#diagram');
-        elem.innerHTML = svg;
-      }
-    </script>
-  </body>
-</html>

cypress/platform/knsv2.html

@@ -10,10 +10,6 @@
       href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
       rel="stylesheet"
     />
-    <link
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
-      rel="stylesheet"
-    />
     <link
       href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
       rel="stylesheet"
@@ -38,7 +34,6 @@
         /* background: rgb(221, 208, 208); */
         /* background: #333; */
         font-family: 'Arial';
-        /* color: white; */
         /* font-size: 18px !important; */
       }
 
@@ -78,9 +73,7 @@
         font-family: monospace;
         font-size: 72px;
       }
-      pre {
-        width: 100%;
-      }
+
       /* tspan {
               font-size: 6px !important;
             } */
@@ -88,355 +81,86 @@
   </head>
 
   <body>
-    <pre id="diagram4" class="mermaid">
+    <div class="flex">
+      <pre id="diagram" class="mermaid">
 ---
 config:
-  look: classic
-  theme: forest
-  layout: dagre
+  look: handDrawn
+  flowchart:
+    htmlLabels: false
 ---
-flowchart LR
-    A["A"] --> C
-    B("B B B B B") --> C[/"C C C C C"/]
-    C@{ shape: circle }
-    %%C@{ shape: question }
-    C@{ shape: stadium }
-    </pre>
-    <pre id="diagram4" class="mermaid">
----
-config:
-  look: classic
-  layout: elk
----
-flowchart LR
-    n1["n1"] --- C
-    B("Continue") --> C[/"Evaluate"/]
-    C -- One --> D["Option 1"]
-    C -- Two --> E["Option 2"]
-    C -- Three --> F["fa:fa-car Option 3"]
-    C@{ shape: db }
-    </pre>
-    <pre id="diagram4" class="mermaid2">
----
-config:
-  layout: elk
----
-flowchart LR
- %% subgraph s1["Untitled subgraph"]
-        C{"Evaluate"}
- %% end
-
-    B --> C
-    </pre>
-    <pre id="diagram4" class="mermaid2">
----
-config:
-  look: neo
-  layout: elk
----
-flowchart LR
-%% A ==> B
-%% A2 --> B2
-      D --> I((I the Circle))
-            D --> I
-    </pre>
-    <pre id="diagram4" class="mermaid2">
----
-config:
-  layout: elk
----
-      flowchart LR
-      subgraph S2
-      subgraph s1["APA"]
-      D{"Use the editor"}
-      end
-
-
-      D -- Mermaid js --> I(("fa:fa-code Text"))
-            D --> I
-           D --> E --> I
-
-      end
-    </pre>
-    <pre id="diagram4" class="mermaid2">
----
-config:
-  layout: elk
----
-      flowchart LR
-      a
-      subgraph s0["APA"]
-      subgraph s8["APA"]
-      subgraph s1["APA"]
-        D{"X"}
-        E[Q]
-      end
-      subgraph s3["BAPA"]
-        F[Q]
-        I
-      end
-            D --> I
-            D --> I
-            D --> I
-
-      I{"X"}
-      end
-      end
-    </pre>
-    <pre id="diagram4" class="mermaid2">
----
-config:
-  layout: elk
----
-      flowchart LR
-      a
-        D{"Use the editor"}
-
-      D -- Mermaid js --> I{"fa:fa-code Text"}
-      D-->I
-      D-->I
-    </pre>
-    <pre id="diagram4" class="mermaid2">
----
-config:
-  layout: elk
----
-flowchart LR
- subgraph s1["Untitled subgraph"]
-        n1["Evaluate"]
-        n2["Option 1"]
-        n3["Option 2"]
-        n4["fa:fa-car Option 3"]
-  end
- subgraph s2["Untitled subgraph"]
-        n5["Evaluate"]
-        n6["Option 1"]
-        n7["Option 2"]
-        n8["fa:fa-car Option 3"]
-  end
-    A["Start"] -- Some text --> B("Continue")
-    B --> C{"Evaluate"}
-    C -- One --> D["Option 1"]
-    C -- Two --> E["Option 2"]
-    C -- Three --> F["fa:fa-car Option 3"]
-    n1 -- One --> n2
-    n1 -- Two --> n3
-    n1 -- Three --> n4
-    n5 -- One --> n6
-    n5 -- Two --> n7
-    n5 -- Three --> n8
-    n1@{ shape: diam}
-    n2@{ shape: rect}
-    n3@{ shape: rect}
-    n4@{ shape: rect}
-    n5@{ shape: diam}
-    n6@{ shape: rect}
-    n7@{ shape: rect}
-    n8@{ shape: rect}
-
-    </pre>
-    <pre id="diagram4" class="mermaid2">
----
-config:
-  layout: elk
----
-flowchart LR
- subgraph s1["Untitled subgraph"]
-        n1["Evaluate"]
-        n2["Option 1"]
-  end
-    n1 -- One --> n2
-
-
-
-
-    </pre>
-    <pre id="diagram4" class="mermaid2">
----
-config:
-  layout: elk
----
-flowchart LR
-    A{A} --> B & C
+flowchart
+      A[I am a long text, where do I go??? handdrawn - false]
 </pre
-    >
-    <pre id="diagram4" class="mermaid2">
+      >
+      <pre id="diagram" class="mermaid">
 ---
 config:
-  layout: elk
+  look: handdrawn
+  flowchart:
+    htmlLabels: true
 ---
-flowchart LR
-    A{A} --> B & C
-    subgraph "subbe"
-      A
-    end
+flowchart
+      A[I am a long text, where do I go??? handdrawn - true]
 </pre
-    >
-    <pre id="diagram4" class="mermaid2">
+      >
+    </div>
+    <div class="flex">
+      <pre id="diagram" class="mermaid">
 ---
 config:
-  layout: elk
+  flowchart:
+    htmlLabels: false
 ---
-flowchart LR
-    n2@{ shape: rect}
-    n3@{ shape: rect}
-    n4@{ shape: rect}
-    A["Start"] -- Some text --> B("Continue")
-    B --> C{"Evaluate"}
-    C -- One --> D["Option 1"]
-    C -- Two --> E["Option 2"]
-    C -- Three --> F["fa:fa-car Option 3"]
-    %% C@{ shape: hexagon}
-
-
-    </pre>
-    <pre id="diagram4" class="mermaid2">
+flowchart
+      A[I am a long text, where do I go??? classic - false]
+</pre
+      >
+      <pre id="diagram" class="mermaid">
 ---
 config:
-  kanban:
-    ticketBaseUrl: 'https://github.com/your-repo/issues/#TICKET#'
+  flowchart:
+    htmlLabels: true
 ---
-kanban
-  Backlog
-    task1[📝 Define project requirements]@{ ticket: a101 }
-  To Do
-    task2[🔍 Research technologies]@{ ticket: a102 }
-  Review
-    task4[🔍 Code review for login feature]@{ ticket: a104 }
-  Done
-    task5[✅ Deploy initial version]@{ ticket: a105 }
-  In Progress
-    task3[💻 Develop login feature]@{ ticket: 103 }
+flowchart
+      A[I am a long text, where do I go??? classic - true]
+</pre
+      >
+    </div>
+    <pre id="diagram2" class="mermaid2">
+flowchart LR
+    id1(Start)-->id2(Stop)
+    style id1 fill:#f9f,stroke:#333,stroke-width:4px
+    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+
 
     </pre>
-    <pre id="diagram4" class="mermaid2">
-flowchart LR
-nA[Default] --> A@{ icon: 'fa:bell', form: 'rounded' }
+
+    <pre id="diagram3" class="mermaid2">
+      flowchart LR
+    A:::foo & B:::bar --> C:::foobar
+    classDef foo stroke:#f00
+    classDef bar stroke:#0f0
+    classDef ash color:red
+    class C ash
+    style C stroke:#00f, fill:black
 
     </pre>
+
     <pre id="diagram4" class="mermaid2">
-flowchart LR
-nA[Style] --> A@{ icon: 'fa:bell', form: 'rounded' }
-style A fill:#f9f,stroke:#333,stroke-width:4px
-    </pre>
-    <pre id="diagram4" class="mermaid2">
-flowchart LR
-nA[Class] --> A@{ icon: 'fa:bell', form: 'rounded' }
-A:::AClass
-classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
-    </pre>
-    <pre id="diagram4" class="mermaid2">
-flowchart LR
-  nA[Class] --> A@{ icon: 'logos:aws', form: 'rounded' }
+      stateDiagram
+    A:::foo
+    B:::bar --> C:::foobar
+    classDef foo stroke:#f00
+    classDef bar stroke:#0f0
+    style C stroke:#00f, fill:black, color:white
 
     </pre>
-    <pre id="diagram4" class="mermaid2">
-flowchart LR
-nA[Default] --> A@{ icon: 'fa:bell', form: 'square' }
 
-    </pre>
-    <pre id="diagram4" class="mermaid2">
-flowchart LR
-nA[Style] --> A@{ icon: 'fa:bell', form: 'square' }
-style A fill:#f9f,stroke:#333,stroke-width:4px
-    </pre>
-    <pre id="diagram4" class="mermaid2">
-flowchart LR
-nA[Class] --> A@{ icon: 'fa:bell', form: 'square' }
-A:::AClass
-classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
-    </pre>
-    <pre id="diagram4" class="mermaid2">
-flowchart LR
-  nA[Class] --> A@{ icon: 'logos:aws', form: 'square' }
-
-    </pre>
-    <pre id="diagram4" class="mermaid2">
-flowchart LR
-nA[Default] --> A@{ icon: 'fa:bell', form: 'circle' }
-
-    </pre>
-    <pre id="diagram4" class="mermaid2">
-flowchart LR
-nA[Style] --> A@{ icon: 'fa:bell', form: 'circle' }
-style A fill:#f9f,stroke:#333,stroke-width:4px
-    </pre>
-    <pre id="diagram4" class="mermaid2">
-flowchart LR
-nA[Class] --> A@{ icon: 'fa:bell', form: 'circle' }
-A:::AClass
-classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
-    </pre>
-    <pre id="diagram4" class="mermaid2">
-flowchart LR
-  nA[Class] --> A@{ icon: 'logos:aws', form: 'circle' }
-  A:::AClass
-  classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
-    </pre>
-    <pre id="diagram4" class="mermaid2">
-flowchart LR
-  nA[Style] --> A@{ icon: 'logos:aws', form: 'circle' }
-  style A fill:#f9f,stroke:#333,stroke-width:4px
-    </pre>
-    <pre id="diagram4" class="mermaid2">
-kanban
-  id2[In progress]
-    docs[Create Blog about the new diagram]@{ priority: 'Very Low', ticket: MC-2037, assigned: 'knsv' }
-    </pre>
-    <pre id="diagram4" class="mermaid2">
----
-config:
-  kanban:
-    ticketBaseUrl: 'https://mermaidchart.atlassian.net/browse/#TICKET#'
-    # sectionWidth: 300
----
-kanban
-  Todo
-    [Create Documentation]
-    docs[Create Blog about the new diagram]
-  id7[In progress]
-    id6[Create renderer so that it works in all cases. We also add som extra text here for testing purposes. And some more just for the extra flare.]
-  id9[Ready for deploy]
-    id8[Design grammar]@{ assigned: 'knsv' }
-  id10[Ready for test]
-    id4[Create parsing tests]@{ ticket: MC-2038, assigned: 'K.Sveidqvist', priority: 'High' }
-    id66[last item]@{ priority: 'Very Low', assigned: 'knsv' }
-  id11[Done]
-    id5[define getData]
-    id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: MC-2036, priority: 'Very High'}
-    id3[Update DB function]@{ ticket: MC-2037, assigned: knsv, priority: 'High' }
-
-  id12[Can't reproduce]
-    id3[Weird flickering in Firefox]
-    </pre>
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
-      import layouts from './mermaid-layout-elk.esm.mjs';
-
-      const staticBellIconPack = {
-        prefix: 'fa6-regular',
-        icons: {
-          bell: {
-            body: '<path fill="currentColor" d="M224 0c-17.7 0-32 14.3-32 32v19.2C119 66 64 130.6 64 208v25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416h400c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6c-28.3-35.5-43.8-79.6-43.8-125V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32m0 96c61.9 0 112 50.1 112 112v25.4c0 47.9 13.9 94.6 39.7 134.6H72.3c25.8-40 39.7-86.7 39.7-134.6V208c0-61.9 50.1-112 112-112m64 352H160c0 17 6.7 33.3 18.7 45.3S207 512 224 512s33.3-6.7 45.3-18.7S288 465 288 448"/>',
-            width: 448,
-          },
-        },
-        width: 512,
-        height: 512,
-      };
-
-      mermaid.registerIconPacks([
-        {
-          name: 'logos',
-          loader: () =>
-            fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then((res) => res.json()),
-        },
-        {
-          name: 'fa',
-          loader: () => staticBellIconPack,
-        },
-      ]);
-      mermaid.registerLayoutLoaders(layouts);
+      // import { layouts } from './mermaid-layout-elk.esm.mjs';
+      // mermaid.registerLayoutLoaders(layouts);
       mermaid.parseError = function (err, hash) {
         console.error('Mermaid error: ', err);
       };
@@ -445,8 +169,6 @@ kanban
       };
       mermaid.initialize({
         // theme: 'base',
-        // theme: 'default',
-        theme: 'forest',
         // handDrawnSeed: 12,
         // look: 'handDrawn',
         // 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
@@ -454,7 +176,7 @@ kanban
         // layout: 'elk',
         // layout: 'fixed',
         // htmlLabels: false,
-        flowchart: { titleTopMargin: 10, useMaxWidth: false },
+        flowchart: { titleTopMargin: 10 },
         // fontFamily: 'Caveat',
         // fontFamily: 'Kalam',
         // fontFamily: 'courier',
@@ -463,9 +185,6 @@ kanban
           noteFontFamily: 'courier',
           messageFontFamily: 'courier',
         },
-        kanban: {
-          htmlLabels: false,
-        },
         fontSize: 12,
         logLevel: 0,
         securityLevel: 'loose',

cypress/platform/knsv3.html

@@ -1,173 +1,103 @@
-<html>
+<!doctype html>
+<html lang="en">
   <head>
-    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
-    />
-    <link
-      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
-      rel="stylesheet"
-    />
-    <link
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
-      rel="stylesheet"
-    />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Mindmap Mermaid Quick Test Page</title>
+    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
     <style>
-      body {
-        /* background: rgb(221, 208, 208); */
-        /* background: #333; */
-        font-family: 'Arial';
-        /* color: white; */
-        /* font-size: 18px !important; */
+      div.mermaid {
+        /* font-family: 'trebuchet ms', verdana, arial; */
+        font-family: 'Courier New', Courier, monospace !important;
       }
-
-      h1 {
-        color: grey;
-      }
-
-      .mermaid2 {
-        display: none;
-      }
-
-      .mermaid svg {
-        /* font-size: 18px !important; */
-
-        /* background-color: #efefef;
-        background-image: radial-gradient(#fff 51%, transparent 91%),
-          radial-gradient(#fff 51%, transparent 91%);
-        background-size: 20px 20px;
-        background-position:
-          0 0,
-          10px 10px;
-        background-repeat: repeat; */
-      }
-
-      .malware {
-        position: fixed;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: 150px;
-        background: red;
-        color: black;
-        display: flex;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        font-family: monospace;
-        font-size: 72px;
-      }
-      pre {
-        width: 100%;
-      }
-      /* tspan {
-              font-size: 6px !important;
-            } */
     </style>
   </head>
 
   <body>
-    <div class="flex gap-4">
-      <pre id="diagram4" class="mermaid">
----
-config:
-  look: classic
-  theme: forest
-  layout: elk
----
-flowchart LR
-    n1["n1"] --> C
-    n2("n2") --> C
-    C@{ shape: circle }
-    </pre
-      >
-      <pre id="diagram4" class="mermaid">
----
-config:
-  look: neo
-  theme: redux
-  layout: elk
----
-flowchart LR
-    n1["n1"] --> C
-    n2("n2") --> C
-    C@{ shape: circle }
-    </pre
-      >
-      <pre id="diagram4" class="mermaid">
----
-config:
-  look: handDrawn
-  theme: forest
-  layout: elk
----
-flowchart LR
-    n1["n1"] --> C
-    n2("n2") --> C
-    C@{ shape: circle }
-    </pre
-      >
-    </div>
+    <h1>Mindmap diagram demo</h1>
+    <pre class="mermaid">
+        mindmap
+        root
+            child1((Circle))
+                grandchild 1
+                grandchild 2
+            child2(Round rectangle)
+                grandchild 3
+                grandchild 4
+            child3[Square]
+                grandchild 5
+                ::icon(mdi mdi-fire)
+                gc6((grand<br/>child 6))
+                ::icon(mdi mdi-fire)
+                gc7((grand<br/>grand<br/>child 8))
+    </pre>
+
+    <h2>Mindmap with root wrapping text and a shape</h2>
+    <pre class="mermaid">
+        mindmap
+            root[A root with a long text that wraps to keep the node size in check]
+    </pre>
+
     <script type="module">
-      import mermaid from './mermaid.esm.mjs';
-      import layouts from './mermaid-layout-elk.esm.mjs';
+      // import mermaid from './mermaid.esm.mjs';
+      import mermaid from '../../packages/mermaid/dist/mermaid.esm.mjs';
+      // import mermaidMindmap from './mermaid-mindmap.esm.mjs';
 
-      const staticBellIconPack = {
-        prefix: 'fa6-regular',
-        icons: {
-          bell: {
-            body: '<path fill="currentColor" d="M224 0c-17.7 0-32 14.3-32 32v19.2C119 66 64 130.6 64 208v25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416h400c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6c-28.3-35.5-43.8-79.6-43.8-125V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32m0 96c61.9 0 112 50.1 112 112v25.4c0 47.9 13.9 94.6 39.7 134.6H72.3c25.8-40 39.7-86.7 39.7-134.6V208c0-61.9 50.1-112 112-112m64 352H160c0 17 6.7 33.3 18.7 45.3S207 512 224 512s33.3-6.7 45.3-18.7S288 465 288 448"/>',
-            width: 448,
-          },
-        },
-        width: 512,
-        height: 512,
-      };
+      // import mermaidMindmap from 'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-mindmap@9.3.0/+esm';
+      // await mermaid.registerExternalDiagrams([mermaidMindmap]);
 
-      mermaid.registerIconPacks([
-        {
-          name: 'logos',
-          loader: () =>
-            fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then((res) => res.json()),
-        },
-        {
-          name: 'fa',
-          loader: () => staticBellIconPack,
-        },
-      ]);
-      mermaid.registerLayoutLoaders(layouts);
+      const ALLOWED_TAGS = [
+        'a',
+        'b',
+        'blockquote',
+        'br',
+        'dd',
+        'div',
+        'dl',
+        'dt',
+        'em',
+        'foreignObject',
+        'h1',
+        'h2',
+        'h3',
+        'h4',
+        'h5',
+        'h6',
+        'h7',
+        'h8',
+        'hr',
+        'i',
+        'li',
+        'ul',
+        'ol',
+        'p',
+        'pre',
+        'span',
+        'strike',
+        'strong',
+        'table',
+        'tbody',
+        'td',
+        'tfoot',
+        'th',
+        'thead',
+        'tr',
+      ];
       mermaid.parseError = function (err, hash) {
-        console.error('Mermaid error: ', err);
-      };
-      window.callback = function () {
-        alert('A callback was triggered');
+        // console.error('Mermaid error: ', err);
       };
       mermaid.initialize({
-        flowchart: { titleTopMargin: 10, useMaxWidth: false },
-        fontSize: 12,
+        theme: 'base',
+        startOnLoad: true,
         logLevel: 0,
-        securityLevel: 'loose',
+        flowchart: {
+          useMaxWidth: false,
+          htmlLabels: true,
+        },
+        gantt: {
+          useMaxWidth: false,
+        },
+        useMaxWidth: false,
       });
       function callback() {
         alert('It worked');

cypress/platform/min-size-tester.html

@@ -1,171 +0,0 @@
-<html>
-  <head>
-    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
-    />
-    <link
-      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
-      rel="stylesheet"
-    />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-
-    <style>
-      body {
-        font-family: 'Arial';
-        background-color: #333;
-      }
-
-      h3 {
-        color: white;
-      }
-    </style>
-  </head>
-
-  <body>
-    <div class="flex w-full">
-      <div id="diagram-fixed"></div>
-      <div id="diagram-normal"></div>
-    </div>
-    <script type="module">
-      import mermaid from './mermaid.esm.mjs';
-      import layouts from './mermaid-layout-elk.esm.mjs';
-      mermaid.registerLayoutLoaders(layouts);
-      mermaid.parseError = function (err, hash) {
-        console.error('Mermaid error: ', err);
-      };
-      mermaid.initialize({
-        startOnLoad: false,
-        //look: 'handdrawn',
-        // layout: 'fixed',
-        theme: 'neo-dark',
-        //layout: 'elk',
-        fontFamily: 'Kalam',
-        logLevel: 1,
-      });
-
-      // let shape = 'rect';    // Done
-      //let shape = 'rounded';  // Done
-      //let shape = 'stadium';  // Done
-      // let shape = 'fr-rect'; // Done
-      // let shape = 'cyl'; // Done
-      //let shape = 'circle'; // Done
-      // let shape = 'odd'; // Done
-      // let shape = 'diam'; //Done
-      // let shape = 'hex'; // Done
-      // let shape = 'lean-r'; // Done
-      // let shape = 'lean-l'; // Done
-      // let shape = 'trap-b'; // Done
-      // let shape = 'trap-t'; // Done
-      // let shape = 'dbl-circ'; // Done
-      // let shape = 'text'; // Done
-      // let shape = 'notch-rect'; // Done
-      // let shape = 'lin-rect'; // Done
-      //let shape = 'sm-circ'; // Done
-      // let shape = 'fr-circ'; //Done
-      //let shape = 'fork'; // Done
-      //let shape = 'hourglass'; //Done
-      // let shape = 'bolt'; //Done
-      // let shape = 'doc'; // Done
-      // let shape = 'delay'; // Done
-      // let shape = 'h-cyl'; // Done
-      // let shape = 'lin-cyl'; // Done
-      // let shape = 'curv-trap'; // Done
-      // let shape = 'div-rect'; // Done
-      //let shape = 'tri'; // Done
-      // let shape = 'win-pane'; //Done
-      // let shape = 'f-circ'; // Done
-      // let shape = 'lin-doc'; // Done
-      // let shape = 'notch-pent'; // Done
-      // let shape = 'flip-tri'; // Done
-      // let shape = 'sl-rect'; // Done
-      // let shape = 'cross-circ'; // Done
-      // let shape = 'bow-rect'; // Done
-      // let shape = 'st-rect'; // Done
-
-      // let shape = 'flag';
-
-      // let shape = 'docs';
-      // let shape = 'brace';
-      // let shape = 'brace-r';
-      // let shape = 'braces';
-      // let shape = 'tag-doc';
-
-      let configFixed = `---
-config:
-  layout: fixed
----
-      `;
-      let code = `flowchart TB
-                %% n80["APA ksldj hfaskljdh aklsjdhf klasjdhf klasjhf klsajdh klasjdhf klasjdhf klasjdh klasjhf klasjdh klajsdhfklasjdhf kljadh fklasjdhf klajsdhf lkasdhf klajsdhf klasjdhfklasjdh klasjhf klasdfh klasdfh aklsjfh akjshkasldfh klasdfh klasjh fklsjhf klasdhf kljasdhf klasdhf klj"]
-                %% n80@{ shape: '${shape}'}
-                n81@{ label: "Ashish", shape: '${shape}'}
-                %%n82@{ label: "n82", shape: '${shape}'}
-                %%n83@{ label: "n83", shape: '${shape}'}
-                `;
-
-      let positions = {
-        edges: {},
-        nodes: {
-          n81: {
-            x: 0,
-            y: 10,
-            width: 107.7,
-            height: 65,
-          },
-          n80: {
-            x: -400,
-            y: 10,
-            width: 1,
-            height: 1,
-          },
-          n82: {
-            x: 0,
-            y: 110,
-          },
-          n83: {
-            x: 80,
-            y: 10,
-          },
-          n84: {
-            x: 1200,
-            y: 10,
-            width: 300,
-            height: 200,
-          },
-        },
-      };
-      console.log(configFixed + code);
-      const { svg } = await mermaid.render(
-        'the-id-of-the-svg-1',
-        configFixed + code,
-        undefined,
-        positions
-      );
-      const elem = document.querySelector('#diagram-fixed');
-      elem.innerHTML = svg;
-      const { svg: svg2 } = await mermaid.render('the-id-of-the-svg-2', code, undefined, positions);
-      const elem2 = document.querySelector('#diagram-normal');
-      elem2.innerHTML = svg2;
-    </script>
-  </body>
-</html>

cypress/platform/omkarht-new-padding.html

@@ -1,248 +0,0 @@
-<html>
-  <head>
-    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
-    />
-    <link
-      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
-      rel="stylesheet"
-    />
-    <link
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
-      rel="stylesheet"
-    />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Recursive:wght@300..1000&display=swap"
-      rel="stylesheet"
-    />
-
-    <style>
-      .recursive-500 {
-        font-family: 'Recursive', serif;
-        font-optical-sizing: auto;
-        font-weight: 500;
-        font-style: normal;
-        font-variation-settings:
-          'slnt' 0,
-          'CASL' 0,
-          'CRSV' 0.5,
-          'MONO' 0;
-      }
-      body {
-        /* background: rgb(221, 208, 208); */
-        /* background: #333; */
-        /* font-family: 'Arial'; */
-        font-family: 'Recursive', serif;
-        font-optical-sizing: auto;
-        font-weight: 500;
-        font-style: normal;
-        font-variation-settings:
-          'slnt' 0,
-          'CASL' 0,
-          'CRSV' 0.5,
-          'MONO' 0;
-        /* color: white; */
-        /* font-size: 18px !important; */
-      }
-      .gridify.tiny {
-        background-image: linear-gradient(
-            transparent 11px,
-            rgba(220, 220, 200, 0.8) 12px,
-            transparent 12px
-          ),
-          linear-gradient(90deg, transparent 11px, rgba(220, 220, 200, 0.8) 12px, transparent 12px);
-        background-size:
-          100% 12px,
-          12px 100%;
-      }
-
-      .gridify.dots {
-        background-image: radial-gradient(
-          circle at center,
-          rgba(220, 220, 200, 0.8) 1px,
-          transparent 1px
-        );
-        background-size: 24px 24px;
-      }
-
-      h1 {
-        color: grey;
-      }
-
-      .mermaid2 {
-        display: none;
-      }
-
-      .mermaid svg {
-        font-size: 16px !important;
-        font-family: 'Recursive', serif;
-        font-optical-sizing: auto;
-        font-weight: 500;
-        font-style: normal;
-        font-variation-settings:
-          'slnt' 0,
-          'CASL' 0,
-          'CRSV' 0.5,
-          'MONO' 0;
-      }
-
-      pre {
-        width: 100%;
-        /*box-shadow: 4px 4px 0px 0px #0000000F;*/
-      }
-    </style>
-  </head>
-
-  <body class="gridify dots">
-    <p class="mb-20">Test Diagram</p>
-    <div class="w-full h-64">
-      <pre style="display: none">
----
-config:
-  theme: neo
-  layout: dagre
----
-flowchart TD
-    A{"Cylinder"} --- n1["Rectangle"] & n2["Rounded"] & n3(["Stadium"])
-    n1 --x n4["Rounded"]
-    n2 --o n5["Hexagon"]
-    n3 --> n6["Parallelogram"]
-    n5 o--o n7["Trapezoid"]
-    n4 x--x n8["Lean Right"]
-    n6 <--> n9(("Circle"))
-    n8 --> n10["Rose"]
-    n7 --> n11["Pine"]
-    n9 --> n12["Peach"]
-    n2@{ shape: rounded}
-    n4@{ shape: rounded}
-    n5@{ shape: hex}
-    n6@{ shape: lean-l}
-    n7@{ shape: trap-b}
-    n8@{ shape: lean-r}
-
-     n10:::Rose
-     n11:::Pine
-     n12:::Peach
-    classDef Rose stroke-width:1px, stroke-dasharray:none, stroke:#FF5978, fill:#FFDFE5, color:#8E2236
-    classDef Pine stroke-width:1px, stroke-dasharray:none, stroke:#254336, fill:#27654A, color:#FFFFFF
-    classDef Peach stroke-width:1px, stroke-dasharray:none, stroke:#FBB35A, fill:#FFEFDB, color:#8F632D
-    n10 --x End
-    n11 --x End
-    n12 --x End
-
-    </pre
-      >
-
-      <pre id="diagram4" class="mermaid">
-        ---
-        config:
-          theme: neo
-          layout: dagre
-        ---
-        flowchart TD
-        n1["Cylinder"]
-        n1@{ shape: database}
-        
-            </pre
-      >
-    </div>
-
-    <script type="module">
-      import mermaid from './mermaid.esm.mjs';
-      import layouts from './mermaid-layout-elk.esm.mjs';
-
-      const staticBellIconPack = {
-        prefix: 'fa6-regular',
-        icons: {
-          bell: {
-            body: '<path fill="currentColor" d="M224 0c-17.7 0-32 14.3-32 32v19.2C119 66 64 130.6 64 208v25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416h400c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6c-28.3-35.5-43.8-79.6-43.8-125V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32m0 96c61.9 0 112 50.1 112 112v25.4c0 47.9 13.9 94.6 39.7 134.6H72.3c25.8-40 39.7-86.7 39.7-134.6V208c0-61.9 50.1-112 112-112m64 352H160c0 17 6.7 33.3 18.7 45.3S207 512 224 512s33.3-6.7 45.3-18.7S288 465 288 448"/>',
-            width: 448,
-          },
-        },
-        width: 512,
-        height: 512,
-      };
-
-      mermaid.registerIconPacks([
-        {
-          name: 'logos',
-          loader: () =>
-            fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then((res) => res.json()),
-        },
-        {
-          name: 'fa',
-          loader: () => staticBellIconPack,
-        },
-      ]);
-      mermaid.registerLayoutLoaders(layouts);
-      mermaid.parseError = function (err, hash) {
-        console.error('Mermaid error: ', err);
-      };
-      window.callback = function () {
-        alert('A callback was triggered');
-      };
-      function callback() {
-        alert('It worked');
-      }
-      await mermaid.initialize({
-        startOnLoad: false,
-        theme: 'redux',
-        // theme: 'default',
-        // theme: 'forest',
-        // handDrawnSeed: 12,
-        look: 'neo',
-        // 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
-        // layout: 'dagre',
-        // layout: 'elk',
-        // layout: 'fixed',
-        // htmlLabels: false,
-        flowchart: { titleTopMargin: 10 },
-
-        // fontFamily: 'Caveat',
-        // fontFamily: 'Kalam',
-        // fontFamily: 'courier',
-        fontFamily: 'Recursive',
-        sequence: {
-          actorFontFamily: 'courier',
-          noteFontFamily: 'courier',
-          messageFontFamily: 'courier',
-        },
-        kanban: {
-          htmlLabels: false,
-        },
-        fontSize: 16,
-        logLevel: 0,
-        securityLevel: 'loose',
-        callback,
-      });
-      // setTimeout(() => {
-      mermaid.init(undefined, document.querySelectorAll('.mermaid'));
-      // }, 1000);
-      mermaid.parseError = function (err, hash) {
-        console.error('In parse error:');
-        console.error(err);
-      };
-    </script>
-  </body>
-</html>

cypress/platform/per.html

@@ -4,60 +4,28 @@
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
-    />
-    <link
-      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
-      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
     />
     <link
       href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
       rel="stylesheet"
     />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-
     <style>
       body {
         /* background: rgb(221, 208, 208); */
-        /* background: #333; */
+        /* background:#333; */
         font-family: 'Arial';
         /* font-size: 18px !important; */
       }
-
       h1 {
         color: grey;
       }
-
       .mermaid2 {
         display: none;
       }
-
       .mermaid svg {
         /* font-size: 18px !important; */
-
-        /* background-color: #efefef;
-        background-image: radial-gradient(#fff 51%, transparent 91%),
-          radial-gradient(#fff 51%, transparent 91%);
-        background-size: 20px 20px;
-        background-position:
-          0 0,
-          10px 10px;
-        background-repeat: repeat; */
       }
-
       .malware {
         position: fixed;
         bottom: 0;
@@ -73,75 +41,34 @@
         font-family: monospace;
         font-size: 72px;
       }
-
-      /* tspan {
-              font-size: 6px !important;
-            } */
     </style>
   </head>
-
   <body>
-    <pre id="diagram" class="mermaid2">
-stateDiagram-v2
-    direction LR
-    [*] --> Active
-
-    state Active {
-      direction BT
-        [*] --> Inner
-        Inner --> NumLockOn : EvNumLockPressed
-    }
-    %% Outer --> Inner
-      </pre
-    >
-
+    <div>Security check</div>
     <pre id="diagram" class="mermaid">
-      stateDiagram-v2
-      [*] --> First
-      state First {
-          [*] --> second
-          second --> [*]
-      }
-
-
-    </pre>
-
+flowchart LR
+A-->B
+        </pre
+    >
     <pre id="diagram" class="mermaid2">
-      flowchart LR
-        A[Start] --Some text--> B(Continue)
-        B --> C{Evaluate}
-        C -- One --> D[Option 1]
-        C -- Two --> E[Option 2]
-        C -- Three --> F[fa:fa-car Option 3]
-    </pre>
-
-    <script type="module">
-      import mermaid from './mermaid.esm.mjs';
-      import layouts from './mermaid-layout-elk.esm.mjs';
-      mermaid.registerLayoutLoaders(layouts);
+            mindmap
+          root
+            ch1
+            ch2
+        </pre
+    >
+    <script src="./packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script>
+    <script src="./packages/mermaid-mindmap/dist/mermaid-example-diagram-detector.js"></script>
+    <script src="./packages/mermaid/dist/mermaid.esm.mjs"></script>
+    <script>
       mermaid.parseError = function (err, hash) {
-        console.error('Mermaid error: ', err);
+        // console.error('Mermaid error: ', err);
       };
       mermaid.initialize({
-        theme: 'neo',
-        handdrawnSeed: 12,
-        look: 'neo',
-        //layout: 'elk',
-        'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
-        // layout: 'dagre',
-        // layout: 'elk',
-        flowchart: { titleTopMargin: 10 },
-        // fontFamily: 'Caveat',
-        //fontFamily: 'Kalam',
-        fontFamily: 'Arial',
-        sequence: {
-          actorFontFamily: 'arial',
-          noteFontFamily: 'arial',
-          messageFontFamily: 'arial',
-        },
-        fontSize: 10,
+        startOnLoad: true,
         logLevel: 0,
-        htmlLabels: true,
+        basePath: './packages/',
+        // themeVariables: {relationLabelColor: 'red'}
       });
       function callback() {
         alert('It worked');
@@ -150,10 +77,6 @@ stateDiagram-v2
         console.error('In parse error:');
         console.error(err);
       };
-      // mermaid.test1('first_slow', 1200).then((r) => console.info(r));
-      // mermaid.test1('second_fast', 200).then((r) => console.info(r));
-      // mermaid.test1('third_fast', 200).then((r) => console.info(r));
-      // mermaid.test1('forth_slow', 1200).then((r) => console.info(r));
     </script>
   </body>
 </html>

cypress/platform/refactor.html

@@ -1,307 +0,0 @@
-<html>
-  <head>
-    <script src="//unpkg.com/alpinejs" defer></script>
-    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
-    />
-    <link
-      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
-      rel="stylesheet"
-    />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-
-    <style>
-      body {
-        font-family: 'Arial';
-      }
-
-      table {
-        width: 100%;
-        border-collapse: collapse;
-        table-layout: fixed;
-      }
-
-      th,
-      td {
-        border: 1px solid black;
-        padding: 10px;
-        text-align: center;
-        vertical-align: middle;
-      }
-
-      .separator {
-        height: 20px;
-        background-color: #f0f0f0;
-      }
-
-      .vertical-header {
-        text-align: center;
-      }
-
-      .collapsible {
-        background-color: #f9f9f9;
-        color: #444;
-        cursor: pointer;
-        padding: 18px;
-        width: 100%;
-        border: none;
-        text-align: left;
-        outline: none;
-        font-size: 15px;
-      }
-
-      .active,
-      .collapsible:hover {
-        background-color: #ccc;
-      }
-
-      .collapsible:after {
-        content: '\002B';
-        color: #777;
-        font-weight: bold;
-        float: right;
-        margin-left: 2px;
-      }
-
-      .active:after {
-        content: '\2212';
-      }
-
-      .content {
-        padding: 0 5px;
-        max-height: 0;
-        overflow: hidden;
-        transition: max-height 0.2s ease-out;
-        background-color: #f1f1f1;
-      }
-
-      .content .pre-scrollable {
-        max-height: 200px;
-        overflow-y: scroll;
-      }
-    </style>
-  </head>
-
-  <body>
-    <script>
-      const data = {
-        shapes: [
-          {
-            descr: 'Stadium shape',
-            code: `
-              flowchart LR
-              id1([This is the text in the box])
-            `,
-          },
-          {
-            descr: 'Sub-Routine shape',
-            code: `
-              flowchart LR
-              id1[[This is the text in the box]]
-            `,
-          },
-          {
-            descr: 'Cylindrical shape',
-            code: `
-              flowchart LR
-              id1[(Database)]
-            `,
-          },
-          {
-            descr: 'Circle shape',
-            code: `
-              flowchart LR
-              id1((Circle))
-            `,
-          },
-          {
-            descr: 'Double Circle shape',
-            code: `
-              flowchart LR
-              id1(((Circle)))
-            `,
-          },
-          {
-            descr: 'Asymmetric shape',
-            code: `
-flowchart LR
-id1>This is the text in the box]
-            `,
-          },
-          {
-            descr: 'Rhombus/Diamond/Question shape',
-            code: `
-              flowchart LR
-    id1{This is the text in the box}
-            `,
-          },
-          {
-            descr: 'Hexagon shape',
-            code: `
-              flowchart LR
-    id1{{This is the text in the box}}
-            `,
-          },
-          {
-            descr: 'Parallelogram shape',
-            code: `
-              flowchart TD
-    id1[/This is the text in the box/]
-            `,
-          },
-          {
-            descr: 'Parallelogram Alt shape',
-            code: `
-              flowchart TD
-    id1[\This is the text in the box\]
-            `,
-          },
-          {
-            descr: 'Trapezoid shape',
-            code: `
-             flowchart TD
-    A[/Christmas\\]
-            `,
-          },
-          {
-            descr: 'Trapezoid Alt shape',
-            code: `
-              flowchart TD
-    id1[\\This is the text in the box\\]
-            `,
-          },
-          {
-            descr: 'Rect with rounded corner',
-            code: `
-               flowchart LR
-    id1(This is the text in the box)
-            `,
-          },
-          {
-            descr: 'Rect with sharp corner',
-            code: `
-   flowchart LR
-    id1[This is the text in the box]
-            `,
-          },
-        ],
-        looks: ['classic', 'handdrawn', 'neo'],
-        // looks: ['classic'],
-        layouts: ['elk', 'dagre'],
-        // layouts: ['elk'],
-        themes: ['default', 'neo'],
-        // themes: ['default'],
-      };
-      function generateMermaidCode(layout, look, theme, shape) {
-        return `---
-config:
-  layout: ${layout}
-  look: ${look}
-  theme: ${theme}
----
-${shape.code}
-`;
-      }
-    </script>
-    <table x-data="data">
-      <tr>
-        <th></th>
-        <template x-for="layout in layouts">
-          <template x-for="look in looks">
-            <template x-for="theme in themes">
-              <th x-text="layout + '-' + look + '-' + theme "></th>
-            </template>
-          </template>
-        </template>
-      </tr>
-      <template x-for="shape in shapes">
-        <tr>
-          <th class="vertical-header">
-            <button class="collapsible" x-text="shape.descr">Sub-Routine shape</button>
-            <div class="content">
-              <div class="pre-scrollable">
-                <pre x-text="shape.code"></pre>
-              </div>
-            </div>
-          </th>
-          <template x-for="layout in layouts">
-            <template x-for="look in looks">
-              <template x-for="theme in themes">
-                <td>
-                  <pre
-                    id="diagram6"
-                    class="mermaid"
-                    x-text="generateMermaidCode(layout, look, theme, shape)"
-                  ></pre>
-                </td>
-              </template>
-            </template>
-          </template>
-        </tr>
-      </template>
-    </table>
-
-    <script type="module">
-      import mermaid from './mermaid.esm.mjs';
-      import layouts from './mermaid-layout-elk.esm.mjs';
-      mermaid.registerLayoutLoaders(layouts);
-      mermaid.parseError = function (err, hash) {};
-
-      mermaid.initialize({
-        handdrawn: false,
-        mergeEdges: true,
-        layout: 'dagre',
-        flowchart: { titleTopMargin: 10 },
-        // fontFamily: 'Caveat',
-        fontFamily: 'Kalam',
-        sequence: {
-          actorFontFamily: 'courier',
-          noteFontFamily: 'courier',
-          messageFontFamily: 'courier',
-        },
-        fontSize: 16,
-        logLevel: 0,
-      });
-      function callback() {
-        alert('It worked');
-      }
-      mermaid.parseError = function (err, hash) {
-        console.error('In parse error:');
-        console.error(err);
-      };
-
-      let coll = document.getElementsByClassName('collapsible');
-      for (const element of coll) {
-        element.addEventListener('click', function () {
-          this.classList.toggle('active');
-          let content = this.nextElementSibling;
-          if (content.style.maxHeight) {
-            content.style.maxHeight = null;
-          } else {
-            content.style.maxHeight = content.scrollHeight + 'px';
-          }
-        });
-      }
-    </script>
-  </body>
-</html>

cypress/platform/saurabh.html

@@ -1,141 +0,0 @@
-<html>
-  <head>
-    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
-    />
-    <link
-      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
-      rel="stylesheet"
-    />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-
-    <style>
-      body {
-        /* background: rgb(221, 208, 208); */
-        /* background: #333; */
-        font-family: 'Arial';
-        /* font-size: 18px !important; */
-      }
-
-      h1 {
-        color: grey;
-      }
-
-      .mermaid2 {
-        display: none;
-      }
-
-      .mermaid svg {
-        /* font-size: 18px !important; */
-
-        /* background-color: #efefef;
-        background-image: radial-gradient(#fff 51%, transparent 91%),
-          radial-gradient(#fff 51%, transparent 91%);
-        background-size: 20px 20px;
-        background-position:
-          0 0,
-          10px 10px;
-        background-repeat: repeat; */
-      }
-    </style>
-  </head>
-
-  <body style="display: flex; gap: 2rem; flex-direction: row">
-    <pre id="diagram4" class="mermaid">
-      flowchart
-          A --> A
-          subgraph B
-            B1 --> B1
-          end
-          subgraph C
-            subgraph C1
-              C2 --> C2
-              subgraph D
-                D1 --> D1
-              end
-              D --> D
-            end
-            C1 --> C1
-          end
-
-    </pre>
-    <script type="module">
-      import mermaid from './mermaid.esm.mjs';
-      import layouts from './mermaid-layout-elk.esm.mjs';
-      mermaid.registerLayoutLoaders(layouts);
-      mermaid.registerIconPacks([
-        {
-          name: 'logos',
-          loader: () =>
-            fetch('https://unpkg.com/@iconify-json/logos/icons.json').then((res) => res.json()),
-        },
-        {
-          name: 'fa',
-          loader: () =>
-            fetch('https://unpkg.com/@iconify-json/fa6-solid/icons.json').then((res) => res.json()),
-        },
-      ]);
-      mermaid.parseError = function (err, hash) {
-        console.error('Mermaid error: ', err);
-      };
-      window.callback = function () {
-        alert('A callback was triggered');
-      };
-      mermaid.initialize({
-        // theme: 'base',
-        // handdrawnSeed: 12,
-        look: 'classic',
-        // 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
-        // 'elk.nodePlacement.strategy': 'SIMPLE',
-        // 'elk.nodePlacement.strategy': 'LAYERED',
-        // 'elk.mergeEdges': true,
-        // layout: 'dagre',
-        // layout: 'elk',
-        // layout: 'fixed',
-        // htmlLabels: false,
-        flowchart: { titleTopMargin: 10, padding: 0, htmlLabels: true },
-        // fontFamily: 'Caveat',
-        // fontFamily: 'Kalam',
-        fontFamily: 'courier',
-        sequence: {
-          actorFontFamily: 'courier',
-          noteFontFamily: 'courier',
-          messageFontFamily: 'courier',
-        },
-        themeVariables: {
-          fontSize: 50,
-          fontFamily: 'courier',
-        },
-        logLevel: 0,
-        securityLevel: 'loose',
-      });
-      function callback() {
-        alert('It worked');
-      }
-      mermaid.parseError = function (err, hash) {
-        console.error('In parse error:');
-        console.error(err);
-      };
-    </script>
-  </body>
-</html>

cypress/platform/shape-tester.html

@@ -1,102 +0,0 @@
-<html>
-  <head>
-    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
-    />
-    <link
-      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
-      rel="stylesheet"
-    />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-
-    <style>
-      body {
-        font-family: 'Arial';
-        background-color: #333;
-      }
-    </style>
-  </head>
-
-  <body>
-    <div id="diagram"></div>
-    <script type="module">
-      import mermaid from './mermaid.esm.mjs';
-      import layouts from './mermaid-layout-elk.esm.mjs';
-      mermaid.registerLayoutLoaders(layouts);
-      mermaid.parseError = function (err, hash) {
-        console.error('Mermaid error: ', err);
-      };
-      mermaid.initialize({
-        startOnLoad: false,
-        //look: 'handdrawn',
-        // layout: 'fixed',
-        theme: 'dark',
-        //layout: 'elk',
-        fontFamily: 'Kalam',
-        logLevel: 1,
-      });
-
-      let shape = 'circle';
-      let simplified = true;
-      // let simplified = false;
-      let algorithm = 'elk';
-      // let algorithm = 'dagre';
-      let code = `---
-config:
-  layout: ${algorithm}
----
-flowchart TD
-A["Abrakadabra"] --> C["C"] & D["I am a circle"] & n4["Untitled Node"]
-D@{ shape: diamond}
-    B["Bombrakadombra"] --> D & C & D
-    C --> E["E"] & B
-    D --> E & A
-    n4 --> C
-    A@{ shape: ${shape}}
-    B@{ shape: ${shape}}
-    C@{ shape: ${shape}}
-    D@{ shape: ${shape}}
-    E@{ shape: ${shape}}
-    n4@{ shape: ${shape}}
-
-          `;
-      if (simplified) {
-        code = `---
-config:
-  layout: ${algorithm}
----
-flowchart LR
-A["Abrakadabra"] --> C["I am the circle"] & C & C & C & C
-%% A["Abrakadabra"] --> C
-    A@{ shape: ${shape}}
-    C@{ shape: ${shape}}
-
-          `;
-      }
-      console.log(code);
-      const { svg } = await mermaid.render('the-id-of-the-svg', code, undefined, undefined);
-      const elem = document.querySelector('#diagram');
-      elem.innerHTML = svg;
-    </script>
-  </body>
-</html>

cypress/platform/size-tester.html

@@ -1,180 +0,0 @@
-<html>
-  <head>
-    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
-    />
-    <link
-      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
-      rel="stylesheet"
-    />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-
-    <style>
-      body {
-        font-family: 'Arial';
-        background-color: #333;
-      }
-    </style>
-  </head>
-
-  <body>
-    <div id="diagram"></div>
-    <script type="module">
-      import mermaid from './mermaid.esm.mjs';
-      import layouts from './mermaid-layout-elk.esm.mjs';
-      mermaid.registerLayoutLoaders(layouts);
-      mermaid.parseError = function (err, hash) {
-        console.error('Mermaid error: ', err);
-      };
-      mermaid.initialize({
-        startOnLoad: false,
-        //look: 'handdrawn',
-        layout: 'fixed',
-        theme: 'neo-dark',
-        //layout: 'elk',
-        fontFamily: 'Kalam',
-        logLevel: 1,
-        class: {
-          hideEmptyMembersBox: true,
-        },
-      });
-
-      let shape = 'circle';
-
-      let code = `
-      flowchart TB
-          n80["APA ksldj hfaskljdh aklsjdhf klasjdhf klasjhf klsajdh klasjdhf klasjdhf klasjdh klasjhf klasjdh klajsdhfklasjdhf kljadh fklasjdhf klajsdhf lkasdhf klajsdhf klasjdhfklasjdh klasjhf klasdfh klasdfh aklsjfh akjshkasldfh klasdfh klasjh fklsjhf klasdhf kljasdhf klasdhf klj"]
-          n80@{ shape: '${shape}'}
-          n81["APA ksldj hfaskljdh aklsjdhf klasjdhf klasjhf klsajdh klasjdhf klasjdhf klasjdh klasjhf klasjdh klajsdhfklasjdhf kljadh fklasjdhf klajsdhf lkasdhf klajsdhf klasjdhfklasjdh klasjhf klasdfh klasdfh aklsjfh akjshkasldfh klasdfh klasjh fklsjhf klasdhf kljasdhf klasdhf klj"]
-          n82["A single line of text"]
-          n81@{ shape: '${shape}'}
-          n82@{ shape: '${shape}'}
-          n83@{ label: "A single line of text", shape: '${shape}'}
-          n84@{ shape: '${shape}'}
-          `;
-
-      let code2 = `
-      classDiagram
-        class class1 {
-          int num
-          string test
-          string test
-          string test
-          string test
-          string test
-          method()
-        }
-        class class2 {
-          int num
-          string test
-          string test
-          string test
-          string test
-          string test
-          method()
-          method()
-        }
-        class class3 {
-          int test
-        }
-        <<interface>> class3
-        class class4 {
-          int[] id
-          method()
-          method()
-          method()
-          method()
-        }
-        <<interface>> class4
-      `;
-
-      let positions = {
-        edges: {},
-        nodes: {
-          n81: {
-            x: 0,
-            y: 10,
-            width: 300,
-            height: 200,
-          },
-          n80: {
-            x: -400,
-            y: 10,
-            width: 100,
-            height: 50,
-          },
-          n82: {
-            x: 400,
-            y: 10,
-            width: 300,
-            height: 200,
-          },
-          n83: {
-            x: 800,
-            y: 10,
-          },
-          n84: {
-            x: 1200,
-            y: 10,
-            width: 300,
-            height: 200,
-          },
-        },
-      };
-
-      let positions2 = {
-        edges: {},
-        nodes: {
-          class1: {
-            x: 0,
-            y: 10,
-            width: 100,
-            height: 400,
-          },
-          class2: {
-            x: -300,
-            y: 100,
-            width: 100,
-            height: 0,
-          },
-          class3: {
-            x: 400,
-            y: 10,
-            width: 0,
-            height: 0,
-          },
-          class4: {
-            x: 800,
-            y: 10,
-            width: 0,
-            height: 0,
-          },
-        },
-      };
-
-      const { svg } = await mermaid.render('the-id-of-the-svg', code2, undefined, positions2);
-      const elem = document.querySelector('#diagram');
-      elem.innerHTML = svg;
-    </script>
-  </body>
-</html>

cypress/platform/state-refactor.html

@@ -93,7 +93,6 @@
       <th></th> <!-- Placeholder for the top left corner -->
       <th>Dagre</th>
       <th>Dagre with rough</th>
-      <th>Dagre with neo</th>
       <th>ELK</th>
       <th>ELK with rough</th>
     </tr>
@@ -117,14 +116,6 @@ stateDiagram-v2
       <td>
         <pre id="diagram2" class="mermaid">
 %%{init: {"look": "handDrawn"} }%%
-stateDiagram-v2
-    stateId
-
-      </pre>
-      </td>
-      <td>
-        <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo"} }%%
 stateDiagram-v2
     stateId
 
@@ -172,13 +163,6 @@ stateDiagram-v2
       <td>
         <pre id="diagram2" class="mermaid">
 %%{init: {"look": "handDrawn"} }%%
-stateDiagram-v2
-    state "This is a state description" as s3
-      </pre>
-      </td>
-      <td>
-        <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo"} }%%
 stateDiagram-v2
     state "This is a state description" as s3
       </pre>
@@ -223,14 +207,6 @@ stateDiagram-v2
       <td>
         <pre id="diagram2" class="mermaid">
 %%{init: {"look": "handDrawn"} }%%
-stateDiagram-v2
-    s22 : This is a state description
-
-      </pre>
-      </td>
-      <td>
-        <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo"} }%%
 stateDiagram-v2
     s22 : This is a state description
 
@@ -291,20 +267,10 @@ stateDiagram-v2
       </pre>
       </td>
       <td>
-          <pre id="diagram2" class="mermaid">
-  %%{init: {"look": "neo"} }%%
-
-     stateDiagram-v2
-      s51 --> s52
-
-
-        </pre>
-        </td>
-        <td>
         <pre id="diagram3" class="mermaid">
 %%{init: {"handDrawn": false, "layout": "elk"} }%%
 stateDiagram-v2
-    s61 --> s62
+    s51 --> s52
 
 
       </pre>
@@ -313,7 +279,7 @@ stateDiagram-v2
         <pre id="diagram4" class="mermaid">
 %%{init: {"look": "handDrawn", "layout": "elk"} }%%
 stateDiagram-v2
-    s71 --> s72
+    s61 --> s62
 
 
       </pre>
@@ -356,23 +322,13 @@ stateDiagram-v2
     a3 --> a4: A transition
 
 
-      </pre>
-      </td>
-      <td>
-        <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo"} }%%
-
-   stateDiagram-v2
-    a5 --> a6: A transition
-
-
       </pre>
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
 %%{init: {"handDrawn": false, "layout": "elk"} }%%
 stateDiagram-v2
-    a7 --> a8: A transition
+    a5 --> a6: A transition
 
 
       </pre>
@@ -381,7 +337,7 @@ stateDiagram-v2
         <pre id="diagram4" class="mermaid">
 %%{init: {"look": "handDrawn", "layout": "elk"} }%%
 stateDiagram-v2
-   a9 --> a10: A transition
+   a7 --> a8: A transition
 
 
       </pre>
@@ -427,17 +383,6 @@ stateDiagram-v2
     test --> [*]
 
 
-      </pre>
-      </td>
-      <td>
-        <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo"} }%%
-
-   stateDiagram-v2
-       [*] --> test
-    test --> [*]
-
-
       </pre>
       </td>
       <td>
@@ -510,20 +455,6 @@ stateDiagram-v2
     }
 
 
-      </pre>
-      </td>
-      <td>
-        <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo"} }%%
-
-   stateDiagram-v2
-       [*] --> First
-    state First {
-        [*] --> second
-        second --> [*]
-    }
-
-
       </pre>
       </td>
       <td>
@@ -637,31 +568,6 @@ stateDiagram-v2
 
 
 
-      </pre>
-      </td>
-      <td>
-        <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo"} }%%
-
-   stateDiagram-v2
-    [*] --> Level1
-
-    state Level1 {
-        [*] --> Level2
-
-        state Level2 {
-            [*] --> level2
-            level2 --> Level3
-
-            state Level3 {
-                [*] --> level3
-                level3 --> [*]
-            }
-        }
-    }
-
-
-
       </pre>
       </td>
       <td>
@@ -792,30 +698,6 @@ stateDiagram-v2
       </pre>
       </td>
       <td>
-          <pre id="diagram2" class="mermaid">
-  %%{init: {"look": "neo"} }%%
-
-     stateDiagram-v2
-     [*] --> B1
-      B1 --> B2
-      B1 --> B3
-
-      state B1 {
-          [*] --> B11
-          B11 --> [*]
-      }
-      state B2 {
-          [*] --> B22
-          B22 --> [*]
-      }
-      state B3 {
-          [*] --> B33
-          B33 --> [*]
-      }
-        </pre>
-        </td>
-        <td>
-
         <pre id="diagram3" class="mermaid">
 %%{init: {"handDrawn": false, "layout": "elk"} }%%
  stateDiagram-v2
@@ -912,19 +794,7 @@ stateDiagram-v2
     if_state --> True : if n >= 0
       </pre>
       </td>
-        <td>
-          <pre id="diagram2" class="mermaid">
-  %%{init: {"look": "neo"} }%%
-
-     stateDiagram-v2
-     state if_state <<choice>>
-      [*] --> IsPositive
-      IsPositive --> if_state
-      if_state --> False: if n < 0
-      if_state --> True : if n >= 0
-        </pre>
-        </td>
-        <td>
+      <td>
         <pre id="diagram3" class="mermaid">
 %%{init: {"handDrawn": false, "layout": "elk"} }%%
  stateDiagram-v2
@@ -996,23 +866,6 @@ stateDiagram-v2
       <td>
         <pre id="diagram2" class="mermaid">
 %%{init: {"look": "handDrawn"} }%%
-   stateDiagram-v2
-    state fork_state <<fork>>
-      [*] --> fork_state
-      fork_state --> State2
-      fork_state --> State3
-
-      state join_state <<join>>
-      State2 --> join_state
-      State3 --> join_state
-      join_state --> State4
-      State4 --> [*]
-
-      </pre>
-      </td>
-      <td>
-        <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo"} }%%
    stateDiagram-v2
     state fork_state <<fork>>
       [*] --> fork_state
@@ -1103,19 +956,6 @@ stateDiagram-v2
       <td>
         <pre id="diagram2" class="mermaid">
 %%{init: {"look": "handDrawn"} }%%
-   stateDiagram-v2
-     TN3: The state with a note
-        note right of TN3
-            Important information! You can write
-            notes.
-        end note
-        TN3 --> TN4
-        note left of TN4 : This is the note to the left.
-      </pre>
-      </td>
-      <td>
-        <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo"} }%%
    stateDiagram-v2
      TN3: The state with a note
         note right of TN3
@@ -1216,27 +1056,6 @@ state Active {
      stateDiagram-v2
     [*] --> Active
 
-    state Active {
-        [*] --> NumLockOff
-        NumLockOff --> NumLockOn : EvNumLockPressed
-        NumLockOn --> NumLockOff : EvNumLockPressed
-        --
-        [*] --> CapsLockOff
-        CapsLockOff --> CapsLockOn : EvCapsLockPressed
-        CapsLockOn --> CapsLockOff : EvCapsLockPressed
-        --
-        [*] --> ScrollLockOff
-        ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
-        ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
-    }
-      </pre>
-      </td>
-      <td>
-        <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo"} }%%
-     stateDiagram-v2
-    [*] --> Active
-
     state Active {
         [*] --> NumLockOff
         NumLockOff --> NumLockOn : EvNumLockPressed
@@ -1342,21 +1161,6 @@ direction LR
         <pre id="diagram2" class="mermaid">
 %%{init: {"look": "handDrawn"} }%%
      stateDiagram-v2
-   direction LR
-    [*] --> D1
-    D1 --> D2
-    D2 --> D3
-    state D3 {
-      direction TB
-      D11 --> D22
-    }
-    D2 --> D4
-      </pre>
-      </td>
-      <td>
-        <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo"} }%%
-     stateDiagram-v2
    direction LR
     [*] --> D1
     D1 --> D2
@@ -1418,7 +1222,7 @@ direction LR
 
   <script type="module">
     import mermaid from './mermaid.esm.mjs';
-    import layouts from './mermaid-layout-elk.esm.mjs';
+    import { layouts } from './mermaid-layout-elk.esm.mjs';
     mermaid.registerLayoutLoaders(layouts);
     mermaid.parseError = function (err, hash) {
 
@@ -1464,4 +1268,4 @@ direction LR
   </script>
 </body>
 
-</html>
+</html>

cypress/platform/steph.html

@@ -1,172 +0,0 @@
-<html>
-  <head>
-    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
-    />
-    <link
-      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
-      rel="stylesheet"
-    />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-
-    <style>
-      body {
-        /* background: rgb(221, 208, 208); */
-        /* background: #333; */
-        font-family: 'Arial';
-        /* font-size: 18px !important; */
-      }
-
-      h1 {
-        color: grey;
-      }
-
-      .mermaid2 {
-        display: none;
-      }
-
-      .mermaid svg {
-        /* font-size: 18px !important; */
-
-        /* background-color: #efefef;
-        background-image: radial-gradient(#fff 51%, transparent 91%),
-          radial-gradient(#fff 51%, transparent 91%);
-        background-size: 20px 20px;
-        background-position:
-          0 0,
-          10px 10px;
-        background-repeat: repeat; */
-      }
-    </style>
-  </head>
-
-  <body>
-    <pre id="diagram" class="mermaid2">
-      %%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
-flowchart
-      A[A really really really super long node] --> B & C
-      subgraph apa
-        D --> E
-      end
-      </pre
-    >
-    <pre id="diagram" class="mermaid2">
-%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial",         "themeVariables": {
-          "useGradient": true,
-          "gradientStart": '#fff',
-          "gradientStop": '#ccc'
-        }} }%%
-stateDiagram-v2
-    stateId
-      </pre
-    >
-    <pre id="diagram2" class="mermaid2">
-flowchart LR
-    id1(Start)-->id2(Stop)
-    style id1 fill:#f9f,stroke:#333,stroke-width:4px
-    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
-
-
-    </pre>
-
-    <pre id="diagram3" class="mermaid2">
-      flowchart LR
-    A:::foo & B:::bar --> C:::foobar
-    classDef foo stroke:#f00
-    classDef bar stroke:#0f0
-    classDef ash color:red
-    class C ash
-    style C stroke:#00f, fill:black
-
-    </pre>
-    <!-- Flowchart with subgraph-->
-    <pre id="diagram3" class="mermaid">
-flowchart TB
-    c1-->a2
-    subgraph one
-    a1-->a2
-    end
-    subgraph two
-    b1-->b2
-    end
-    subgraph three
-    c1-->c2
-    end
-    </pre>
-
-    <pre id="diagram4" class="mermaid">
-stateDiagram-v2
-    [*] --> First
-    state First {
-        [*] --> second
-        second --> [*]
-    }
-
-
-    </pre>
-
-    <script type="module">
-      import mermaid from './mermaid.esm.mjs';
-      import layouts from './mermaid-layout-elk.esm.mjs';
-      mermaid.registerLayoutLoaders(layouts);
-      mermaid.parseError = function (err, hash) {
-        console.error('Mermaid error: ', err);
-      };
-      window.callback = function () {
-        alert('A callback was triggered');
-      };
-      mermaid.initialize({
-        theme: 'neo',
-
-        // handdrawnSeed: 12,
-        look: 'neo',
-        // 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
-        // layout: 'dagre',
-        // layout: 'elk',
-        // layout: 'fixed',
-        // htmlLabels: false,
-        flowchart: { titleTopMargin: 10 },
-
-        // fontFamily: 'Caveat',
-        // fontFamily: 'Kalam',
-        // fontFamily: 'courier',
-        fontFamily: 'arial',
-        sequence: {
-          actorFontFamily: 'courier',
-          noteFontFamily: 'courier',
-          messageFontFamily: 'courier',
-        },
-        fontSize: 12,
-        logLevel: 0,
-        securityLevel: 'loose',
-      });
-      function callback() {
-        alert('It worked');
-      }
-      mermaid.parseError = function (err, hash) {
-        console.error('In parse error:');
-        console.error(err);
-      };
-    </script>
-  </body>
-</html>

cypress/platform/yari.html

@@ -1,663 +0,0 @@
-<html>
-  <body>
-    <h1 class="header">Class Nodes</h1>
-    <div class="node-showcase">
-      <div class="test">
-        <h2>Basic Class</h2>
-        <pre class="mermaid">
-          ---
-            config:
-              htmlLabels: false
-          ---
-          classDiagram
-          class _Duck_ {
-            +String beakColor
-            _+_swim_()a_
-            __+quack() test__
-          }
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Basic Class</h2>
-        <pre class="mermaid">
-          ---
-          config:
-            htmlLabels: false
-          ---
-          classDiagram
-          class Class10:::exClass2 {
-            int[] id
-            List~int~ ids
-            test(List~int~ ids) List~bool~
-            testArray() bool[]
-          }
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Basic Class</h2>
-        <pre class="mermaid">
-          flowchart TD
-            Start --> Stop
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Complex Class</h2>
-        <pre class="mermaid">
-                classDiagram
-                class Square~Shape~{
-                  int id
-                  List~int~ position
-                  setPoints(List~int~ points)
-                  getPoints() List~int~
-                }
-          
-          Square : -List~string~ messages
-          Square : +setMessages(List~string~ messages)
-          Square : +getMessages() List~string~
-          Square : +getDistanceMatrix() List~List~int~~
-              </pre
-        >
-      </div>
-      <div class="test">
-        <h2>No Attributes</h2>
-        <pre class="mermaid">
-          classDiagram
-          class Duck {
-            +swim()
-            +quack()
-          }
-        </pre>
-      </div>
-      <div class="test">
-        <h2>No Methods</h2>
-        <pre class="mermaid">
-          classDiagram
-          class Duck {
-            +String beakColor
-          }
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Only Class Name</h2>
-        <p>Empty line as attribute</p>
-        <pre class="mermaid">
-          ---
-            config:
-              class:
-                hideEmptyMembersBox: false
-          ---
-          classDiagram
-          class Duck {
-            
-          }
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Visibility and Types</h2>
-        <p>(Further tilde testing)</p>
-        <div class="mermaid">
-          classDiagram class Duck { ~interface~~~ +String beakColor #swim() ~quack()~~~
-          -test()~~~~~~~ +deposit(amount) bool }
-        </div>
-      </div>
-      <div class="test">
-        <h2>Additional Classifiers</h2>
-        <p>(* Abstract | $ Static)</p>
-        <div class="mermaid">
-          classDiagram class Square~Shape~ { int id* List~int~ position* setPoints(List~int~points)*
-          getPoints()* List~int~ } Square : -List~string~ messages$ Square :
-          +setMessages(List~string~ messages)* Square : +getMessages()$ List~string~ Square :
-          +getDistanceMatrix() List~List~int~~$
-        </div>
-      </div>
-      <div class="test">
-        <h2>Label</h2>
-        <pre class="mermaid">
-          classDiagram
-          class Animal~test~["Animal with a label"]
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Spacing</h2>
-        <p>(Fix ensures consistent spacing rules)</p>
-        <p>(No space or single space?)</p>
-        <pre class="mermaid">
-          classDiagram
-          class ClassName {
-          -attribute:type
-          -            attribute : type
-               test
-          
-          + GetAttribute() type                 
-          +     GetAttribute() type
-          }
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Annotation</h2>
-        <pre class="mermaid">
-          classDiagram
-          class Shape
-          &lt;&lt;interface&gt;&gt; Shape
-          Shape : noOfVertices
-          Shape : draw()
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Long Class Name Text</h2>
-        <pre class="mermaid">
-          classDiagram
-          class ThisIsATestForALongClassName {
-            &lt;&lt;interface&gt;&gt;
-            noOfLetters
-            delete()
-          }
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Long Annotation Text</h2>
-        <pre class="mermaid">
-          classDiagram
-          class Shape
-          &lt;&lt;superlongannotationtext&gt;&gt; Shape
-          Shape : noOfVertices
-          Shape : draw()
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Long Member Text</h2>
-        <pre class="mermaid">
-          classDiagram
-          class Shape
-          &lt;&lt;interface&gt;&gt; Shape
-          Shape : noOfVertices
-          Shape : longtexttestkeepgoingandgoing
-          Shape : draw()
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Link</h2>
-        <pre class="mermaid">
-          classDiagram
-          class Shape
-          link Shape "https://www.github.com" "This is a tooltip for a link"
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Click</h2>
-        <pre class="mermaid">
-          classDiagram
-          class Shape
-          click Shape href "https://www.github.com" "This is a tooltip for a link"
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Hand Drawn</h2>
-        <pre class="mermaid">
-          ---
-          config:
-            look: handDrawn
-            htmlLabels: true
-          ---
-          classDiagram
-          class Hand {
-            +String beakColor
-            +swim()
-            +quack()
-          }
-          style Hand fill:#f9f,stroke:#29f,stroke-width:2px
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Neutral Theme</h2>
-        <pre class="mermaid">
-          ---
-          config:
-            theme: neutral
-          ---
-          classDiagram
-          class Duck {
-            +String beakColor
-            +swim()
-            +quack()
-          }
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Dark Theme</h2>
-        <pre class="mermaid">
-          ---
-          config:
-            theme: dark
-          ---
-          classDiagram
-          class Duck {
-            +String beakColor
-            +swim()
-            +quack()
-          }
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Forest Theme</h2>
-        <pre class="mermaid">
-          ---
-          config:
-            theme: forest
-          ---
-          classDiagram
-          class Duck {
-            +String beakColor
-            +swim()
-            +quack()
-          }
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Base Theme</h2>
-        <pre class="mermaid">
-          ---
-          config:
-            theme: base
-          ---
-          classDiagram
-          class Duck {
-            +String beakColor
-            +swim()
-            +quack()
-          }
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Custom Theme</h2>
-        <pre class="mermaid">
-          %%{
-            init: {
-              'theme': 'base',
-              'themeVariables': {
-                'primaryColor': '#BB2528',
-                'primaryTextColor': '#fff',
-                'primaryBorderColor': '#7C0000',
-                'lineColor': '#F83d29',
-                'secondaryColor': '#006100',
-                'tertiaryColor': '#fff'
-              }
-            }
-          }%%
-          classDiagram
-          class Duck {
-            +String beakColor
-            +swim()
-            +quack()
-          }
-          Duck--Dog
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Styling within Diagram</h2>
-        <pre class="mermaid">
-          classDiagram
-          class Duck {
-            +String beakColor
-            +swim()
-            +quack()
-          }
-          style Duck fill:#f9f,stroke:#333,stroke-width:8px
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Styling with classDef Statement</h2>
-        <pre class="mermaid">
-          classDiagram
-          class Duck:::bold {
-            +String beakColor
-            +swim()
-            +quack()
-          }
-
-          class Dog {
-            +int numTeeth
-            +bark()
-          }
-
-          cssClass "Duck,Dog" pink
-
-          classDef pink fill:#f9f
-          classDef default color:#f1e
-          classDef bold stroke:#333,stroke-width:6px,color:#fff
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Styling with Class in Stylesheet</h2>
-        <pre class="mermaid">
-          classDiagram
-          class Duck {
-            +String beakColor
-            +swim()
-            +quack()
-          }
-          class Duck:::styleClass
-        </pre>
-      </div>
-    </div>
-    <h1 class="header">Diagram Testing</h1>
-    <div class="diagram-showcase">
-      <div class="test">
-        <h2>Class Nodes Only</h2>
-        <pre class="mermaid">
-          ---
-          title: Animal example
-          ---
-          classDiagram
-              Animal : +int age
-              Animal : +String gender
-              Animal: +isMammal()
-              Animal: +mate()
-              class Duck{
-                  +String beakColor
-                  +swim()
-                  +quack()
-              }
-              class Fish{
-                  -int sizeInFeet
-                  -canEat()
-              }
-              class Zebra{
-                  +bool is_wild
-                  +run()
-              }
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Class Nodes LR</h2>
-        <pre class="mermaid">
-          ---
-          title: Animal example
-          ---
-          classDiagram
-              direction LR
-              Animal : +int age
-              Animal : +String gender
-              Animal: +isMammal()
-              Animal: +mate()
-              class Duck{
-                  +String beakColor
-                  +swim()
-                  +quack()
-              }
-              class Fish{
-                  -int sizeInFeet
-                  -canEat()
-              }
-              class Zebra{
-                  +bool is_wild
-                  +run()
-              }
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Relations</h2>
-        <pre class="mermaid">
-          classDiagram
-            classA <|-- classB
-            classC *-- classD
-            classE o-- classF
-            classG <-- classH
-            classI -- classJ
-            classK <.. classL
-            classM <|.. classN
-            classO .. classP
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Two Way Relation</h2>
-        <pre class="mermaid">
-          classDiagram
-          class Animal {
-            int size
-            walk()
-          }
-          class Zebra {
-            int size
-            walk()
-          }
-            Animal o--|> Zebra
-
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Relations with Labels</h2>
-        <pre class="mermaid">
-          classDiagram
-            classA <|-- classB : implements
-            classC *-- classD : composition
-            classE o-- classF : aggregation
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Cardinality / Multiplicity</h2>
-        <pre class="mermaid">
-          classDiagram
-            Customer "1" --> "*" Ticket
-            Student "1" --> "1..*" Course
-            Galaxy --> "many" Star : Contains
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Complex Relations with Theme</h2>
-        <pre class="mermaid">
-          ---
-          config:
-            theme: forest
-            look: handDrawns
-            layout: elk
-          ---
-          classDiagram
-            direction RL
-            class Student {
-              -idCard : IdCard
-            }
-            class IdCard{
-              -id : int
-              -name : string
-            }
-            class Bike{
-              -id : int
-              -name : string
-            }
-            Student "1" o--o "1" IdCard : carries
-            Student "1" o--o "1" Bike : rides
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Notes</h2>
-        <pre class="mermaid">
-          classDiagram
-            note "This is a general note"
-            note for MyClass "This is a note for a class"
-            class MyClass
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Namespaces</h2>
-        <pre class="mermaid">
-          classDiagram
-            namespace BaseShapes {
-                class Triangle
-                class Rectangle {
-                  double width
-                  double height
-                }
-            }
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Namespaces</h2>
-        <pre class="mermaid">
-          ---
-            config:
-              layout: elk
-          ---
-          classDiagram
-          namespace Namespace1 {
-            class C1
-            class C2
-          }
-          C1 --> C2
-          class C3
-          class C4
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Full Example</h2>
-        <pre class="mermaid">
-          ---
-          title: Animal example
-          config:
-            layout: dagre
-          ---
-          classDiagram
-              note "From Duck till Zebra"
-              Animal <|--|> Duck
-              note for Duck "can fly<br>can swim<br>can dive<br>can help in debugging"
-              Animal <|-- Fish
-              Animal <|--|> Zebra
-              Animal : +int age
-              Animal : +String gender
-              Animal: +isMammal()
-              Animal: +mate()
-              class Duck{
-                  +String beakColor
-                  +swim()
-                  +quack()
-              }
-              class Fish{
-                  -int sizeInFeet
-                  -canEat()
-              }
-              class Zebra{
-                  +bool is_wild
-                  +run()
-              }
-              cssClass "Duck" test
-              classDef test fill:#f71
-              %%classDef default fill:#f93
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Full Example</h2>
-        <pre class="mermaid">
-          ---
-            config:
-              theme: forest
-              look: handDrawn
-          ---
-          classDiagram
-          note for Outside "Note testing"
-          namespace Test {
-              class Outside
-          }
-          namespace BaseShapes {
-              class Triangle
-              class Rectangle {
-                double width
-                double height
-              }
-          }
-          Outside <|--|> Rectangle
-          style Triangle fill:#f9f,stroke:#333,stroke-width:4px
-        </pre>
-      </div>
-      <div class="test">
-        <pre class="mermaid">
-          ---
-            config:
-              look: handDrawn
-              layout: elk
-          ---
-          classDiagram
-            Class01 "1" <|--|> "*" AveryLongClass : Cool
-            &lt;&lt;interface&gt;&gt; Class01
-            Class03 "1" *-- "*" Class04
-            Class05 "1" o-- "many" Class06
-            Class07 "1" .. "*" Class08
-            Class09 "1" --> "*" C2 : Where am i?
-            Class09 "*" --* "*" C3
-            Class09 "1" --|> "1" Class07
-            NewClass ()--() Class04
-            Class09 <|--|> AveryLongClass
-            Class07  : equals()
-            Class07  : Object[] elementData
-            Class01  : size()
-            Class01  : int chimp
-            Class01  : int gorilla
-            Class08 "1" <--> "*" C2: Cool label
-            class Class10 {
-              &lt;&lt;service&gt;&gt;
-              int id
-              test()
-            }
-            Class10 o--o AveryLongClass
-            Class10 <--> Class07
-        </pre>
-      </div>
-      <div class="test">
-        <pre class="mermaid">
-          classDiagram
-            test ()--() test2
-        </pre>
-      </div>
-    </div>
-
-    <script type="module">
-      import mermaid from './mermaid.esm.mjs';
-      import layouts from './mermaid-layout-elk.esm.mjs';
-      mermaid.registerLayoutLoaders(layouts);
-      mermaid.parseError = function (err, hash) {
-        console.error('Mermaid error: ', err);
-      };
-      mermaid.initialize();
-      mermaid.parseError = function (err, hash) {
-        console.error('In parse error:');
-        console.error(err);
-      };
-    </script>
-  </body>
-  <style>
-    .header {
-      text-decoration: underline;
-      text-align: center;
-    }
-    .node-showcase {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-    }
-    .test {
-      flex-grow: 1;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 0.4rem;
-    }
-    .test > h2 {
-      margin: 0;
-      text-align: center;
-    }
-    .test > p {
-      margin-top: -6px;
-      color: gray;
-    }
-
-    .diagram-showcase {
-      display: grid;
-      grid-template-columns: 1fr;
-    }
-
-    .styleClass > * > path {
-      fill: #ff0000 !important;
-      stroke: #ffff00 !important;
-      stroke-width: 4px !important;
-      stroke-dasharray: 2 !important;
-    }
-  </style>
-</html>