Merge pull request #5830 from mermaid-js/changeset-release/master

Version Packages

.build/common.ts

@@ -22,9 +22,9 @@ export const packageOptions = {
     packageName: 'mermaid-zenuml',
     file: 'detector.ts',
   },
-  'mermaid-flowchart-elk': {
-    name: 'mermaid-flowchart-elk',
-    packageName: 'mermaid-flowchart-elk',
-    file: 'detector.ts',
+  'mermaid-layout-elk': {
+    name: 'mermaid-layout-elk',
+    packageName: 'mermaid-layout-elk',
+    file: 'layouts.ts',
   },
 } as const;

.build/jisonTransformer.ts

@@ -1,6 +1,7 @@
 import jison from 'jison';
 
 export const transformJison = (src: string): string => {
+  // @ts-ignore - Jison is not typed properly
   const parser = new jison.Generator(src, {
     moduleType: 'js',
     'token-stack': true,

.build/jsonSchema.ts

@@ -25,6 +25,7 @@ const MERMAID_CONFIG_DIAGRAM_KEYS = [
   'sankey',
   'block',
   'packet',
+  'architecture',
 ] as const;
 
 /**

.build/types.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import { packageOptions } from './common.js';
 import { execSync } from 'child_process';
 
@@ -5,11 +6,17 @@ const buildType = (packageName: string) => {
   console.log(`Building types for ${packageName}`);
   try {
     const out = execSync(`tsc -p ./packages/${packageName}/tsconfig.json --emitDeclarationOnly`);
-    out.length > 0 && console.log(out.toString());
+    if (out.length > 0) {
+      console.log(out.toString());
+    }
   } catch (e) {
     console.error(e);
-    e.stdout.length > 0 && console.error(e.stdout.toString());
-    e.stderr.length > 0 && console.error(e.stderr.toString());
+    if (e.stdout.length > 0) {
+      console.error(e.stdout.toString());
+    }
+    if (e.stderr.length > 0) {
+      console.error(e.stderr.toString());
+    }
   }
 };
 

.changeset/README.md

@@ -0,0 +1,8 @@
+# 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/config.json

@@ -0,0 +1,12 @@
+{
+  "$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"]
+}

.cspell/code-terms.txt

@@ -13,6 +13,7 @@ bqstring
 BQUOTE
 bramp
 BRKT
+brotli
 callbackargs
 callbackname
 classdef
@@ -27,6 +28,7 @@ controly
 CSSCLASS
 CYLINDEREND
 CYLINDERSTART
+DAGA
 datakey
 DEND
 descr
@@ -53,6 +55,7 @@ GENERICTYPE
 getBoundarys
 grammr
 graphtype
+halign
 iife
 interp
 introdcued
@@ -64,6 +67,7 @@ Kaufmann
 keyify
 LABELPOS
 LABELTYPE
+layoutstop
 lcov
 LEFTOF
 Lexa
@@ -89,6 +93,7 @@ reqs
 rewritelinks
 rgba
 RIGHTOF
+roughjs
 sankey
 sequencenumber
 shrc
@@ -108,13 +113,17 @@ strikethrough
 stringifying
 struct
 STYLECLASS
+STYLEDEF
 STYLEOPTS
 subcomponent
 subcomponents
+subconfig
 SUBROUTINEEND
 SUBROUTINESTART
 Subschemas
 substr
+SVGG
+SVGSVG
 TAGEND
 TAGSTART
 techn
@@ -125,11 +134,13 @@ titlevalue
 topbar
 TRAPEND
 TRAPSTART
+treemap
 ts-nocheck
 tsdoc
 typeof
 typestr
 unshift
+urlsafe
 verifymethod
 VERIFYMTHD
 WARN_DOCSDIR_DOESNT_MATCH

.cspell/contributors.txt

@@ -4,5 +4,6 @@ cpettitt
 Dong Cai
 Nikolay Rozhkov
 Peng Xiao
+Per Brolin
 subhash-halder
 Vinod Sidharth

.cspell/libraries.txt

@@ -20,14 +20,17 @@ dagre-d3
 Deepdwn
 Docsify
 Docsy
+Doctave
 DokuWiki
 dompurify
 elkjs
+fcose
 fontawesome
 Foswiki
 Gitea
 graphlib
 Grav
+icones
 iconify
 Inkdrop
 jiti
@@ -54,13 +57,17 @@ presetAttributify
 pyplot
 redmine
 rehype
+roughjs
 rscratch
+shiki
+Slidev
 sparkline
 sphinxcontrib
 ssim
 stylis
 Swimm
 tsbuildinfo
+tseslint
 Tuleap
 Typora
 unocss

.cspell/mermaid-terms.txt

@@ -1,5 +1,6 @@
 Adamiecki
 arrowend
+Bendpoints
 bmatrix
 braintree
 catmull
@@ -9,6 +10,7 @@ elems
 gantt
 gitgraph
 gzipped
+handDrawn
 knsv
 Knut
 marginx
@@ -17,6 +19,7 @@ Markdownish
 mermaidjs
 mindmap
 mindmaps
+mrtree
 multigraph
 nodesep
 NOTEGROUP

.cspell/misc-terms.txt

@@ -1 +1,7 @@
+BRANDES
+circo
+handDrawn
+KOEPF
+neato
 newbranch
+validify

.esbuild/build.ts

@@ -2,13 +2,14 @@ import { build } from 'esbuild';
 import { mkdir, writeFile } from 'node:fs/promises';
 import { packageOptions } from '../.build/common.js';
 import { generateLangium } from '../.build/generateLangium.js';
-import { MermaidBuildOptions, defaultOptions, getBuildConfig } from './util.js';
+import type { MermaidBuildOptions } from './util.js';
+import { defaultOptions, getBuildConfig } from './util.js';
 
 const shouldVisualize = process.argv.includes('--visualize');
 
 const buildPackage = async (entryName: keyof typeof packageOptions) => {
-  const commonOptions = { ...defaultOptions, entryName } as const;
-  const buildConfigs = [
+  const commonOptions: MermaidBuildOptions = { ...defaultOptions, entryName } as const;
+  const buildConfigs: MermaidBuildOptions[] = [
     // package.mjs
     { ...commonOptions },
     // package.min.mjs
@@ -35,11 +36,11 @@ const buildPackage = async (entryName: keyof typeof packageOptions) => {
 
   if (shouldVisualize) {
     for (const { metafile } of results) {
-      if (!metafile) {
+      if (!metafile?.outputs) {
         continue;
       }
       const fileName = Object.keys(metafile.outputs)
-        .filter((file) => !file.includes('chunks') && file.endsWith('js'))[0]
+        .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));
@@ -48,13 +49,14 @@ const buildPackage = async (entryName: keyof typeof packageOptions) => {
 };
 
 const handler = (e) => {
+  // eslint-disable-next-line no-console
   console.error(e);
   process.exit(1);
 };
 
 const main = async () => {
   await generateLangium();
-  await mkdir('stats').catch(() => {});
+  await mkdir('stats', { recursive: true });
   const packageNames = Object.keys(packageOptions) as (keyof typeof packageOptions)[];
   // it should build `parser` before `mermaid` because it's a dependency
   for (const pkg of packageNames) {

.esbuild/jisonPlugin.ts

@@ -1,6 +1,6 @@
 import { readFile } from 'node:fs/promises';
 import { transformJison } from '../.build/jisonTransformer.js';
-import { Plugin } from 'esbuild';
+import type { Plugin } from 'esbuild';
 
 export const jisonPlugin: Plugin = {
   name: 'jison',

.esbuild/server.ts

@@ -1,11 +1,12 @@
-import express from 'express';
-import type { NextFunction, Request, Response } from 'express';
-import cors from 'cors';
-import { getBuildConfig, defaultOptions } from './util.js';
-import { context } from 'esbuild';
+/* eslint-disable no-console */
 import chokidar from 'chokidar';
-import { generateLangium } from '../.build/generateLangium.js';
+import cors from 'cors';
+import { context } from 'esbuild';
+import type { Request, Response } from 'express';
+import express from 'express';
 import { packageOptions } from '../.build/common.js';
+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, entryName: packageName })
@@ -19,16 +20,28 @@ const mermaidIIFEConfig = getBuildConfig({
 });
 configs.push(mermaidIIFEConfig);
 
-const contexts = await Promise.all(configs.map((config) => context(config)));
+const contexts = await Promise.all(
+  configs.map(async (config) => ({ config, context: await context(config) }))
+);
 
+let rebuildCounter = 1;
 const rebuildAll = async () => {
-  console.time('Rebuild time');
-  await Promise.all(contexts.map((ctx) => ctx.rebuild())).catch((e) => console.error(e));
-  console.timeEnd('Rebuild time');
+  const buildNumber = rebuildCounter++;
+  const timeLabel = `Rebuild ${buildNumber} Time (total)`;
+  console.time(timeLabel);
+  await Promise.all(
+    contexts.map(async ({ config, context }) => {
+      const buildVariant = `Rebuild ${buildNumber} Time (${Object.keys(config.entryPoints!)[0]} ${config.format})`;
+      console.time(buildVariant);
+      await context.rebuild();
+      console.timeEnd(buildVariant);
+    })
+  ).catch((e) => console.error(e));
+  console.timeEnd(timeLabel);
 };
 
 let clients: { id: number; response: Response }[] = [];
-function eventsHandler(request: Request, response: Response, next: NextFunction) {
+function eventsHandler(request: Request, response: Response) {
   const headers = {
     'Content-Type': 'text/event-stream',
     Connection: 'keep-alive',
@@ -45,19 +58,20 @@ function eventsHandler(request: Request, response: Response, next: NextFunction)
   });
 }
 
-let timeoutId: NodeJS.Timeout | undefined = undefined;
+let timeoutID: NodeJS.Timeout | undefined = undefined;
 
 /**
  * Debounce file change events to avoid rebuilding multiple times.
  */
 function handleFileChange() {
-  if (timeoutId !== undefined) {
-    clearTimeout(timeoutId);
+  if (timeoutID !== undefined) {
+    clearTimeout(timeoutID);
   }
-  timeoutId = setTimeout(async () => {
+  // eslint-disable-next-line @typescript-eslint/no-misused-promises
+  timeoutID = setTimeout(async () => {
     await rebuildAll();
     sendEventsToAll();
-    timeoutId = undefined;
+    timeoutID = undefined;
   }, 100);
 }
 
@@ -74,15 +88,16 @@ async function createServer() {
       ignoreInitial: true,
       ignored: [/node_modules/, /dist/, /docs/, /coverage/],
     })
+    // eslint-disable-next-line @typescript-eslint/no-misused-promises
     .on('all', async (event, path) => {
       // Ignore other events.
       if (!['add', 'change'].includes(event)) {
         return;
       }
-      if (/\.langium$/.test(path)) {
+      console.log(`${path} changed. Rebuilding...`);
+      if (path.endsWith('.langium')) {
         await generateLangium();
       }
-      console.log(`${path} changed. Rebuilding...`);
       handleFileChange();
     });
 
@@ -99,4 +114,4 @@ async function createServer() {
   });
 }
 
-createServer();
+void createServer();

.esbuild/util.ts

@@ -8,7 +8,7 @@ import { jisonPlugin } from './jisonPlugin.js';
 
 const __dirname = fileURLToPath(new URL('.', import.meta.url));
 
-export interface MermaidBuildOptions {
+export interface MermaidBuildOptions extends BuildOptions {
   minify: boolean;
   core: boolean;
   metafile: boolean;
@@ -56,7 +56,7 @@ export const getBuildConfig = (options: MermaidBuildOptions): BuildOptions => {
   const external: string[] = ['require', 'fs', 'path'];
   const { name, file, packageName } = packageOptions[entryName];
   const outFileName = getFileName(name, options);
-  let output: BuildOptions = buildOptions({
+  const output: BuildOptions = buildOptions({
     absWorkingDir: resolve(__dirname, `../packages/${packageName}`),
     entryPoints: {
       [outFileName]: `src/${file}`,

.eslintignore

@@ -1 +0,0 @@
-.gitignore

.eslintrc.cjs

@@ -1,190 +0,0 @@
-module.exports = {
-  env: {
-    browser: true,
-    es6: true,
-    'jest/globals': true,
-    node: true,
-  },
-  root: true,
-  parser: '@typescript-eslint/parser',
-  parserOptions: {
-    ecmaFeatures: {
-      experimentalObjectRestSpread: true,
-      jsx: true,
-    },
-    tsconfigRootDir: __dirname,
-    sourceType: 'module',
-    ecmaVersion: 2022,
-    allowAutomaticSingleRunInference: true,
-    project: ['./tsconfig.eslint.json', './packages/*/tsconfig.json'],
-    parser: '@typescript-eslint/parser',
-  },
-  extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:json/recommended',
-    'plugin:markdown/recommended-legacy',
-    'plugin:@cspell/recommended',
-    'prettier',
-  ],
-  plugins: [
-    '@typescript-eslint',
-    'no-only-tests',
-    'html',
-    'jest',
-    'jsdoc',
-    'json',
-    '@cspell',
-    'lodash',
-    'unicorn',
-  ],
-  ignorePatterns: [
-    // this file is automatically generated by `pnpm run --filter mermaid types:build-config`
-    'packages/mermaid/src/config.type.ts',
-  ],
-  rules: {
-    curly: 'error',
-    'no-console': 'error',
-    'no-prototype-builtins': 'off',
-    'no-unused-vars': 'off',
-    'cypress/no-async-tests': 'off',
-    '@typescript-eslint/consistent-type-imports': 'error',
-    '@typescript-eslint/no-explicit-any': 'warn',
-    '@typescript-eslint/no-floating-promises': 'error',
-    '@typescript-eslint/no-misused-promises': 'error',
-    '@typescript-eslint/no-unused-vars': 'warn',
-    '@typescript-eslint/consistent-type-definitions': 'error',
-    '@typescript-eslint/ban-ts-comment': [
-      'error',
-      {
-        'ts-expect-error': 'allow-with-description',
-        'ts-ignore': 'allow-with-description',
-        'ts-nocheck': 'allow-with-description',
-        'ts-check': 'allow-with-description',
-        minimumDescriptionLength: 10,
-      },
-    ],
-    '@typescript-eslint/naming-convention': [
-      'error',
-      {
-        selector: 'typeLike',
-        format: ['PascalCase'],
-        custom: {
-          regex: '^I[A-Z]',
-          match: false,
-        },
-      },
-    ],
-    'json/*': ['error', 'allowComments'],
-    '@cspell/spellchecker': [
-      'error',
-      {
-        checkIdentifiers: true,
-        checkStrings: true,
-        checkStringTemplates: true,
-      },
-    ],
-    'no-empty': [
-      'error',
-      {
-        allowEmptyCatch: true,
-      },
-    ],
-    'no-only-tests/no-only-tests': 'error',
-    'lodash/import-scope': ['error', 'method'],
-    'unicorn/better-regex': 'error',
-    'unicorn/no-abusive-eslint-disable': 'error',
-    'unicorn/no-array-push-push': 'error',
-    'unicorn/no-for-loop': 'error',
-    'unicorn/no-instanceof-array': 'error',
-    'unicorn/no-typeof-undefined': 'error',
-    'unicorn/no-unnecessary-await': 'error',
-    'unicorn/no-unsafe-regex': 'warn',
-    'unicorn/no-useless-promise-resolve-reject': 'error',
-    'unicorn/prefer-array-find': 'error',
-    'unicorn/prefer-array-flat-map': 'error',
-    'unicorn/prefer-array-index-of': 'error',
-    'unicorn/prefer-array-some': 'error',
-    'unicorn/prefer-default-parameters': 'error',
-    'unicorn/prefer-includes': 'error',
-    'unicorn/prefer-negative-index': 'error',
-    'unicorn/prefer-object-from-entries': 'error',
-    'unicorn/prefer-string-starts-ends-with': 'error',
-    'unicorn/prefer-string-trim-start-end': 'error',
-    'unicorn/string-content': 'error',
-    'unicorn/prefer-spread': 'error',
-    'unicorn/no-lonely-if': 'error',
-  },
-  overrides: [
-    {
-      files: ['cypress/**', 'demos/**'],
-      rules: {
-        'no-console': 'off',
-      },
-    },
-    {
-      files: ['*.{js,jsx,mjs,cjs}'],
-      extends: ['plugin:jsdoc/recommended'],
-      rules: {
-        'jsdoc/check-indentation': 'off',
-        'jsdoc/check-alignment': 'off',
-        'jsdoc/check-line-alignment': 'off',
-        'jsdoc/multiline-blocks': 'off',
-        'jsdoc/newline-after-description': 'off',
-        'jsdoc/tag-lines': 'off',
-        'jsdoc/require-param-description': 'off',
-        'jsdoc/require-param-type': 'off',
-        'jsdoc/require-returns': 'off',
-        'jsdoc/require-returns-description': 'off',
-      },
-    },
-    {
-      files: ['*.{ts,tsx}'],
-      plugins: ['tsdoc'],
-      rules: {
-        'no-restricted-syntax': [
-          'error',
-          {
-            selector: 'TSEnumDeclaration',
-            message:
-              'Prefer using TypeScript union types over TypeScript enum, since TypeScript enums have a bunch of issues, see https://dev.to/dvddpl/whats-the-problem-with-typescript-enums-2okj',
-          },
-        ],
-        'tsdoc/syntax': 'error',
-      },
-    },
-    {
-      files: ['*.spec.{ts,js}', 'cypress/**', 'demos/**', '**/docs/**'],
-      rules: {
-        'jsdoc/require-jsdoc': 'off',
-        '@typescript-eslint/no-unused-vars': 'off',
-      },
-    },
-    {
-      files: ['*.spec.{ts,js}', 'tests/**', 'cypress/**/*.js'],
-      rules: {
-        '@cspell/spellchecker': [
-          'error',
-          {
-            checkIdentifiers: false,
-            checkStrings: false,
-            checkStringTemplates: false,
-          },
-        ],
-      },
-    },
-    {
-      files: ['*.html', '*.md', '**/*.md/*'],
-      rules: {
-        'no-var': 'error',
-        'no-undef': 'off',
-        '@typescript-eslint/no-unused-vars': 'off',
-        '@typescript-eslint/no-floating-promises': 'off',
-        '@typescript-eslint/no-misused-promises': 'off',
-      },
-      parserOptions: {
-        project: null,
-      },
-    },
-  ],
-};

.github/lychee.toml

@@ -41,7 +41,10 @@ exclude = [
 "https://bundlephobia.com",
 
 # Chrome webstore migration issue. Temporary
-"https://chromewebstore.google.com"
+"https://chromewebstore.google.com",
+
+# Drupal 403
+"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.
-- [ ] :bookmark: targeted `develop` branch
+- [ ] :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:`.

.github/release-drafter.yml

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

@@ -0,0 +1,45 @@
+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: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
+        # uses version from "packageManager" field in package.json
+
+      - name: Setup Node.js
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
+        with:
+          cache: pnpm
+          node-version-file: '.node-version'
+
+      - name: Install Packages
+        run: |
+          pnpm install --frozen-lockfile
+        env:
+          CYPRESS_CACHE_FOLDER: .cache/Cypress
+
+      - name: Fix Linting
+        shell: bash
+        run: pnpm -w run lint:fix
+
+      - name: Sync `./src/config.type.ts` with `./src/schemas/config.schema.yaml`
+        shell: bash
+        run: pnpm run --filter mermaid types:build-config
+
+      - name: Build Docs
+        working-directory: ./packages/mermaid
+        run: pnpm run docs:build
+
+      - uses: autofix-ci/action@ff86a557419858bb967097bfc916833f5647fa8c # main

.github/workflows/build-docs.yml

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

.github/workflows/build.yml

@@ -1,49 +0,0 @@
-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@v2
-        # 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@v4
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
 
       - name: Check for difference in README.md and docs/README.md
         run: |

.github/workflows/checks.yml

@@ -1,26 +0,0 @@
-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,6 +11,9 @@ on:
       - synchronize
       - ready_for_review
 
+permissions: # added using https://github.com/step-security/secure-repo
+  contents: read
+
 jobs:
   analyze:
     name: Analyze
@@ -29,11 +32,11 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@v3
+        uses: github/codeql-action/init@2c779ab0d087cd7fe7b826087247c2c81f27bfa6 # v3.26.5
         with:
           config-file: ./.github/codeql/codeql-config.yml
           languages: ${{ matrix.language }}
@@ -45,7 +48,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@v3
+        uses: github/codeql-action/autobuild@2c779ab0d087cd7fe7b826087247c2c81f27bfa6 # v3.26.5
 
       # ℹ️ 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
@@ -59,4 +62,4 @@ jobs:
       #   make release
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v3
+        uses: github/codeql-action/analyze@2c779ab0d087cd7fe7b826087247c2c81f27bfa6 # v3.26.5

.github/workflows/dependency-review.yml

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

.github/workflows/e2e-applitools.yml

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

.github/workflows/e2e.yml

@@ -1,18 +1,16 @@
-# We use github cache to save snapshots between runs.
-# For PRs and MergeQueues, the target commit is used, and for push events, github.event.previous is used.
-# If a snapshot for a given Hash is not found, we checkout that commit, run the tests and cache the snapshots.
-# These are then downloaded before running the E2E, providing the reference snapshots.
-# If there are any errors, the diff image is uploaded to artifacts, and the user is notified.
-
 name: E2E
 
 on:
   push:
-    branches-ignore:
-      - 'gh-readonly-queue/**'
+    branches:
+      - develop
+      - master
+      - release/**
   pull_request:
   merge_group:
 
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
 permissions:
   contents: read
 
@@ -30,6 +28,7 @@ env:
       ) || 
       github.event.before
     }}
+  shouldRunParallel: ${{ secrets.CYPRESS_RECORD_KEY != '' && !(github.event_name == 'push' && github.ref == 'refs/heads/develop') }}
 jobs:
   cache:
     runs-on: ubuntu-latest
@@ -37,15 +36,15 @@ jobs:
       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@v4
-      - uses: pnpm/action-setup@v2
+      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
         with:
           node-version-file: '.node-version'
       - name: Cache snapshots
         id: cache-snapshot
-        uses: actions/cache@v4
+        uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 # v4.0.2
         with:
           save-always: true
           path: ./cypress/snapshots
@@ -54,13 +53,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@v4
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
         with:
           ref: ${{ env.targetHash }}
 
       - name: Install dependencies
         if: ${{ steps.cache-snapshot.outputs.cache-hit != 'true' }}
-        uses: cypress-io/github-action@v6
+        uses: cypress-io/github-action@df7484c5ba85def7eef30db301afa688187bc378 # v6.7.2
         with:
           # just perform install
           runTests: false
@@ -72,16 +71,6 @@ jobs:
           mkdir -p cypress/snapshots/stats/base
           mv stats cypress/snapshots/stats/base
 
-      - name: Cypress run
-        uses: cypress-io/github-action@v6
-        id: cypress-snapshot-gen
-        if: ${{ steps.cache-snapshot.outputs.cache-hit != 'true' }}
-        with:
-          install: false
-          start: pnpm run dev
-          wait-on: 'http://localhost:9000'
-          browser: chrome
-
   e2e:
     runs-on: ubuntu-latest
     container:
@@ -93,26 +82,26 @@ jobs:
       matrix:
         containers: [1, 2, 3, 4]
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
         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@v4
+        uses: actions/cache/restore@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 # v4.0.2
         with:
           path: ./cypress/snapshots
           key: ${{ runner.os }}-snapshots-${{ env.targetHash }}
 
       - name: Install dependencies
-        uses: cypress-io/github-action@v6
+        uses: cypress-io/github-action@df7484c5ba85def7eef30db301afa688187bc378 # v6.7.2
         with:
           runTests: false
 
@@ -128,11 +117,11 @@ jobs:
       # Install NPM dependencies, cache them correctly
       # and run all Cypress tests
       - name: Cypress run
-        uses: cypress-io/github-action@v6
+        uses: cypress-io/github-action@df7484c5ba85def7eef30db301afa688187bc378 # v6.7.2
         id: cypress
         # If CYPRESS_RECORD_KEY is set, run in parallel on all containers
         # Otherwise (e.g. if running from fork), we run on a single container only
-        if: ${{ ( env.CYPRESS_RECORD_KEY != '' ) || ( matrix.containers == 1 ) }}
+        if: ${{ env.shouldRunParallel == 'true' || ( matrix.containers == 1 ) }}
         with:
           install: false
           start: pnpm run dev:coverage
@@ -140,15 +129,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: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
-          parallel: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
+          record: ${{ env.shouldRunParallel == 'true' }}
+          parallel: ${{ env.shouldRunParallel == 'true' }}
         env:
           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@v4
+        uses: codecov/codecov-action@e28ff129e5465c2c0dcc6f003fc735cb6ae0c673 # v4.5.0
         # 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:
@@ -158,55 +151,3 @@ jobs:
           fail_ci_if_error: false
           verbose: true
           token: 6845cc80-77ee-4e17-85a1-026cd95e0766
-
-      # We upload the artifacts into numbered archives to prevent overwriting
-      - name: Upload Artifacts
-        uses: actions/upload-artifact@v4
-        if: ${{ always() }}
-        with:
-          name: snapshots-${{ matrix.containers }}
-          retention-days: 1
-          path: ./cypress/snapshots
-
-  combineArtifacts:
-    needs: e2e
-    runs-on: ubuntu-latest
-    if: ${{ always() }}
-    steps:
-      # Download all snapshot artifacts and merge them into a single folder
-      - name: Download All Artifacts
-        uses: actions/download-artifact@v4
-        with:
-          path: snapshots
-          pattern: snapshots-*
-          merge-multiple: true
-
-      # For successful push events, we save the snapshots cache
-      - name: Save snapshots cache
-        id: cache-upload
-        if: ${{ github.event_name == 'push' && needs.e2e.result != 'failure' }}
-        uses: actions/cache/save@v4
-        with:
-          path: ./snapshots
-          key: ${{ runner.os }}-snapshots-${{ github.event.after }}
-
-      - name: Flatten images to a folder
-        if: ${{ needs.e2e.result == 'failure'  }}
-        run: |
-          mkdir errors
-          cd snapshots
-          find . -mindepth 2 -type d -name "*__diff_output__*" -exec sh -c 'mv "$0"/*.png ../errors/' {} \;
-
-      - name: Upload Error snapshots
-        if: ${{ needs.e2e.result == 'failure' }}
-        uses: actions/upload-artifact@v4
-        id: upload-artifacts
-        with:
-          name: error-snapshots
-          retention-days: 10
-          path: errors/
-
-      - name: Notify Users
-        if: ${{ needs.e2e.result == 'failure' }}
-        run: |
-          echo "::error title=Visual tests failed::You can view images that failed by downloading the error-snapshots artifact: ${{ steps.upload-artifacts.outputs.artifact-url }}"

.github/workflows/issue-triage.yml

@@ -4,11 +4,17 @@ 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@1.0.4
+      - uses: andymckay/labeler@e6c4322d0397f3240f0e7e30a33b5c5df2d39e90 # 1.0.4
         with:
           repo-token: '${{ secrets.GITHUB_TOKEN }}'
           add-labels: 'Status: Triage'

.github/workflows/link-checker.yml

@@ -19,6 +19,9 @@ 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
@@ -26,17 +29,17 @@ jobs:
       # lychee only uses the GITHUB_TOKEN to avoid rate-limiting
       contents: read
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
 
       - name: Restore lychee cache
-        uses: actions/cache@v4
+        uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 # v4.0.2
         with:
           path: .lycheecache
           key: cache-lychee-${{ github.sha }}
           restore-keys: cache-lychee-
 
       - name: Link Checker
-        uses: lycheeverse/lychee-action@v1.9.3
+        uses: lycheeverse/lychee-action@c053181aa0c3d17606addfe97a9075a32723548a # v1.9.3
         with:
           args: >-
             --config .github/lychee.toml

.github/workflows/lint.yml

@@ -4,26 +4,32 @@ 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@v4
+      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
         with:
           cache: pnpm
           node-version-file: '.node-version'
@@ -83,14 +89,9 @@ jobs:
         continue-on-error: ${{ github.event_name == 'push' }}
         run: pnpm run docs:verify
 
-      - name: Rebuild Docs
-        if: ${{ steps.verifyDocs.outcome == 'failure' && github.event_name == 'push' }}
-        working-directory: ./packages/mermaid
-        run: pnpm run docs:build
-
-      - name: Commit changes
-        uses: EndBug/add-and-commit@v9
-        if: ${{ steps.verifyDocs.outcome == 'failure' && github.event_name == 'push' }}
+      - uses: testomatio/check-tests@0ea638fcec1820cf2e7b9854fdbdd04128a55bd4 # stable
         with:
-          message: 'Update docs'
-          add: 'docs/*'
+          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@v6
+        uses: release-drafter/release-drafter@3f0f87098bd6b5c5b9a36d49c41d998ea58f9348 # v6.0.0
         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@v4
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
         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@v4
+        uses: actions/configure-pages@1f0c5cde4bc74cd7e1254d0cb4de8d49e9068c7d # v4.0.0
 
       - name: Run Build
         run: pnpm --filter mermaid run docs:build:vitepress
 
       - name: Upload artifact
-        uses: actions/upload-pages-artifact@v3
+        uses: actions/upload-pages-artifact@56afc609e74202658d3ffba0e8f6dda462b719fa # v3.0.1
         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@v4
+        uses: actions/deploy-pages@d6db90164ac5ed86f2b6aed7e0febac5b3c0c03e # v4.0.5

.github/workflows/release-draft.yml

@@ -1,23 +0,0 @@
-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@v4
+      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
         with:
           fetch-depth: 0
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
         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 --global
+        run: npm i json@11.0.0 --global
 
       - name: Publish
         working-directory: ./packages/mermaid

.github/workflows/release-publish.yml

@@ -1,47 +0,0 @@
-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@v2
-        # 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

@@ -0,0 +1,46 @@
+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@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
+        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@aba318e9165b45b7948c60273e0b72fce0a64eb9 # v1.4.7
+        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

@@ -0,0 +1,37 @@
+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@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
+        with:
+          persist-credentials: false
+      - name: Run analysis
+        uses: ossf/scorecard-action@0864cf19026789058feabb7e87baa5f140aac736 # v2.3.1
+        with:
+          results_file: results.sarif
+          results_format: sarif
+          publish_results: true
+      - name: Upload artifact
+        uses: actions/upload-artifact@97a0fba1372883ab732affbe8f94b823f91727db # v3.pre.node20
+        with:
+          name: SARIF file
+          path: results.sarif
+          retention-days: 5
+      - name: Upload to code-scanning
+        uses: github/codeql-action/upload-sarif@f0f3afee809481da311ca3a6ff1ff51d81dbeb24 # v3.26.4
+        with:
+          sarif_file: results.sarif

.github/workflows/test.yml

@@ -9,13 +9,13 @@ jobs:
   unit-test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
         with:
           cache: pnpm
           node-version-file: '.node-version'
@@ -39,7 +39,7 @@ jobs:
           pnpm exec vitest run ./packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts --coverage
 
       - name: Upload Coverage to Codecov
-        uses: codecov/codecov-action@v4
+        uses: codecov/codecov-action@e28ff129e5465c2c0dcc6f003fc735cb6ae0c673 # v4.5.0
         # 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@v1
+      - uses: Dunning-Kruger/unlock-issues@b06b7f7e5c3f2eaa1c6d5d89f40930e4d6d9699e # 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@v4
-      - uses: pnpm/action-setup@v2
+      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
       - run: npx update-browserslist-db@latest
       - name: Commit changes
-        uses: EndBug/add-and-commit@v9
+        uses: EndBug/add-and-commit@a94899bca583c204427a224a7af87c02f9b325d5 # v9.1.4
         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@v6
+        uses: peter-evans/create-pull-request@c5a7806660adbe173f04e3e038b0ccdcd758773c # v6.1.0
         with:
           branch: update-browserslist
           title: Update Browserslist

.gitignore

@@ -35,7 +35,7 @@ cypress/snapshots/
 .tsbuildinfo
 tsconfig.tsbuildinfo
 
-knsv*.html
+#knsv*.html
 local*.html
 stats/
 
@@ -48,6 +48,7 @@ demos/dev/**
 !/demos/dev/example.html
 !/demos/dev/reload.js
 tsx-0/**
+vite.config.ts.timestamp-*
 
 # autogenereated by langium-cli
-generated/
+generated/

.hadolint.yaml

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

.husky/pre-commit

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

.prettierignore

@@ -16,3 +16,5 @@ generated/
 # Ignore the files creates in /demos/dev except for example.html
 demos/dev/**
 !/demos/dev/example.html
+# TODO: Lots of errors to fix
+cypress/platform/state-refactor.html

.vite/build.ts

@@ -1,4 +1,5 @@
-import { build, InlineConfig, type PluginOption } from 'vite';
+import type { InlineConfig } from 'vite';
+import { build, type PluginOption } from 'vite';
 import { resolve } from 'path';
 import { fileURLToPath } from 'url';
 import jisonPlugin from './jisonPlugin.js';
@@ -46,9 +47,10 @@ interface BuildOptions {
 
 export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions): InlineConfig => {
   const external: (string | RegExp)[] = ['require', 'fs', 'path'];
+  // eslint-disable-next-line no-console
   console.log(entryName, packageOptions[entryName]);
   const { name, file, packageName } = packageOptions[entryName];
-  let output: OutputOptions = [
+  const output: OutputOptions = [
     {
       name,
       format: 'esm',
@@ -83,7 +85,6 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
     plugins: [
       jisonPlugin(),
       jsonSchemaPlugin(), // handles `.schema.yaml` files
-      // @ts-expect-error According to the type definitions, rollup plugins are incompatible with vite
       typescript({ compilerOptions: { declaration: false } }),
       istanbul({
         exclude: ['node_modules', 'test/', '__mocks__', 'generated'],
@@ -121,10 +122,10 @@ await generateLangium();
 
 if (watch) {
   await build(getBuildConfig({ minify: false, watch, core: false, entryName: 'parser' }));
-  build(getBuildConfig({ minify: false, watch, core: false, entryName: 'mermaid' }));
+  void build(getBuildConfig({ minify: false, watch, core: false, entryName: 'mermaid' }));
   if (!mermaidOnly) {
-    build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' }));
-    build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-zenuml' }));
+    void build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' }));
+    void build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-zenuml' }));
   }
 } else if (visualize) {
   await build(getBuildConfig({ minify: false, watch, core: false, entryName: 'parser' }));

.vite/jsonSchemaPlugin.ts

@@ -1,4 +1,4 @@
-import { PluginOption } from 'vite';
+import type { PluginOption } from 'vite';
 import { getDefaults, getSchema, loadSchema } from '../.build/jsonSchema.js';
 
 /**

.vite/server.ts

@@ -23,8 +23,9 @@ async function createServer() {
   app.use(express.static('cypress/platform'));
 
   app.listen(9000, () => {
+    // eslint-disable-next-line no-console
     console.log(`Listening on http://localhost:9000`);
   });
 }
 
-createServer();
+void createServer();

Dockerfile

@@ -1,2 +1,10 @@
-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 -
+FROM node:20.12.2-alpine3.19@sha256:7a91aa397f2e2dfbfcdad2e2d72599f374e0b0172be1d86eeb73f1d33f36a4b2
+
+USER 0:0
+
+RUN corepack enable \
+    && corepack enable pnpm
+
+ENV NODE_OPTIONS="--max_old_space_size=8192"
+
+EXPOSE 9000 3333

FUNDING.json

@@ -0,0 +1,7 @@
+{
+  "drips": {
+    "ethereum": {
+      "ownedBy": "0x0831DDFe60d009d9448CC976157b539089aB821E"
+    }
+  }
+}

README.md

@@ -35,6 +35,8 @@ 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)
 
 <img src="./img/header.png" alt="" />
 
@@ -81,6 +83,10 @@ 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/">

cypress.config.ts

@@ -2,6 +2,8 @@ import { defineConfig } from 'cypress';
 import { addMatchImageSnapshotPlugin } from 'cypress-image-snapshot/plugin';
 import coverage from '@cypress/code-coverage/task';
 import eyesPlugin from '@applitools/eyes-cypress';
+import { registerArgosTask } from '@argos-ci/cypress/task';
+
 export default eyesPlugin(
   defineConfig({
     projectId: 'n2sma2',
@@ -17,10 +19,17 @@ export default eyesPlugin(
           }
           return launchOptions;
         });
-        addMatchImageSnapshotPlugin(on, config);
         // copy any needed variables from process.env to config.env
         config.env.useAppli = process.env.USE_APPLI ? true : false;
+        config.env.useArgos = !!process.env.CI;
 
+        if (config.env.useArgos) {
+          registerArgosTask(on, config, {
+            token: 'fc3a35cf5200db928d65b2047861582d9444032b',
+          });
+        } else {
+          addMatchImageSnapshotPlugin(on, config);
+        }
         // do not forget to return the changed config object!
         return config;
       },

cypress/helpers/util.ts

@@ -35,7 +35,7 @@ export const mermaidUrl = (
   };
   const objStr: string = JSON.stringify(codeObject);
   let url = `http://localhost:9000/e2e.html?graph=${utf8ToB64(objStr)}`;
-  if (api) {
+  if (api && typeof graphStr === 'string') {
     url = `http://localhost:9000/xss.html?graph=${graphStr}`;
   }
 
@@ -54,16 +54,15 @@ export const imgSnapshotTest = (
 ): void => {
   const options: CypressMermaidConfig = {
     ..._options,
-    fontFamily: _options.fontFamily || 'courier',
+    fontFamily: _options.fontFamily ?? 'courier',
     // @ts-ignore TODO: Fix type of fontSize
-    fontSize: _options.fontSize || '16px',
+    fontSize: _options.fontSize ?? '16px',
     sequence: {
-      ...(_options.sequence || {}),
+      ...(_options.sequence ?? {}),
       actorFontFamily: 'courier',
-      noteFontFamily:
-        _options.sequence && _options.sequence.noteFontFamily
-          ? _options.sequence.noteFontFamily
-          : 'courier',
+      noteFontFamily: _options.sequence?.noteFontFamily
+        ? _options.sequence.noteFontFamily
+        : 'courier',
       messageFontFamily: 'courier',
     },
   };
@@ -74,7 +73,7 @@ export const imgSnapshotTest = (
 
 export const urlSnapshotTest = (
   url: string,
-  options: CypressMermaidConfig,
+  options: CypressMermaidConfig = {},
   _api = false,
   validation?: any
 ): void => {
@@ -95,18 +94,7 @@ export const openURLAndVerifyRendering = (
   options: CypressMermaidConfig,
   validation?: any
 ): void => {
-  const useAppli: boolean = Cypress.env('useAppli');
-  const name: string = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
-
-  if (useAppli) {
-    cy.log(`Opening eyes ${Cypress.spec.name} --- ${name}`);
-    cy.eyesOpen({
-      appName: 'Mermaid',
-      testName: name,
-      batchName: Cypress.spec.name,
-      batchId: batchId + Cypress.spec.name,
-    });
-  }
+  const name: string = (options.name ?? cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
 
   cy.visit(url);
   cy.window().should('have.property', 'rendered', true);
@@ -116,11 +104,29 @@ export const openURLAndVerifyRendering = (
     cy.get('svg').should(validation);
   }
 
+  verifyScreenshot(name);
+};
+
+export const verifyScreenshot = (name: string): void => {
+  const useAppli: boolean = Cypress.env('useAppli');
+  const useArgos: boolean = Cypress.env('useArgos');
+
   if (useAppli) {
+    cy.log(`Opening eyes ${Cypress.spec.name} --- ${name}`);
+    cy.eyesOpen({
+      appName: 'Mermaid',
+      testName: name,
+      batchName: Cypress.spec.name,
+      batchId: batchId + Cypress.spec.name,
+    });
     cy.log(`Check eyes ${Cypress.spec.name}`);
     cy.eyesCheckWindow('Click!');
     cy.log(`Closing eyes ${Cypress.spec.name}`);
     cy.eyesClose();
+  } else if (useArgos) {
+    cy.argosScreenshot(name, {
+      threshold: 0.01,
+    });
   } else {
     cy.matchImageSnapshot(name);
   }

cypress/integration/other/configuration.spec.js

@@ -1,4 +1,4 @@
-import { renderGraph } from '../../helpers/util.ts';
+import { renderGraph, verifyScreenshot } from '../../helpers/util.ts';
 describe('Configuration', () => {
   describe('arrowMarkerAbsolute', () => {
     it('should handle default value false of arrowMarkerAbsolute', () => {
@@ -119,8 +119,7 @@ describe('Configuration', () => {
       const url = 'http://localhost:9000/regression/issue-1874.html';
       cy.visit(url);
       cy.window().should('have.property', 'rendered', true);
-      cy.get('svg').should('be.visible');
-      cy.matchImageSnapshot(
+      verifyScreenshot(
         'configuration.spec-should-not-taint-initial-configuration-when-using-multiple-directives'
       );
     });
@@ -145,7 +144,7 @@ describe('Configuration', () => {
           // none of the diagrams should be error diagrams
           expect($svg).to.not.contain('Syntax error');
         });
-      cy.matchImageSnapshot(
+      verifyScreenshot(
         'configuration.spec-should-not-render-error-diagram-if-suppressErrorRendering-is-set'
       );
     });
@@ -162,7 +161,7 @@ describe('Configuration', () => {
           // some of the diagrams should be error diagrams
           expect($svg).to.contain('Syntax error');
         });
-      cy.matchImageSnapshot(
+      verifyScreenshot(
         'configuration.spec-should-render-error-diagram-if-suppressErrorRendering-is-not-set'
       );
     });

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

@@ -1,14 +0,0 @@
-import { urlSnapshotTest, openURLAndVerifyRendering } from '../../helpers/util.ts';
-
-describe('Flowchart elk', () => {
-  it('should use dagre as fallback', () => {
-    urlSnapshotTest('http://localhost:9000/flow-elk.html', {
-      name: 'flow-elk fallback to dagre',
-    });
-  });
-  it('should allow overriding with external package', () => {
-    urlSnapshotTest('http://localhost:9000/flow-elk.html?elk=true', {
-      name: 'flow-elk overriding dagre with elk',
-    });
-  });
-});

cypress/integration/other/xss.spec.js

@@ -10,7 +10,6 @@ describe('XSS', () => {
     cy.wait(1000).then(() => {
       cy.get('.mermaid').should('exist');
     });
-    cy.get('svg');
   });
 
   it('should not allow tags in the css', () => {
@@ -137,4 +136,9 @@ describe('XSS', () => {
     cy.wait(1000);
     cy.get('#the-malware').should('not.exist');
   });
+  it('should sanitize backticks block diagram labels properly', () => {
+    cy.visit('http://localhost:9000/xss25.html');
+    cy.wait(1000);
+    cy.get('#the-malware').should('not.exist');
+  });
 });

cypress/integration/rendering/appli.spec.js

@@ -11,6 +11,27 @@ describe('Git Graph diagram', () => {
       {}
     );
   });
+  it('Should render subgraphs with title margins and edge labels', () => {
+    imgSnapshotTest(
+      `flowchart LR
+
+          subgraph TOP
+              direction TB
+              subgraph B1
+                  direction RL
+                  i1 --lb1-->f1
+              end
+              subgraph B2
+                  direction BT
+                  i2 --lb2-->f2
+              end
+          end
+          A --lb3--> TOP --lb4--> B
+          B1 --lb5--> B2
+        `,
+      { flowchart: { subGraphTitleMargin: { top: 10, bottom: 5 } } }
+    );
+  });
   // it(`ultraFastTest`, function () {
   //   // Navigate to the url we want to test
   //   // ⭐️ Note to see visual bugs, run the test using the above URL for the 1st run.

cypress/integration/rendering/architecture.spec.ts

@@ -0,0 +1,180 @@
+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}
+            `
+    );
+  });
+});
+
+describe('architecture - external', () => {
+  it('should allow adding external icons', () => {
+    urlSnapshotTest('http://localhost:9000/architecture-external.html');
+  });
+});

cypress/integration/rendering/block.spec.js

@@ -236,7 +236,7 @@ describe('Block diagram', () => {
     );
   });
 
-  it('BL16: width alignment - blocks shold be equal in width', () => {
+  it('BL17: width alignment - blocks shold be equal in width', () => {
     imgSnapshotTest(
       `block-beta
     A("This is the text")
@@ -247,7 +247,7 @@ describe('Block diagram', () => {
     );
   });
 
-  it('BL17: block types 1 - square, rounded and circle', () => {
+  it('BL18: block types 1 - square, rounded and circle', () => {
     imgSnapshotTest(
       `block-beta
     A["square"]
@@ -258,7 +258,7 @@ describe('Block diagram', () => {
     );
   });
 
-  it('BL18: block types 2 - odd, diamond and hexagon', () => {
+  it('BL19: block types 2 - odd, diamond and hexagon', () => {
     imgSnapshotTest(
       `block-beta
     A>"rect_left_inv_arrow"]
@@ -269,7 +269,7 @@ describe('Block diagram', () => {
     );
   });
 
-  it('BL19: block types 3 - stadium', () => {
+  it('BL20: block types 3 - stadium', () => {
     imgSnapshotTest(
       `block-beta
     A(["stadium"])
@@ -278,7 +278,7 @@ describe('Block diagram', () => {
     );
   });
 
-  it('BL20: block types 4 - lean right, lean left, trapezoid and inv trapezoid', () => {
+  it('BL21: block types 4 - lean right, lean left, trapezoid and inv trapezoid', () => {
     imgSnapshotTest(
       `block-beta
     A[/"lean right"/]
@@ -290,7 +290,7 @@ describe('Block diagram', () => {
     );
   });
 
-  it('BL21: block types 1 - square, rounded and circle', () => {
+  it('BL22: block types 1 - square, rounded and circle', () => {
     imgSnapshotTest(
       `block-beta
     A["square"]
@@ -301,7 +301,7 @@ describe('Block diagram', () => {
     );
   });
 
-  it('BL22: sizing - it should be possible to make a block wider', () => {
+  it('BL23: sizing - it should be possible to make a block wider', () => {
     imgSnapshotTest(
       `block-beta
       A("rounded"):2
@@ -312,7 +312,7 @@ describe('Block diagram', () => {
     );
   });
 
-  it('BL23: sizing - it should be possible to make a composite block wider', () => {
+  it('BL24: sizing - it should be possible to make a composite block wider', () => {
     imgSnapshotTest(
       `block-beta
       block:2
@@ -324,7 +324,7 @@ describe('Block diagram', () => {
     );
   });
 
-  it('BL24: block in the middle with space on each side', () => {
+  it('BL25: block in the middle with space on each side', () => {
     imgSnapshotTest(
       `block-beta
         columns 3
@@ -335,7 +335,7 @@ describe('Block diagram', () => {
       {}
     );
   });
-  it('BL25: space and an edge', () => {
+  it('BL26: space and an edge', () => {
     imgSnapshotTest(
       `block-beta
   columns 5
@@ -345,7 +345,7 @@ describe('Block diagram', () => {
       {}
     );
   });
-  it('BL26: block sizes for regular blocks', () => {
+  it('BL27: block sizes for regular blocks', () => {
     imgSnapshotTest(
       `block-beta
   columns 3
@@ -354,7 +354,7 @@ describe('Block diagram', () => {
       {}
     );
   });
-  it('BL27: composite block with a set width - f should use the available space', () => {
+  it('BL28: composite block with a set width - f should use the available space', () => {
     imgSnapshotTest(
       `block-beta
   columns 3
@@ -363,11 +363,12 @@ describe('Block diagram', () => {
       f
   end
   g
-      `,
+  `,
       {}
     );
   });
-  it('BL23: composite block with a set width - f and g should split the available space', () => {
+
+  it('BL29: composite block with a set width - f and g should split the available space', () => {
     imgSnapshotTest(
       `block-beta
   columns 3
@@ -379,7 +380,7 @@ describe('Block diagram', () => {
   h
   i
   j
-      `,
+  `,
       {}
     );
   });

cypress/integration/rendering/c4.spec.js

@@ -1,7 +1,7 @@
 import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
 
 describe('C4 diagram', () => {
-  it('should render a simple C4Context diagram', () => {
+  it('C4.1 should render a simple C4Context diagram', () => {
     imgSnapshotTest(
       `
       C4Context
@@ -30,9 +30,8 @@ describe('C4 diagram', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
-  it('should render a simple C4Container diagram', () => {
+  it('C4.2 should render a simple C4Container diagram', () => {
     imgSnapshotTest(
       `
       C4Container
@@ -50,9 +49,8 @@ describe('C4 diagram', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
-  it('should render a simple C4Component diagram', () => {
+  it('C4.3 should render a simple C4Component diagram', () => {
     imgSnapshotTest(
       `
       C4Component
@@ -69,9 +67,8 @@ describe('C4 diagram', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
-  it('should render a simple C4Dynamic diagram', () => {
+  it('C4.4 should render a simple C4Dynamic diagram', () => {
     imgSnapshotTest(
       `
       C4Dynamic
@@ -93,9 +90,8 @@ describe('C4 diagram', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
-  it('should render a simple C4Deployment diagram', () => {
+  it('C4.5 should render a simple C4Deployment diagram', () => {
     imgSnapshotTest(
       `
       C4Deployment
@@ -117,6 +113,5 @@ describe('C4 diagram', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
 });

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

@@ -76,7 +76,7 @@ describe('Class diagram V2', () => {
     );
   });
 
-  it('should render a simple class diagram with different visibilities', () => {
+  it('2.1 should render a simple class diagram with different visibilities', () => {
     imgSnapshotTest(
       `
     classDiagram-v2
@@ -93,7 +93,7 @@ describe('Class diagram V2', () => {
     );
   });
 
-  it('should render multiple class diagrams', () => {
+  it('3: should render multiple class diagrams', () => {
     imgSnapshotTest(
       [
         `

cypress/integration/rendering/classDiagram.spec.js

@@ -32,7 +32,6 @@ describe('Class diagram', () => {
       `,
       { logLevel: 1 }
     );
-    cy.get('svg');
   });
 
   it('2: should render a simple class diagrams with cardinality', () => {
@@ -61,7 +60,6 @@ describe('Class diagram', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
 
   it('3: should render a simple class diagram with different visibilities', () => {
@@ -79,7 +77,6 @@ describe('Class diagram', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
 
   it('4: should render a simple class diagram with comments', () => {
@@ -109,7 +106,6 @@ describe('Class diagram', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
 
   it('5: should render a simple class diagram with abstract method', () => {
@@ -121,7 +117,6 @@ describe('Class diagram', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
 
   it('6: should render a simple class diagram with static method', () => {
@@ -133,7 +128,6 @@ describe('Class diagram', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
 
   it('7: should render a simple class diagram with Generic class', () => {
@@ -153,7 +147,6 @@ describe('Class diagram', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
 
   it('8: should render a simple class diagram with Generic class and relations', () => {
@@ -174,7 +167,6 @@ describe('Class diagram', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
 
   it('9: should render a simple class diagram with clickable link', () => {
@@ -196,7 +188,6 @@ describe('Class diagram', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
 
   it('10: should render a simple class diagram with clickable callback', () => {
@@ -218,7 +209,6 @@ describe('Class diagram', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
 
   it('11: should render a simple class diagram with return type on method', () => {
@@ -233,7 +223,6 @@ describe('Class diagram', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
 
   it('12: should render a simple class diagram with generic types', () => {
@@ -249,7 +238,6 @@ describe('Class diagram', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
 
   it('13: should render a simple class diagram with css classes applied', () => {
@@ -267,7 +255,6 @@ describe('Class diagram', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
 
   it('14: should render a simple class diagram with css classes applied directly', () => {
@@ -283,7 +270,6 @@ describe('Class diagram', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
 
   it('15: should render a simple class diagram with css classes applied to multiple classes', () => {
@@ -298,7 +284,6 @@ describe('Class diagram', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
 
   it('16: should render multiple class diagrams', () => {
@@ -351,7 +336,6 @@ describe('Class diagram', () => {
       ],
       {}
     );
-    cy.get('svg');
   });
 
   // it('17: should render a class diagram when useMaxWidth is true (default)', () => {
@@ -421,7 +405,6 @@ describe('Class diagram', () => {
       `,
       { logLevel: 1 }
     );
-    cy.get('svg');
   });
 
   it('should render class diagram with newlines in title', () => {
@@ -439,7 +422,6 @@ describe('Class diagram', () => {
           +quack()
         }
       `);
-    cy.get('svg');
   });
 
   it('should render class diagram with many newlines in title', () => {

cypress/integration/rendering/erDiagram.spec.js

@@ -218,7 +218,6 @@ describe('Entity Relationship Diagram', () => {
         `,
       { loglevel: 1 }
     );
-    cy.get('svg');
   });
 
   it('should render entities with keys', () => {
@@ -322,4 +321,37 @@ 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/errorDiagram.spec.js

@@ -3,7 +3,7 @@ import { imgSnapshotTest } from '../../helpers/util';
 describe('Error Diagrams', () => {
   beforeEach(() => {
     cy.on('uncaught:exception', (err) => {
-      expect(err.message).to.include('Parse error');
+      expect(err.message).to.include('error');
       // return false to prevent the error from
       // failing this test
       return false;

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

@@ -837,6 +837,26 @@ subgraph "\`**Two**\`"
   in the hat\`") -- "\`1o **ipa**\`" --> d("The dog in the hog")
 end
 
+`,
+          { flowchart: { titleTopMargin: 0 } }
+        );
+      });
+      it('Sub graphs and markdown strings', () => {
+        imgSnapshotTest(
+          `---
+config:
+  layout: elk
+---
+
+flowchart LR
+ subgraph subgraph_ko6czgs5u["Untitled subgraph"]
+        D["Option 1"]
+  end
+    C{"Evaluate"} -- One --> D
+    C -- Two --> E(("Option 2"))
+    D --> E
+      A["A"]
+
 `,
           { flowchart: { titleTopMargin: 0 } }
         );
@@ -855,7 +875,7 @@ describe('Title and arrow styling #4813', () => {
       flowchart LR
       A-->B
       A-->C`,
-      { flowchart: { defaultRenderer: 'elk' } }
+      { layout: 'elk' }
     );
     cy.get('svg').should((svg) => {
       const title = svg[0].querySelector('text');
@@ -871,15 +891,14 @@ describe('Title and arrow styling #4813', () => {
       B-.-oC
       C==xD
       D ~~~ A`,
-      { flowchart: { defaultRenderer: 'elk' } }
+      { layout: 'elk' }
     );
     cy.get('svg').should((svg) => {
       const edges = svg[0].querySelectorAll('.edges path');
-      console.log(edges);
-      expect(edges[0]).to.have.attr('pattern', 'solid');
-      expect(edges[1]).to.have.attr('pattern', 'dotted');
-      expect(edges[2]).to.have.css('stroke-width', '3.5px');
-      expect(edges[3]).to.have.css('stroke-width', '1.5px');
+      expect(edges[0].getAttribute('class')).to.contain('edge-pattern-solid');
+      expect(edges[1].getAttribute('class')).to.contain('edge-pattern-dotted');
+      expect(edges[2].getAttribute('class')).to.contain('edge-thickness-thick');
+      expect(edges[3].getAttribute('class')).to.contain('edge-thickness-invisible');
     });
   });
 });

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(290 * 0.95 - 1, 290 * 1.05);
+      expect(maxWidthValue).to.be.within(417 * 0.95, 417 * 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(290 * 0.95 - 1, 290 * 1.05);
+      expect(width).to.be.within(417 * 0.95, 417 * 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
       ---
@@ -1047,7 +1047,32 @@ end
           A --lb3--> TOP --lb4--> B
           B1 --lb5--> B2
         `,
-        { flowchart: { subGraphTitleMargin: { top: 10, bottom: 5 } } }
+        {
+          flowchart: { subGraphTitleMargin: { top: 10, bottom: 5 } },
+        }
+      );
+    });
+    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 } },
+        }
       );
     });
   });

cypress/integration/rendering/flowchart.spec.js

@@ -733,7 +733,7 @@ describe('Graph', () => {
   });
   it('38: should render a flowchart when useMaxWidth is true (default)', () => {
     renderGraph(
-      `graph TD
+      `flowchart TD
       A[Christmas] -->|Get money| B(Go shopping)
       B --> C{Let me think}
       C -->|One| D[Laptop]
@@ -751,7 +751,7 @@ describe('Graph', () => {
       const style = svg.attr('style');
       expect(style).to.match(/^max-width: [\d.]+px;$/);
       const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
-      expect(maxWidthValue).to.be.within(300 * 0.9, 300 * 1.1);
+      expect(maxWidthValue).to.be.within(446 * 0.9, 446 * 1.1);
     });
   });
   it('39: should render a flowchart when useMaxWidth is false', () => {
@@ -770,7 +770,7 @@ describe('Graph', () => {
       const width = parseFloat(svg.attr('width'));
       // use within because the absolute value can be slightly different depending on the environment ±10%
       // expect(height).to.be.within(446 * 0.95, 446 * 1.05);
-      expect(width).to.be.within(300 * 0.9, 300 * 1.1);
+      expect(width).to.be.within(446 * 0.9, 446 * 1.1);
       expect(svg).to.not.have.attr('style');
     });
   });
@@ -905,13 +905,16 @@ graph TD
   it('67: should be able to style default node independently', () => {
     imgSnapshotTest(
       `
-    flowchart TD
+      flowchart TD
       classDef default fill:#a34
       hello --> default
 
       style default stroke:#000,stroke-width:4px
     `,
-      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+      {
+        flowchart: { htmlLabels: true },
+        securityLevel: 'loose',
+      }
     );
   });
 });

cypress/integration/rendering/gitGraph.spec.js

@@ -1532,5 +1532,41 @@ gitGraph TB:
         {}
       );
     });
+    it('75: should render a gitGraph with multiple tags on a merge commit on bottom-to-top orientation', () => {
+      imgSnapshotTest(
+        `gitGraph BT:
+        commit id: "ZERO"
+        branch develop
+        commit id:"A"
+        checkout main
+        commit id:"ONE"
+        checkout develop
+        commit id:"B"
+        checkout main
+        merge develop id:"Release 1.0" type:HIGHLIGHT tag: "SAML v2.0" tag: "OpenID v1.1"
+        commit id:"TWO"
+        checkout develop
+        commit id:"C"`,
+        {}
+      );
+    });
+  });
+  it('76: should render a gitGraph with multiple tags on a merge commit on left-to-right orientation', () => {
+    imgSnapshotTest(
+      `gitGraph
+    commit id: "ZERO"
+    branch develop
+    commit id:"A"
+    checkout main
+    commit id:"ONE"
+    checkout develop
+    commit id:"B"
+    checkout main
+    merge develop id:"Release 1.0" type:HIGHLIGHT tag: "SAML v2.0" tag: "OpenID v1.1"
+    commit id:"TWO"
+    checkout develop
+    commit id:"C"`,
+      {}
+    );
   });
 });

cypress/integration/rendering/packet.spec.ts

@@ -10,6 +10,15 @@ describe('packet structure', () => {
     );
   });
 
+  it('should render a simple packet diagram without ranges', () => {
+    imgSnapshotTest(
+      `packet-beta
+  0: "h"
+  1: "i"
+`
+    );
+  });
+
   it('should render a complex packet diagram', () => {
     imgSnapshotTest(
       `packet-beta

cypress/integration/rendering/quadrantChart.spec.js

@@ -8,7 +8,6 @@ describe('Quadrant Chart', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
   it('should render a complete quadrant chart', () => {
     imgSnapshotTest(
@@ -30,7 +29,6 @@ describe('Quadrant Chart', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
   it('should render without points', () => {
     imgSnapshotTest(
@@ -46,7 +44,6 @@ describe('Quadrant Chart', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
   it('should able to render y-axix on right side', () => {
     imgSnapshotTest(
@@ -63,7 +60,6 @@ describe('Quadrant Chart', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
   it('should able to render x-axix on bottom', () => {
     imgSnapshotTest(
@@ -80,7 +76,6 @@ describe('Quadrant Chart', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
   it('should able to render x-axix on bottom and y-axis on right', () => {
     imgSnapshotTest(
@@ -97,7 +92,6 @@ describe('Quadrant Chart', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
   it('should render without title', () => {
     imgSnapshotTest(
@@ -112,7 +106,6 @@ describe('Quadrant Chart', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
   it('should use all the config', () => {
     imgSnapshotTest(
@@ -135,7 +128,6 @@ describe('Quadrant Chart', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
   it('should use all the theme variable', () => {
     imgSnapshotTest(
@@ -158,7 +150,6 @@ describe('Quadrant Chart', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
   it('should render x-axis labels in the center, if x-axis has two labels', () => {
     imgSnapshotTest(
@@ -180,7 +171,6 @@ describe('Quadrant Chart', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
   it('should render y-axis labels in the center, if y-axis has two labels', () => {
     imgSnapshotTest(
@@ -202,7 +192,6 @@ describe('Quadrant Chart', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
   it('should render both axes labels on the left and bottom, if both axes have only one label', () => {
     imgSnapshotTest(
@@ -224,7 +213,6 @@ describe('Quadrant Chart', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
 
   it('it should render data points with styles', () => {
@@ -249,7 +237,6 @@ describe('Quadrant Chart', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
 
   it('it should render data points with styles + classes', () => {

cypress/integration/rendering/requirement.spec.js

@@ -44,6 +44,5 @@ describe('Requirement diagram', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
 });

cypress/integration/rendering/sequencediagram.spec.js

@@ -1,8 +1,6 @@
-/// <reference types="Cypress" />
-
 import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
 
-context('Sequence diagram', () => {
+describe('Sequence diagram', () => {
   it('should render a sequence diagram with boxes', () => {
     renderGraph(
       `
@@ -68,6 +66,19 @@ context('Sequence diagram', () => {
       { sequence: { actorFontFamily: 'courier' } }
     );
   });
+  it('should render bidirectional arrows', () => {
+    imgSnapshotTest(
+      `
+      sequenceDiagram
+      Alice<<->>John: Hello John, how are you?
+      Alice<<-->>John: Hi Alice, I can hear you!
+      John<<->>Alice: This also works the other way
+      John<<-->>Alice: Yes
+      Alice->John: Test
+      John->>Alice: Still works
+      `
+    );
+  });
   it('should handle different line breaks', () => {
     imgSnapshotTest(
       `
@@ -231,7 +242,7 @@ context('Sequence diagram', () => {
       `
     );
   });
-  context('font settings', () => {
+  describe('font settings', () => {
     it('should render different note fonts when configured', () => {
       imgSnapshotTest(
         `
@@ -328,7 +339,7 @@ context('Sequence diagram', () => {
       );
     });
   });
-  context('auth width scaling', () => {
+  describe('auth width scaling', () => {
     it('should render long actor descriptions', () => {
       imgSnapshotTest(
         `
@@ -464,6 +475,18 @@ context('Sequence diagram', () => {
         {}
       );
     });
+    it('should render notes over actors and participant', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+        actor Alice
+        participant Charlie
+        note over Alice: some note
+        note over Charlie: other note
+      `,
+        {}
+      );
+    });
     it('should render long messages from an actor to the left to one to the right', () => {
       imgSnapshotTest(
         `
@@ -505,7 +528,7 @@ context('Sequence diagram', () => {
       );
     });
   });
-  context('background rects', () => {
+  describe('background rects', () => {
     it('should render a single and nested rects', () => {
       imgSnapshotTest(
         `
@@ -785,7 +808,7 @@ context('Sequence diagram', () => {
       );
     });
   });
-  context('directives', () => {
+  describe('directives', () => {
     it('should override config with directive settings', () => {
       imgSnapshotTest(
         `
@@ -817,7 +840,7 @@ context('Sequence diagram', () => {
       );
     });
   });
-  context('links', () => {
+  describe('links', () => {
     it('should support actor links', () => {
       renderGraph(
         `
@@ -833,7 +856,7 @@ context('Sequence diagram', () => {
       );
       cy.get('#actor0_popup').should((popupMenu) => {
         const style = popupMenu.attr('style');
-        expect(style).to.undefined;
+        // expect(style).to.undefined;
       });
       cy.get('#root-0').click();
       cy.get('#actor0_popup').should((popupMenu) => {
@@ -908,7 +931,7 @@ context('Sequence diagram', () => {
       );
     });
   });
-  context('svg size', () => {
+  describe('svg size', () => {
     it('should render a sequence diagram when useMaxWidth is true (default)', () => {
       renderGraph(
         `
@@ -987,7 +1010,7 @@ context('Sequence diagram', () => {
       });
     });
   });
-  context('render after error', () => {
+  describe('render after error', () => {
     it('should render diagram after fixing destroy participant error', () => {
       cy.on('uncaught:exception', (err) => {
         return false;

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

@@ -8,7 +8,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 1, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('v2 should render a simple state diagrams', () => {
     imgSnapshotTest(
@@ -20,7 +19,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('v2 should render a long descriptions instead of id when available', () => {
     imgSnapshotTest(
@@ -32,7 +30,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('v2 should render a long descriptions with additional descriptions', () => {
     imgSnapshotTest(
@@ -44,7 +41,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('v2 should render a single state with short descriptions', () => {
     imgSnapshotTest(
@@ -55,7 +51,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('v2 should render a transition descriptions with new lines', () => {
     imgSnapshotTest(
@@ -69,7 +64,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('v2 should render a state with a note', () => {
     imgSnapshotTest(
@@ -83,7 +77,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('v2 should render a state with on the left side when so specified', () => {
     imgSnapshotTest(
@@ -97,7 +90,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('v2 should render a state with a note together with another state', () => {
     imgSnapshotTest(
@@ -113,7 +105,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('v2 should render a note with multiple lines in it', () => {
     imgSnapshotTest(
@@ -156,7 +147,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('v2 should render a simple state diagrams 2', () => {
     imgSnapshotTest(
@@ -169,7 +159,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('v2 should render a simple state diagrams with labels', () => {
     imgSnapshotTest(
@@ -185,7 +174,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('v2 should render state descriptions', () => {
     imgSnapshotTest(
@@ -198,7 +186,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('v2 should render composite states', () => {
     imgSnapshotTest(
@@ -217,7 +204,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('v2 should render multiple composite states', () => {
     imgSnapshotTest(
@@ -287,7 +273,6 @@ describe('State diagram', () => {
     `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('v2 should render concurrency states', () => {
     imgSnapshotTest(
@@ -311,7 +296,6 @@ describe('State diagram', () => {
     `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('v2 should render a state with states in it', () => {
     imgSnapshotTest(
@@ -558,6 +542,43 @@ stateDiagram-v2
         { logLevel: 0, fontFamily: 'courier' }
       );
     });
+    it(' can have styles applied ', () => {
+      imgSnapshotTest(
+        `
+stateDiagram-v2
+AState
+style AState fill:#636,border:1px solid red,color:white;
+        `,
+        { logLevel: 0, fontFamily: 'courier' }
+      );
+    });
+    it(' should let styles take preceedence over classes', () => {
+      imgSnapshotTest(
+        `
+stateDiagram-v2
+AState: Should NOT be white
+BState
+classDef exampleStyleClass fill:#fff,color: blue;
+class AState,BState exampleStyleClass
+style AState fill:#636,border:1px solid red,color:white;
+        `,
+        { logLevel: 0, fontFamily: 'courier' }
+      );
+    });
+    it(' should allow styles to take effect in stubgraphs', () => {
+      imgSnapshotTest(
+        `
+  stateDiagram
+    state roundWithTitle {
+      C: Black with white text
+    }
+    D: Black with white text
+
+    style C,D stroke:#00f, fill:black, color:white
+        `,
+        { logLevel: 0, fontFamily: 'courier' }
+      );
+    });
   });
   it('1433: should render a simple state diagram with a title', () => {
     imgSnapshotTest(
@@ -567,6 +588,20 @@ title: simple state diagram
 stateDiagram-v2
 [*] --> State1
 State1 --> [*]
+`,
+      {}
+    );
+  });
+  it('should align dividers correctly', () => {
+    imgSnapshotTest(
+      `stateDiagram-v2
+  state s2 {
+      s3
+      --
+      s4
+      --
+      55
+  }
 `,
       {}
     );

cypress/integration/rendering/stateDiagram.spec.js

@@ -10,7 +10,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('should render a long descriptions instead of id when available', () => {
     imgSnapshotTest(
@@ -22,7 +21,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('should render a long descriptions with additional descriptions', () => {
     imgSnapshotTest(
@@ -34,7 +32,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('should render a single state with short descriptions', () => {
     imgSnapshotTest(
@@ -45,7 +42,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('should render a transition descriptions with new lines', () => {
     imgSnapshotTest(
@@ -59,7 +55,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('should render a state with a note', () => {
     imgSnapshotTest(
@@ -73,7 +68,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('should render a state with on the left side when so specified', () => {
     imgSnapshotTest(
@@ -87,7 +81,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('should render a state with a note together with another state', () => {
     imgSnapshotTest(
@@ -103,7 +96,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('should render a note with multiple lines in it', () => {
     imgSnapshotTest(
@@ -146,7 +138,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('should render a simple state diagrams 2', () => {
     imgSnapshotTest(
@@ -159,7 +150,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('should render a simple state diagrams with labels', () => {
     imgSnapshotTest(
@@ -175,7 +165,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('should render state descriptions', () => {
     imgSnapshotTest(
@@ -188,7 +177,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('should render composite states', () => {
     imgSnapshotTest(
@@ -207,7 +195,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('should render multiple composit states', () => {
     imgSnapshotTest(
@@ -277,7 +264,6 @@ describe('State diagram', () => {
     `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('should render concurrency states', () => {
     imgSnapshotTest(
@@ -301,7 +287,6 @@ describe('State diagram', () => {
     `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('should render a state with states in it', () => {
     imgSnapshotTest(

cypress/integration/rendering/theme.spec.js

@@ -10,7 +10,6 @@ describe('themeCSS balancing, it', () => {
           `,
       {}
     );
-    cy.get('svg');
   });
   it('should not allow unbalanced CSS definitions 2', () => {
     imgSnapshotTest(
@@ -21,7 +20,6 @@ describe('themeCSS balancing, it', () => {
           `,
       {}
     );
-    cy.get('svg');
   });
 });
 
@@ -45,7 +43,6 @@ describe('Pie Chart', () => {
           `,
           { theme }
         );
-        cy.get('svg');
       });
       it('should render a flowchart diagram', () => {
         imgSnapshotTest(
@@ -70,7 +67,6 @@ describe('Pie Chart', () => {
           `,
           { theme }
         );
-        cy.get('svg');
       });
       it('should render a new flowchart diagram', () => {
         imgSnapshotTest(
@@ -96,7 +92,6 @@ describe('Pie Chart', () => {
           `,
           { theme }
         );
-        cy.get('svg');
       });
       it('should render a sequence diagram', () => {
         imgSnapshotTest(
@@ -125,7 +120,6 @@ describe('Pie Chart', () => {
           `,
           { theme }
         );
-        cy.get('svg');
       });
 
       it('should render a class diagram', () => {
@@ -175,7 +169,6 @@ describe('Pie Chart', () => {
           `,
           { theme }
         );
-        cy.get('svg');
       });
       it('should render a state diagram', () => {
         imgSnapshotTest(
@@ -210,7 +203,6 @@ stateDiagram
           `,
           { theme }
         );
-        cy.get('svg');
       });
       it('should render a state diagram (v2)', () => {
         imgSnapshotTest(
@@ -245,7 +237,6 @@ stateDiagram-v2
           `,
           { theme }
         );
-        cy.get('svg');
       });
       it('should render a er diagram', () => {
         imgSnapshotTest(
@@ -266,7 +257,6 @@ erDiagram
           `,
           { theme }
         );
-        cy.get('svg');
       });
       it('should render a user journey diagram', () => {
         imgSnapshotTest(
@@ -287,7 +277,6 @@ erDiagram
                         `,
           { theme }
         );
-        cy.get('svg');
       });
       it('should render a gantt diagram', () => {
         cy.clock(new Date('2014-01-06').getTime());
@@ -326,7 +315,6 @@ erDiagram
        `,
           { theme }
         );
-        cy.get('svg');
       });
     });
   });

cypress/integration/rendering/xyChart.spec.js

@@ -9,7 +9,6 @@ describe('XY Chart', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
   it('Should render a complete chart', () => {
     imgSnapshotTest(
@@ -35,7 +34,6 @@ describe('XY Chart', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
   it('y-axis title not required', () => {
     imgSnapshotTest(
@@ -48,7 +46,6 @@ describe('XY Chart', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
   it('Should render a chart without y-axis with different range', () => {
     imgSnapshotTest(
@@ -60,7 +57,6 @@ describe('XY Chart', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
   it('x axis title not required', () => {
     imgSnapshotTest(
@@ -72,7 +68,6 @@ describe('XY Chart', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
   it('Multiple plots can be rendered', () => {
     imgSnapshotTest(
@@ -87,7 +82,6 @@ describe('XY Chart', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
   it('Decimals and negative numbers are supported', () => {
     imgSnapshotTest(
@@ -98,7 +92,6 @@ describe('XY Chart', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
   it('Render spark line with "plotReservedSpacePercent"', () => {
     imgSnapshotTest(
@@ -116,7 +109,6 @@ describe('XY Chart', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
   it('Render spark bar without displaying other property', () => {
     imgSnapshotTest(
@@ -143,7 +135,6 @@ describe('XY Chart', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
   it('Should use all the config from directive', () => {
     imgSnapshotTest(
@@ -158,7 +149,6 @@ describe('XY Chart', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
   it('Should use all the config from yaml', () => {
     imgSnapshotTest(
@@ -199,7 +189,6 @@ describe('XY Chart', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
   it('Render with show axis title false', () => {
     imgSnapshotTest(
@@ -221,7 +210,6 @@ describe('XY Chart', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
   it('Render with show axis label false', () => {
     imgSnapshotTest(
@@ -243,7 +231,6 @@ describe('XY Chart', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
   it('Render with show axis tick false', () => {
     imgSnapshotTest(
@@ -265,7 +252,6 @@ describe('XY Chart', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
   it('Render with show axis line false', () => {
     imgSnapshotTest(
@@ -287,7 +273,6 @@ describe('XY Chart', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
   it('Render all the theme color', () => {
     imgSnapshotTest(
@@ -317,6 +302,17 @@ describe('XY Chart', () => {
       `,
       {}
     );
+  });
+  it('should use the correct distances between data points', () => {
+    imgSnapshotTest(
+      `
+      xychart-beta
+        x-axis 0 --> 2
+        line [0, 1, 0, 1]
+        bar [1, 0, 1, 0]
+      `,
+      {}
+    );
     cy.get('svg');
   });
 });

cypress/platform/architecture-external.html

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

@@ -27,7 +27,7 @@ const code3 = `flowchart TD
 A(<img scr='https://iconscout.com/ms-icon-310x310.png' width='20' height='20' />)
 B(<b>Bold text!</b>)`;
 
-if (location.href.match('test-html-escaping')) {
+if (/test-html-escaping/.exec(location.href)) {
   code = code3;
 }
 

cypress/platform/flowchart-refactor.html

@@ -0,0 +1,866 @@
+<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';
+      }
+
+      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>
+    <table>
+      <tr>
+        <th></th>
+        <!-- Placeholder for the top left corner -->
+        <th>Dagre</th>
+        <th>Dagre with rough</th>
+        <th>ELK</th>
+        <th>ELK with rough</th>
+      </tr>
+      <tr>
+        <th class="vertical-header">
+          <button class="collapsible">Stadium shape</button>
+          <div class="content">
+            <div class="pre-scrollable">
+              <pre>
+              flowchart LR
+              id1([This is the text in the box])
+            </pre
+              >
+            </div>
+          </div>
+        </th>
+        <td>
+          <pre id="diagram1" class="mermaid">
+flowchart LR
+    id1([This is the text in the box])
+
+      </pre
+          >
+        </td>
+        <td>
+          <pre id="diagram2" class="mermaid">
+%%{init: {"look": "handDrawn"} }%%
+flowchart LR
+    id1([This is the text in the box])
+      </pre
+          >
+        </td>
+        <td>
+          <pre id="diagram3" class="mermaid">
+%%{init: {"handDrawn": false, "layout": "elk"} }%%
+flowchart LR
+    id1([This is the text in the box])
+      </pre
+          >
+        </td>
+        <td>
+          <pre id="diagram4" class="mermaid">
+%%{init: {"look": "handDrawn", "layout": "elk"} }%%
+flowchart LR
+    id1([This is the text in the box])
+      </pre
+          >
+        </td>
+      </tr>
+      <!-- Separator row -->
+      <tr class="separator">
+        <td colspan="5"></td>
+        <!-- This cell spans all columns including the vertical header -->
+      </tr>
+
+      <tr>
+        <th class="vertical-header">
+          <button class="collapsible">Sub-Routine shape</button>
+          <div class="content">
+            <div class="pre-scrollable">
+              <pre>
+      flowchart LR
+    id1[[This is the text in the box]]
+    </pre
+              >
+            </div>
+          </div>
+        </th>
+        <td>
+          <pre id="diagram5" class="mermaid">
+flowchart LR
+    id1[[This is the text in the box]]
+      </pre
+          >
+        </td>
+        <td>
+          <pre id="diagram6" class="mermaid">
+%%{init: {"look": "handDrawn"} }%%
+flowchart LR
+    id1[[This is the text in the box]]
+      </pre
+          >
+        </td>
+        <td>
+          <pre id="diagram7" class="mermaid">
+%%{init: {"handDrawn": false, "layout": "elk"} }%%
+flowchart LR
+    id1[[This is the text in the box]]
+      </pre
+          >
+        </td>
+        <td>
+          <pre id="diagram8" class="mermaid">
+%%{init: {"look": "handDrawn", "layout": "elk"} }%%
+flowchart LR
+    id1[[This is the text in the box]]
+      </pre
+          >
+        </td>
+      </tr>
+      <!-- Separator row -->
+      <tr class="separator">
+        <td colspan="5"></td>
+        <!-- This cell spans all columns including the vertical header -->
+      </tr>
+
+      <tr>
+        <th class="vertical-header">
+          <button class="collapsible">Cylindrical shape</button>
+          <div class="content">
+            <div class="pre-scrollable">
+              <pre>
+              flowchart LR
+    id1[(Database)]
+    </pre
+              >
+            </div>
+          </div>
+        </th>
+        <td>
+          <pre id="diagram9" class="mermaid">
+          flowchart LR
+    id1[(Database)]
+      </pre
+          >
+        </td>
+        <td>
+          <pre id="diagram10" class="mermaid">
+          %%{init: {"look": "handDrawn"} }%%
+          flowchart LR
+    id1[(Database)]
+      </pre
+          >
+        </td>
+        <td>
+          <pre id="diagram11" class="mermaid">
+          %%{init: {"handDrawn": false, "layout": "elk"} }%%
+          flowchart LR
+    id1[(Database)]
+      </pre
+          >
+        </td>
+        <td>
+          <pre id="diagram12" class="mermaid">
+          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
+          flowchart LR
+    id1[(Database)]
+      </pre
+          >
+        </td>
+      </tr>
+      <!-- Separator row -->
+      <tr class="separator">
+        <td colspan="5"></td>
+        <!-- This cell spans all columns including the vertical header -->
+      </tr>
+
+      <tr>
+        <th class="vertical-header">
+          <button class="collapsible">Circle shape</button>
+          <div class="content">
+            <div class="pre-scrollable">
+              <pre>
+              flowchart LR
+    id1((This is the text in the circle))
+    </pre
+              >
+            </div>
+          </div>
+        </th>
+        <td>
+          <pre id="diagram13" class="mermaid">
+          flowchart LR
+    id1((This is the text in the circle))
+      </pre
+          >
+        </td>
+        <td>
+          <pre id="diagram14" class="mermaid">
+          %%{init: {"look": "handDrawn"} }%%
+          flowchart LR
+    id1((This is the text in the circle))
+      </pre
+          >
+        </td>
+        <td>
+          <pre id="diagram15" class="mermaid">
+          %%{init: {"handDrawn": false, "layout": "elk"} }%%
+          flowchart LR
+    id1((This is the text in the circle))
+      </pre
+          >
+        </td>
+        <td>
+          <pre id="diagram16" class="mermaid">
+          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
+          flowchart LR
+    id1((This is the text in the circle))
+      </pre
+          >
+        </td>
+      </tr>
+      <!-- Separator row -->
+      <tr class="separator">
+        <td colspan="5"></td>
+        <!-- This cell spans all columns including the vertical header -->
+      </tr>
+
+      <tr>
+        <th class="vertical-header">
+          <button class="collapsible">Double Circle shape</button>
+          <div class="content">
+            <div class="pre-scrollable">
+              <pre>
+              flowchart TD
+    id1(((This is the text in the circle)))
+    </pre
+              >
+            </div>
+          </div>
+        </th>
+        <td>
+          <pre id="diagram17" class="mermaid">
+          flowchart TD
+    id1(((This is the text in the circle)))
+      </pre
+          >
+        </td>
+        <td>
+          <pre id="diagram18" class="mermaid">
+          %%{init: {"look": "handDrawn"} }%%
+          flowchart TD
+    id1(((This is the text in the circle)))
+      </pre
+          >
+        </td>
+        <td>
+          <pre id="diagram19" class="mermaid">
+          %%{init: {"handDrawn": false, "layout": "elk"} }%%
+          flowchart TD
+    id1(((This is the text in the circle)))
+      </pre
+          >
+        </td>
+        <td>
+          <pre id="diagram20" class="mermaid">
+          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
+          flowchart TD
+    id1(((This is the text in the circle)))
+      </pre
+          >
+        </td>
+      </tr>
+      <!-- Separator row -->
+      <tr class="separator">
+        <td colspan="5"></td>
+        <!-- This cell spans all columns including the vertical header -->
+      </tr>
+
+      <tr>
+        <th class="vertical-header">
+          <button class="collapsible">Asymmetric shape</button>
+          <div class="content">
+            <div class="pre-scrollable">
+              <pre>
+              flowchart LR
+    id1>This is the text in the box]
+    </pre
+              >
+            </div>
+          </div>
+        </th>
+        <td>
+          <pre id="diagram21" class="mermaid">
+          flowchart LR
+    id1>This is the text in the box]
+      </pre
+          >
+        </td>
+        <td>
+          <pre id="diagram22" class="mermaid">
+          %%{init: {"look": "handDrawn"} }%%
+          flowchart LR
+    id1>This is the text in the box]  
+      </pre
+          >
+        </td>
+        <td>
+          <pre id="diagram23" class="mermaid">
+          %%{init: {"handDrawn": false, "layout": "elk"} }%%
+          flowchart LR
+    id1>This is the text in the box]  
+      </pre
+          >
+        </td>
+        <td>
+          <pre id="diagram24" class="mermaid">
+          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
+          flowchart LR
+    id1>This is the text in the box]
+      </pre
+          >
+        </td>
+      </tr>
+      <!-- Separator row -->
+      <tr class="separator">
+        <td colspan="5"></td>
+        <!-- This cell spans all columns including the vertical header -->
+      </tr>
+
+      <tr>
+        <th class="vertical-header">
+          <button class="collapsible">Rhombus/Diamond/Question shape</button>
+          <div class="content">
+            <div class="pre-scrollable">
+              <pre>
+              flowchart LR
+    id1{This is the text in the box}
+    </pre
+              >
+            </div>
+          </div>
+        </th>
+        <td>
+          <pre id="diagram25" class="mermaid">
+          flowchart LR
+    id1{This is the text in the box}
+      </pre
+          >
+        </td>
+        <td>
+          <pre id="diagram26" class="mermaid">
+          %%{init: {"look": "handDrawn"} }%%
+          flowchart LR
+    id1{This is the text in the box}
+      </pre
+          >
+        </td>
+        <td>
+          <pre id="diagram27" class="mermaid">
+          %%{init: {"handDrawn": false, "layout": "elk"} }%%
+          flowchart LR
+    id1{This is the text in the box}
+      </pre
+          >
+        </td>
+        <td>
+          <pre id="diagram28" class="mermaid">
+          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
+          flowchart LR
+    id1{This is the text in the box}
+      </pre
+          >
+        </td>
+      </tr>
+      <!-- Separator row -->
+      <tr class="separator">
+        <td colspan="5"></td>
+        <!-- This cell spans all columns including the vertical header -->
+      </tr>
+
+      <tr>
+        <th class="vertical-header">
+          <button class="collapsible">Hexagon shape</button>
+          <div class="content">
+            <div class="pre-scrollable">
+              <pre>
+              flowchart LR
+    id1{{This is the text in the box}}
+    </pre
+              >
+            </div>
+          </div>
+        </th>
+        <td>
+          <pre id="diagram29" class="mermaid">
+          flowchart LR
+    id1{{This is the text in the box}}
+      </pre
+          >
+        </td>
+        <td>
+          <pre id="diagram31" class="mermaid">
+          %%{init: {"handDrawn": false, "layout": "elk"} }%%
+          flowchart LR
+    id1{{This is the text in the box}}
+      </pre
+          >
+        </td>
+        <td>
+          <pre id="diagram32" class="mermaid">
+          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
+          flowchart LR
+    id1{{This is the text in the box}}
+      </pre
+          >
+        </td>
+      </tr>
+      <!-- Separator row -->
+      <tr class="separator">
+        <td colspan="5"></td>
+        <!-- This cell spans all columns including the vertical header -->
+      </tr>
+
+      <tr>
+        <th class="vertical-header">
+          <button class="collapsible">Parallelogram shape</button>
+          <div class="content">
+            <div class="pre-scrollable">
+              <pre>
+              flowchart TD
+    id1[/This is the text in the box/]
+    </pre
+              >
+            </div>
+          </div>
+        </th>
+        <td>
+          <pre id="diagram33" class="mermaid">
+          flowchart TD
+    id1[/This is the text in the box/]
+      </pre
+          >
+        </td>
+        <td>
+          <pre id="diagram34" class="mermaid">
+          %%{init: {"look": "handDrawn"} }%%
+          flowchart TD
+    id1[/This is the text in the box/]  
+      </pre
+          >
+        </td>
+        <td>
+          <pre id="diagram35" class="mermaid">
+          %%{init: {"handDrawn": false, "layout": "elk"} }%%
+          flowchart TD
+    id1[/This is the text in the box/] 
+      </pre
+          >
+        </td>
+        <td>
+          <pre id="diagram36" class="mermaid">
+          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
+          flowchart TD
+    id1[/This is the text in the box/]
+      </pre
+          >
+        </td>
+      </tr>
+      <!-- Separator row -->
+      <tr class="separator">
+        <td colspan="5"></td>
+        <!-- This cell spans all columns including the vertical header -->
+      </tr>
+
+      <tr>
+        <th class="vertical-header">
+          <button class="collapsible">Parallelogram Alt shape</button>
+          <div class="content">
+            <div class="pre-scrollable">
+              <pre>
+              flowchart TD
+    id1[\This is the text in the box\]
+    </pre
+              >
+            </div>
+          </div>
+        </th>
+        <td>
+          <pre id="diagram37" class="mermaid">
+          flowchart TD
+    id1[\This is the text in the box\]
+      </pre
+          >
+        </td>
+        <td>
+          <pre id="diagram38" class="mermaid">
+          %%{init: {"look": "handDrawn"} }%%
+          flowchart TD
+    id1[\This is the text in the box\]
+      </pre
+          >
+        </td>
+        <td>
+          <pre id="diagram39" class="mermaid">
+          %%{init: {"handDrawn": false, "layout": "elk"} }%%
+          flowchart TD
+    id1[\This is the text in the box\]
+      </pre
+          >
+        </td>
+        <td>
+          <pre id="diagram40" class="mermaid">
+          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
+          flowchart TD
+    id1[\This is the text in the box\]
+
+      </pre
+          >
+        </td>
+      </tr>
+      <!-- Separator row -->
+      <tr class="separator">
+        <td colspan="5"></td>
+        <!-- This cell spans all columns including the vertical header -->
+      </tr>
+
+      <tr>
+        <th class="vertical-header">
+          <button class="collapsible">Trapezoid shape</button>
+          <div class="content">
+            <div class="pre-scrollable">
+              <pre>
+              flowchart TD
+    A[/Christmas\]
+    </pre
+              >
+            </div>
+          </div>
+        </th>
+        <td>
+          <pre id="diagram41" class="mermaid">
+          flowchart TD
+    A[/Christmas\]
+      </pre
+          >
+        </td>
+        <td>
+          <pre id="diagram42" class="mermaid">
+          %%{init: {"look": "handDrawn"} }%%
+          flowchart TD
+    A[/Christmas\]
+      </pre
+          >
+        </td>
+        <td>
+          <pre id="diagram43" class="mermaid">
+          %%{init: {"handDrawn": false, "layout": "elk"} }%%
+          flowchart TD
+    A[/Christmas\]
+      </pre
+          >
+        </td>
+        <td>
+          <pre id="diagram44" class="mermaid">
+          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
+          flowchart TD
+    A[/Christmas\]
+      </pre
+          >
+        </td>
+      </tr>
+      <!-- Separator row -->
+      <tr class="separator">
+        <td colspan="5"></td>
+        <!-- This cell spans all columns including the vertical header -->
+      </tr>
+
+      <tr>
+        <th class="vertical-header">
+          <button class="collapsible">Trapezoid Alt shape</button>
+          <div class="content">
+            <div class="pre-scrollable">
+              <pre>
+              flowchart TD
+    A[\Christmas/]
+    </pre
+              >
+            </div>
+          </div>
+        </th>
+        <td>
+          <pre id="diagram45" class="mermaid">
+          flowchart TD
+    A[\Christmas/]
+      </pre
+          >
+        </td>
+        <td>
+          <pre id="diagram46" class="mermaid">
+          %%{init: {"look": "handDrawn"} }%%
+          flowchart TD
+    A[\Christmas/]
+      </pre
+          >
+        </td>
+        <td>
+          <pre id="diagram47" class="mermaid">
+          %%{init: {"handDrawn": false, "layout": "elk"} }%%
+          flowchart TD
+    A[\Christmas/]
+      </pre
+          >
+        </td>
+        <td>
+          <pre id="diagram48" class="mermaid">
+          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
+          flowchart TD
+    A[\Christmas/]  
+      </pre
+          >
+        </td>
+      </tr>
+      <!-- Separator row -->
+      <tr class="separator">
+        <td colspan="5"></td>
+        <!-- This cell spans all columns including the vertical header -->
+      </tr>
+
+      <tr>
+        <th class="vertical-header">
+          <button class="collapsible">Rect with rounded corner</button>
+          <div class="content">
+            <div class="pre-scrollable">
+              <pre>
+              flowchart LR
+    id1(This is the text in the box)
+    </pre
+              >
+            </div>
+          </div>
+        </th>
+        <td>
+          <pre id="diagram49" class="mermaid">
+          flowchart LR
+    id1(This is the text in the box)
+      </pre
+          >
+        </td>
+        <td>
+          <pre id="diagram50" class="mermaid">
+          %%{init: {"look": "handDrawn"} }%%
+          flowchart LR
+    id1(This is the text in the box)
+      </pre
+          >
+        </td>
+        <td>
+          <pre id="diagram51" class="mermaid">
+          %%{init: {"handDrawn": false, "layout": "elk"} }%%
+          flowchart LR
+    id1(This is the text in the box)
+      </pre
+          >
+        </td>
+        <td>
+          <pre id="diagram52" class="mermaid">
+          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
+          flowchart LR
+    id1(This is the text in the box) 
+      </pre
+          >
+        </td>
+      </tr>
+      <!-- Separator row -->
+      <tr class="separator">
+        <td colspan="5"></td>
+        <!-- This cell spans all columns including the vertical header -->
+      </tr>
+
+      <tr>
+        <th class="vertical-header">
+          <button class="collapsible">Rect with sharp corner</button>
+          <div class="content">
+            <div class="pre-scrollable">
+              <pre>
+              flowchart LR
+    id1[This is the text in the box]
+    </pre
+              >
+            </div>
+          </div>
+        </th>
+        <td>
+          <pre id="diagram53" class="mermaid">
+          flowchart LR
+    id1[This is the text in the box]
+      </pre
+          >
+        </td>
+        <td>
+          <pre id="diagram54" class="mermaid">
+          %%{init: {"look": "handDrawn"} }%%
+          flowchart LR
+    id1[This is the text in the box]
+      </pre
+          >
+        </td>
+        <td>
+          <pre id="diagram55" class="mermaid">
+          %%{init: {"handDrawn": false, "layout": "elk"} }%%
+          flowchart LR
+    id1[This is the text in the box]
+      </pre
+          >
+        </td>
+        <td>
+          <pre id="diagram56" class="mermaid">
+          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
+          flowchart LR
+    id1[This is the text in the box]
+      </pre
+          >
+        </td>
+      </tr>
+      <!-- Separator row -->
+      <tr class="separator">
+        <td colspan="5"></td>
+        <!-- This cell spans all columns including the vertical header -->
+      </tr>
+    </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/flowchart-sate.html

@@ -0,0 +1,191 @@
+<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';
+      }
+
+      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>
+    <table>
+      <tr>
+        <th></th>
+        <!-- Placeholder for the top left corner -->
+        <th>State rough</th>
+        <th>Flowchart rough</th>
+      </tr>
+      <tr>
+        <th class="vertical-header">
+          <button class="collapsible">Stadium shape</button>
+          <div class="content">
+            <div class="pre-scrollable">
+              <pre>
+      flowchart LR
+    id1([This is the text in the box])
+
+  </pre
+              >
+            </div>
+          </div>
+        </th>
+        <td>
+          <pre id="diagram1" class="mermaid">
+%%{init: {"look": "handDrawn"} }%%
+stateDiagram-v2
+    stateA
+
+      </pre
+          >
+        </td>
+        <td>
+          <pre id="diagram2" class="mermaid">
+%%{init: {"look": "handDrawn"} }%%
+flowchart LR
+    id1[[This is the text in the box]]
+
+
+      </pre
+          >
+        </td>
+      </tr>
+    </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/knsv-4442.html

@@ -0,0 +1,433 @@
+<html>
+  <head>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <link
+      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
+      rel="stylesheet"
+    />
+    <style>
+      body {
+        /* background: rgb(221, 208, 208); */
+        /* background:#333; */
+        font-family: 'Arial';
+        /* font-size: 18px !important; */
+      }
+      h1 {
+        color: grey;
+      }
+      .mermaid2 {
+        display: none;
+      }
+      .mermaid svg {
+        /* font-size: 18px !important; */
+        background-color: #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">
+stateDiagram-v2
+    [*] --> Still
+    Still --> [*]
+    Still --> Moving
+    Moving --> Still
+    Moving --> Crash
+    Crash --> [*]    </pre
+    >
+    <pre id="diagram" class="mermaid2">
+flowchart RL
+    subgraph "`one`"
+      a1 -- l1 --> a2
+      a1 -- l2 --> a2
+    end
+    </pre>
+    <pre id="diagram" class="mermaid">
+flowchart RL
+    subgraph "`one`"
+      a1 -- l1 --> a2
+      a1 -- l2 --> a2
+    end
+    </pre>
+    <pre id="diagram" class="mermaid2">
+flowchart
+id["`A root with a long text that wraps to keep the node size in check. A root with a long text that wraps to keep the node size in check`"]</pre
+    >
+    <pre id="diagram" class="mermaid2">
+flowchart LR
+    A[A text that needs to be wrapped wraps to another line]
+    B[A text that needs to be<br/>wrapped wraps to another line]
+    C["`A text that needs to be wrapped to another line`"]</pre>
+    <pre id="diagram" class="mermaid2">
+flowchart LR
+    C["`A text
+        that needs
+        to be wrapped
+        in another
+        way`"]
+  </pre
+    >
+    <pre id="diagram" class="mermaid">
+      classDiagram-v2
+        note "I love this diagram!\nDo you love it?"
+    </pre>
+    <pre id="diagram" class="mermaid">
+    stateDiagram-v2
+    State1: The state with a note with minus - and plus + in it
+    note left of State1
+      Important information! You can write
+      notes with . and  in them.
+    end note    </pre
+    >
+    <pre id="diagram" class="mermaid2">
+mindmap
+root
+  Child3(A node with an icon and with a long text that wraps to keep the node size in check)
+</pre
+    >
+    <pre id="diagram" class="mermaid2">
+      %%{init: {"theme": "forest"} }%%
+mindmap
+    id1[**Start2**<br/>end]
+      id2[**Start2**<br />end]
+      %% Another comment
+      id3[**Start2**<br>end] %% Comment
+      id4[**Start2**<br >end<br    >the very end]
+    </pre>
+    <pre id="diagram" class="mermaid2">
+mindmap
+    id1["`**Start2**
+    second line 😎 with long text that is wrapping to the next line`"]
+      id2["`Child **with bold** text`"]
+      id3["`Children of which some
+      is using *italic type of* text`"]
+      id4[Child]
+      id5["`Child
+      Row
+      and another
+      `"]
+    </pre>
+    <pre id="diagram" class="mermaid2">
+mindmap
+    id1("`**Root**`"]
+      id2["`A formatted text... with **bold** and *italics*`"]
+      id3[Regular labels works as usual]
+      id4["`Emojis and unicode works too: 🤓
+      शान्तिः سلام  和平 `"]
+
+    </pre>
+    <pre id="diagram" class="mermaid">
+%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
+flowchart TB
+  %% I could not figure out how to use double quotes in labels in Mermaid
+  subgraph ibm[IBM Espresso CPU]
+    core0[IBM PowerPC Broadway Core 0]
+    core1[IBM PowerPC Broadway Core 1]
+    core2[IBM PowerPC Broadway Core 2]
+
+    rom[16 KB ROM]
+
+    core0 --- core2
+
+    rom --> core2
+  end
+
+  subgraph amd["`**AMD** Latte GPU`"]
+    mem[Memory & I/O Bridge]
+    dram[DRAM Controller]
+    edram[32 MB EDRAM MEM1]
+    rom[512 B SEEPROM]
+
+    sata[SATA IF]
+    exi[EXI]
+
+    subgraph gx[GX]
+      sram[3 MB 1T-SRAM]
+    end
+
+    radeon[AMD Radeon R7xx GX2]
+
+    mem --- gx
+    mem --- radeon
+
+    rom --- mem
+
+    mem --- sata
+    mem --- exi
+
+    dram --- sata
+    dram --- exi
+  end
+
+  ddr3[2 GB DDR3 RAM MEM2]
+
+  mem --- ddr3
+  dram --- ddr3
+  edram --- ddr3
+
+  core1 --- mem
+
+  exi --- rtc
+  rtc{{rtc}}
+</pre
+    >
+    <pre id="diagram" class="mermaid2">
+%%{init: {"flowchart": {"defaultRenderer": "elk", "htmlLabels": false}} }%%
+flowchart TB
+  %% I could not figure out how to use double quotes in labels in Mermaid
+  subgraph ibm[IBM Espresso CPU]
+    core0[IBM PowerPC Broadway Core 0]
+    core1[IBM PowerPC Broadway Core 1]
+    core2[IBM PowerPC Broadway Core 2]
+
+    rom[16 KB ROM]
+
+    core0 --- core2
+
+    rom --> core2
+  end
+
+  subgraph amd["`**AMD** Latte GPU`"]
+    mem[Memory & I/O Bridge]
+    dram[DRAM Controller]
+    edram[32 MB EDRAM MEM1]
+    rom[512 B SEEPROM]
+
+    sata[SATA IF]
+    exi[EXI]
+
+    subgraph gx[GX]
+      sram[3 MB 1T-SRAM]
+    end
+
+    radeon[AMD Radeon R7xx GX2]
+
+    mem --- gx
+    mem --- radeon
+
+    rom --- mem
+
+    mem --- sata
+    mem --- exi
+
+    dram --- sata
+    dram --- exi
+  end
+
+  ddr3[2 GB DDR3 RAM MEM2]
+
+  mem --- ddr3
+  dram --- ddr3
+  edram --- ddr3
+
+  core1 --- mem
+
+  exi --- rtc
+  rtc{{rtc}}
+</pre
+    >
+
+    <br />
+    <pre id="diagram" class="mermaid2">
+flowchart TB
+  %% I could not figure out how to use double quotes in labels in Mermaid
+  subgraph ibm[IBM Espresso CPU]
+    core0[IBM PowerPC Broadway Core 0]
+    core1[IBM PowerPC Broadway Core 1]
+    core2[IBM PowerPC Broadway Core 2]
+
+    rom[16 KB ROM]
+
+    core0 --- core2
+
+    rom --> core2
+  end
+
+  subgraph amd[AMD Latte GPU]
+    mem[Memory & I/O Bridge]
+    dram[DRAM Controller]
+    edram[32 MB EDRAM MEM1]
+    rom[512 B SEEPROM]
+
+    sata[SATA IF]
+    exi[EXI]
+
+    subgraph gx[GX]
+      sram[3 MB 1T-SRAM]
+    end
+
+    radeon[AMD Radeon R7xx GX2]
+
+    mem --- gx
+    mem --- radeon
+
+    rom --- mem
+
+    mem --- sata
+    mem --- exi
+
+    dram --- sata
+    dram --- exi
+  end
+
+  ddr3[2 GB DDR3 RAM MEM2]
+
+  mem --- ddr3
+  dram --- ddr3
+  edram --- ddr3
+
+  core1 --- mem
+
+  exi --- rtc
+  rtc{{rtc}}
+</pre
+    >
+    <br />
+    &nbsp;
+    <pre id="diagram" class="mermaid2">
+      flowchart LR
+  B1 --be be--x B2
+  B1 --bo bo--o B3
+  subgraph Ugge
+      B2
+      B3
+      subgraph inner
+          B4
+          B5
+      end
+      subgraph inner2
+        subgraph deeper
+          C4
+          C5
+        end
+        C6
+      end
+
+      B4 --> C4
+
+      B3 -- X --> B4
+      B2 --> inner
+
+      C4 --> C5
+  end
+
+  subgraph outer
+      B6
+  end
+  B6 --> B5
+  </pre
+    >
+    <pre id="diagram" class="mermaid2">
+sequenceDiagram
+    Customer->>+Stripe: Makes a payment request
+    Stripe->>+Bank: Forwards the payment request to the bank
+    Bank->>+Customer: Asks for authorization
+    Customer->>+Bank: Provides authorization
+    Bank->>+Stripe: Sends a response with payment details
+    Stripe->>+Merchant: Sends a notification of payment receipt
+    Merchant->>+Stripe: Confirms the payment
+    Stripe->>+Customer: Sends a confirmation of payment
+    Customer->>+Merchant: Receives goods or services
+        </pre
+    >
+    <pre id="diagram" class="mermaid2">
+mindmap
+  root((mindmap))
+    Origins
+      Long history
+      ::icon(fa fa-book)
+      Popularisation
+        British popular psychology author Tony Buzan
+    Research
+      On effectiveness<br/>and features
+      On Automatic creation
+        Uses
+            Creative techniques
+            Strategic planning
+            Argument mapping
+    Tools
+      Pen and paper
+      Mermaid
+    </pre>
+    <br />
+    <pre id="diagram" class="mermaid2">
+  example-diagram
+    </pre>
+
+    <!-- <div id="cy"></div> -->
+    <!-- <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> -->
+    <!-- <script src="./mermaid-example-diagram-detector.js"></script>    -->
+    <!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script> -->
+    <!-- <script src="./mermaid.js"></script> -->
+
+    <scrpt>
+      // import mindmap from '../../packages/mermaid-mindmap/src/detector'; // import example from
+      '../../packages/mermaid-example-diagram/src/mermaid-example-diagram.core.mjs'; import mermaid
+      from './mermaid.esm.mjs'; // await mermaid.registerExternalDiagrams([example]);
+      mermaid.parseError = function (err, hash) { // console.error('Mermaid error: ', err); };
+      mermaid.initialize({ // theme: 'forest', startOnLoad: true, logLevel: 0, flowchart: { //
+      defaultRenderer: 'elk', useMaxWidth: false, // htmlLabels: false, htmlLabels: true, }, //
+      htmlLabels: false, gantt: { useMaxWidth: false, }, useMaxWidth: false, }); function callback()
+      { alert('It worked'); } mermaid.parseError = function (err, hash) { console.error('In parse
+      error:'); console.error(err); }; // mermaid.test1('first_slow', 1200).then((r) =>
+      console.info(r)); // mermaid.test1('second_fast', 200).then((r) => console.info(r)); //
+      mermaid.test1('third_fast', 200).then((r) => console.info(r)); // mermaid.test1('forth_slow',
+      1200).then((r) => console.info(r));
+    </scrpt>
+    <script
+      type="text/javascript"
+      src="https://cdn.jsdelivr.net/npm/mermaid@10.2.0/dist/mermaid.min.js"
+    ></script>
+    <script type="module">
+      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10.2.0/dist/mermaid.min.js';
+      (function () {
+        mermaid.initialize({ startOnLoad: false });
+        const elements = document.getElementsByClassName('mermaid');
+        console.log(elements);
+        let id = 0;
+        [...elements].forEach((elem) => {
+          const insertSvg = function (svgCode) {
+            elem.innerHTML = svgCode;
+          };
+
+          console.log(atob(elem.innerText));
+
+          mermaid.render(`graphDiv-${id++}`, atob(elem.innerText), insertSvg);
+        });
+      })();
+    </script>
+  </body>
+</html>

cypress/platform/knsv2.html

@@ -4,7 +4,7 @@
     <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/6.5.2/css/font-awesome.min.css"
+      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"
@@ -14,34 +14,50 @@
       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;
       }
-      .mermaid {
-        border: 1px solid #ddd;
-        margin: 10px;
-      }
+
       .mermaid2 {
         display: none;
       }
+
       .mermaid svg {
         /* font-size: 18px !important; */
-        /* background-color: #efefef; */
-        background-color: #333;
-        background-image: radial-gradient(#333 51%, transparent 91%),
-          radial-gradient(#333 51%, transparent 91%);
+
+        /* 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;
-        border: 2px solid rgb(131, 142, 205);
+        background-position:
+          0 0,
+          10px 10px;
+        background-repeat: repeat; */
       }
+
       .malware {
         position: fixed;
         bottom: 0;
@@ -57,546 +73,208 @@
         font-family: monospace;
         font-size: 72px;
       }
+      pre {
+        width: 100%;
+      }
       /* tspan {
-        font-size: 6px !important;
-      } */
+              font-size: 6px !important;
+            } */
     </style>
   </head>
+
   <body>
     <pre id="diagram" class="mermaid">
-      block-beta
-  blockArrowId<["Label"]>(right)
-  blockArrowId2<["Label"]>(left)
-  blockArrowId3<["Label"]>(up)
-  blockArrowId4<["Label"]>(down)
-  blockArrowId5<["Label"]>(x)
-  blockArrowId6<["Label"]>(y)
-  blockArrowId6<["Label"]>(x, down)
-    </pre>
-    <pre id="diagram" class="mermaid">
-block-beta
-  block:e:4
-    columns 2
-      f
-      g
-  end
+---
+  title: hello2
+  config:
+    look: handDrawn
+    layout: elk
+    elk:
+        <!-- nodePlacementStrategy: INTERACTIVE -->
+        <!-- mergeEdges: true -->
+---
+stateDiagram-v2
+    direction LR
+    accTitle: An idealized Open Source supply-chain graph
 
-    </pre>
-    <pre id="diagram" class="mermaid">
-block-beta
-  block:e:4
-    columns 2
-      f
-      g
-      h
-  end
+    %%
+    state "🟦 Importer" as author_importer
+    state "🟥 Supplier, Owner" as author_owner
+    state "🟨🟥 Maintainer, Author\n🟨 Custodian" as author
+    state "🟩 Distributor" as repository_distributor
+    state "🟦 Importer" as language_importer
+    state "🟦🟨 Packager" as language_packager
+    state "🟦🟨 OSS Steward" as language_steward
+    state "🟨 Curator" as language_curator
+    state "🟩 Distributor" as language_distributor
+    state "🟦 Contributor" as contributor
+    state "🟦 Importer" as package_importer
+    state "🟨 Patcher" as package_patcher
+    state "🟨🟦 Builder\n🟨🟦 Packager\n🟨🟦 Containerizer" as package_packager
+    state "🟨 Curator" as package_curator
+    state "🟩 Distributor" as package_distributor
+    state "🟦 Importer" as integrator_importer
+    state "🟥 Supplier, Manufacturer, Owner" as integrator_owner
+    state "🟦🟨🟥 Integrator, Developer" as integrator_developer
+    state "🟩🟨 SBOM Redactor\n🟩 Publisher" as integrator_publisher
+    state "🟦🟨 Builder" as integrator_builder
+    state "🟨 Deployer" as deployer
+    state "🟦 Vuln. Checker" as integrator_checker
+    state "🟩🟨 SBOM Redactor" as redactor
+    state "🟦 Consumer\n🟦  User" as consumer
+    state "🟦 Auditor" as auditor_internal
+    state "🟦 Auditor" as auditor_external
 
-    </pre>
-    <pre id="diagram" class="mermaid">
-block-beta
-  columns 4
-  a b c d
-  block:e:4
-    columns 2
-      f
-      g
-      h
-  end
-  i:4
+    %%
+    classDef createsSBOM stroke:red,stroke-width:3px;
+    classDef updatesSBOM stroke:yellow,stroke-width:3px;
+    classDef assemblesSBOM stroke:yellow,stroke-width:3px;
+    classDef distributesSBOM stroke:green,stroke-width:3px;
+    classDef verifiesSBOM stroke:#07f,stroke-width:3px;
 
-    </pre>
-    <pre id="diagram" class="mermaid2">
-flowchart LR
-  X-- "y" -->z
-    </pre>
-    <pre id="diagram" class="mermaid2">
-block-beta
-columns 5
-   A space B
-   A --x B
-    </pre>
-    <pre id="diagram" class="mermaid2">
-block-beta
-columns 3
-  a["A wide one"] b:2 c:2 d
-    </pre>
-    <pre id="diagram" class="mermaid2">
-block-beta
-  block:e
-      f
-  end
-    </pre>
-    <pre id="diagram" class="mermaid2">
-block-beta
-  columns 3
-  a:3
-  block:e:3
-      f
-  end
-  g
-    </pre>
-    <pre id="diagram" class="mermaid2">
-block-beta
-  columns 3
-  a:3
-  block:e:3
-      f
-      g
-  end
-  h
-  i
-  j
+    %%
+    class author_importer verifiesSBOM
+    class author_owner createsSBOM
+    class manufacturer_owner createsSBOM
+    class author assemblesSBOM
+    class package_importer verifiesSBOM
+    class package_patcher updatesSBOM
+    class package_packager assemblesSBOM
+    class package_curator distributesSBOM
+    class package_distributor distributesSBOM
+    class language_importer verifiesSBOM
+    class language_packager assemblesSBOM
+    class language_steward updatesSBOM
+    class language_curator distributesSBOM
+    class language_distributor distributesSBOM
+    class repository_distributor distributesSBOM
+    class integrator_importer verifiesSBOM
+    class integrator_owner createsSBOM
+    class integrator_developer assemblesSBOM
+    class integrator_publisher distributesSBOM
+    class integrator_builder assemblesSBOM
+    class integrator_checker verifiesSBOM
+    class deployer assemblesSBOM
+    class redactor distributesSBOM
+    class auditor_internal verifiesSBOM
+    class auditor_external verifiesSBOM
 
-    </pre>
-    <pre id="diagram" class="mermaid2">
-block-beta
-columns 3
-  a b:2
-  block:e:3
-      f
-  end
-  g h i
-    </pre>
-    <pre id="diagram" class="mermaid">
-block-beta
-columns 3
-  a b c
-  e:3
-  f g h
-    </pre>
-    <pre id="diagram" class="mermaid">
-block-beta
-columns 1
-  db(("DB"))
-  blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down)
-  block:ID
-    A
-    B["A wide one in the middle"]
-    C
-  end
-  space
-  D
-  ID --> D
-  C --> D
-  style B fill:#f9F,stroke:#333,stroke-width:4px
-    </pre>
-    <pre id="diagram" class="mermaid">
-block-beta
-  columns 5
-  A1:3
-  A2:1
-  A3
-  B1 B2 B3:3
-    </pre>
-    <pre id="diagram" class="mermaid2">
-block-beta
-  block
-    D
-    E
-  end
-  db("This is the text in the box")
-    </pre>
-    <pre id="diagram" class="mermaid2">
-block-beta
+    state "Maintainer Environment" as environment_maintainer {
+        [*] --> author_importer
+        [*] --> author
+        author_importer --> author
+        author_owner --> author
+        author       --> language_packager
+    }
 
-      block
-        D
-      end
-      A["A: I am a wide one"]
-    </pre>
-    <pre id="diagram" class="mermaid2">
-block-beta
-    A["square"]
-    B("rounded")
-    C(("circle"))
-    </pre>
-    <pre id="diagram" class="mermaid2">
-block-beta
-    A>"rect_left_inv_arrow"]
-    B{"diamond"}
-    C{{"hexagon"}}
-    </pre>
-    <pre id="diagram" class="mermaid2">
-block-beta
-    A(["stadium"])
-    </pre>
-    <pre id="diagram" class="mermaid2">
-block-beta
-    %% A[["subroutine"]]
-    %% B[("cylinder")]
-    C>"surprise"]
-    </pre>
-    <pre id="diagram" class="mermaid2">
-block-beta
-    A[/"lean right"/]
-    B[\"lean left"\]
-    C[/"trapezoid"\]
-    D[\"trapezoid"/]
-    </pre>
+    [*] --> environment_maintainer
 
-    <pre id="diagram" class="mermaid2">
-flowchart
-      B
-      style B fill:#f9F,stroke:#333,stroke-width:4px
-    </pre>
+    state "Language Ecosystem" as ecosystem_lang {
+        [*] --> language_importer
+        [*] --> language_steward
+        [*] --> language_curator
+        [*] --> language_distributor
+        language_importer --> language_distributor
+        language_importer --> language_curator
+        language_steward --> language_curator
+        language_curator --> language_distributor
+    }
 
-    <pre id="diagram" class="mermaid2">
-      flowchart LR
-      a1 -- apa --> b1
-    </pre>
+    language_packager --> ecosystem_lang
+    ecosystem_lang    --> ecosystem_lang
 
-    <pre id="diagram" class="mermaid2">
-flowchart RL
-  subgraph "`one`"
-    id
-  end
-    </pre>
-    <pre id="diagram" class="mermaid2">
-flowchart RL
-    subgraph "`one`"
-      a1 -- l1 --> a2
-      a1 -- l2 --> a2
-    end
-    </pre>
-    <pre id="diagram" class="mermaid2">
-flowchart
-id["`A root with a long text that wraps to keep the node size in check. A root with a long text that wraps to keep the node size in check`"]</pre
-    >
-    <pre id="diagram" class="mermaid2">
-flowchart LR
-    A[A text that needs to be wrapped wraps to another line]
-    B[A text that needs to be<br/>wrapped wraps to another line]
-    C["`A text that needs to be wrapped to another line`"]</pre>
-    <pre id="diagram" class="mermaid2">
-flowchart LR
-    C["`A text
-        that needs
-        to be wrapped
-        in another
-        way`"]
-  </pre
-    >
-    <pre id="diagram" class="mermaid2">
-      classDiagram-v2
-        note "I love this diagram!\nDo you love it?"
-    </pre>
-    <pre id="diagram" class="mermaid2">
-    stateDiagram-v2
-    State1: The state with a note with minus - and plus + in it
-    note left of State1
-      Important information! You can write
-      notes with . and  in them.
-    end note    </pre
-    >
-    <pre id="diagram" class="mermaid2">
-mindmap
-root
-  Child3(A node with an icon and with a long text that wraps to keep the node size in check)
-</pre
-    >
-    <pre id="diagram" class="mermaid2">
-      %%{init: {"theme": "forest"} }%%
-mindmap
-    id1[**Start2**<br/>end]
-      id2[**Start2**<br />end]
-      %% Another comment
-      id3[**Start2**<br>end] %% Comment
-      id4[**Start2**<br >end<br    >the very end]
-    </pre>
-    <pre id="diagram" class="mermaid2">
-mindmap
-    id1["`**Start2**
-    second line 😎 with long text that is wrapping to the next line`"]
-      id2["`Child **with bold** text`"]
-      id3["`Children of which some
-      is using *italic type of* text`"]
-      id4[Child]
-      id5["`Child
-      Row
-      and another
-      `"]
-    </pre>
-    <pre id="diagram" class="mermaid2">
-mindmap
-    id1("`**Root**`"]
-      id2["`A formatted text... with **bold** and *italics*`"]
-      id3[Regular labels works as usual]
-      id4["`Emojis and unicode works too: 🤓
-      शान्तिः سلام  和平 `"]
+    state "Public Collaboration Ecosystem" as ecosystem_repo {
+        [*] --> repository_distributor
+    }
 
-    </pre>
-    <pre id="diagram" class="mermaid2">
-%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
-flowchart TB
-  %% I could not figure out how to use double quotes in labels in Mermaid
-  subgraph ibm[IBM Espresso CPU]
-    core0[IBM PowerPC Broadway Core 0]
-    core1[IBM PowerPC Broadway Core 1]
-    core2[IBM PowerPC Broadway Core 2]
+    author         --> ecosystem_repo
+    ecosystem_repo --> author
 
-    rom[16 KB ROM]
+    repository_distributor --> contributor
+    contributor            --> repository_distributor
 
-    core0 --- core2
+    state "Package Ecosystem" as ecosystem_package {
+        [*] --> package_importer
+        [*] --> package_packager
+        [*] --> package_patcher
+        package_importer --> package_patcher
+        package_importer --> package_packager
+        package_patcher  --> package_packager
+        package_packager --> package_curator
+        package_packager --> package_distributor
+        package_curator  --> package_distributor
+    }
 
-    rom --> core2
-  end
+    repository_distributor --> ecosystem_package
+    language_distributor   --> ecosystem_package
+    ecosystem_package      --> ecosystem_package
 
-  subgraph amd["`**AMD** Latte GPU`"]
-    mem[Memory & I/O Bridge]
-    dram[DRAM Controller]
-    edram[32 MB EDRAM MEM1]
-    rom[512 B SEEPROM]
+    state "Integrator Environment" as environment_integrator {
+        [*] --> integrator_developer
+        [*] --> integrator_importer
+        integrator_importer  --> integrator_developer
+        integrator_owner     --> integrator_developer
+        integrator_builder   --> integrator_publisher
+        integrator_developer --> integrator_checker
+        integrator_checker   --> integrator_developer
+        auditor_internal     --> integrator_developer
+        integrator_developer --> integrator_builder
+        integrator_developer --> auditor_internal
+    }
 
-    sata[SATA IF]
-    exi[EXI]
+    repository_distributor --> environment_integrator
+    language_distributor   --> environment_integrator
+    package_distributor    --> environment_integrator
 
-    subgraph gx[GX]
-      sram[3 MB 1T-SRAM]
-    end
+    state "Production Environment" as environment_prod {
+        [*] --> deployer
+        deployer --> redactor
+    }
 
-    radeon[AMD Radeon R7xx GX2]
+    integrator_publisher --> [*]
+    integrator_developer --> environment_prod
+    integrator_builder   --> environment_prod
+    integrator_publisher --> environment_prod
 
-    mem --- gx
-    mem --- radeon
+    deployer --> auditor_external
+    deployer --> consumer
+    redactor --> consumer
 
-    rom --- mem
 
-    mem --- sata
-    mem --- exi
 
-    dram --- sata
-    dram --- exi
-  end
-
-  ddr3[2 GB DDR3 RAM MEM2]
-
-  mem --- ddr3
-  dram --- ddr3
-  edram --- ddr3
-
-  core1 --- mem
-
-  exi --- rtc
-  rtc{{rtc}}
-</pre
-    >
-    <pre id="diagram" class="mermaid2">
-%%{init: {"flowchart": {"defaultRenderer": "elk", "htmlLabels": false}} }%%
-flowchart TB
-  %% I could not figure out how to use double quotes in labels in Mermaid
-  subgraph ibm[IBM Espresso CPU]
-    core0[IBM PowerPC Broadway Core 0]
-    core1[IBM PowerPC Broadway Core 1]
-    core2[IBM PowerPC Broadway Core 2]
-
-    rom[16 KB ROM]
-
-    core0 --- core2
-
-    rom --> core2
-  end
-
-  subgraph amd["`**AMD** Latte GPU`"]
-    mem[Memory & I/O Bridge]
-    dram[DRAM Controller]
-    edram[32 MB EDRAM MEM1]
-    rom[512 B SEEPROM]
-
-    sata[SATA IF]
-    exi[EXI]
-
-    subgraph gx[GX]
-      sram[3 MB 1T-SRAM]
-    end
-
-    radeon[AMD Radeon R7xx GX2]
-
-    mem --- gx
-    mem --- radeon
-
-    rom --- mem
-
-    mem --- sata
-    mem --- exi
-
-    dram --- sata
-    dram --- exi
-  end
-
-  ddr3[2 GB DDR3 RAM MEM2]
-
-  mem --- ddr3
-  dram --- ddr3
-  edram --- ddr3
-
-  core1 --- mem
-
-  exi --- rtc
-  rtc{{rtc}}
-</pre
-    >
-
-    <br />
-    <pre id="diagram" class="mermaid2">
-flowchart TB
-  %% I could not figure out how to use double quotes in labels in Mermaid
-  subgraph ibm[IBM Espresso CPU]
-    core0[IBM PowerPC Broadway Core 0]
-    core1[IBM PowerPC Broadway Core 1]
-    core2[IBM PowerPC Broadway Core 2]
-
-    rom[16 KB ROM]
-
-    core0 --- core2
-
-    rom --> core2
-  end
-
-  subgraph amd[AMD Latte GPU]
-    mem[Memory & I/O Bridge]
-    dram[DRAM Controller]
-    edram[32 MB EDRAM MEM1]
-    rom[512 B SEEPROM]
-
-    sata[SATA IF]
-    exi[EXI]
-
-    subgraph gx[GX]
-      sram[3 MB 1T-SRAM]
-    end
-
-    radeon[AMD Radeon R7xx GX2]
-
-    mem --- gx
-    mem --- radeon
-
-    rom --- mem
-
-    mem --- sata
-    mem --- exi
-
-    dram --- sata
-    dram --- exi
-  end
-
-  ddr3[2 GB DDR3 RAM MEM2]
-
-  mem --- ddr3
-  dram --- ddr3
-  edram --- ddr3
-
-  core1 --- mem
-
-  exi --- rtc
-  rtc{{rtc}}
-</pre
-    >
-    <br />
-    &nbsp;
-    <pre id="diagram" class="mermaid2">
-      flowchart LR
-  B1 --be be--x B2
-  B1 --bo bo--o B3
-  subgraph Ugge
-      B2
-      B3
-      subgraph inner
-          B4
-          B5
-      end
-      subgraph inner2
-        subgraph deeper
-          C4
-          C5
-        end
-        C6
-      end
-
-      B4 --> C4
-
-      B3 -- X --> B4
-      B2 --> inner
-
-      C4 --> C5
-  end
-
-  subgraph outer
-      B6
-  end
-  B6 --> B5
-  </pre
-    >
-    <pre id="diagram" class="mermaid2">
-sequenceDiagram
-    Customer->>+Stripe: Makes a payment request
-    Stripe->>+Bank: Forwards the payment request to the bank
-    Bank->>+Customer: Asks for authorization
-    Customer->>+Bank: Provides authorization
-    Bank->>+Stripe: Sends a response with payment details
-    Stripe->>+Merchant: Sends a notification of payment receipt
-    Merchant->>+Stripe: Confirms the payment
-    Stripe->>+Customer: Sends a confirmation of payment
-    Customer->>+Merchant: Receives goods or services
-        </pre
-    >
-    <pre id="diagram" class="mermaid2">
-mindmap
-  root((mindmap))
-    Origins
-      Long history
-      ::icon(fa fa-book)
-      Popularisation
-        British popular psychology author Tony Buzan
-    Research
-      On effectiveness<br/>and features
-      On Automatic creation
-        Uses
-            Creative techniques
-            Strategic planning
-            Argument mapping
-    Tools
-      Pen and paper
-      Mermaid
-    </pre>
-    <br />
-    <pre id="diagram" class="mermaid2">
-  example-diagram
-    </pre>
-
-    <!-- <div id="cy"></div> -->
-    <!-- <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> -->
-    <!-- <script src="./mermaid-example-diagram-detector.js"></script>    -->
-    <!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script> -->
-    <!-- <script src="./mermaid.js"></script> -->
+      </pre>
 
     <script type="module">
-      // import mindmap from '../../packages/mermaid-mindmap/src/detector';
-      // import example from '../../packages/mermaid-example-diagram/src/mermaid-example-diagram.core.mjs';
       import mermaid from './mermaid.esm.mjs';
-      // await mermaid.registerExternalDiagrams([example]);
+      import layouts from './mermaid-layout-elk.esm.mjs';
+      mermaid.registerLayoutLoaders(layouts);
       mermaid.parseError = function (err, hash) {
-        // console.error('Mermaid error: ', err);
+        console.error('Mermaid error: ', err);
+      };
+      window.callback = function () {
+        alert('A callback was triggered');
       };
-      // mermaid.initialize({
-      //   // theme: 'forest',
-      //   startOnLoad: true,
-      //   logLevel: 0,
-      //   flowchart: {
-      //     // defaultRenderer: 'elk',
-      //     useMaxWidth: false,
-      //     // htmlLabels: false,
-      //     htmlLabels: true,
-      //   },
-      //   // htmlLabels: false,
-      //   gantt: {
-      //     useMaxWidth: false,
-      //   },
-      //   useMaxWidth: false,
-      // });
       mermaid.initialize({
-        theme: 'dark',
-        startOnLoad: true,
-        logLevel: 0,
+        // theme: 'base',
+        // 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',
+        sequence: {
+          actorFontFamily: 'courier',
+          noteFontFamily: 'courier',
+          messageFontFamily: 'courier',
+        },
+        fontSize: 12,
+        logLevel: 3,
+        securityLevel: 'loose',
       });
       function callback() {
         alert('It worked');
@@ -605,10 +283,6 @@ mindmap
         console.error('In parse error:');
         console.error(err);
       };
-      // mermaid.test1('first_slow', 1200).then((r) => console.info(r));
-      // mermaid.test1('second_fast', 200).then((r) => console.info(r));
-      // mermaid.test1('third_fast', 200).then((r) => console.info(r));
-      // mermaid.test1('forth_slow', 1200).then((r) => console.info(r));
     </script>
   </body>
 </html>

cypress/platform/knsv3.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

cypress/platform/viewer.js

@@ -1,7 +1,7 @@
-import mermaid from './mermaid.esm.mjs';
-import flowchartELK from './mermaid-flowchart-elk.esm.mjs';
 import externalExample from './mermaid-example-diagram.esm.mjs';
+import layouts from './mermaid-layout-elk.esm.mjs';
 import zenUml from './mermaid-zenuml.esm.mjs';
+import mermaid from './mermaid.esm.mjs';
 
 function b64ToUtf8(str) {
   return decodeURIComponent(escape(window.atob(str)));
@@ -46,7 +46,9 @@ const contentLoaded = async function () {
       document.getElementsByTagName('body')[0].appendChild(div);
     }
 
-    await mermaid.registerExternalDiagrams([externalExample, zenUml, flowchartELK]);
+    await mermaid.registerExternalDiagrams([externalExample, zenUml]);
+
+    mermaid.registerLayoutLoaders(layouts);
     mermaid.initialize(graphObj.mermaid);
     await mermaid.run();
   }
@@ -132,7 +134,7 @@ if (typeof document !== 'undefined') {
   window.addEventListener(
     'load',
     function () {
-      if (this.location.href.match('xss.html')) {
+      if (/xss.html/.exec(this.location.href)) {
         this.console.log('Using api');
         void contentLoadedApi().finally(markRendered);
       } else {

cypress/platform/xss25.html

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

cypress/support/e2e.js

@@ -15,6 +15,7 @@
 
 import '@cypress/code-coverage/support';
 import '@applitools/eyes-cypress/commands';
+import '@argos-ci/cypress/support';
 // Import commands.js using ES2015 syntax:
 import './commands';
 

cypress/tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "target": "es2020",
     "lib": ["es2020", "dom"],
-    "types": ["cypress", "node"],
+    "types": ["cypress", "node", "@argos-ci/cypress/dist/support.d.ts"],
     "allowImportingTsExtensions": true,
     "noEmit": true
   },

demos/architecture.html

@@ -0,0 +1,256 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Architecture Mermaid Quick Test Page</title>
+    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
+    <style>
+      div.mermaid {
+        /* font-family: 'trebuchet ms', verdana, arial; */
+        font-family: 'Courier New', Courier, monospace !important;
+      }
+    </style>
+  </head>
+
+  <body>
+    <h1>Architecture diagram demo</h1>
+    <h2>Simple diagram with groups</h2>
+    <pre class="mermaid">
+      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
+    </pre>
+    <hr />
+
+    <h2>Groups within groups</h2>
+    <pre class="mermaid">
+      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
+    </pre>
+    <hr />
+
+    <h2>Default icon (?) from unknown icon name</h2>
+    <pre class="mermaid">
+      architecture-beta
+        service unknown(iconnamedoesntexist)[Unknown Icon]
+    </pre>
+    <hr />
+
+    <h2>Split Direction</h2>
+    <pre class="mermaid">
+      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
+    </pre>
+    <hr />
+
+    <h2>Arrow Tests</h2>
+    <pre class="mermaid">
+      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
+    </pre>
+    <pre class="mermaid">
+      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
+
+        servT:L <--> T:servL
+        servB:L <--> B:servL
+        servT:R <--> T:servR
+        servB:R <--> B:servR
+    </pre>
+    <hr />
+
+    <h2>Group Edges</h2>
+    <pre class="mermaid">
+      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}
+  </pre
+    >
+    <hr />
+
+    <h2>Edge Label Test</h2>
+    <pre class="mermaid">
+      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
+    </pre>
+    <pre class="mermaid">
+      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 that is Long]- R:servL
+        servC:R -[Label that is Long]- L:servR
+        servC:T -[Label that is Long]- B:servT
+        servC:B -[Label that is Long]- T:servB
+
+        servL:T -[Label that is Long]- L:servT
+        servL:B -[Label that is Long]- L:servB
+        servR:T -[Label that is Long]- R:servT
+        servR:B -[Label that is Long]- R:servB
+    </pre>
+
+    <hr />
+    <h2>Junction Demo</h2>
+    <pre class="mermaid">
+      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
+    </pre>
+    <hr />
+
+    <h2>Junction Demo Groups</h2>
+    <pre class="mermaid">
+      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}
+    </pre>
+    <hr />
+
+    <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.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()
+            ),
+        },
+      ]);
+    </script>
+  </body>
+</html>

demos/er.html

@@ -125,6 +125,35 @@
     </pre>
     <hr />
 
+    <pre class="mermaid">
+    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"
+    </pre>
+    <hr />
+
     <pre class="mermaid">
     erDiagram
       _customer_order {

demos/index.html

@@ -88,6 +88,9 @@
       <li>
         <h2><a href="./block.html">Layered Blocks</a></h2>
       </li>
+      <li>
+        <h2><a href="./architecture.html">Architecture</a></h2>
+      </li>
     </ul>
   </body>
 </html>

demos/sequence.html

@@ -238,6 +238,17 @@
       Alice-xJohn: Hello John, how are you?
       John--xAlice: Great!
     </pre>
+
+    <hr />
+
+    <pre class="mermaid">
+    sequenceDiagram
+      participant Alice
+      participant Bob
+      Alice<<->>Bob: Hello!
+      Alice<<->>Bob: Wow, we said that at the same time!
+      Bob<<-->>Alice: Bidirectional Arrows are so cool
+    </pre>
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
       mermaid.initialize({

docker-compose.yml

@@ -1,4 +1,3 @@
-version: '3.9'
 services:
   mermaid:
     build:
@@ -8,14 +7,12 @@ services:
     tty: true
     working_dir: /mermaid
     mem_limit: '8G'
-    entrypoint: docker-entrypoint.sh
-    environment:
-      - NODE_OPTIONS=--max_old_space_size=8192
     volumes:
       - ./:/mermaid
       - root_cache:/root/.cache
       - root_local:/root/.local
       - root_npm:/root/.npm
+      - /tmp:/tmp
     ports:
       - 9000:9000
       - 3333:3333

docker-entrypoint.sh

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

docs/community/contributing.md

@@ -56,7 +56,7 @@ The following commands must be sufficient enough to start with:
 
 ```bash
 curl -fsSL https://get.pnpm.io/install.sh | sh -
-pnpm env use --global 18
+pnpm env use --global 20
 ```
 
 You may also need to reload `.shrc` or `.bashrc` afterwards.
@@ -370,9 +370,9 @@ If the users have no way to know that things have changed, then you haven't real
 Likewise, if users don't know that there is a new feature that you've implemented, it will forever remain unknown and unused.
 
 The documentation has to be updated for users to know that things have been changed and added!
-If you are adding a new feature, add `(v10.8.0+)` in the title or description. It will be replaced automatically with the current version number when the release happens.
+If you are adding a new feature, add `(v<MERMAID_RELEASE_VERSION>+)` in the title or description. It will be replaced automatically with the current version number when the release happens.
 
-eg: `# Feature Name (v10.8.0+)`
+eg: `# Feature Name (v<MERMAID_RELEASE_VERSION>+)`
 
 We know it can sometimes be hard to code _and_ write user documentation.
 

docs/config/math.md

@@ -84,3 +84,13 @@ Example with legacy mode enabled (the latest version of KaTeX's stylesheet can b
   </body>
 </html>
 ```
+
+## Handling Rendering Differences
+
+Due to differences between default fonts across operating systems and browser's MathML implementations, inconsistent results can be seen across platforms. If having consistent results are important, or the most optimal rendered results are desired, `forceLegacyMathML` can be enabled in the config.
+
+This option will always use KaTeX's stylesheet instead of only when MathML is not supported (as with `legacyMathML`). Note that only `forceLegacyMathML` needs to be set.
+
+If including KaTeX's stylesheet is not a concern, enabling this option is recommended to avoid scenarios where no MathML implementation within a browser provides the desired output (as seen below).
+
+![Image showing differences between Browsers](img/mathMLDifferences.png)

docs/config/setup/README.md

@@ -10,4 +10,4 @@
 
 - [config](modules/config.md)
 - [defaultConfig](modules/defaultConfig.md)
-- [mermaidAPI](modules/mermaidAPI.md)
+- [mermaid](modules/mermaid.md)