Merge branch 'sidv/splitELK' into sidv/diagramPriority

* sidv/splitELK:
  5043 Move ELK to standalone package

.build/common.ts

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

.build/jisonTransformer.ts

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

@@ -1,6 +1,7 @@
 import { load, JSON_SCHEMA } from 'js-yaml';
 import assert from 'node:assert';
 import Ajv2019, { type JSONSchemaType } from 'ajv/dist/2019.js';
+
 import type { MermaidConfig, BaseDiagramConfig } from '../packages/mermaid/src/config.type.js';
 
 /**
@@ -23,8 +24,6 @@ const MERMAID_CONFIG_DIAGRAM_KEYS = [
   'gitGraph',
   'c4',
   'sankey',
-  'block',
-  'packet',
 ] as const;
 
 /**

.build/langium-cli.d.ts

@@ -0,0 +1,9 @@
+declare module 'langium-cli' {
+  export interface GenerateOptions {
+    file?: string;
+    mode?: 'development' | 'production';
+    watch?: boolean;
+  }
+
+  export function generate(options: GenerateOptions): Promise<boolean>;
+}

.build/types.ts

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

.changeset/README.md

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

.changeset/config.json

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

.commitlintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["@commitlint/config-conventional"]
+}

.cspell/code-terms.txt

@@ -1,148 +0,0 @@
-# This file contains coding related terms
-ALPHANUM
-antiscript
-APPLYCLASS
-ARROWHEADSTYLE
-ARROWTYPE
-autonumber
-axisl-line
-Bigdecimal
-birel
-BIREL
-bqstring
-BQUOTE
-bramp
-BRKT
-brotli
-callbackargs
-callbackname
-classdef
-classdefid
-classentity
-classname
-COLONSEP
-COMPOSIT_STATE
-concat
-controlx
-controly
-CSSCLASS
-CYLINDEREND
-CYLINDERSTART
-DAGA
-datakey
-DEND
-descr
-distp
-distq
-divs
-docref
-DOMID
-doublecircle
-DOUBLECIRCLEEND
-DOUBLECIRCLESTART
-DQUOTE
-DSTART
-edgesep
-EMPTYSTR
-enddate
-ERDIAGRAM
-flatmap
-forwardable
-frontmatter
-funs
-gantt
-GENERICTYPE
-getBoundarys
-grammr
-graphtype
-iife
-interp
-introdcued
-INVTRAPEND
-INVTRAPSTART
-JDBC
-jison
-Kaufmann
-keyify
-LABELPOS
-LABELTYPE
-lcov
-LEFTOF
-Lexa
-linebreak
-LINETYPE
-LINKSTYLE
-LLABEL
-loglevel
-LOGMSG
-lookaheads
-mdast
-metafile
-minlen
-Mstartx
-MULT
-NODIR
-NSTR
-outdir
-Qcontrolx
-reinit
-rels
-reqs
-rewritelinks
-rgba
-RIGHTOF
-roughjs
-sankey
-sequencenumber
-shrc
-signaltype
-someclass
-SPACELINE
-SPACELIST
-STADIUMEND
-STADIUMSTART
-startdate
-startx
-starty
-STMNT
-stopx
-stopy
-strikethrough
-stringifying
-struct
-STYLECLASS
-STYLEDEF
-STYLEOPTS
-subcomponent
-subcomponents
-subconfig
-SUBROUTINEEND
-SUBROUTINESTART
-Subschemas
-substr
-SVGG
-SVGSVG
-TAGEND
-TAGSTART
-techn
-TESTSTR
-TEXTDATA
-TEXTLENGTH
-titlevalue
-topbar
-TRAPEND
-TRAPSTART
-treemap
-ts-nocheck
-tsdoc
-typeof
-typestr
-unshift
-verifymethod
-VERIFYMTHD
-WARN_DOCSDIR_DOESNT_MATCH
-xhost
-yaxis
-yfunc
-yytext
-zenuml

.cspell/contributors.txt

@@ -1,9 +0,0 @@
-# Contributors to mermaidjs, one per line
-Ashish Jain
-cpettitt
-Dong Cai
-Nikolay Rozhkov
-Peng Xiao
-Per Brolin
-subhash-halder
-Vinod Sidharth

.cspell/cspell.config.yaml

@@ -1,52 +0,0 @@
-# yaml-language-server: $schema=https://raw.githubusercontent.com/streetsidesoftware/cspell/main/cspell.schema.json
-
-$schema: https://raw.githubusercontent.com/streetsidesoftware/cspell/main/cspell.schema.json
-
-dictionaryDefinitions:
-  - name: code-terms
-    path: ./code-terms.txt
-    description: A list of coding related terms.
-    addWords: true
-  - name: mermaid-terms
-    path: ./mermaid-terms.txt
-    description: A list of terms related to the mermaid project.
-    addWords: true
-  - name: misc-terms
-    path: ./misc-terms.txt
-    description: A list of miscellaneous terms.
-  - name: 3rd-party-terms
-    path: ./libraries.txt
-    description: A list of 3rd party terms from dependencies.
-    addWords: true
-  - name: contributors
-    path: ./contributors.txt
-    description: A list of contributors to the mermaid project.
-    type: 'W'
-    addWords: true
-
-  # cspell:disable
-  - name: suggestions
-    words:
-      - none
-    suggestWords:
-      - seperator:separator
-      - vertice:vertex
-  # cspell:enable
-
-patterns:
-  - name: character-set-cyrillic
-    pattern: '/\p{Script_Extensions=Cyrillic}+/gu'
-  - name: svg-block
-    pattern: '<svg[\S\s]+?</svg>'
-  - name: json-property
-    pattern: '/"[\w/@-]+":/g'
-
-dictionaries:
-  - mermaid-terms
-  - suggestions
-  - contributors
-
-ignorePaths:
-  - '*.txt' # do not spell check local dictionaries
-
-# cspell:dictionary misc-terms

.cspell/libraries.txt

@@ -1,76 +0,0 @@
-# Add third party library terms below
-acyclicer
-Antlr
-Appli
-applitools
-Asciidoctor
-Astah
-automerge
-bilkent
-bisheng
-Blazor
-codedoc
-Codemia
-codepaths
-csstree
-cytoscape
-cytoscape-cose-bilkent
-dagre
-dagre-d3
-Deepdwn
-Docsify
-Docsy
-Doctave
-DokuWiki
-dompurify
-elkjs
-fontawesome
-Foswiki
-Gitea
-graphlib
-Grav
-iconify
-Inkdrop
-jiti
-jsdocs
-jsfiddle
-jsonschema
-katex
-khroma
-langium
-mathml
-matplotlib
-mdbook
-Mermerd
-mkdocs
-Nextra
-nodenext
-npmjs
-pageview
-pathe
-phpbb
-pixelmatch
-Podlite
-presetAttributify
-pyplot
-redmine
-rehype
-roughjs
-rscratch
-shiki
-Slidev
-sparkline
-sphinxcontrib
-ssim
-stylis
-Swimm
-tsbuildinfo
-tseslint
-Tuleap
-Typora
-unocss
-unplugin
-unstub
-vite
-vitest
-Zune

.cspell/mermaid-terms.txt

@@ -1,41 +0,0 @@
-Adamiecki
-arrowend
-bmatrix
-braintree
-catmull
-compositTitleSize
-doublecircle
-elems
-gantt
-gitgraph
-gzipped
-handDrawn
-knsv
-Knut
-marginx
-marginy
-Markdownish
-mermaidjs
-mindmap
-mindmaps
-mrtree
-multigraph
-nodesep
-NOTEGROUP
-Pinterest
-rankdir
-ranksep
-rect
-rects
-sandboxed
-siebling
-statediagram
-substate
-Sveidqvist
-unfixable
-Viewbox
-viewports
-visio
-vitepress
-xlink
-xychart

.cspell/misc-terms.txt

@@ -1,6 +0,0 @@
-BRANDES
-circo
-handDrawn
-KOEPF
-neato
-newbranch

.esbuild/build.ts

@@ -1,15 +1,14 @@
 import { build } from 'esbuild';
 import { mkdir, writeFile } from 'node:fs/promises';
+import { MermaidBuildOptions, defaultOptions, getBuildConfig } from './util.js';
 import { packageOptions } from '../.build/common.js';
 import { generateLangium } from '../.build/generateLangium.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: MermaidBuildOptions = { ...defaultOptions, entryName } as const;
-  const buildConfigs: MermaidBuildOptions[] = [
+  const commonOptions = { ...defaultOptions, entryName } as const;
+  const buildConfigs = [
     // package.mjs
     { ...commonOptions },
     // package.min.mjs
@@ -36,11 +35,11 @@ const buildPackage = async (entryName: keyof typeof packageOptions) => {
 
   if (shouldVisualize) {
     for (const { metafile } of results) {
-      if (!metafile?.outputs) {
+      if (!metafile) {
         continue;
       }
       const fileName = Object.keys(metafile.outputs)
-        .find((file) => !file.includes('chunks') && file.endsWith('js'))
+        .filter((file) => !file.includes('chunks') && file.endsWith('js'))[0]
         .replace('dist/', '');
       // Upload metafile into https://esbuild.github.io/analyze/
       await writeFile(`stats/${fileName}.meta.json`, JSON.stringify(metafile));
@@ -49,16 +48,15 @@ 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', { recursive: true });
+  await mkdir('stats').catch(() => {});
   const packageNames = Object.keys(packageOptions) as (keyof typeof packageOptions)[];
-  // it should build `parser` before `mermaid` because it's a dependency
+  // it should build `parser` before `mermaid` because it's a dependecy
   for (const pkg of packageNames) {
     await buildPackage(pkg).catch(handler);
   }

.esbuild/jisonPlugin.ts

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

.esbuild/server.ts

@@ -1,47 +1,48 @@
-/* eslint-disable no-console */
-import chokidar from 'chokidar';
-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 type { NextFunction, Request, Response } from 'express';
+import cors from 'cors';
+import { getBuildConfig, defaultOptions } from './util.js';
+import { context } from 'esbuild';
+import chokidar from 'chokidar';
 import { generateLangium } from '../.build/generateLangium.js';
-import { defaultOptions, getBuildConfig } from './util.js';
+import { packageOptions } from '../.build/common.js';
 
-const configs = Object.values(packageOptions).map(({ packageName }) =>
-  getBuildConfig({ ...defaultOptions, minify: false, core: false, entryName: packageName })
+const parserCtx = await context(
+  getBuildConfig({ ...defaultOptions, minify: false, core: false, entryName: 'parser' })
 );
-const mermaidIIFEConfig = getBuildConfig({
-  ...defaultOptions,
-  minify: false,
-  core: false,
-  entryName: 'mermaid',
-  format: 'iife',
-});
-configs.push(mermaidIIFEConfig);
-
-const contexts = await Promise.all(
-  configs.map(async (config) => ({ config, context: await context(config) }))
+const mermaidCtx = await context(
+  getBuildConfig({ ...defaultOptions, minify: false, core: false, entryName: 'mermaid' })
 );
+const mermaidIIFECtx = await context(
+  getBuildConfig({
+    ...defaultOptions,
+    minify: false,
+    core: false,
+    entryName: 'mermaid',
+    format: 'iife',
+  })
+);
+const externalCtx = await context(
+  getBuildConfig({
+    ...defaultOptions,
+    minify: false,
+    core: false,
+    entryName: 'mermaid-example-diagram',
+  })
+);
+const zenumlCtx = await context(
+  getBuildConfig({ ...defaultOptions, minify: false, core: false, entryName: 'mermaid-zenuml' })
+);
+const contexts = [parserCtx, mermaidCtx, mermaidIIFECtx, externalCtx, zenumlCtx];
 
-let rebuildCounter = 1;
 const rebuildAll = async () => {
-  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);
+  console.time('Rebuild time');
+  await Promise.all(contexts.map((ctx) => ctx.rebuild()));
+  console.timeEnd('Rebuild time');
 };
 
 let clients: { id: number; response: Response }[] = [];
-function eventsHandler(request: Request, response: Response) {
+function eventsHandler(request: Request, response: Response, next: NextFunction) {
   const headers = {
     'Content-Type': 'text/event-stream',
     Connection: 'keep-alive',
@@ -58,20 +59,19 @@ function eventsHandler(request: Request, response: Response) {
   });
 }
 
-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);
   }
-  // eslint-disable-next-line @typescript-eslint/no-misused-promises
-  timeoutID = setTimeout(async () => {
+  timeoutId = setTimeout(async () => {
     await rebuildAll();
     sendEventsToAll();
-    timeoutID = undefined;
+    timeoutId = undefined;
   }, 100);
 }
 
@@ -88,16 +88,15 @@ 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;
       }
-      console.log(`${path} changed. Rebuilding...`);
-      if (path.endsWith('.langium')) {
+      if (/\.langium$/.test(path)) {
         await generateLangium();
       }
+      console.log(`${path} changed. Rebuilding...`);
       handleFileChange();
     });
 
@@ -114,4 +113,4 @@ async function createServer() {
   });
 }
 
-void createServer();
+createServer();

.esbuild/util.ts

@@ -8,7 +8,7 @@ import { jisonPlugin } from './jisonPlugin.js';
 
 const __dirname = fileURLToPath(new URL('.', import.meta.url));
 
-export interface MermaidBuildOptions extends BuildOptions {
+export interface MermaidBuildOptions {
   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);
-  const output: BuildOptions = buildOptions({
+  let output: BuildOptions = buildOptions({
     absWorkingDir: resolve(__dirname, `../packages/${packageName}`),
     entryPoints: {
       [outFileName]: `src/${file}`,
@@ -65,9 +65,6 @@ export const getBuildConfig = (options: MermaidBuildOptions): BuildOptions => {
     minify,
     logLevel: 'info',
     chunkNames: `chunks/${outFileName}/[name]-[hash]`,
-    define: {
-      'import.meta.vitest': 'undefined',
-    },
   });
 
   if (core) {

.eslintignore

@@ -0,0 +1,11 @@
+dist/**
+.github/**
+docs/Setup.md
+cypress.config.js
+cypress/plugins/index.js
+coverage
+*.json
+node_modules
+
+# autogenereated by langium-cli
+generated/

.eslintrc.cjs

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

@@ -3,9 +3,9 @@ contact_links:
   - name: GitHub Discussions
     url: https://github.com/mermaid-js/mermaid/discussions
     about: Ask the Community questions or share your own graphs in our discussions.
-  - name: Discord
-    url: https://discord.gg/AgrbSrBer3
-    about: Join our Community on Discord for Help and a casual chat.
+  - name: Slack
+    url: https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE
+    about: Join our Community on Slack for Help and a casual chat.
   - name: Documentation
     url: https://mermaid.js.org
     about: Read our documentation for all that Mermaid.js can offer.

.github/codecov.yaml

@@ -15,4 +15,3 @@ coverage:
       # Turing off for now as code coverage isn't stable and causes unnecessary build failures.
       # default:
       #   threshold: 2%
-    patch: off

.github/lychee.toml

@@ -34,17 +34,8 @@ exclude = [
 # Don't check files that are generated during the build via `pnpm docs:code`
 'packages/mermaid/src/docs/config/setup/*',
 
-# Ignore Discord invite
-"https://discord.gg",
-
-# BundlePhobia has frequent downtime
-"https://bundlephobia.com",
-
-# Chrome webstore migration issue. Temporary
-"https://chromewebstore.google.com",
-
-# Drupal 403
-"https://(www.)?drupal.org"
+# Ignore slack invite
+"https://join.slack.com/"
 ]
 
 # Exclude all private IPs from checking.

.github/pull_request_template.md

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

.github/release-drafter.yml

@@ -0,0 +1,36 @@
+name-template: '$NEXT_PATCH_VERSION'
+tag-template: '$NEXT_PATCH_VERSION'
+categories:
+  - title: '🚨 **Breaking Changes**'
+    labels:
+      - 'Breaking Change'
+  - title: '🚀 Features'
+    labels:
+      - 'Type: Enhancement'
+      - 'feature' # deprecated, new PRs shouldn't have this
+  - title: '🐛 Bug Fixes'
+    labels:
+      - 'Type: Bug / Error'
+      - 'fix' # deprecated, new PRs shouldn't have this
+  - title: '🧰 Maintenance'
+    labels:
+      - 'Type: Other'
+      - 'chore' # deprecated, new PRs shouldn't have this
+  - title: '⚡️ Performance'
+    labels:
+      - 'Type: Performance'
+  - title: '📚 Documentation'
+    labels:
+      - 'Area: Documentation'
+change-template: '- $TITLE (#$NUMBER) @$AUTHOR'
+sort-by: title
+sort-direction: ascending
+exclude-labels:
+  - 'Skip changelog'
+no-changes-template: 'This release contains minor changes and bugfixes.'
+template: |
+  # Release Notes
+
+  $CHANGES
+
+  🎉 **Thanks to all contributors helping with this release!** 🎉

.github/workflows/autofix.yml

@@ -1,43 +0,0 @@
-name: autofix.ci # needed to securely identify the workflow
-
-on:
-  pull_request:
-    branches-ignore:
-      - 'renovate/**'
-permissions:
-  contents: read
-
-jobs:
-  autofix:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-
-      - uses: pnpm/action-setup@v4
-        # uses version from "packageManager" field in package.json
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          cache: pnpm
-          node-version-file: '.node-version'
-
-      - name: Install Packages
-        run: |
-          pnpm install --frozen-lockfile
-        env:
-          CYPRESS_CACHE_FOLDER: .cache/Cypress
-
-      - name: 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

.github/workflows/build-docs.yml

@@ -18,13 +18,13 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v2
 
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
           cache: pnpm
-          node-version-file: '.node-version'
+          node-version: 18
 
       - name: Install Packages
         run: pnpm install --frozen-lockfile

.github/workflows/build.yml

@@ -15,17 +15,20 @@ permissions:
 jobs:
   build-mermaid:
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [18.x]
     steps:
       - uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v2
         # uses version from "packageManager" field in package.json
 
-      - name: Setup Node.js
+      - name: Setup Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v4
         with:
           cache: pnpm
-          node-version-file: '.node-version'
+          node-version: ${{ matrix.node-version }}
 
       - name: Install Packages
         run: |
@@ -37,13 +40,13 @@ jobs:
         run: pnpm run build
 
       - name: Upload Mermaid Build as Artifact
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v3
         with:
           name: mermaid-build
           path: packages/mermaid/dist
 
       - name: Upload Mermaid Mindmap Build as Artifact
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v3
         with:
           name: mermaid-mindmap-build
           path: packages/mermaid-mindmap/dist

.github/workflows/codeql.yml

@@ -33,7 +33,7 @@ jobs:
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@v3
+        uses: github/codeql-action/init@v2
         with:
           config-file: ./.github/codeql/codeql-config.yml
           languages: ${{ matrix.language }}
@@ -45,7 +45,7 @@ jobs:
       # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
       # If this step fails, then you should remove it and run the build manually (see below)
       - name: Autobuild
-        uses: github/codeql-action/autobuild@v3
+        uses: github/codeql-action/autobuild@v2
 
       # ℹ️ 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 +59,4 @@ jobs:
       #   make release
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v3
+        uses: github/codeql-action/analyze@v2

.github/workflows/dependency-review.yml

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

.github/workflows/e2e-applitools.yml

@@ -21,24 +21,24 @@ env:
 jobs:
   e2e-applitools:
     runs-on: ubuntu-latest
-    container:
-      image: cypress/browsers:node-20.11.0-chrome-121.0.6167.85-1-ff-120.0-edge-121.0.2277.83-1
-      options: --user 1001
+    strategy:
+      matrix:
+        node-version: [18.x]
     steps:
       - if: ${{ ! env.USE_APPLI }}
         name: Warn if not using Applitools
         run: |
-          echo "::error,title=Not using Applitools::APPLITOOLS_API_KEY is empty, disabling Applitools for this run."
+          echo "::error,title=Not using Applitols::APPLITOOLS_API_KEY is empty, disabling Applitools for this run."
 
       - uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v2
         # uses version from "packageManager" field in package.json
 
-      - name: Setup Node.js
+      - name: Setup Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v4
         with:
-          node-version-file: '.node-version'
+          node-version: ${{ matrix.node-version }}
 
       - if: ${{ env.USE_APPLI }}
         name: Notify applitools of new batch

.github/workflows/e2e.yml

@@ -2,142 +2,52 @@ name: E2E
 
 on:
   push:
-    branches-ignore:
-      - 'gh-readonly-queue/**'
   pull_request:
   merge_group:
 
 permissions:
   contents: read
 
-env:
-  # For PRs and MergeQueues, the target commit is used, and for push events to non-develop branches, github.event.previous is used if available. Otherwise, 'develop' is used.
-  targetHash: >-
-    ${{ 
-      github.event.pull_request.base.sha || 
-      github.event.merge_group.base_sha || 
-      (
-        (
-          (github.event_name == 'push' && github.ref == 'refs/heads/develop') || 
-          github.event.before == '0000000000000000000000000000000000000000'
-        ) && 'develop'
-      ) || 
-      github.event.before
-    }}
-  shouldRunParallel: ${{ secrets.CYPRESS_RECORD_KEY != '' && !(github.event_name == 'push' && github.ref == 'refs/heads/develop') }}
 jobs:
-  cache:
-    runs-on: ubuntu-latest
-    container:
-      image: cypress/browsers:node-20.11.0-chrome-121.0.6167.85-1-ff-120.0-edge-121.0.2277.83-1
-      options: --user 1001
-    steps:
-      - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v4
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version-file: '.node-version'
-      - name: Cache snapshots
-        id: cache-snapshot
-        uses: actions/cache@v4
-        with:
-          save-always: true
-          path: ./cypress/snapshots
-          key: ${{ runner.os }}-snapshots-${{ env.targetHash }}
-
-      # If a snapshot for a given Hash is not found, we checkout that commit, run the tests and cache the snapshots.
-      - name: Switch to base branch
-        if: ${{ steps.cache-snapshot.outputs.cache-hit != 'true' }}
-        uses: actions/checkout@v4
-        with:
-          ref: ${{ env.targetHash }}
-
-      - name: Install dependencies
-        if: ${{ steps.cache-snapshot.outputs.cache-hit != 'true' }}
-        uses: cypress-io/github-action@v6
-        with:
-          # just perform install
-          runTests: false
-
-      - name: Calculate bundle size
-        if: ${{ steps.cache-snapshot.outputs.cache-hit != 'true'}}
-        run: |
-          pnpm run build:viz
-          mkdir -p cypress/snapshots/stats/base
-          mv stats cypress/snapshots/stats/base
-
   e2e:
     runs-on: ubuntu-latest
-    container:
-      image: cypress/browsers:node-20.11.0-chrome-121.0.6167.85-1-ff-120.0-edge-121.0.2277.83-1
-      options: --user 1001
-    needs: cache
     strategy:
       fail-fast: false
       matrix:
+        node-version: [18.x]
         containers: [1, 2, 3, 4]
     steps:
       - uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v2
         # uses version from "packageManager" field in package.json
 
-      - name: Setup Node.js
+      - name: Setup Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v4
         with:
-          node-version-file: '.node-version'
-
-      # These cached snapshots are downloaded, providing the reference snapshots.
-      - name: Cache snapshots
-        id: cache-snapshot
-        uses: actions/cache/restore@v4
-        with:
-          path: ./cypress/snapshots
-          key: ${{ runner.os }}-snapshots-${{ env.targetHash }}
-
-      - name: Install dependencies
-        uses: cypress-io/github-action@v6
-        with:
-          runTests: false
-
-      - name: Output size diff
-        if: ${{ matrix.containers == 1 }}
-        run: |
-          pnpm run build:viz
-          mv stats cypress/snapshots/stats/head
-          echo '## Bundle size difference' >> "$GITHUB_STEP_SUMMARY"
-          echo '' >> "$GITHUB_STEP_SUMMARY"
-          npx tsx scripts/size.ts >> "$GITHUB_STEP_SUMMARY"
+          node-version: ${{ matrix.node-version }}
 
       # 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@v4
         id: cypress
         # If CYPRESS_RECORD_KEY is set, run in parallel on all containers
         # Otherwise (e.g. if running from fork), we run on a single container only
-        if: ${{ env.shouldRunParallel == 'true' || ( matrix.containers == 1 ) }}
+        if: ${{ ( env.CYPRESS_RECORD_KEY != '' ) || ( matrix.containers == 1 ) }}
         with:
-          install: false
           start: pnpm run dev:coverage
           wait-on: 'http://localhost:9000'
-          browser: chrome
           # Disable recording if we don't have an API key
           # e.g. if this action was run from a fork
-          record: ${{ env.shouldRunParallel == 'true' }}
-          parallel: ${{ env.shouldRunParallel == 'true' }}
+          record: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
+          parallel: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
         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@v3
         # 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:
@@ -147,3 +57,9 @@ jobs:
           fail_ci_if_error: false
           verbose: true
           token: 6845cc80-77ee-4e17-85a1-026cd95e0766
+      - name: Upload Artifacts
+        uses: actions/upload-artifact@v3
+        if: ${{ failure() && steps.cypress.conclusion == 'failure' }}
+        with:
+          name: error-snapshots
+          path: cypress/snapshots/**/__diff_output__/*

.github/workflows/link-checker.yml

@@ -29,14 +29,14 @@ jobs:
       - uses: actions/checkout@v4
 
       - name: Restore lychee cache
-        uses: actions/cache@v4
+        uses: actions/cache@v3
         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@v1.8.0
         with:
           args: >-
             --config .github/lychee.toml

.github/workflows/lint.yml

@@ -16,17 +16,20 @@ permissions:
 jobs:
   lint:
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [18.x]
     steps:
       - uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v2
         # uses version from "packageManager" field in package.json
 
-      - name: Setup Node.js
+      - name: Setup Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v4
         with:
           cache: pnpm
-          node-version-file: '.node-version'
+          node-version: ${{ matrix.node-version }}
 
       - name: Install Packages
         run: |
@@ -82,3 +85,15 @@ jobs:
         working-directory: ./packages/mermaid
         continue-on-error: ${{ github.event_name == 'push' }}
         run: pnpm run docs:verify
+
+      - name: Rebuild Docs
+        if: ${{ steps.verifyDocs.outcome == 'failure' && github.event_name == 'push' }}
+        working-directory: ./packages/mermaid
+        run: pnpm run docs:build
+
+      - name: Commit changes
+        uses: EndBug/add-and-commit@v9
+        if: ${{ steps.verifyDocs.outcome == 'failure' && github.event_name == 'push' }}
+        with:
+          message: 'Update docs'
+          add: 'docs/*'

.github/workflows/pr-labeler.yml

@@ -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@v5
         with:
           config-name: pr-labeler.yml
           disable-autolabeler: false

.github/workflows/publish-docs.yml

@@ -25,25 +25,25 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v2
 
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
           cache: pnpm
-          node-version-file: '.node-version'
+          node-version: 18
 
       - name: Install Packages
         run: pnpm install --frozen-lockfile
 
       - name: Setup Pages
-        uses: actions/configure-pages@v4
+        uses: actions/configure-pages@v3
 
       - 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@v1
         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@v2

.github/workflows/release-draft.yml

@@ -0,0 +1,23 @@
+name: Draft Release
+
+on:
+  push:
+    branches:
+      - develop
+
+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@v5
+        with:
+          disable-autolabeler: true
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

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

@@ -13,13 +13,13 @@ jobs:
         with:
           fetch-depth: 0
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v2
 
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
           cache: pnpm
-          node-version-file: '.node-version'
+          node-version: 18.x
 
       - name: Install Packages
         run: |

.github/workflows/release-publish.yml

@@ -11,14 +11,14 @@ jobs:
       - uses: actions/checkout@v4
       - uses: fregante/setup-git-user@v2
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v2
         # uses version from "packageManager" field in package.json
 
-      - name: Setup Node.js
+      - name: Setup Node.js v18
         uses: actions/setup-node@v4
         with:
           cache: pnpm
-          node-version-file: '.node-version'
+          node-version: 18.x
 
       - name: Install Packages
         run: |

.github/workflows/release.yml

@@ -1,37 +0,0 @@
-name: Release
-
-on:
-  push:
-    branches:
-      - master
-
-concurrency: ${{ github.workflow }}-${{ github.ref }}
-
-jobs:
-  release:
-    name: Release
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout Repo
-        uses: actions/checkout@v3
-
-      - uses: pnpm/action-setup@v4
-
-      - 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
-
-      - name: Create Release Pull Request or Publish to npm
-        id: changesets
-        uses: changesets/action@v1
-        with:
-          version: pnpm changeset:version
-          publish: pnpm changeset:publish
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/test.yml

@@ -8,17 +8,20 @@ permissions:
 jobs:
   unit-test:
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [18.x]
     steps:
       - uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v2
         # uses version from "packageManager" field in package.json
 
-      - name: Setup Node.js
+      - name: Setup Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v4
         with:
           cache: pnpm
-          node-version-file: '.node-version'
+          node-version: ${{ matrix.node-version }}
 
       - name: Install Packages
         run: |
@@ -39,7 +42,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@v3
         # Run step only pushes to develop and pull_requests
         if: ${{ github.event_name == 'pull_request' || github.ref == 'refs/heads/develop' }}
         with:

.github/workflows/update-browserlist.yml

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

.gitignore

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

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/bin/sh
+# . "$(dirname "$0")/_/husky.sh"
+
+# npx --no-install commitlint --edit $1

.husky/pre-commit

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

.lintstagedrc.mjs

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

.node-version

@@ -1 +0,0 @@
-20.12.2

.npmrc

@@ -1,4 +1,2 @@
-registry=https://registry.npmjs.org
 auto-install-peers=true
 strict-peer-dependencies=false
-package-import-method=clone-or-copy

.prettierignore

@@ -1,7 +1,6 @@
 dist
 cypress/platform/xss3.html
 .cache
-.pnpm-store
 coverage
 # Autogenerated by PNPM
 pnpm-lock.yaml
@@ -11,10 +10,6 @@ stats
 .nyc_output
 # Autogenerated by `pnpm run --filter mermaid types:build-config`
 packages/mermaid/src/config.type.ts
+
 # autogenereated by langium-cli
 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

.prettierrc.json

@@ -3,6 +3,5 @@
   "printWidth": 100,
   "singleQuote": true,
   "useTabs": false,
-  "tabWidth": 2,
-  "trailingComma": "es5"
+  "tabWidth": 2
 }

.vite/build.ts

@@ -1,5 +1,4 @@
-import type { InlineConfig } from 'vite';
-import { build, type PluginOption } from 'vite';
+import { build, InlineConfig, type PluginOption } from 'vite';
 import { resolve } from 'path';
 import { fileURLToPath } from 'url';
 import jisonPlugin from './jisonPlugin.js';
@@ -47,10 +46,9 @@ 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];
-  const output: OutputOptions = [
+  let output: OutputOptions = [
     {
       name,
       format: 'esm',
@@ -76,15 +74,13 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
         output,
       },
     },
-    define: {
-      'import.meta.vitest': 'undefined',
-    },
     resolve: {
       extensions: [],
     },
     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'],
@@ -122,10 +118,10 @@ await generateLangium();
 
 if (watch) {
   await build(getBuildConfig({ minify: false, watch, core: false, entryName: 'parser' }));
-  void build(getBuildConfig({ minify: false, watch, core: false, entryName: 'mermaid' }));
+  build(getBuildConfig({ minify: false, watch, core: false, entryName: 'mermaid' }));
   if (!mermaidOnly) {
-    void build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' }));
-    void build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-zenuml' }));
+    build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' }));
+    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 type { PluginOption } from 'vite';
+import { PluginOption } from 'vite';
 import { getDefaults, getSchema, loadSchema } from '../.build/jsonSchema.js';
 
 /**

.vite/server.ts

@@ -1,7 +1,6 @@
 import express from 'express';
 import cors from 'cors';
 import { createServer as createViteServer } from 'vite';
-import { packageOptions } from '../.build/common.js';
 
 async function createServer() {
   const app = express();
@@ -15,17 +14,17 @@ async function createServer() {
   });
 
   app.use(cors());
-  for (const { packageName } of Object.values(packageOptions)) {
-    app.use(express.static(`./packages/${packageName}/dist`));
-  }
+  app.use(express.static('./packages/parser/dist'));
+  app.use(express.static('./packages/mermaid/dist'));
+  app.use(express.static('./packages/mermaid-zenuml/dist'));
+  app.use(express.static('./packages/mermaid-example-diagram/dist'));
   app.use(vite.middlewares);
   app.use(express.static('demos'));
   app.use(express.static('cypress/platform'));
 
   app.listen(9000, () => {
-    // eslint-disable-next-line no-console
     console.log(`Listening on http://localhost:9000`);
   });
 }
 
-void createServer();
+createServer();

.vscode/extensions.json

@@ -2,7 +2,7 @@
   "recommendations": [
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
-    "vitest.explorer",
+    "zixuanchen.vitest-explorer",
     "luniclynx.bison"
   ]
 }

.vscode/launch.json

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

CONTRIBUTING.md

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

CONTRIBUTING.md

@@ -0,0 +1,78 @@
+# Contributing
+
+Please read in detail about how to contribute documentation and code on the [Mermaid documentation site.](https://mermaid-js.github.io/mermaid/#/development)
+
+---
+
+# Mermaid contribution cheat-sheet
+
+## Requirements
+
+- [volta](https://volta.sh/) to manage node versions.
+- [Node.js](https://nodejs.org/en/). `volta install node`
+- [pnpm](https://pnpm.io/) package manager. `volta install pnpm`
+
+## Development Installation
+
+If you don't have direct access to push to mermaid repositories, make a fork first. Then clone. Or clone directly from mermaid-js:
+
+```bash
+git clone git@github.com:mermaid-js/mermaid.git
+cd mermaid
+```
+
+Install required packages:
+
+```bash
+# npx is required for first install as volta support for pnpm is not added yet.
+npx pnpm install
+pnpm test # run unit tests
+pnpm dev # starts a dev server
+```
+
+Open <http://localhost:9000> in your browser after starting the dev server.
+You can also duplicate the `example.html` file in `demos/dev`, rename it and add your own mermaid code to it.
+That will be served at <http://localhost:9000/dev/your-file-name.html>.
+
+### Docker
+
+If you are using docker and docker-compose, you have self-documented `run` bash script, which is a convenient alias for docker-compose commands:
+
+```bash
+./run install # npx pnpm install
+./run test # pnpm test
+```
+
+## Testing
+
+```bash
+# Run unit test
+pnpm test
+# Run unit test in watch mode
+pnpm test:watch
+# Run E2E test
+pnpm e2e
+# Debug E2E tests
+pnpm dev
+pnpm cypress:open # in another terminal
+```
+
+## Branch name format:
+
+```text
+   [feature | bug | chore | docs]/[issue number]_[short description using dashes ('-') or underscores ('_') instead of spaces]
+```
+
+eg: `feature/2945_state-diagram-new-arrow-florbs`, `bug/1123_fix_random_ugly_red_text`
+
+## Documentation
+
+Documentation is necessary for all non bugfix/refactoring changes.
+
+Only make changes to files that are in [`/packages/mermaid/src/docs`](packages/mermaid/src/docs)
+
+**_DO NOT CHANGE FILES IN `/docs` MANUALLY_**
+
+The `/docs` folder will be rebuilt and committed as part of a pre-commit hook.
+
+[Join our slack community if you want closer contact!](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)

Dockerfile

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

FUNDING.json

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

README.md

@@ -15,7 +15,7 @@ Generate diagrams from markdown-like text.
 <a href="https://mermaid.live/"><b>Live Editor!</b></a>
 </p>
 <p align="center">
- <a href="https://mermaid.js.org">📖 Documentation</a> | <a href="https://mermaid.js.org/intro/">🚀 Getting Started</a> | <a href="https://www.jsdelivr.com/package/npm/mermaid">🌐 CDN</a> | <a href="https://discord.gg/AgrbSrBer3" title="Discord invite">🙌 Join Us</a>
+ <a href="https://mermaid.js.org">📖 Documentation</a> | <a href="https://mermaid.js.org/intro/">🚀 Getting Started</a> | <a href="https://www.jsdelivr.com/package/npm/mermaid">🌐 CDN</a> | <a href="https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE" title="Slack invite">🙌 Join Us</a>
 </p>
 <p align="center">
 <a href="./README.zh-CN.md">简体中文</a>
@@ -33,9 +33,8 @@ Try Live Editor previews of future releases: <a href="https://develop.git.mermai
 [![Coverage Status](https://codecov.io/github/mermaid-js/mermaid/branch/develop/graph/badge.svg)](https://app.codecov.io/github/mermaid-js/mermaid/tree/develop)
 [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid)
 [![NPM Downloads](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid)
-[![Join our Discord!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=discord&label=discord)](https://discord.gg/AgrbSrBer3)
+[![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
 [![Twitter Follow](https://img.shields.io/badge/Social-mermaidjs__-blue?style=social&logo=X)](https://twitter.com/mermaidjs_)
-[![Covered by Argos Visual Testing](https://argos-ci.com/badge.svg)](https://argos-ci.com)
 
 <img src="./img/header.png" alt="" />
 
@@ -43,7 +42,7 @@ Try Live Editor previews of future releases: <a href="https://develop.git.mermai
 
 **Thanks to all involved, people committing pull requests, people answering questions! 🙏**
 
-<a href="https://mermaid.js.org/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/intro/img/book-banner-post-release.jpg" alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a>
+<a href="https://mermaid-js.github.io/mermaid/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/intro/img/book-banner-post-release.jpg" alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a>
 
 ## Table of content
 
@@ -54,7 +53,7 @@ Try Live Editor previews of future releases: <a href="https://develop.git.mermai
 - [Examples](#examples)
 - [Release](#release)
 - [Related projects](#related-projects)
-- [Contributors](#contributors---)
+- [Contributors](#contributors)
 - [Security and safe diagrams](#security-and-safe-diagrams)
 - [Reporting vulnerabilities](#reporting-vulnerabilities)
 - [Appreciation](#appreciation)
@@ -75,12 +74,12 @@ Mermaid addresses this problem by enabling users to create easily modifiable dia
 <br/>
 
 Mermaid allows even non-programmers to easily create detailed diagrams through the [Mermaid Live Editor](https://mermaid.live/).<br/>
-For video tutorials, visit our [Tutorials](https://mermaid.js.org/ecosystem/tutorials.html) page.
-Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](https://mermaid.js.org/ecosystem/integrations-community.html).
+For video tutorials, visit our [Tutorials](./docs/config/Tutorials.md) page.
+Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/ecosystem/integrations-community.md).
 
-You can also use Mermaid within [GitHub](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) as well many of your other favorite applications—check out the list of [Integrations and Usages of Mermaid](https://mermaid.js.org/ecosystem/integrations-community.html).
+You can also use Mermaid within [GitHub](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) as well many of your other favorite applications—check out the list of [Integrations and Usages of Mermaid](./docs/ecosystem/integrations-community.md).
 
-For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](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).
+For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./docs/intro/getting-started.md), [Usage](./docs/config/usage.md) and [Tutorials](./docs/config/Tutorials.md).
 
 In our release process we rely heavily on visual regression tests using [applitools](https://applitools.com/). Applitools is a great service which has been easy to use and integrate with our tests.
 
@@ -92,11 +91,11 @@ In our release process we rely heavily on visual regression tests using [applito
 
 ## Examples
 
-**The following are some examples of the diagrams, charts and graphs that can be made using Mermaid. Click here to jump into the [text syntax](https://mermaid.js.org/intro/syntax-reference.html).**
+**The following are some examples of the diagrams, charts and graphs that can be made using Mermaid. Click here to jump into the [text syntax](https://mermaid-js.github.io/mermaid/#/n00b-syntaxReference).**
 
 <!-- <Flowchart> -->
 
-### Flowchart [<a href="https://mermaid.js.org/syntax/flowchart.html">docs</a> - <a href="https://mermaid.live/edit#pako:eNpNkMtqwzAQRX9FzKqFJK7t1km8KDQP6KJQSLOLvZhIY1tgS0GWmgbb_165IaFaiXvOFTPqgGtBkEJR6zOv0Fj2scsU8-ft8I5G5Gw6fe339GN7tnrYaafE45WvRsLW3Ya4bKVWwzVe_xU-FfVsc9hR62rLwvw_2591z7Y3FuUwgYZMg1L4ObrRzMBW1FAGqb8KKtCLGWRq8Ko7CbS0FdJqA2mBdUsTQGf110VxSK1xdJM2EkuDzd2qNQrypQ7s5TQuXcrW-ie5VoUsx9yZ2seVtac2DYIRz0ppK3eccd0ErRTjD1XfyyRIomSBUUzJPMaXOBb8GC4XRfQcFmL-FEYIwzD8AggvcHE">live editor</a>]
+### Flowchart [<a href="https://mermaid-js.github.io/mermaid/#/flowchart">docs</a> - <a href="https://mermaid.live/edit#pako:eNpNkMtqwzAQRX9FzKqFJK7t1km8KDQP6KJQSLOLvZhIY1tgS0GWmgbb_165IaFaiXvOFTPqgGtBkEJR6zOv0Fj2scsU8-ft8I5G5Gw6fe339GN7tnrYaafE45WvRsLW3Ya4bKVWwzVe_xU-FfVsc9hR62rLwvw_2591z7Y3FuUwgYZMg1L4ObrRzMBW1FAGqb8KKtCLGWRq8Ko7CbS0FdJqA2mBdUsTQGf110VxSK1xdJM2EkuDzd2qNQrypQ7s5TQuXcrW-ie5VoUsx9yZ2seVtac2DYIRz0ppK3eccd0ErRTjD1XfyyRIomSBUUzJPMaXOBb8GC4XRfQcFmL-FEYIwzD8AggvcHE">live editor</a>]
 
 ```
 flowchart LR
@@ -116,12 +115,12 @@ C -->|One| D[Result 1]
 C -->|Two| E[Result 2]
 ```
 
-### Sequence diagram [<a href="https://mermaid.js.org/syntax/sequenceDiagram.html">docs</a> - <a href="https://mermaid.live/edit#pako:eNo9kMluwjAQhl_F-AykQMuSA1WrbuLQQ3v1ZbAnsVXHkzrjVhHi3etQwKfRv4w-z0FqMihL2eF3wqDxyUEdoVHhwTuNk-12RzaU4g29JzHMY2HpV0BE0VO6V8ETtdkGz1Zb1F8qiPyG5LX84mrLAmpwoWNh-5a0pWCiAxUwGBXeiVHEU4oq8V_6AHYUwAu2lLLTjVQ4bc1rT2yleI0IfJG320faZ9ABbk-Jz3hZnFxBduR9L2oiM5Jj2WBswJn8-cMArSRbbFDJMo8GK0ielVThmKOpNcD4bBxTlGUFvsOxhMT02QctS44JL6HzAS-iJzCYOwfJfTscunYd542aQuXqQU_RZ9kyt11ZFIM9rR3btJ9qaorOGQuR7c9mWSznyzXMF7hcLeBusTB6P9usq_ntrDKrm9kc5PF4_AMJE56Z">live editor</a>]
+### Sequence diagram [<a href="https://mermaid-js.github.io/mermaid/#/sequenceDiagram">docs</a> - <a href="https://mermaid.live/edit#pako:eNo9kMluwjAQhl_F-AykQMuSA1WrbuLQQ3v1ZbAnsVXHkzrjVhHi3etQwKfRv4w-z0FqMihL2eF3wqDxyUEdoVHhwTuNk-12RzaU4g29JzHMY2HpV0BE0VO6V8ETtdkGz1Zb1F8qiPyG5LX84mrLAmpwoWNh-5a0pWCiAxUwGBXeiVHEU4oq8V_6AHYUwAu2lLLTjVQ4bc1rT2yleI0IfJG320faZ9ABbk-Jz3hZnFxBduR9L2oiM5Jj2WBswJn8-cMArSRbbFDJMo8GK0ielVThmKOpNcD4bBxTlGUFvsOxhMT02QctS44JL6HzAS-iJzCYOwfJfTscunYd542aQuXqQU_RZ9kyt11ZFIM9rR3btJ9qaorOGQuR7c9mWSznyzXMF7hcLeBusTB6P9usq_ntrDKrm9kc5PF4_AMJE56Z">live editor</a>]
 
 ```
 sequenceDiagram
 Alice->>John: Hello John, how are you?
-loop HealthCheck
+loop Healthcheck
     John->>John: Fight against hypochondria
 end
 Note right of John: Rational thoughts!
@@ -133,7 +132,7 @@ Bob-->>John: Jolly good!
 ```mermaid
 sequenceDiagram
 Alice->>John: Hello John, how are you?
-loop HealthCheck
+loop Healthcheck
     John->>John: Fight against hypochondria
 end
 Note right of John: Rational thoughts!
@@ -142,7 +141,7 @@ John->>Bob: How about you?
 Bob-->>John: Jolly good!
 ```
 
-### Gantt chart [<a href="https://mermaid.js.org/syntax/gantt.html">docs</a> - <a href="https://mermaid.live/edit#pako:eNp90cGOgyAQBuBXIZxtFbG29bbZ3fsmvXKZylhJEAyOTZrGd1_sto3xsHMBhu-HBO689hp5xS_giJQbsCbjHTv9jcp9-q63SKhZpb3DhMXSOIiE5ZkoNpnYZGXynh6U-4jBK7JnVfBYJo9QvgjtEya1cj8QwFq0TMz4lZqxTBg0hOF5m1jifI2Lf7Bc490CyxUu1rhc4GLGPOEdhg6Mjq92V44xxanFDhWv4lRjA6MlxZWbIh17DYTf2pAPvGrADphwGMmfbq7mFYURX-jLwCVA91bWg8YYunO69Y8vMgPFI2vvGnOZ-2Owsd0S9UOVpvP29mKoHc_b2nfpYHQLgdrrsUzLvDxALrHcS9hJqeuzOB6avBCN3mciBz5N0y_wxZ0J">live editor</a>]
+### Gantt chart [<a href="https://mermaid-js.github.io/mermaid/#/gantt">docs</a> - <a href="https://mermaid.live/edit#pako:eNp90cGOgyAQBuBXIZxtFbG29bbZ3fsmvXKZylhJEAyOTZrGd1_sto3xsHMBhu-HBO689hp5xS_giJQbsCbjHTv9jcp9-q63SKhZpb3DhMXSOIiE5ZkoNpnYZGXynh6U-4jBK7JnVfBYJo9QvgjtEya1cj8QwFq0TMz4lZqxTBg0hOF5m1jifI2Lf7Bc490CyxUu1rhc4GLGPOEdhg6Mjq92V44xxanFDhWv4lRjA6MlxZWbIh17DYTf2pAPvGrADphwGMmfbq7mFYURX-jLwCVA91bWg8YYunO69Y8vMgPFI2vvGnOZ-2Owsd0S9UOVpvP29mKoHc_b2nfpYHQLgdrrsUzLvDxALrHcS9hJqeuzOB6avBCN3mciBz5N0y_wxZ0J">live editor</a>]
 
 ```
 gantt
@@ -166,7 +165,7 @@ gantt
     Parallel 4   :         des6, after des4, 1d
 ```
 
-### Class diagram [<a href="https://mermaid.js.org/syntax/classDiagram.html">docs</a> - <a href="https://mermaid.live/edit#pako:eNpdkTFPwzAQhf-K5QlQ2zQJJG1UBaGWDYmBgYEwXO1LYuTEwXYqlZL_jt02asXm--690zvfgTLFkWaUSTBmI6DS0BTt2lfzkKx-p1PytEO9f1FtdaQkI2ulZNGuVqK1qEtgmOfk7BitSzKdOhg59XuNGgk0RDxed-_IOr6uf8cZ6UhTZ8bvHqS5ub1mr9svZPbjk6DEBlu7AQuXyBkx4gcvDk9cUMJq0XT_YaW0kNK5j-ufAoRzcihaQvLcoN4Jv50vvVxw_xrnD3RCG9QNCO4-8OgpqK1dpoJm7smxhF7agp6kfcfB4jMXVmmalW4tnFDorXrbt4xmVvc4is53GKFUwNF5DtTuO3-sShjrJjLVlqLyvNfS4drazmRB4NuzSti6386YagIjeA3a1rtlEiRRsoAoxiSN4SGOOduGy0UZ3YclT-dhBHQYhj8dc6_I">live editor</a>]
+### Class diagram [<a href="https://mermaid-js.github.io/mermaid/#/classDiagram">docs</a> - <a href="https://mermaid.live/edit#pako:eNpdkTFPwzAQhf-K5QlQ2zQJJG1UBaGWDYmBgYEwXO1LYuTEwXYqlZL_jt02asXm--690zvfgTLFkWaUSTBmI6DS0BTt2lfzkKx-p1PytEO9f1FtdaQkI2ulZNGuVqK1qEtgmOfk7BitSzKdOhg59XuNGgk0RDxed-_IOr6uf8cZ6UhTZ8bvHqS5ub1mr9svZPbjk6DEBlu7AQuXyBkx4gcvDk9cUMJq0XT_YaW0kNK5j-ufAoRzcihaQvLcoN4Jv50vvVxw_xrnD3RCG9QNCO4-8OgpqK1dpoJm7smxhF7agp6kfcfB4jMXVmmalW4tnFDorXrbt4xmVvc4is53GKFUwNF5DtTuO3-sShjrJjLVlqLyvNfS4drazmRB4NuzSti6386YagIjeA3a1rtlEiRRsoAoxiSN4SGOOduGy0UZ3YclT-dhBHQYhj8dc6_I">live editor</a>]
 
 ```
 classDiagram
@@ -208,7 +207,7 @@ class Class10 {
 
 ```
 
-### State diagram [<a href="https://mermaid.js.org/syntax/stateDiagram.html">docs</a> - <a href="https://mermaid.live/edit#pako:eNpdkEFvgzAMhf8K8nEqpYSNthx22Xbcqcexg0sCiZQQlDhIFeK_L8A6TfXp6fOz9ewJGssFVOAJSbwr7ByadGR1n8T6evpO0vQ1uZDSekOrXGFsPqJPO6q-2-imH8f_0TeHXm50lfelsAMjnEHFY6xpMdRAUhhRQxUlFy0GTTXU_RytYeAx-AdXZB1ULWovdoCB7OXWN1CRC-Ju-r3uz6UtchGHJqDbsPygU57iysb2reoWHpyOWBINvsqypb3vFMlw3TfWZF5xiY7keC6zkpUnZIUojwW-FAVvrvn51LLnvOXHQ84Q5nn-AVtLcwk">live editor</a>]
+### State diagram [<a href="https://mermaid-js.github.io/mermaid/#/stateDiagram">docs</a> - <a href="https://mermaid.live/edit#pako:eNpdkEFvgzAMhf8K8nEqpYSNthx22Xbcqcexg0sCiZQQlDhIFeK_L8A6TfXp6fOz9ewJGssFVOAJSbwr7ByadGR1n8T6evpO0vQ1uZDSekOrXGFsPqJPO6q-2-imH8f_0TeHXm50lfelsAMjnEHFY6xpMdRAUhhRQxUlFy0GTTXU_RytYeAx-AdXZB1ULWovdoCB7OXWN1CRC-Ju-r3uz6UtchGHJqDbsPygU57iysb2reoWHpyOWBINvsqypb3vFMlw3TfWZF5xiY7keC6zkpUnZIUojwW-FAVvrvn51LLnvOXHQ84Q5nn-AVtLcwk">live editor</a>]
 
 ```
 stateDiagram-v2
@@ -230,7 +229,7 @@ Moving --> Crash
 Crash --> [*]
 ```
 
-### Pie chart [<a href="https://mermaid.js.org/syntax/pie.html">docs</a> - <a href="https://mermaid.live/edit#pako:eNo9jsFugzAMhl8F-VzBgEEh13Uv0F1zcYkTIpEEBadShXj3BU3dzf_n77e8wxQUgYDVkvQSbsFsEgpRtEN_5i_kvzx05XiC-xvUHVzAUXRoVe7v0heFBJ7JkQSRR0Ua08ISpD-ymlaFTN_KcoggNC4bXQATh5-Xn0BwTPSWbhZNRPdvLQEV5dIO_FrPZ43dOJ-cgtfWnDzFJeOZed1EVZ3r0lie06Ocgqs2q2aMPD_HvuqbfsCmpf7aYte2anrU46Cbz1qr60fdIBzH8QvW9lkl">live editor</a>]
+### Pie chart [<a href="https://mermaid-js.github.io/mermaid/#/pie">docs</a> - <a href="https://mermaid.live/edit#pako:eNo9jsFugzAMhl8F-VzBgEEh13Uv0F1zcYkTIpEEBadShXj3BU3dzf_n77e8wxQUgYDVkvQSbsFsEgpRtEN_5i_kvzx05XiC-xvUHVzAUXRoVe7v0heFBJ7JkQSRR0Ua08ISpD-ymlaFTN_KcoggNC4bXQATh5-Xn0BwTPSWbhZNRPdvLQEV5dIO_FrPZ43dOJ-cgtfWnDzFJeOZed1EVZ3r0lie06Ocgqs2q2aMPD_HvuqbfsCmpf7aYte2anrU46Cbz1qr60fdIBzH8QvW9lkl">live editor</a>]
 
 ```
 pie
@@ -248,7 +247,7 @@ pie
 
 ### Git graph [experimental - <a href="https://mermaid.live/edit#pako:eNqNkMFugzAMhl8F-VyVAR1tOW_aA-zKxSSGRCMJCk6lCvHuNZPKZdM0n-zf3_8r8QIqaIIGMqnB8kfEybQ--y4VnLP8-9RF9Mpkmm40hmlnDKmvkPiH_kfS7nFo_VN0FAf6XwocQGgxa_nGsm1bYEOOWmik1dRjGrmF1q-Cpkkj07u2HCI0PY4zHQATh8-7V9BwTPSE3iwOEd1OjQE1iWkBvk_bzQY7s0Sq4Hs7bHqKo8iGeZqbPN_WR7mpSd1RHpvPVhuMbG7XOq_L-oJlRfW5wteq0qorrpe-PBW9Pr8UJcK6rg-BLYPQ">live editor</a>]
 
-### Bar chart (using gantt chart) [<a href="https://mermaid.js.org/syntax/gantt.html">docs</a> - <a href="https://mermaid.live/edit#pako:eNptkU1vhCAQhv8KIenNugiI4rkf6bmXpvEyFVxJFDYyNt1u9r8X63Z7WQ9m5pknLzieaBeMpQ3dg0dsPUkPOhwteXZIXmJcbCT3xMAxkuh8Z8kIEclyMIB209fqKcwTICFvG4IvFy_oLrZ-g9F26ILfQgvNFN94VaRXQ1iWqpumZBcu1J8p1E1TXDx59eQNr5LyEqjJn6hv5QnGNlxevZJmdLLpy5xJSzut45biYCfb0iaVxvawjNjS1p-TCguG16PvaIPzYjO67e3BwX6GiTY9jPFKH43DMF_hGMDY1J4oHg-_f8hFTJFd8L3br3yZx4QHxENsdrt1nO8dDstH3oVpF50ZYMbhU6ud4qoGLqyqBJRCmO6j0HXPZdGbihUc6Pmc0QP49xD-b5X69ZQv2gjO81IwzWqhC1lKrjJ6pA3nVS7SMiVjrKirWlYp5fs3osgrWeo00lorLWvOzz8JVbXm">live editor</a>]
+### Bar chart (using gantt chart) [<a href="https://mermaid-js.github.io/mermaid/#/gantt">docs</a> - <a href="https://mermaid.live/edit#pako:eNptkU1vhCAQhv8KIenNugiI4rkf6bmXpvEyFVxJFDYyNt1u9r8X63Z7WQ9m5pknLzieaBeMpQ3dg0dsPUkPOhwteXZIXmJcbCT3xMAxkuh8Z8kIEclyMIB209fqKcwTICFvG4IvFy_oLrZ-g9F26ILfQgvNFN94VaRXQ1iWqpumZBcu1J8p1E1TXDx59eQNr5LyEqjJn6hv5QnGNlxevZJmdLLpy5xJSzut45biYCfb0iaVxvawjNjS1p-TCguG16PvaIPzYjO67e3BwX6GiTY9jPFKH43DMF_hGMDY1J4oHg-_f8hFTJFd8L3br3yZx4QHxENsdrt1nO8dDstH3oVpF50ZYMbhU6ud4qoGLqyqBJRCmO6j0HXPZdGbihUc6Pmc0QP49xD-b5X69ZQv2gjO81IwzWqhC1lKrjJ6pA3nVS7SMiVjrKirWlYp5fs3osgrWeo00lorLWvOzz8JVbXm">live editor</a>]
 
 ```
 gantt
@@ -286,7 +285,7 @@ gantt
     5    : 0, 5
 ```
 
-### User Journey diagram [<a href="https://mermaid.js.org/syntax/userJourney.html">docs</a> - <a href="https://mermaid.live/edit#pako:eNplkMFuwjAQRH9l5TMiTVIC-FqqnjhxzWWJN4khsSN7XRSh_HsdKBVt97R6Mzsj-yoqq0hIAXCywRkaSwNxWHNHsB_hYt1ZmwYUfiueKtbWwIcFtjf5zgH2eCZgQgkrCXt64GgMg2fUzkvIn5Xd_V5COtMFvCH_62ht_5yk7MU8sn61HDTfxD8VYiF6cj1qFd94nWkpuKWYKWRcFdUYOi5FaaZoDYNCpnel2Toha-w8LQQGtofRVEKyC_Qw7TQ2DvsfV2dRUTy6Ch6H-UMb7TlGVtbUupl5cF3ELfPgZZLM8rLR3IbjsrJ94rVq0XH7uS2SIis2mOVUrHNc5bmqjul2U2evaa3WL2mGYpqmL2BGiho">live editor</a>]
+### User Journey diagram [<a href="https://mermaid-js.github.io/mermaid/#/user-journey">docs</a> - <a href="https://mermaid.live/edit#pako:eNplkMFuwjAQRH9l5TMiTVIC-FqqnjhxzWWJN4khsSN7XRSh_HsdKBVt97R6Mzsj-yoqq0hIAXCywRkaSwNxWHNHsB_hYt1ZmwYUfiueKtbWwIcFtjf5zgH2eCZgQgkrCXt64GgMg2fUzkvIn5Xd_V5COtMFvCH_62ht_5yk7MU8sn61HDTfxD8VYiF6cj1qFd94nWkpuKWYKWRcFdUYOi5FaaZoDYNCpnel2Toha-w8LQQGtofRVEKyC_Qw7TQ2DvsfV2dRUTy6Ch6H-UMb7TlGVtbUupl5cF3ELfPgZZLM8rLR3IbjsrJ94rVq0XH7uS2SIis2mOVUrHNc5bmqjul2U2evaa3WL2mGYpqmL2BGiho">live editor</a>]
 
 ```
   journey
@@ -312,7 +311,7 @@ gantt
       Sit down: 3: Me
 ```
 
-### C4 diagram [<a href="https://mermaid.js.org/syntax/c4.html">docs</a>]
+### C4 diagram [<a href="https://mermaid-js.github.io/mermaid/#/c4c">docs</a>]
 
 ```
 C4Context
@@ -406,7 +405,7 @@ The above command generates files into the `dist` folder and publishes them to <
 
 Mermaid is a growing community and is always accepting new contributors. There's a lot of different ways to help out and we're always looking for extra hands! Look at [this issue](https://github.com/mermaid-js/mermaid/issues/866) if you want to know where to start helping out.
 
-Detailed information about how to contribute can be found in the [contribution guide](https://mermaid.js.org/community/contributing.html)
+Detailed information about how to contribute can be found in the [contribution guide](CONTRIBUTING.md)
 
 ## Security and safe diagrams
 

README.zh-CN.md

@@ -15,7 +15,7 @@ Mermaid
 <a href="https://mermaid.live/"><b>实时编辑器!</b></a>
 </p>
 <p align="center">
- <a href="https://mermaid.js.org">📖 文档</a> | <a href="https://mermaid.js.org/intro/">🚀 入门</a> | <a href="https://www.jsdelivr.com/package/npm/mermaid">🌐 CDN</a> | <a href="https://discord.gg/AgrbSrBer3" title="Discord invite">🙌 加入我们</a>
+ <a href="https://mermaid.js.org">📖 文档</a> | <a href="https://mermaid.js.org/intro/">🚀 入门</a> | <a href="https://www.jsdelivr.com/package/npm/mermaid">🌐 CDN</a> | <a href="https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE" title="Slack invite">🙌 加入我们</a>
 </p>
 <p align="center">
 <a href="./README.md">English</a>
@@ -34,7 +34,7 @@ Mermaid
 [![Coverage Status](https://codecov.io/github/mermaid-js/mermaid/branch/develop/graph/badge.svg)](https://app.codecov.io/github/mermaid-js/mermaid/tree/develop)
 [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid)
 [![NPM Downloads](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid)
-[![Join our Discord!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=discord&label=discord)](https://discord.gg/AgrbSrBer3)
+[![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
 [![Twitter Follow](https://img.shields.io/badge/Social-mermaidjs__-blue?style=social&logo=X)](https://twitter.com/mermaidjs_)
 
 <img src="./img/header.png" alt="" />
@@ -43,7 +43,7 @@ Mermaid
 
 **感谢所有参与进来提交 PR，解答疑问的人们! 🙏**
 
-<a href="https://mermaid.js.org/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/intro/img/book-banner-post-release.jpg" alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a>
+<a href="https://mermaid-js.github.io/mermaid/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/intro/img/book-banner-post-release.jpg" alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a>
 
 ## 关于 Mermaid
 
@@ -57,20 +57,20 @@ Mermaid 是一个基于 Javascript 的图表绘制工具，通过解析类 Markd
 Mermaid 通过允许用户创建便于修改的图表来解决这一难题，它也可以作为生产脚本（或其他代码）的一部分。<br/>
 <br/>
 Mermaid 甚至能让非程序员也能通过 [Mermaid Live Editor](https://mermaid.live/) 轻松创建详细的图表。<br/>
-你可以访问 [教程](https://mermaid.js.org/ecosystem/tutorials.html) 来查看 Live Editor 的视频教程，也可以查看 [Mermaid 的集成和使用](https://mermaid.js.org/ecosystem/integrations-community.html) 这个清单来检查你的文档工具是否已经集成了 Mermaid 支持。
+你可以访问 [教程](./docs/config/Tutorials.md) 来查看 Live Editor 的视频教程，也可以查看 [Mermaid 的集成和使用](./docs/ecosystem/integrations-community.md) 这个清单来检查你的文档工具是否已经集成了 Mermaid 支持。
 
-如果想要查看关于 Mermaid 更详细的介绍及基础使用方式，可以查看 [入门指引](https://mermaid.js.org/intro/getting-started.html), [用法](https://mermaid.js.org/config/usage.html) 和 [教程](https://mermaid.js.org/ecosystem/tutorials.html).
+如果想要查看关于 Mermaid 更详细的介绍及基础使用方式，可以查看 [入门指引](./docs/intro/getting-started.md), [用法](./docs/config/usage.md) 和 [教程](./docs/config/Tutorials.md).
 
 <!-- </Main description> -->
 
 ## 示例
 
-**下面是一些可以使用 Mermaid 创建的图表示例。点击 [语法](https://mermaid.js.org/intro/syntax-reference.html) 查看详情。**
+**下面是一些可以使用 Mermaid 创建的图表示例。点击 [语法](https://mermaid-js.github.io/mermaid/#/n00b-syntaxReference) 查看详情。**
 
 <table>
 <!-- <Flowchart> -->
 
-### 流程图 [<a href="https://mermaid.js.org/syntax/flowchart.html">文档</a> - <a href="https://mermaid.live/edit#base64:eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW0hhcmRdIC0tPnxUZXh0fCBCKFJvdW5kKVxuICAgIEIgLS0-IEN7RGVjaXNpb259XG4gICAgQyAtLT58T25lfCBEW1Jlc3VsdCAxXVxuICAgIEMgLS0-fFR3b3wgRVtSZXN1bHQgMl0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
+### 流程图 [<a href="https://mermaid-js.github.io/mermaid/#/flowchart">文档</a> - <a href="https://mermaid.live/edit#base64:eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW0hhcmRdIC0tPnxUZXh0fCBCKFJvdW5kKVxuICAgIEIgLS0-IEN7RGVjaXNpb259XG4gICAgQyAtLT58T25lfCBEW1Jlc3VsdCAxXVxuICAgIEMgLS0-fFR3b3wgRVtSZXN1bHQgMl0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
 
 ```
 flowchart LR
@@ -88,12 +88,12 @@ C -->|One| D[Result 1]
 C -->|Two| E[Result 2]
 ```
 
-### 时序图 [<a href="https://mermaid.js.org/syntax/sequenceDiagram.html">文档</a> - <a href="https://mermaid.live/edit#base64:eyJjb2RlIjoic2VxdWVuY2VEaWFncmFtXG5BbGljZS0-PkpvaG46IEhlbGxvIEpvaG4sIGhvdyBhcmUgeW91P1xubG9vcCBIZWFsdGhjaGVja1xuICAgIEpvaG4tPj5Kb2huOiBGaWdodCBhZ2FpbnN0IGh5cG9jaG9uZHJpYVxuZW5kXG5Ob3RlIHJpZ2h0IG9mIEpvaG46IFJhdGlvbmFsIHRob3VnaHRzIVxuSm9obi0tPj5BbGljZTogR3JlYXQhXG5Kb2huLT4-Qm9iOiBIb3cgYWJvdXQgeW91P1xuQm9iLS0-PkpvaG46IEpvbGx5IGdvb2QhIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
+### 时序图 [<a href="https://mermaid-js.github.io/mermaid/#/sequenceDiagram">文档</a> - <a href="https://mermaid.live/edit#base64:eyJjb2RlIjoic2VxdWVuY2VEaWFncmFtXG5BbGljZS0-PkpvaG46IEhlbGxvIEpvaG4sIGhvdyBhcmUgeW91P1xubG9vcCBIZWFsdGhjaGVja1xuICAgIEpvaG4tPj5Kb2huOiBGaWdodCBhZ2FpbnN0IGh5cG9jaG9uZHJpYVxuZW5kXG5Ob3RlIHJpZ2h0IG9mIEpvaG46IFJhdGlvbmFsIHRob3VnaHRzIVxuSm9obi0tPj5BbGljZTogR3JlYXQhXG5Kb2huLT4-Qm9iOiBIb3cgYWJvdXQgeW91P1xuQm9iLS0-PkpvaG46IEpvbGx5IGdvb2QhIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
 
 ```
 sequenceDiagram
 Alice->>John: Hello John, how are you?
-loop HealthCheck
+loop Healthcheck
     John->>John: Fight against hypochondria
 end
 Note right of John: Rational thoughts!
@@ -105,7 +105,7 @@ Bob-->>John: Jolly good!
 ```mermaid
 sequenceDiagram
 Alice->>John: Hello John, how are you?
-loop HealthCheck
+loop Healthcheck
     John->>John: Fight against hypochondria
 end
 Note right of John: Rational thoughts!
@@ -114,7 +114,7 @@ John->>Bob: How about you?
 Bob-->>John: Jolly good!
 ```
 
-### 甘特图 [<a href="https://mermaid.js.org/syntax/gantt.html">文档</a> - <a href="https://mermaid.live/edit#base64:eyJjb2RlIjoiZ2FudHRcbnNlY3Rpb24gU2VjdGlvblxuQ29tcGxldGVkIDpkb25lLCAgICBkZXMxLCAyMDE0LTAxLTA2LDIwMTQtMDEtMDhcbkFjdGl2ZSAgICAgICAgOmFjdGl2ZSwgIGRlczIsIDIwMTQtMDEtMDcsIDNkXG5QYXJhbGxlbCAxICAgOiAgICAgICAgIGRlczMsIGFmdGVyIGRlczEsIDFkXG5QYXJhbGxlbCAyICAgOiAgICAgICAgIGRlczQsIGFmdGVyIGRlczEsIDFkXG5QYXJhbGxlbCAzICAgOiAgICAgICAgIGRlczUsIGFmdGVyIGRlczMsIDFkXG5QYXJhbGxlbCA0ICAgOiAgICAgICAgIGRlczYsIGFmdGVyIGRlczQsIDFkIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
+### 甘特图 [<a href="https://mermaid-js.github.io/mermaid/#/gantt">文档</a> - <a href="https://mermaid.live/edit#base64:eyJjb2RlIjoiZ2FudHRcbnNlY3Rpb24gU2VjdGlvblxuQ29tcGxldGVkIDpkb25lLCAgICBkZXMxLCAyMDE0LTAxLTA2LDIwMTQtMDEtMDhcbkFjdGl2ZSAgICAgICAgOmFjdGl2ZSwgIGRlczIsIDIwMTQtMDEtMDcsIDNkXG5QYXJhbGxlbCAxICAgOiAgICAgICAgIGRlczMsIGFmdGVyIGRlczEsIDFkXG5QYXJhbGxlbCAyICAgOiAgICAgICAgIGRlczQsIGFmdGVyIGRlczEsIDFkXG5QYXJhbGxlbCAzICAgOiAgICAgICAgIGRlczUsIGFmdGVyIGRlczMsIDFkXG5QYXJhbGxlbCA0ICAgOiAgICAgICAgIGRlczYsIGFmdGVyIGRlczQsIDFkIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
 
 ```
 gantt
@@ -138,7 +138,7 @@ gantt
     Parallel 4   :         des6, after des4, 1d
 ```
 
-### 类图 [<a href="https://mermaid.js.org/syntax/classDiagram.html">文档</a> - <a href="https://mermaid.live/edit#base64:eyJjb2RlIjoiY2xhc3NEaWFncmFtXG5DbGFzczAxIDx8LS0gQXZlcnlMb25nQ2xhc3MgOiBDb29sXG48PGludGVyZmFjZT4-IENsYXNzMDFcbkNsYXNzMDkgLS0-IEMyIDogV2hlcmUgYW0gaT9cbkNsYXNzMDkgLS0qIEMzXG5DbGFzczA5IC0tfD4gQ2xhc3MwN1xuQ2xhc3MwNyA6IGVxdWFscygpXG5DbGFzczA3IDogT2JqZWN0W10gZWxlbWVudERhdGFcbkNsYXNzMDEgOiBzaXplKClcbkNsYXNzMDEgOiBpbnQgY2hpbXBcbkNsYXNzMDEgOiBpbnQgZ29yaWxsYVxuY2xhc3MgQ2xhc3MxMCB7XG4gID4-c2VydmljZT4-XG4gIGludCBpZFxuICBzaXplKClcbn0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
+### 类图 [<a href="https://mermaid-js.github.io/mermaid/#/classDiagram">文档</a> - <a href="https://mermaid.live/edit#base64:eyJjb2RlIjoiY2xhc3NEaWFncmFtXG5DbGFzczAxIDx8LS0gQXZlcnlMb25nQ2xhc3MgOiBDb29sXG48PGludGVyZmFjZT4-IENsYXNzMDFcbkNsYXNzMDkgLS0-IEMyIDogV2hlcmUgYW0gaT9cbkNsYXNzMDkgLS0qIEMzXG5DbGFzczA5IC0tfD4gQ2xhc3MwN1xuQ2xhc3MwNyA6IGVxdWFscygpXG5DbGFzczA3IDogT2JqZWN0W10gZWxlbWVudERhdGFcbkNsYXNzMDEgOiBzaXplKClcbkNsYXNzMDEgOiBpbnQgY2hpbXBcbkNsYXNzMDEgOiBpbnQgZ29yaWxsYVxuY2xhc3MgQ2xhc3MxMCB7XG4gID4-c2VydmljZT4-XG4gIGludCBpZFxuICBzaXplKClcbn0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
 
 ```
 classDiagram
@@ -178,7 +178,7 @@ class Class10 {
 }
 ```
 
-### 状态图 [<a href="https://mermaid.js.org/syntax/stateDiagram.html">docs</a> - <a href="https://mermaid.live/edit#pako:eNpdkLsOwjAMRX-l8ojahTEDCzB26kgYrMYtkfJAqVMJVf13QiIKqqfr44d8vUDvFYGAiZHponEMaJv5KF2V4na4V01zqjrWxhSUZYapuEetn7UbCy16P_5HzwGnR6FZfpdCDZaCRa3SWcunQQI_yJIEkaSiAaNhCdKtqRUj--7lehAcItUQn-pnBMSAZtroVWn2YYOU07b4z29Y37gJVYk">live editor</a>]
+### 状态图 [[<a href="https://mermaid-js.github.io/mermaid/#/stateDiagram">docs</a> - <a href="https://mermaid.live/edit#pako:eNpdkLsOwjAMRX-l8ojahTEDCzB26kgYrMYtkfJAqVMJVf13QiIKqqfr44d8vUDvFYGAiZHponEMaJv5KF2V4na4V01zqjrWxhSUZYapuEetn7UbCy16P_5HzwGnR6FZfpdCDZaCRa3SWcunQQI_yJIEkaSiAaNhCdKtqRUj--7lehAcItUQn-pnBMSAZtroVWn2YYOU07b4z29Y37gJVYk">live editor</a>]
 
 ```
 stateDiagram-v2
@@ -200,7 +200,7 @@ Moving --> Crash
 Crash --> [*]
 ```
 
-### 饼图 [<a href="https://mermaid.js.org/syntax/pie.html">文档</a> - <a href="https://mermaid.live/edit#base64:eyJjb2RlIjoicGllXG5cIkRvZ3NcIiA6IDQyLjk2XG5cIkNhdHNcIiA6IDUwLjA1XG5cIlJhdHNcIiA6IDEwLjAxIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
+### 饼图 [<a href="https://mermaid-js.github.io/mermaid/#/pie">文档</a> - <a href="https://mermaid.live/edit#base64:eyJjb2RlIjoicGllXG5cIkRvZ3NcIiA6IDQyLjk2XG5cIkNhdHNcIiA6IDUwLjA1XG5cIlJhdHNcIiA6IDEwLjAxIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
 
 ```
 pie
@@ -218,7 +218,7 @@ pie
 
 ### Git 图 [实验特性 - <a href="https://mermaid.live/edit#base64:eyJjb2RlIjoiZ2l0R3JhcGg6XG5vcHRpb25zXG57XG4gICAgXCJub2RlU3BhY2luZ1wiOiAxNTAsXG4gICAgXCJub2RlUmFkaXVzXCI6IDEwXG59XG5lbmRcbmNvbW1pdFxuYnJhbmNoIG5ld2JyYW5jaFxuY2hlY2tvdXQgbmV3YnJhbmNoXG5jb21taXRcbmNvbW1pdFxuY2hlY2tvdXQgbWFzdGVyXG5jb21taXRcbmNvbW1pdFxubWVyZ2UgbmV3YnJhbmNoXG4iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
 
-### 用户体验旅程图 [<a href="https://mermaid.js.org/syntax/userJourney.html">文档</a> - <a href="https://mermaid.live/edit#pako:eNpljzEPgkAMhf9K05nFGJdbJXFiYmVpuKIncDVHL4QQ_ruHaILaqXnf63vpjLVYRoMAd4nB81R5SKNOO4ZiglFC6_wVLL3JwLU68XARUHnhTQcoqGVQJgMnAwV_5GSMj0HJhcHAcU_y7d7AYVUzOJP-ddyk3ydZGf0n66uldPqCPxWYYc-hJ2fTj_OqVqg3Tplo0mq5odhphZVfkpWiSjn5Go2GyBnGhyXl3NE1UI-moW7g5QkSoF5m">live editor</a>]
+### 用户体验旅程图 [<a href="https://mermaid-js.github.io/mermaid/#/user-journey">文档</a> - <a href="https://mermaid.live/edit#pako:eNpljzEPgkAMhf9K05nFGJdbJXFiYmVpuKIncDVHL4QQ_ruHaILaqXnf63vpjLVYRoMAd4nB81R5SKNOO4ZiglFC6_wVLL3JwLU68XARUHnhTQcoqGVQJgMnAwV_5GSMj0HJhcHAcU_y7d7AYVUzOJP-ddyk3ydZGf0n66uldPqCPxWYYc-hJ2fTj_OqVqg3Tplo0mq5odhphZVfkpWiSjn5Go2GyBnGhyXl3NE1UI-moW7g5QkSoF5m">live editor</a>]
 
 ```
   journey
@@ -244,7 +244,7 @@ pie
       Sit down: 3: Me
 ```
 
-### C4 图 [<a href="https://mermaid.js.org/syntax/c4.html">文档</a>]
+### C4 图 [<a href="https://mermaid-js.github.io/mermaid/#/c4c">文档</a>]
 
 ```
 C4Context
@@ -338,7 +338,7 @@ npm publish
 
 Mermaid 是一个不断发展中的社区，并且还在接收新的贡献者。有很多不同的方式可以参与进来，而且我们还在寻找额外的帮助。如果你想知道如何开始贡献，请查看 [这个 issue](https://github.com/mermaid-js/mermaid/issues/866)。
 
-关于如何贡献的详细信息可以在 [贡献指南](https://mermaid.js.org/community/contributing.html) 中找到。
+关于如何贡献的详细信息可以在 [贡献指南](CONTRIBUTING.md) 中找到。
 
 ## 安全
 

__mocks__/c4Renderer.js

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

__mocks__/classRenderer-v2.js

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

__mocks__/classRenderer.js

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

__mocks__/dagre-d3.ts

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

__mocks__/entity-decode/browser.ts

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

__mocks__/erRenderer.js

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

__mocks__/flowRenderer-v2.js

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

__mocks__/ganttRenderer.js

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

__mocks__/gitGraphRenderer.js

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

__mocks__/journeyRenderer.js

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

__mocks__/pieRenderer.ts

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

__mocks__/requirementRenderer.js

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

__mocks__/sankeyRenderer.js

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

__mocks__/sequenceRenderer.js

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

__mocks__/stateRenderer-v2.js

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

applitools.config.js

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

cSpell.json

@@ -0,0 +1,210 @@
+{
+  "version": "0.2",
+  "language": "en",
+  "words": [
+    "acyclicer",
+    "adamiecki",
+    "alois",
+    "aloisklink",
+    "antiscript",
+    "antlr",
+    "appli",
+    "applitools",
+    "asciidoctor",
+    "ashish",
+    "ashishjain",
+    "astah",
+    "bbox",
+    "bilkent",
+    "bisheng",
+    "blrs",
+    "braintree",
+    "brkt",
+    "brolin",
+    "brotli",
+    "catmull",
+    "città",
+    "classdef",
+    "codedoc",
+    "colour",
+    "commitlint",
+    "cpettitt",
+    "customizability",
+    "cuzon",
+    "cytoscape",
+    "dagre",
+    "deepdwn",
+    "descr",
+    "docsify",
+    "docsy",
+    "doku",
+    "dompurify",
+    "dont",
+    "doublecircle",
+    "edgechromium",
+    "elems",
+    "elkjs",
+    "elle",
+    "faber",
+    "flatmap",
+    "foswiki",
+    "frontmatter",
+    "ftplugin",
+    "gantt",
+    "gitea",
+    "gitgraph",
+    "globby",
+    "graphlib",
+    "graphviz",
+    "grav",
+    "greywolf",
+    "gzipped",
+    "huynh",
+    "huynhicode",
+    "iife",
+    "inkdrop",
+    "jaoude",
+    "jgreywolf",
+    "jison",
+    "jiti",
+    "kaufmann",
+    "khroma",
+    "klemm",
+    "klink",
+    "knsv",
+    "knut",
+    "knutsveidqvist",
+    "laganeckas",
+    "langium",
+    "linetype",
+    "lintstagedrc",
+    "logmsg",
+    "lucida",
+    "markdownish",
+    "matthieu",
+    "matthieumorel",
+    "mdast",
+    "mdbook",
+    "mermaidjs",
+    "mermerd",
+    "metafile",
+    "mindaugas",
+    "mindmap",
+    "mindmaps",
+    "mitigations",
+    "mkdocs",
+    "mmorel",
+    "mult",
+    "neurodiverse",
+    "nextra",
+    "nikolay",
+    "nirname",
+    "npmjs",
+    "orlandoni",
+    "outdir",
+    "pathe",
+    "pbrolin",
+    "phpbb",
+    "plantuml",
+    "playfair",
+    "pnpm",
+    "podlite",
+    "quence",
+    "radious",
+    "ranksep",
+    "rect",
+    "rects",
+    "reda",
+    "redmine",
+    "regexes",
+    "rehype",
+    "roledescription",
+    "rozhkov",
+    "sandboxed",
+    "sankey",
+    "setupgraphviewbox",
+    "shiki",
+    "sidharth",
+    "sidharthv",
+    "sphinxcontrib",
+    "startx",
+    "starty",
+    "statediagram",
+    "steph",
+    "stopx",
+    "stopy",
+    "stylis",
+    "subhash-halder",
+    "substate",
+    "sulais",
+    "sveidqvist",
+    "swimm",
+    "techn",
+    "teststr",
+    "textlength",
+    "treemap",
+    "ts-nocheck",
+    "tsdoc",
+    "tuleap",
+    "tylerlong",
+    "typora",
+    "ugge",
+    "unist",
+    "unocss",
+    "upvoting",
+    "valign",
+    "verdana",
+    "viewports",
+    "vinod",
+    "visio",
+    "vitepress",
+    "vueuse",
+    "xlink",
+    "xychart",
+    "yash",
+    "yokozuna",
+    "zenuml",
+    "zune"
+  ],
+  "patterns": [
+    { "name": "Markdown links", "pattern": "\\((.*)\\)", "description": "" },
+    {
+      "name": "Markdown code blocks",
+      "pattern": "/^(\\s*`{3,}).*[\\s\\S]*?^\\1/gmx",
+      "description": "Taken from the cSpell example at https://cspell.org/configuration/patterns/#verbose-regular-expressions"
+    },
+    {
+      "name": "Inline code blocks",
+      "pattern": "\\`([^\\`\\r\\n]+?)\\`",
+      "description": "https://stackoverflow.com/questions/41274241/how-to-capture-inline-markdown-code-but-not-a-markdown-code-fence-with-regex"
+    },
+    { "name": "Link contents", "pattern": "\\<a(.*)\\>", "description": "" },
+    { "name": "Snippet references", "pattern": "-- snippet:(.*)", "description": "" },
+    {
+      "name": "Snippet references 2",
+      "pattern": "\\<\\[sample:(.*)",
+      "description": "another kind of snippet reference"
+    },
+    { "name": "Multi-line code blocks", "pattern": "/^\\s*```[\\s\\S]*?^\\s*```/gm" },
+    {
+      "name": "HTML Tags",
+      "pattern": "<[^>]*>",
+      "description": "Reference: https://stackoverflow.com/questions/11229831/regular-expression-to-remove-html-tags-from-a-string"
+    }
+  ],
+  "ignoreRegExpList": [
+    "Markdown links",
+    "Markdown code blocks",
+    "Inline code blocks",
+    "Link contents",
+    "Snippet references",
+    "Snippet references 2",
+    "Multi-line code blocks",
+    "HTML Tags"
+  ],
+  "ignorePaths": [
+    "packages/mermaid/src/docs/CHANGELOG.md",
+    "packages/mermaid/src/docs/.vitepress/redirect.ts",
+    "packages/mermaid/src/docs/.vitepress/contributor-names.json"
+  ]
+}

cspell.config.yaml

@@ -1,45 +0,0 @@
-# yaml-language-server: $schema=https://raw.githubusercontent.com/streetsidesoftware/cspell/main/cspell.schema.json
-
-$schema: https://raw.githubusercontent.com/streetsidesoftware/cspell/main/cspell.schema.json
-version: '0.2'
-language: en-US,en-GB
-
-import:
-  - ./.cspell/cspell.config.yaml
-
-ignoreRegExpList:
-  - character-set-cyrillic
-  - svg-block
-ignorePaths:
-  - '*lock.{yaml,json}'
-  - dist
-  - CHANGELOG.md
-  - packages/mermaid/src/docs/.vitepress/redirect.ts
-  - packages/mermaid/src/docs/.vitepress/contributor-names.json
-  - backup
-  - '**/*.spec.{js,ts}' # checked by eslint
-  - 'tests/webpack/src/index.js' # checked by eslint
-  - 'cypress/**/*.js' # checked by eslint
-  - '*.csv'
-  - '*.patch'
-  - 'docs/**/*.html'
-  - 'cypress/platform/**'
-dictionaries:
-  - misc-terms
-overrides:
-  - filename:
-      - '**/*.{jison,ts,mts,cjs,mjs,js,json,yaml,yml,md,html}'
-      - 'run'
-      - Dockerfile
-    ignoreRegExpList:
-      - js-unicode-escape
-    dictionaries:
-      - code-terms
-      - 3rd-party-terms
-      - fonts
-      - html
-      - lorem-ipsum
-  - filename: '**/package.json'
-    ignoreRegExpList:
-      - json-property
-# cspell:dictionaries code-terms

cypress.config.cjs

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

cypress.config.ts

@@ -1,39 +0,0 @@
-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',
-    viewportWidth: 1440,
-    viewportHeight: 1024,
-    e2e: {
-      specPattern: 'cypress/integration/**/*.{js,ts}',
-      setupNodeEvents(on, config) {
-        coverage(on, config);
-        on('before:browser:launch', (browser, launchOptions) => {
-          if (browser.name === 'chrome' && browser.isHeadless) {
-            launchOptions.args.push('--window-size=1440,1024', '--force-device-scale-factor=1');
-          }
-          return launchOptions;
-        });
-        // 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;
-      },
-    },
-    video: false,
-  })
-);

cypress/helpers/util.ts

@@ -10,7 +10,7 @@ interface CypressConfig {
 type CypressMermaidConfig = MermaidConfig & CypressConfig;
 
 interface CodeObject {
-  code: string | string[];
+  code: string;
   mermaid: CypressMermaidConfig;
 }
 
@@ -25,7 +25,7 @@ const batchId: string =
     : Cypress.env('CYPRESS_COMMIT') || Date.now().toString());
 
 export const mermaidUrl = (
-  graphStr: string | string[],
+  graphStr: string,
   options: CypressMermaidConfig,
   api: boolean
 ): string => {
@@ -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 && typeof graphStr === 'string') {
+  if (api) {
     url = `http://localhost:9000/xss.html?graph=${graphStr}`;
   }
 
@@ -54,15 +54,16 @@ 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?.noteFontFamily
-        ? _options.sequence.noteFontFamily
-        : 'courier',
+      noteFontFamily:
+        _options.sequence && _options.sequence.noteFontFamily
+          ? _options.sequence.noteFontFamily
+          : 'courier',
       messageFontFamily: 'courier',
     },
   };
@@ -81,7 +82,7 @@ export const urlSnapshotTest = (
 };
 
 export const renderGraph = (
-  graphStr: string | string[],
+  graphStr: string,
   options: CypressMermaidConfig = {},
   api = false
 ): void => {
@@ -94,22 +95,8 @@ export const openURLAndVerifyRendering = (
   options: CypressMermaidConfig,
   validation?: any
 ): void => {
-  const name: string = (options.name ?? cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
-
-  cy.visit(url);
-  cy.window().should('have.property', 'rendered', true);
-  cy.get('svg').should('be.visible');
-
-  if (validation) {
-    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');
+  const name: string = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
 
   if (useAppli) {
     cy.log(`Opening eyes ${Cypress.spec.name} --- ${name}`);
@@ -119,14 +106,21 @@ export const verifyScreenshot = (name: string): void => {
       batchName: Cypress.spec.name,
       batchId: batchId + Cypress.spec.name,
     });
+  }
+
+  cy.visit(url);
+  cy.window().should('have.property', 'rendered', true);
+  cy.get('svg').should('be.visible');
+
+  if (validation) {
+    cy.get('svg').should(validation);
+  }
+
+  if (useAppli) {
     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, verifyScreenshot } from '../../helpers/util.ts';
+import { renderGraph } from '../../helpers/util.ts';
 describe('Configuration', () => {
   describe('arrowMarkerAbsolute', () => {
     it('should handle default value false of arrowMarkerAbsolute', () => {
@@ -117,53 +117,13 @@ describe('Configuration', () => {
     });
     it('should not taint the initial configuration when using multiple directives', () => {
       const url = 'http://localhost:9000/regression/issue-1874.html';
+      cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.window().should('have.property', 'rendered', true);
-      verifyScreenshot(
+
+      cy.get('svg');
+      cy.matchImageSnapshot(
         'configuration.spec-should-not-taint-initial-configuration-when-using-multiple-directives'
       );
     });
   });
-
-  describe('suppressErrorRendering', () => {
-    beforeEach(() => {
-      cy.on('uncaught:exception', (err, runnable) => {
-        return !err.message.includes('Parse error on line');
-      });
-    });
-
-    it('should not render error diagram if suppressErrorRendering is set', () => {
-      const url = 'http://localhost:9000/suppressError.html?suppressErrorRendering=true';
-      cy.visit(url);
-      cy.window().should('have.property', 'rendered', true);
-      cy.get('#test')
-        .find('svg')
-        .should(($svg) => {
-          // all failing diagrams should not appear!
-          expect($svg).to.have.length(2);
-          // none of the diagrams should be error diagrams
-          expect($svg).to.not.contain('Syntax error');
-        });
-      verifyScreenshot(
-        'configuration.spec-should-not-render-error-diagram-if-suppressErrorRendering-is-set'
-      );
-    });
-
-    it('should render error diagram if suppressErrorRendering is not set', () => {
-      const url = 'http://localhost:9000/suppressError.html';
-      cy.visit(url);
-      cy.window().should('have.property', 'rendered', true);
-      cy.get('#test')
-        .find('svg')
-        .should(($svg) => {
-          // all five diagrams should be rendered
-          expect($svg).to.have.length(5);
-          // some of the diagrams should be error diagrams
-          expect($svg).to.contain('Syntax error');
-        });
-      verifyScreenshot(
-        'configuration.spec-should-render-error-diagram-if-suppressErrorRendering-is-not-set'
-      );
-    });
-  });
 });

cypress/integration/other/rerender.spec.js

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

cypress/integration/other/xss.spec.js

@@ -10,6 +10,7 @@ describe('XSS', () => {
     cy.wait(1000).then(() => {
       cy.get('.mermaid').should('exist');
     });
+    cy.get('svg');
   });
 
   it('should not allow tags in the css', () => {
@@ -136,9 +137,4 @@ 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,27 +11,6 @@ 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/block.spec.js

@@ -1,387 +0,0 @@
-import { imgSnapshotTest } from '../../helpers/util';
-/* eslint-disable no-useless-escape */
-describe('Block diagram', () => {
-  it('BL1: should calculate the block widths', () => {
-    imgSnapshotTest(
-      `block-beta
-  columns 2
-  block
-    id2["I am a wide one"]
-    id1
-  end
-  id["Next row"]
-      `
-    );
-  });
-
-  it('BL2: should handle colums statement in sub-blocks', () => {
-    imgSnapshotTest(
-      `block-beta
-  id1["Hello"]
-  block
-    columns 3
-    id2["to"]
-    id3["the"]
-    id4["World"]
-    id5["World"]
-  end
-      `,
-      {}
-    );
-  });
-
-  it('BL3: should align block widths and handle colums statement in sub-blocks', () => {
-    imgSnapshotTest(
-      `block-beta
-  block
-    columns 1
-    id1
-    id2
-    id2.1
-  end
-  id3
-  id4
-      `,
-      {}
-    );
-  });
-
-  it('BL4: should align block widths and handle colums statements in deeper sub-blocks then 1 level', () => {
-    imgSnapshotTest(
-      `block-beta
-  columns 1
-  block
-    columns 1
-    block
-      columns 3
-      id1
-      id2
-      id2.1(("XYZ"))
-    end
-    id48
-  end
-  id3
-      `,
-      {}
-    );
-  });
-
-  it('BL5: should align block widths and handle colums statements in deeper sub-blocks then 1 level (alt)', () => {
-    imgSnapshotTest(
-      `block-beta
-  columns 1
-  block
-    id1
-    id2
-    block
-      columns 1
-      id3("Wider then")
-      id5(("id5"))
-    end
-  end
-  id4
-      `,
-      {}
-    );
-  });
-
-  it('BL6: should handle block arrows and spece statements', () => {
-    imgSnapshotTest(
-      `block-beta
-    columns 3
-    space:3
-    ida idb idc
-    id1  id2
-      blockArrowId<["Label"]>(right)
-      blockArrowId2<["Label"]>(left)
-      blockArrowId3<["Label"]>(up)
-      blockArrowId4<["Label"]>(down)
-      blockArrowId5<["Label"]>(x)
-      blockArrowId6<["Label"]>(y)
-      blockArrowId6<["Label"]>(x, down)
-      `,
-      {}
-    );
-  });
-
-  it('BL7: should handle different types of edges', () => {
-    imgSnapshotTest(
-      `block-beta
-      columns 3
-      A space:5
-      A --o B
-      A --> C
-      A --x D
-      `,
-      {}
-    );
-  });
-
-  it('BL8: should handle sub-blocks without columns statements', () => {
-    imgSnapshotTest(
-      `block-beta
-      columns 2
-      C A B
-      block
-        D
-        E
-      end
-      `,
-      {}
-    );
-  });
-
-  it('BL9: should handle edges from blocks in sub blocks to other blocks', () => {
-    imgSnapshotTest(
-      `block-beta
-      columns 3
-      B space
-      block
-        D
-      end
-      D --> B
-      `,
-      {}
-    );
-  });
-
-  it('BL10: should handle edges from composite blocks', () => {
-    imgSnapshotTest(
-      `block-beta
-      columns 3
-      B space
-      block BL
-        D
-      end
-      BL --> B
-      `,
-      {}
-    );
-  });
-
-  it('BL11: should handle edges to composite blocks', () => {
-    imgSnapshotTest(
-      `block-beta
-      columns 3
-      B space
-      block BL
-        D
-      end
-      B --> BL
-      `,
-      {}
-    );
-  });
-
-  it('BL12: edges should handle labels', () => {
-    imgSnapshotTest(
-      `block-beta
-      A
-      space
-      A -- "apa" --> E
-      `,
-      {}
-    );
-  });
-
-  it('BL13: should handle block arrows in different directions', () => {
-    imgSnapshotTest(
-      `block-beta
-      columns 3
-      space blockArrowId1<["down"]>(down) space
-      blockArrowId2<["right"]>(right) blockArrowId3<["Sync"]>(x, y) blockArrowId4<["left"]>(left)
-      space blockArrowId5<["up"]>(up) space
-      blockArrowId6<["x"]>(x) space blockArrowId7<["y"]>(y)
-      `,
-      {}
-    );
-  });
-
-  it('BL14: should style statements and class statements', () => {
-    imgSnapshotTest(
-      `block-beta
-    A
-    B
-    classDef blue fill:#66f,stroke:#333,stroke-width:2px;
-    class A blue
-    style B fill:#f9F,stroke:#333,stroke-width:4px
-      `,
-      {}
-    );
-  });
-
-  it('BL15: width alignment - D and E should share available space', () => {
-    imgSnapshotTest(
-      `block-beta
-  block
-    D
-    E
-  end
-  db("This is the text in the box")
-      `,
-      {}
-    );
-  });
-
-  it('BL16: width alignment - C should be as wide as the composite block', () => {
-    imgSnapshotTest(
-      `block-beta
-  block
-    A("This is the text")
-    B
-  end
-  C
-      `,
-      {}
-    );
-  });
-
-  it('BL17: width alignment - blocks shold be equal in width', () => {
-    imgSnapshotTest(
-      `block-beta
-    A("This is the text")
-    B
-    C
-      `,
-      {}
-    );
-  });
-
-  it('BL18: block types 1 - square, rounded and circle', () => {
-    imgSnapshotTest(
-      `block-beta
-    A["square"]
-    B("rounded")
-    C(("circle"))
-      `,
-      {}
-    );
-  });
-
-  it('BL19: block types 2 - odd, diamond and hexagon', () => {
-    imgSnapshotTest(
-      `block-beta
-    A>"rect_left_inv_arrow"]
-    B{"diamond"}
-    C{{"hexagon"}}
-      `,
-      {}
-    );
-  });
-
-  it('BL20: block types 3 - stadium', () => {
-    imgSnapshotTest(
-      `block-beta
-    A(["stadium"])
-      `,
-      {}
-    );
-  });
-
-  it('BL21: block types 4 - lean right, lean left, trapezoid and inv trapezoid', () => {
-    imgSnapshotTest(
-      `block-beta
-    A[/"lean right"/]
-    B[\"lean left"\]
-    C[/"trapezoid"\]
-    D[\"trapezoid alt"/]
-      `,
-      {}
-    );
-  });
-
-  it('BL22: block types 1 - square, rounded and circle', () => {
-    imgSnapshotTest(
-      `block-beta
-    A["square"]
-    B("rounded")
-    C(("circle"))
-      `,
-      {}
-    );
-  });
-
-  it('BL23: sizing - it should be possible to make a block wider', () => {
-    imgSnapshotTest(
-      `block-beta
-      A("rounded"):2
-      B:2
-      C
-      `,
-      {}
-    );
-  });
-
-  it('BL24: sizing - it should be possible to make a composite block wider', () => {
-    imgSnapshotTest(
-      `block-beta
-      block:2
-        A
-      end
-      B
-      `,
-      {}
-    );
-  });
-
-  it('BL25: block in the middle with space on each side', () => {
-    imgSnapshotTest(
-      `block-beta
-        columns 3
-        space
-        middle["In the middle"]
-        space
-      `,
-      {}
-    );
-  });
-  it('BL26: space and an edge', () => {
-    imgSnapshotTest(
-      `block-beta
-  columns 5
-    A space B
-    A --x B
-      `,
-      {}
-    );
-  });
-  it('BL27: block sizes for regular blocks', () => {
-    imgSnapshotTest(
-      `block-beta
-  columns 3
-    a["A wide one"] b:2 c:2 d
-      `,
-      {}
-    );
-  });
-  it('BL28: composite block with a set width - f should use the available space', () => {
-    imgSnapshotTest(
-      `block-beta
-  columns 3
-  a:3
-  block:e:3
-      f
-  end
-  g
-  `,
-      {}
-    );
-  });
-
-  it('BL29: composite block with a set width - f and g should split the available space', () => {
-    imgSnapshotTest(
-      `block-beta
-  columns 3
-  a:3
-  block:e:3
-      f
-      g
-  end
-  h
-  i
-  j
-  `,
-      {}
-    );
-  });
-});

cypress/integration/rendering/c4.spec.js

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

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

@@ -76,7 +76,7 @@ describe('Class diagram V2', () => {
     );
   });
 
-  it('2.1 should render a simple class diagram with different visibilities', () => {
+  it('should render a simple class diagram with different visibilities', () => {
     imgSnapshotTest(
       `
     classDiagram-v2
@@ -93,7 +93,7 @@ describe('Class diagram V2', () => {
     );
   });
 
-  it('3: should render multiple class diagrams', () => {
+  it('should render multiple class diagrams', () => {
     imgSnapshotTest(
       [
         `
@@ -571,14 +571,4 @@ class C13["With Città foreign language"]
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
   });
-  it('should render a simple class diagram with style definition', () => {
-    imgSnapshotTest(
-      `
-      classDiagram-v2
-        class Class10
-        style Class10 fill:#f9f,stroke:#333,stroke-width:4px
-        `,
-      { logLevel: 1, flowchart: { htmlLabels: false } }
-    );
-  });
 });

cypress/integration/rendering/classDiagram.spec.js

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

cypress/integration/rendering/debug.spec.js

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

cypress/integration/rendering/erDiagram.spec.js

@@ -218,6 +218,7 @@ describe('Entity Relationship Diagram', () => {
         `,
       { loglevel: 1 }
     );
+    cy.get('svg');
   });
 
   it('should render entities with keys', () => {

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('error');
+      expect(err.message).to.include('Parse error');
       // return false to prevent the error from
       // failing this test
       return false;

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

@@ -837,26 +837,6 @@ 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 } }
         );
@@ -864,41 +844,3 @@ flowchart LR
     });
   });
 });
-
-describe('Title and arrow styling #4813', () => {
-  it('should render a flowchart with title', () => {
-    const titleString = 'Test Title';
-    renderGraph(
-      `---
-      title: ${titleString}
-      ---
-      flowchart LR
-      A-->B
-      A-->C`,
-      { layout: 'elk' }
-    );
-    cy.get('svg').should((svg) => {
-      const title = svg[0].querySelector('text');
-      expect(title.textContent).to.contain(titleString);
-    });
-  });
-
-  it('Render with stylized arrows', () => {
-    renderGraph(
-      `
-      flowchart LR
-      A-->B
-      B-.-oC
-      C==xD
-      D ~~~ A`,
-      { layout: 'elk' }
-    );
-    cy.get('svg').should((svg) => {
-      const edges = svg[0].querySelectorAll('.edges path');
-      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(417 * 0.95, 417 * 1.05);
+      expect(maxWidthValue).to.be.within(290 * 0.95 - 1, 290 * 1.05);
     });
   });
   it('8: should render a flowchart when useMaxWidth is false', () => {
@@ -118,7 +118,7 @@ describe('Flowchart v2', () => {
       const width = parseFloat(svg.attr('width'));
       // use within because the absolute value can be slightly different depending on the environment ±5%
       // expect(height).to.be.within(446 * 0.95, 446 * 1.05);
-      expect(width).to.be.within(417 * 0.95, 417 * 1.05);
+      expect(width).to.be.within(290 * 0.95 - 1, 290 * 1.05);
       expect(svg).to.not.have.attr('style');
     });
   });
@@ -729,82 +729,6 @@ A ~~~ B
       {}
     );
   });
-
-  it('5064: Should render when subgraph child has links to outside node and subgraph', () => {
-    imgSnapshotTest(
-      `flowchart TB
-    Out --> In
-    subgraph Sub
-      In
-    end
-    Sub --> In`
-    );
-  });
-
-  it('5059: Should render when subgraph contains only subgraphs, has link to outside and itself is part of a link', () => {
-    imgSnapshotTest(
-      `flowchart
-
-      subgraph Main
-        subgraph Child1
-          Node1
-          Node2
-        end
-        subgraph Child2
-          Node3
-          Node4
-        end
-      end
-      Main --> Out1
-      Child2 --> Out2`
-    );
-  });
-
-  it('3258: Should render subgraphs with main graph nodeSpacing and rankSpacing', () => {
-    imgSnapshotTest(
-      `---
-      title: Subgraph nodeSpacing and rankSpacing example
-      ---
-      flowchart LR
-        X --> Y
-        subgraph X
-          direction LR
-          A
-          C
-        end
-        subgraph Y
-          B
-          D
-        end
-      `,
-      { flowchart: { nodeSpacing: 1, rankSpacing: 1 } }
-    );
-  });
-
-  it('3258: Should render subgraphs with large nodeSpacing and rankSpacing', () => {
-    imgSnapshotTest(
-      `---
-      title: Subgraph nodeSpacing and rankSpacing example
-      config:
-        flowchart: 
-          nodeSpacing: 250
-          rankSpacing: 250
-      ---
-      flowchart LR
-        X --> Y
-        subgraph X
-          direction LR
-          A
-          C
-        end
-        subgraph Y
-          B
-          D
-        end
-      `
-    );
-  });
-
   describe('Markdown strings flowchart (#4220)', () => {
     describe('html labels', () => {
       it('With styling and classes', () => {
@@ -949,108 +873,5 @@ end
         );
       });
     });
-
-    it('should not auto wrap when markdownAutoWrap is false', () => {
-      imgSnapshotTest(
-        `flowchart TD
-    angular_velocity["\`**angular_velocity**
-      *angular_displacement / duration*
-      [rad/s, 1/s]
-      {vector}\`"]
-    frequency["frequency\n(1 / period_duration)\n[Hz, 1/s]"]`,
-        { markdownAutoWrap: false }
-      );
-    });
-  });
-  describe('Subgraph title margins', () => {
-    it('Should render subgraphs with title margins set (LR)', () => {
-      imgSnapshotTest(
-        `flowchart LR
-
-          subgraph TOP
-              direction TB
-              subgraph B1
-                  direction RL
-                  i1 -->f1
-              end
-              subgraph B2
-                  direction BT
-                  i2 -->f2
-              end
-          end
-          A --> TOP --> B
-          B1 --> B2
-        `,
-        { flowchart: { subGraphTitleMargin: { top: 10, bottom: 5 } } }
-      );
-    });
-    it('Should render subgraphs with title margins set (TD)', () => {
-      imgSnapshotTest(
-        `flowchart TD
-
-          subgraph TOP
-              direction LR
-              subgraph B1
-                  direction RL
-                  i1 -->f1
-              end
-              subgraph B2
-                  direction BT
-                  i2 -->f2
-              end
-          end
-          A --> TOP --> B
-          B1 --> B2
-        `,
-        { flowchart: { subGraphTitleMargin: { top: 8, bottom: 16 } } }
-      );
-    });
-    it('Should render subgraphs with title margins set (LR) and htmlLabels set to false', () => {
-      imgSnapshotTest(
-        `flowchart LR
-
-          subgraph TOP
-              direction TB
-              subgraph B1
-                  direction RL
-                  i1 -->f1
-              end
-              subgraph B2
-                  direction BT
-                  i2 -->f2
-              end
-          end
-          A --> TOP --> B
-          B1 --> B2
-        `,
-        {
-          htmlLabels: false,
-          flowchart: { htmlLabels: false, subGraphTitleMargin: { top: 10, bottom: 5 } },
-        }
-      );
-    });
-    it('Should render subgraphs with title margins and edge labels', () => {
-      imgSnapshotTest(
-        `flowchart LR
-
-          subgraph TOP
-              direction TB
-              subgraph B1
-                  direction RL
-                  i1 --lb1-->f1
-              end
-              subgraph B2
-                  direction BT
-                  i2 --lb2-->f2
-              end
-          end
-          A --lb3--> TOP --lb4--> B
-          B1 --lb5--> B2
-        `,
-        {
-          flowchart: { subGraphTitleMargin: { top: 10, bottom: 5 } },
-        }
-      );
-    });
   });
 });

cypress/integration/rendering/flowchart.spec.js

@@ -733,7 +733,7 @@ describe('Graph', () => {
   });
   it('38: should render a flowchart when useMaxWidth is true (default)', () => {
     renderGraph(
-      `flowchart TD
+      `graph 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(446 * 0.9, 446 * 1.1);
+      expect(maxWidthValue).to.be.within(300 * 0.9, 300 * 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(446 * 0.9, 446 * 1.1);
+      expect(width).to.be.within(300 * 0.9, 300 * 1.1);
       expect(svg).to.not.have.attr('style');
     });
   });
@@ -905,16 +905,13 @@ 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
     `,
-      {
-        flowchart: { htmlLabels: true },
-        securityLevel: 'loose',
-      }
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
 });

cypress/integration/rendering/gantt.spec.js

@@ -92,31 +92,6 @@ describe('Gantt diagram', () => {
       {}
     );
   });
-  it('should handle multiple dependencies syntax with after and until', () => {
-    imgSnapshotTest(
-      `
-      gantt
-      dateFormat  YYYY-MM-DD
-      axisFormat  %d/%m
-      title Adding GANTT diagram to mermaid
-      excludes weekdays 2014-01-10
-      todayMarker off
-
-      section team's critical event
-      deadline A           :milestone, crit, deadlineA, 2024-02-01, 0
-      deadline B           :milestone, crit, deadlineB, 2024-02-15, 0
-      boss on leave        :bossaway, 2024-01-28, 2024-02-11
-
-      section new intern
-      onboarding           :onboarding, 2024-01-02, 1w
-      literature review    :litreview, 2024-01-02, 10d
-      project A            :projectA, after onboarding litreview, until deadlineA bossaway
-      chilling             :chilling, after projectA, until deadlineA
-      project B            :projectB, after deadlineA, until deadlineB
-      `,
-      {}
-    );
-  });
   it('should FAIL redering a gantt chart for issue #1060 with invalid date', () => {
     imgSnapshotTest(
       `
@@ -270,10 +245,7 @@ describe('Gantt diagram', () => {
       const style = svg.attr('style');
       expect(style).to.match(/^max-width: [\d.]+px;$/);
       const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
-      expect(maxWidthValue).to.be.within(
-        Cypress.config().viewportWidth * 0.95,
-        Cypress.config().viewportWidth * 1.05
-      );
+      expect(maxWidthValue).to.be.within(984 * 0.95, 984 * 1.05);
     });
   });
 
@@ -313,11 +285,11 @@ describe('Gantt diagram', () => {
       { gantt: { useMaxWidth: false } }
     );
     cy.get('svg').should((svg) => {
+      // const height = parseFloat(svg.attr('height'));
       const width = parseFloat(svg.attr('width'));
-      expect(width).to.be.within(
-        Cypress.config().viewportWidth * 0.95,
-        Cypress.config().viewportWidth * 1.05
-      );
+      // use within because the absolute value can be slightly different depending on the environment ±5%
+      // expect(height).to.be.within(484 * 0.95, 484 * 1.05);
+      expect(width).to.be.within(984 * 0.95, 984 * 1.05);
       expect(svg).to.not.have.attr('style');
     });
   });
@@ -573,28 +545,7 @@ describe('Gantt diagram', () => {
       `
     );
   });
-  it('should render a gantt diagram exculding friday and saturday', () => {
-    imgSnapshotTest(
-      `gantt
-      title A Gantt Diagram
-      dateFormat  YYYY-MM-DD
-      excludes weekends
-      weekend friday
-      section Section1
-      A task :a1, 2024-02-28, 10d`
-    );
-  });
-  it('should render a gantt diagram exculding saturday and sunday', () => {
-    imgSnapshotTest(
-      `gantt
-      title A Gantt Diagram
-      dateFormat  YYYY-MM-DD
-      excludes weekends
-      weekend saturday
-      section Section1
-      A task :a1, 2024-02-28, 10d`
-    );
-  });
+
   it('should render when compact is true', () => {
     imgSnapshotTest(
       `
@@ -629,106 +580,4 @@ describe('Gantt diagram', () => {
       {}
     );
   });
-
-  it("should render when there's a semicolon in the title", () => {
-    imgSnapshotTest(
-      `
-      gantt
-      title ;Gantt With a Semicolon in the Title
-      dateFormat  YYYY-MM-DD
-      section Section
-      A task           :a1, 2014-01-01, 30d
-      Another task     :after a1  , 20d
-      section Another
-      Task in sec      :2014-01-12  , 12d
-      another task      : 24d
-    `,
-      {}
-    );
-  });
-
-  it("should render when there's a semicolon in a section is true", () => {
-    imgSnapshotTest(
-      `
-      gantt
-      title Gantt Digram
-      dateFormat  YYYY-MM-DD
-      section ;Section With a Semicolon
-      A task           :a1, 2014-01-01, 30d
-      Another task     :after a1  , 20d
-      section Another
-      Task in sec      :2014-01-12  , 12d
-      another task      : 24d
-    `,
-      {}
-    );
-  });
-
-  it("should render when there's a semicolon in the task data", () => {
-    imgSnapshotTest(
-      `
-      gantt
-      title Gantt Digram
-      dateFormat  YYYY-MM-DD
-      section Section
-      ;A task with a semiclon           :a1, 2014-01-01, 30d
-      Another task     :after a1  , 20d
-      section Another
-      Task in sec      :2014-01-12  , 12d
-      another task      : 24d
-    `,
-      {}
-    );
-  });
-
-  it("should render when there's a hashtag in the title", () => {
-    imgSnapshotTest(
-      `
-      gantt
-      title #Gantt With a Hashtag in the Title
-      dateFormat  YYYY-MM-DD
-      section Section
-      A task           :a1, 2014-01-01, 30d
-      Another task     :after a1  , 20d
-      section Another
-      Task in sec      :2014-01-12  , 12d
-      another task      : 24d
-    `,
-      {}
-    );
-  });
-
-  it("should render when there's a hashtag in a section is true", () => {
-    imgSnapshotTest(
-      `
-      gantt
-      title Gantt Digram
-      dateFormat  YYYY-MM-DD
-      section #Section With a Hashtag
-      A task           :a1, 2014-01-01, 30d
-      Another task     :after a1  , 20d
-      section Another
-      Task in sec      :2014-01-12  , 12d
-      another task      : 24d
-    `,
-      {}
-    );
-  });
-
-  it("should render when there's a hashtag in the task data", () => {
-    imgSnapshotTest(
-      `
-      gantt
-      title Gantt Digram
-      dateFormat  YYYY-MM-DD
-      section Section
-      #A task with a hashtag           :a1, 2014-01-01, 30d
-      Another task     :after a1  , 20d
-      section Another
-      Task in sec      :2014-01-12  , 12d
-      another task      : 24d
-    `,
-      {}
-    );
-  });
 });

cypress/integration/rendering/gitGraph.spec.js

@@ -701,872 +701,4 @@ gitGraph TB:
       {}
     );
   });
-  it('34: should render a simple gitgraph with two branches from same commit', () => {
-    imgSnapshotTest(
-      `gitGraph
-      commit id:"1-abcdefg"
-      commit id:"2-abcdefg"
-      branch feature-001
-      commit id:"3-abcdefg"
-      commit id:"4-abcdefg"
-      checkout main
-      branch feature-002
-      commit id:"5-abcdefg"
-      checkout feature-001
-      merge feature-002
-      `,
-      {}
-    );
-  });
-  it('35: should render a simple gitgraph with two branches from same commit | Vertical Branch', () => {
-    imgSnapshotTest(
-      `gitGraph TB:
-      commit id:"1-abcdefg"
-      commit id:"2-abcdefg"
-      branch feature-001
-      commit id:"3-abcdefg"
-      commit id:"4-abcdefg"
-      checkout main
-      branch feature-002
-      commit id:"5-abcdefg"
-      checkout feature-001
-      merge feature-002
-      `,
-      {}
-    );
-  });
-  it('36: should render GitGraph with branch that is not used immediately', () => {
-    imgSnapshotTest(
-      `gitGraph LR:
-      commit id:"1-abcdefg"
-      branch x
-      checkout main
-      commit id:"2-abcdefg"
-      checkout x
-      commit id:"3-abcdefg"
-      checkout main
-      merge x
-      `,
-      {}
-    );
-  });
-  it('37: should render GitGraph with branch that is not used immediately | Vertical Branch', () => {
-    imgSnapshotTest(
-      `gitGraph TB:
-      commit id:"1-abcdefg"
-      branch x
-      checkout main
-      commit id:"2-abcdefg"
-      checkout x
-      commit id:"3-abcdefg"
-      checkout main
-      merge x
-      `,
-      {}
-    );
-  });
-  it('38: should render GitGraph with branch and sub-branch neither of which used immediately', () => {
-    imgSnapshotTest(
-      `gitGraph LR:
-      commit id:"1-abcdefg"
-      branch x
-      checkout main
-      commit id:"2-abcdefg"
-      checkout x
-      commit id:"3-abcdefg"
-      checkout main
-      merge x
-      checkout x
-      branch y
-      checkout x
-      commit id:"4-abcdefg"
-      checkout y
-      commit id:"5-abcdefg"
-      checkout x
-      merge y
-      `,
-      {}
-    );
-  });
-  it('39: should render GitGraph with branch and sub-branch neither of which used immediately | Vertical Branch', () => {
-    imgSnapshotTest(
-      `gitGraph TB:
-      commit id:"1-abcdefg"
-      branch x
-      checkout main
-      commit id:"2-abcdefg"
-      checkout x
-      commit id:"3-abcdefg"
-      checkout main
-      merge x
-      checkout x
-      branch y
-      checkout x
-      commit id:"4-abcdefg"
-      checkout y
-      commit id:"5-abcdefg"
-      checkout x
-      merge y
-      `,
-      {}
-    );
-  });
-  it('40: should render a simple gitgraph with cherry pick merge commit', () => {
-    imgSnapshotTest(
-      `gitGraph
-      commit id: "ZERO"
-      branch feature
-      branch release
-      checkout feature
-      commit id: "A"
-      commit id: "B"
-      checkout main
-      merge feature id: "M"
-      checkout release
-      cherry-pick id: "M" parent:"B"`
-    );
-  });
-  it('41: should render default GitGraph with parallelCommits set to false', () => {
-    imgSnapshotTest(
-      `gitGraph
-      commit id:"1-abcdefg"
-      commit id:"2-abcdefg"
-      branch develop
-      commit id:"3-abcdefg"
-      commit id:"4-abcdefg"
-      checkout main
-      branch feature
-      commit id:"5-abcdefg"
-      commit id:"6-abcdefg"
-      checkout main
-      commit id:"7-abcdefg"
-      commit id:"8-abcdefg"
-      `,
-      { gitGraph: { parallelCommits: false } }
-    );
-  });
-  it('42: should render GitGraph with parallel commits', () => {
-    imgSnapshotTest(
-      `gitGraph
-      commit id:"1-abcdefg"
-      commit id:"2-abcdefg"
-      branch develop
-      commit id:"3-abcdefg"
-      commit id:"4-abcdefg"
-      checkout main
-      branch feature
-      commit id:"5-abcdefg"
-      commit id:"6-abcdefg"
-      checkout main
-      commit id:"7-abcdefg"
-      commit id:"8-abcdefg"
-      `,
-      { gitGraph: { parallelCommits: true } }
-    );
-  });
-  it('43: should render GitGraph with parallel commits | Vertical Branch', () => {
-    imgSnapshotTest(
-      `gitGraph TB:
-      commit id:"1-abcdefg"
-      commit id:"2-abcdefg"
-      branch develop
-      commit id:"3-abcdefg"
-      commit id:"4-abcdefg"
-      checkout main
-      branch feature
-      commit id:"5-abcdefg"
-      commit id:"6-abcdefg"
-      checkout main
-      commit id:"7-abcdefg"
-      commit id:"8-abcdefg"
-      `,
-      { gitGraph: { parallelCommits: true } }
-    );
-  });
-  it('44: should render GitGraph with unconnected branches and no parallel commits', () => {
-    imgSnapshotTest(
-      `gitGraph
-      branch dev
-      branch v2
-      branch feat
-      commit id:"1-abcdefg"
-      commit id:"2-abcdefg"
-      checkout main
-      commit id:"3-abcdefg"
-      checkout dev
-      commit id:"4-abcdefg"
-      checkout v2
-      commit id:"5-abcdefg"
-      checkout main
-      commit id:"6-abcdefg"
-      `,
-      { gitGraph: { parallelCommits: false } }
-    );
-  });
-  it('45: should render GitGraph with unconnected branches and parallel commits', () => {
-    imgSnapshotTest(
-      `gitGraph
-      branch dev
-      branch v2
-      branch feat
-      commit id:"1-abcdefg"
-      commit id:"2-abcdefg"
-      checkout main
-      commit id:"3-abcdefg"
-      checkout dev
-      commit id:"4-abcdefg"
-      checkout v2
-      commit id:"5-abcdefg"
-      checkout main
-      commit id:"6-abcdefg"
-      `,
-      { gitGraph: { parallelCommits: true } }
-    );
-  });
-  it('46: should render GitGraph with unconnected branches and parallel commits | Vertical Branch', () => {
-    imgSnapshotTest(
-      `gitGraph TB:
-      branch dev
-      branch v2
-      branch feat
-      commit id:"1-abcdefg"
-      commit id:"2-abcdefg"
-      checkout main
-      commit id:"3-abcdefg"
-      checkout dev
-      commit id:"4-abcdefg"
-      checkout v2
-      commit id:"5-abcdefg"
-      checkout main
-      commit id:"6-abcdefg"
-      `,
-      { gitGraph: { parallelCommits: true } }
-    );
-  });
-  it('46: should render GitGraph with merge back and merge forward', () => {
-    imgSnapshotTest(
-      `gitGraph LR:
-      commit id:"1-abcdefg"
-
-      branch branch-A
-      branch branch-B
-      commit id:"2-abcdefg"
-
-      checkout branch-A
-      merge branch-B
-
-      checkout branch-B
-      merge branch-A
-      `,
-      { gitGraph: { parallelCommits: true } }
-    );
-  });
-  it('47: should render GitGraph with merge back and merge forward | Vertical Branch', () => {
-    imgSnapshotTest(
-      `gitGraph TB:
-      commit id:"1-abcdefg"
-
-      branch branch-A
-      branch branch-B
-      commit id:"2-abcdefg"
-
-      checkout branch-A
-      merge branch-B
-
-      checkout branch-B
-      merge branch-A
-      `,
-      { gitGraph: { parallelCommits: true } }
-    );
-  });
-  it('48: should render GitGraph with merge on a new branch | Vertical Branch', () => {
-    imgSnapshotTest(
-      `gitGraph LR:
-      commit id:"1-abcdefg"
-
-      branch branch-B order: 2
-      commit id:"2-abcdefg"
-
-      branch branch-A
-      merge main
-
-      checkout branch-B
-      merge branch-A
-      `,
-      { gitGraph: { parallelCommits: true } }
-    );
-  });
-  it('49: should render GitGraph with merge on a new branch | Vertical Branch', () => {
-    imgSnapshotTest(
-      `gitGraph TB:
-      commit id:"1-abcdefg"
-
-      branch branch-B order: 2
-      commit id:"2-abcdefg"
-
-      branch branch-A
-      merge main
-
-      checkout branch-B
-      merge branch-A
-      `,
-      { gitGraph: { parallelCommits: true } }
-    );
-  });
-  describe('Git-Graph Bottom-to-Top Orientation Tests', () => {
-    it('50: should render a simple gitgraph with commit on main branch | Vertical Branch - Bottom-to-top', () => {
-      imgSnapshotTest(
-        `gitGraph BT:
-         commit id: "1"
-         commit id: "2"
-         commit id: "3"
-        `,
-        {}
-      );
-    });
-    it('51: should render a simple gitgraph with commit on main branch with Id | Vertical Branch - Bottom-to-top', () => {
-      imgSnapshotTest(
-        `gitGraph BT:
-         commit id: "One"
-         commit id: "Two"
-         commit id: "Three"
-        `,
-        {}
-      );
-    });
-    it('52: should render a simple gitgraph with different commitTypes on main branch | Vertical Branch - Bottom-to-top', () => {
-      imgSnapshotTest(
-        `gitGraph BT:
-         commit id: "Normal Commit"
-         commit id: "Reverse Commit" type: REVERSE
-         commit id: "Highlight Commit" type: HIGHLIGHT
-        `,
-        {}
-      );
-    });
-    it('53: should render a simple gitgraph with tags commitTypes on main branch | Vertical Branch - Bottom-to-top', () => {
-      imgSnapshotTest(
-        `gitGraph BT:
-         commit id: "Normal Commit with tag" tag: "v1.0.0"
-         commit id: "Reverse Commit with tag" type: REVERSE tag: "RC_1"
-         commit id: "Highlight Commit" type: HIGHLIGHT  tag: "8.8.4"
-        `,
-        {}
-      );
-    });
-    it('54: should render a simple gitgraph with two branches | Vertical Branch - Bottom-to-top', () => {
-      imgSnapshotTest(
-        `gitGraph BT:
-         commit id: "1"
-         commit id: "2"
-         branch develop
-         checkout develop
-         commit id: "3"
-         commit id: "4"
-         checkout main
-         commit id: "5"
-         commit id: "6"
-        `,
-        {}
-      );
-    });
-    it('55: should render a simple gitgraph with two branches and merge commit | Vertical Branch - Bottom-to-top', () => {
-      imgSnapshotTest(
-        `gitGraph BT:
-         commit id: "1"
-         commit id: "2"
-         branch develop
-         checkout develop
-         commit id: "3"
-         commit id: "4"
-         checkout main
-         merge develop
-         commit id: "5"
-         commit id: "6"
-        `,
-        {}
-      );
-    });
-    it('56: should render a simple gitgraph with three branches and tagged merge commit | Vertical Branch - Bottom-to-top', () => {
-      imgSnapshotTest(
-        `gitGraph BT:
-         commit id: "1"
-         commit id: "2"
-         branch nice_feature
-         checkout nice_feature
-         commit id: "3"
-         checkout main
-         commit id: "4"
-         checkout nice_feature
-         branch very_nice_feature
-         checkout very_nice_feature
-         commit id: "5"
-         checkout main
-         commit id: "6"
-         checkout nice_feature
-         commit id: "7"
-         checkout main
-         merge nice_feature id: "12345" tag: "my merge commit"
-         checkout very_nice_feature
-         commit id: "8"
-         checkout main
-         commit id: "9"
-        `,
-        {}
-      );
-    });
-    it('57: should render a simple gitgraph with more than 8 branches &  overriding variables | Vertical Branch - Bottom-to-top', () => {
-      imgSnapshotTest(
-        `%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
-          'gitBranchLabel0': '#ffffff',
-          'gitBranchLabel1': '#ffffff',
-          'gitBranchLabel2': '#ffffff',
-          'gitBranchLabel3': '#ffffff',
-          'gitBranchLabel4': '#ffffff',
-          'gitBranchLabel5': '#ffffff',
-          'gitBranchLabel6': '#ffffff',
-          'gitBranchLabel7': '#ffffff',
-    } } }%%
-    gitGraph BT:
-      checkout main
-      branch branch1
-      branch branch2
-      branch branch3
-      branch branch4
-      branch branch5
-      branch branch6
-      branch branch7
-      branch branch8
-      branch branch9
-      checkout branch1
-      commit id: "1"
-        `,
-        {}
-      );
-    });
-    it('58: should render a simple gitgraph with rotated labels | Vertical Branch - Bottom-to-top', () => {
-      imgSnapshotTest(
-        `%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'gitGraph': {
-          'rotateCommitLabel': true
-    } } }%%
-          gitGraph BT:
-          commit id: "75f7219e83b321cd3fdde7dcf83bc7c1000a6828"
-          commit id: "0db4784daf82736dec4569e0dc92980d328c1f2e"
-          commit id: "7067e9973f9eaa6cd4a4b723c506d1eab598e83e"
-          commit id: "66972321ad6c199013b5b31f03b3a86fa3f9817d"
-        `,
-        {}
-      );
-    });
-    it('59: should render a simple gitgraph with horizontal labels | Vertical Branch - Bottom-to-top', () => {
-      imgSnapshotTest(
-        `%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'gitGraph': {
-          'rotateCommitLabel': false
-    } } }%%
-          gitGraph BT:
-          commit id: "Alpha"
-          commit id: "Beta"
-          commit id: "Gamma"
-          commit id: "Delta"
-        `,
-        {}
-      );
-    });
-    it('60: should render a simple gitgraph with cherry pick commit | Vertical Branch - Bottom-to-top', () => {
-      imgSnapshotTest(
-        `
-      gitGraph BT:
-         commit id: "ZERO"
-         branch develop
-         commit id:"A"
-         checkout main
-         commit id:"ONE"
-         checkout develop
-         commit id:"B"
-         checkout main
-         commit id:"TWO"
-         cherry-pick id:"A"
-         commit id:"THREE"
-         checkout develop
-         commit id:"C"
-        `,
-        {}
-      );
-    });
-    it('61: should render a gitgraph with cherry pick commit with custom tag | Vertical Branch - Bottom-to-top', () => {
-      imgSnapshotTest(
-        `
-      gitGraph BT:
-         commit id: "ZERO"
-         branch develop
-         commit id:"A"
-         checkout main
-         commit id:"ONE"
-         checkout develop
-         commit id:"B"
-         checkout main
-         commit id:"TWO"
-         cherry-pick id:"A" tag: "snapshot"
-         commit id:"THREE"
-         checkout develop
-         commit id:"C"
-        `,
-        {}
-      );
-    });
-    it('62: should render a gitgraph with cherry pick commit with no tag | Vertical Branch - Bottom-to-top', () => {
-      imgSnapshotTest(
-        `
-      gitGraph BT:
-         commit id: "ZERO"
-         branch develop
-         commit id:"A"
-         checkout main
-         commit id:"ONE"
-         checkout develop
-         commit id:"B"
-         checkout main
-         commit id:"TWO"
-         cherry-pick id:"A" tag: ""
-         commit id:"THREE"
-         checkout develop
-         commit id:"C"
-        `,
-        {}
-      );
-    });
-    it('63: should render a simple gitgraph with two cherry pick commit | Vertical Branch - Bottom-to-top', () => {
-      imgSnapshotTest(
-        `
-      gitGraph BT:
-         commit id: "ZERO"
-         branch develop
-         commit id:"A"
-         checkout main
-         commit id:"ONE"
-         checkout develop
-         commit id:"B"
-         branch featureA
-         commit id:"FIX"
-         commit id: "FIX-2"
-         checkout main
-         commit id:"TWO"
-         cherry-pick id:"A"
-         commit id:"THREE"
-         cherry-pick id:"FIX"
-         checkout develop
-         commit id:"C"
-         merge featureA
-        `,
-        {}
-      );
-    });
-    it('64: should render commits for more than 8 branches | Vertical Branch - Bottom-to-top', () => {
-      imgSnapshotTest(
-        `
-        gitGraph BT:
-        checkout main
-        %% Make sure to manually set the ID of all commits, for consistent visual tests
-        commit id: "1-abcdefg"
-        checkout main
-        branch branch1
-        commit id: "2-abcdefg"
-        checkout main
-        merge branch1
-        branch branch2
-        commit id: "3-abcdefg"
-        checkout main
-        merge branch2
-        branch branch3
-        commit id: "4-abcdefg"
-        checkout main
-        merge branch3
-        branch branch4
-        commit id: "5-abcdefg"
-        checkout main
-        merge branch4
-        branch branch5
-        commit id: "6-abcdefg"
-        checkout main
-        merge branch5
-        branch branch6
-        commit id: "7-abcdefg"
-        checkout main
-        merge branch6
-        branch branch7
-        commit id: "8-abcdefg"
-        checkout main
-        merge branch7
-        branch branch8
-        commit id: "9-abcdefg"
-        checkout main
-        merge branch8
-        branch branch9
-        commit id: "10-abcdefg"
-        `,
-        {}
-      );
-    });
-    it('65: should render a simple gitgraph with three branches,custom merge commit id,tag,type | Vertical Branch - Bottom-to-top', () => {
-      imgSnapshotTest(
-        `gitGraph BT:
-         commit id: "1"
-         commit id: "2"
-         branch nice_feature
-         checkout nice_feature
-         commit id: "3"
-         checkout main
-         commit id: "4"
-         checkout nice_feature
-         branch very_nice_feature
-         checkout very_nice_feature
-         commit id: "5"
-         checkout main
-         commit id: "6"
-         checkout nice_feature
-         commit id: "7"
-         checkout main
-         merge nice_feature id: "customID" tag: "customTag" type: REVERSE
-         checkout very_nice_feature
-         commit id: "8"
-         checkout main
-         commit id: "9"
-        `,
-        {}
-      );
-    });
-    it('66: should render a simple gitgraph with a title | Vertical Branch - Bottom-to-top', () => {
-      imgSnapshotTest(
-        `---
-  title: simple gitGraph
-  ---
-  gitGraph BT:
-    commit id: "1-abcdefg"
-  `,
-        {}
-      );
-    });
-    it('67: should render a simple gitgraph overlapping commits | Vertical Branch - Bottom-to-top', () => {
-      imgSnapshotTest(
-        `gitGraph BT:
-         commit id:"s1"
-         commit id:"s2"
-         branch branch1
-         commit id:"s3"
-         commit id:"s4"
-         checkout main
-         commit id:"s5"
-         checkout branch1
-         commit id:"s6"
-         commit id:"s7"
-         merge main
-        `,
-        {}
-      );
-    });
-    it('68: should render a simple gitgraph with two branches from same commit | Vertical Branch - Bottom-to-top', () => {
-      imgSnapshotTest(
-        `gitGraph BT:
-        commit id:"1-abcdefg"
-        commit id:"2-abcdefg"
-        branch feature-001
-        commit id:"3-abcdefg"
-        commit id:"4-abcdefg"
-        checkout main
-        branch feature-002
-        commit id:"5-abcdefg"
-        checkout feature-001
-        merge feature-002
-        `,
-        {}
-      );
-    });
-    it('69: should render GitGraph with branch that is not used immediately | Vertical Branch - Bottom-to-top', () => {
-      imgSnapshotTest(
-        `gitGraph BT:
-        commit id:"1-abcdefg"
-        branch x
-        checkout main
-        commit id:"2-abcdefg"
-        checkout x
-        commit id:"3-abcdefg"
-        checkout main
-        merge x
-        `,
-        {}
-      );
-    });
-    it('70: should render GitGraph with branch and sub-branch neither of which used immediately | Vertical Branch - Bottom-to-top', () => {
-      imgSnapshotTest(
-        `gitGraph BT:
-        commit id:"1-abcdefg"
-        branch x
-        checkout main
-        commit id:"2-abcdefg"
-        checkout x
-        commit id:"3-abcdefg"
-        checkout main
-        merge x
-        checkout x
-        branch y
-        checkout x
-        commit id:"4-abcdefg"
-        checkout y
-        commit id:"5-abcdefg"
-        checkout x
-        merge y
-        `,
-        {}
-      );
-    });
-    it('71: should render GitGraph with parallel commits | Vertical Branch - Bottom-to-top', () => {
-      imgSnapshotTest(
-        `gitGraph BT:
-        commit id:"1-abcdefg"
-        commit id:"2-abcdefg"
-        branch develop
-        commit id:"3-abcdefg"
-        commit id:"4-abcdefg"
-        checkout main
-        branch feature
-        commit id:"5-abcdefg"
-        commit id:"6-abcdefg"
-        checkout main
-        commit id:"7-abcdefg"
-        commit id:"8-abcdefg"
-        `,
-        { gitGraph: { parallelCommits: true } }
-      );
-    });
-    it('72: should render GitGraph with unconnected branches and parallel commits | Vertical Branch - Bottom-to-top', () => {
-      imgSnapshotTest(
-        `gitGraph BT:
-        branch dev
-        branch v2
-        branch feat
-        commit id:"1-abcdefg"
-        commit id:"2-abcdefg"
-        checkout main
-        commit id:"3-abcdefg"
-        checkout dev
-        commit id:"4-abcdefg"
-        checkout v2
-        commit id:"5-abcdefg"
-        checkout main
-        commit id:"6-abcdefg"
-        `,
-        { gitGraph: { parallelCommits: true } }
-      );
-    });
-    it('73: should render a simple gitgraph with three branches and tagged merge commit using switch instead of checkout', () => {
-      imgSnapshotTest(
-        `gitGraph
-         commit id: "1"
-         commit id: "2"
-         branch nice_feature
-         switch nice_feature
-         commit id: "3"
-         switch main
-         commit id: "4"
-         switch nice_feature
-         branch very_nice_feature
-         switch very_nice_feature
-         commit id: "5"
-         switch main
-         commit id: "6"
-         switch nice_feature
-         commit id: "7"
-         switch main
-         merge nice_feature id: "12345" tag: "my merge commit"
-         switch very_nice_feature
-         commit id: "8"
-         switch main
-         commit id: "9"
-        `,
-        {}
-      );
-    });
-    it('74: should render commits for more than 8 branches using switch instead of checkout', () => {
-      imgSnapshotTest(
-        `
-        gitGraph
-        switch main
-        %% Make sure to manually set the ID of all commits, for consistent visual tests
-        commit id: "1-abcdefg"
-        switch main
-        branch branch1
-        commit id: "2-abcdefg"
-        switch main
-        merge branch1
-        branch branch2
-        commit id: "3-abcdefg"
-        switch main
-        merge branch2
-        branch branch3
-        commit id: "4-abcdefg"
-        switch main
-        merge branch3
-        branch branch4
-        commit id: "5-abcdefg"
-        switch main
-        merge branch4
-        branch branch5
-        commit id: "6-abcdefg"
-        switch main
-        merge branch5
-        branch branch6
-        commit id: "7-abcdefg"
-        switch main
-        merge branch6
-        branch branch7
-        commit id: "8-abcdefg"
-        switch main
-        merge branch7
-        branch branch8
-        commit id: "9-abcdefg"
-        switch main
-        merge branch8
-        branch branch9
-        commit id: "10-abcdefg"
-        `,
-        {}
-      );
-    });
-    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/katex.spec.js

@@ -1,36 +0,0 @@
-import { imgSnapshotTest } from '../../helpers/util';
-
-describe('Katex', () => {
-  it('1: should render a complex Katex flowchart no htmlLabels', () => {
-    imgSnapshotTest(
-      `graph LR
-      A["$$f(\\relax{x}) = \\int_{-\\infty}^\\infty \\hat{f}(\\xi)\\,e^{2 \\pi i \\xi x}\\,d\\xi$$"] -->|"$$\\Bigg(\\bigg(\\Big(\\big((\\frac{-b\\pm\\sqrt{b^2-4ac}}{2a})\\big)\\Big)\\bigg)\\Bigg)$$"| B("$$1+\\frac{e^{-2\\pi}} {1+\\frac{e^{-4\\pi}} {1+\\frac{e^{-6\\pi}} {1+\\frac{e^{-8\\pi}} {1+\\cdots}}}}$$")
-      A -->|"$$\\overbrace{a+b+c}^{\\text{note}}$$"| C("$$\\phase{-78^\\circ}$$")
-      B --> D("$$x = \\begin{cases} a &\\text{if } b \\\\ c &\\text{if } d \\end{cases}$$")
-      C --> E("$$x(t)=c_1\\begin{bmatrix}-\\cos{t}+\\sin{t}\\\\ 2\\cos{t} \\end{bmatrix}e^{2t}$$")`,
-      { fontFamily: 'courier' }
-    );
-  });
-  it('2: should render a Katex flowchart containing the Greek alphabet', () => {
-    imgSnapshotTest(
-      `graph LR
-      A["$$\\alpha\\beta\\gamma\\delta\\epsilon\\zeta\\eta\\theta\\iota\\kappa\\lambda\\mu\\nu\\xi\\omicron\\pi\\rho\\sigma\\tau\\upsilon\\phi\\chi\\psi\\omega$$"] --> B["$$\\Alpha\\Beta\\Gamma\\Delta\\Epsilon\\Zeta\\Eta\\Theta\\Iota\\Kappa\\Lambda\\Mu\\Nu\\Xi\\Omicron\\Pi\\Rho\\Sigma\\Tau\\Upsilon\\Phi\\Chi\\Psi\\Omega$$"]`,
-      { fontFamily: 'courier' }
-    );
-  });
-  it('3: should render a Katex flowchart containing set theory symbols', () => {
-    imgSnapshotTest(
-      `graph LR
-      A["$$\\forall\\complement\\therefore\\emptyset\\exists\\subset\\because\\empty\\exist\\supset\\mapsto\\varnothing\\nexists\\mid\\to\\implies\\in\\land\\gets\\impliedby\\isin\\lor\\leftrightarrow\\iff\\notin\\ni\\notni\\lnot$$"] --> B["$$\\nabla\\Im\\Reals\\jmath\\partial\\image\\wp\\aleph\\Game\\weierp\\alef\\Finv\\N\\Z\\alefsym\\cnums\\natnums\\beth\\Complex\\R\\gimel\\ell\\Re\\daleth\\hbar\\real\\eth\\hslash\\reals$$"]`,
-      { fontFamily: 'courier' }
-    );
-  });
-  // TODO: changes made to develop between Feb 13 - Feb 23 cause this test to no longer function
-  // it.skip('4: should render an error box originating from Katex', () => {
-  //   imgSnapshotTest(
-  //     `graph LR
-  //     A["$$\\shouldBeError$$"]`,
-  //     { fontFamily: 'courier' }
-  //   );
-  // });
-});