#5237 Fix four double circle background

Internal: Fix build

.build/common.ts

@@ -0,0 +1,30 @@
+/**
+ * Shared common options for both ESBuild and Vite
+ */
+export const packageOptions = {
+  parser: {
+    name: 'mermaid-parser',
+    packageName: 'parser',
+    file: 'index.ts',
+  },
+  mermaid: {
+    name: 'mermaid',
+    packageName: 'mermaid',
+    file: 'mermaid.ts',
+  },
+  'mermaid-example-diagram': {
+    name: 'mermaid-example-diagram',
+    packageName: 'mermaid-example-diagram',
+    file: 'detector.ts',
+  },
+  'mermaid-zenuml': {
+    name: 'mermaid-zenuml',
+    packageName: 'mermaid-zenuml',
+    file: 'detector.ts',
+  },
+  'mermaid-layout-elk': {
+    name: 'mermaid-layout-elk',
+    packageName: 'mermaid-layout-elk',
+    file: 'layouts.ts',
+  },
+} as const;

.build/generateLangium.ts

@@ -0,0 +1,5 @@
+import { generate } from 'langium-cli';
+
+export async function generateLangium() {
+  await generate({ file: `./packages/parser/langium-config.json` });
+}

.build/jisonTransformer.ts

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

.build/jsonSchema.ts

@@ -0,0 +1,124 @@
+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';
+
+/**
+ * All of the keys in the mermaid config that have a mermaid diagram config.
+ */
+const MERMAID_CONFIG_DIAGRAM_KEYS = [
+  'flowchart',
+  'sequence',
+  'gantt',
+  'journey',
+  'class',
+  'state',
+  'er',
+  'pie',
+  'quadrantChart',
+  'xyChart',
+  'requirement',
+  'mindmap',
+  'timeline',
+  'gitGraph',
+  'c4',
+  'sankey',
+  'block',
+  'packet',
+] as const;
+
+/**
+ * Generate default values from the JSON Schema.
+ *
+ * AJV does not support nested default values yet (or default values with $ref),
+ * so we need to manually find them (this may be fixed in ajv v9).
+ *
+ * @param mermaidConfigSchema - The Mermaid JSON Schema to use.
+ * @returns The default mermaid config object.
+ */
+function generateDefaults(mermaidConfigSchema: JSONSchemaType<MermaidConfig>) {
+  const ajv = new Ajv2019({
+    useDefaults: true,
+    allowUnionTypes: true,
+    strict: true,
+  });
+
+  ajv.addKeyword({
+    keyword: 'meta:enum', // used by jsonschema2md
+    errors: false,
+  });
+  ajv.addKeyword({
+    keyword: 'tsType', // used by json-schema-to-typescript
+    errors: false,
+  });
+
+  // ajv currently doesn't support nested default values, see https://github.com/ajv-validator/ajv/issues/1718
+  // (may be fixed in v9) so we need to manually use sub-schemas
+  const mermaidDefaultConfig = {};
+
+  assert.ok(mermaidConfigSchema.$defs);
+  const baseDiagramConfig = mermaidConfigSchema.$defs.BaseDiagramConfig;
+
+  for (const key of MERMAID_CONFIG_DIAGRAM_KEYS) {
+    const subSchemaRef = mermaidConfigSchema.properties[key].$ref;
+    const [root, defs, defName] = subSchemaRef.split('/');
+    assert.strictEqual(root, '#');
+    assert.strictEqual(defs, '$defs');
+    const subSchema = {
+      $schema: mermaidConfigSchema.$schema,
+      $defs: mermaidConfigSchema.$defs,
+      ...mermaidConfigSchema.$defs[defName],
+    } as JSONSchemaType<BaseDiagramConfig>;
+
+    const validate = ajv.compile(subSchema);
+
+    mermaidDefaultConfig[key] = {};
+
+    for (const required of subSchema.required ?? []) {
+      if (subSchema.properties[required] === undefined && baseDiagramConfig.properties[required]) {
+        mermaidDefaultConfig[key][required] = baseDiagramConfig.properties[required].default;
+      }
+    }
+    if (!validate(mermaidDefaultConfig[key])) {
+      throw new Error(
+        `schema for subconfig ${key} does not have valid defaults! Errors were ${JSON.stringify(
+          validate.errors,
+          undefined,
+          2
+        )}`
+      );
+    }
+  }
+
+  const validate = ajv.compile(mermaidConfigSchema);
+
+  if (!validate(mermaidDefaultConfig)) {
+    throw new Error(
+      `Mermaid config JSON Schema does not have valid defaults! Errors were ${JSON.stringify(
+        validate.errors,
+        undefined,
+        2
+      )}`
+    );
+  }
+
+  return mermaidDefaultConfig;
+}
+
+export const loadSchema = (src: string, filename: string): JSONSchemaType<MermaidConfig> => {
+  const jsonSchema = load(src, {
+    filename,
+    // only allow JSON types in our YAML doc (will probably be default in YAML 1.3)
+    // e.g. `true` will be parsed a boolean `true`, `True` will be parsed as string `"True"`.
+    schema: JSON_SCHEMA,
+  }) as JSONSchemaType<MermaidConfig>;
+  return jsonSchema;
+};
+
+export const getDefaults = (schema: JSONSchemaType<MermaidConfig>) => {
+  return `export default ${JSON.stringify(generateDefaults(schema), undefined, 2)};`;
+};
+
+export const getSchema = (schema: JSONSchemaType<MermaidConfig>) => {
+  return `export default ${JSON.stringify(schema, undefined, 2)};`;
+};

.build/types.ts

@@ -0,0 +1,18 @@
+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`);
+    out.length > 0 && console.log(out.toString());
+  } catch (e) {
+    console.error(e);
+    e.stdout.length > 0 && console.error(e.stdout.toString());
+    e.stderr.length > 0 && console.error(e.stderr.toString());
+  }
+};
+
+for (const { packageName } of Object.values(packageOptions)) {
+  buildType(packageName);
+}

.commitlintrc.json

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

.cspell/code-terms.txt

@@ -0,0 +1,142 @@
+# This file contains coding related terms
+ALPHANUM
+antiscript
+APPLYCLASS
+ARROWHEADSTYLE
+ARROWTYPE
+autonumber
+axisl-line
+Bigdecimal
+birel
+BIREL
+bqstring
+BQUOTE
+bramp
+BRKT
+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
+STYLEOPTS
+subcomponent
+subcomponents
+SUBROUTINEEND
+SUBROUTINESTART
+Subschemas
+substr
+TAGEND
+TAGSTART
+techn
+TESTSTR
+TEXTDATA
+TEXTLENGTH
+titlevalue
+topbar
+TRAPEND
+TRAPSTART
+ts-nocheck
+tsdoc
+typeof
+typestr
+unshift
+verifymethod
+VERIFYMTHD
+WARN_DOCSDIR_DOESNT_MATCH
+xhost
+yaxis
+yfunc
+yytext
+zenuml

.cspell/contributors.txt

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

.cspell/cspell.config.yaml

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

@@ -0,0 +1,72 @@
+# 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
+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
+sparkline
+sphinxcontrib
+ssim
+stylis
+Swimm
+tsbuildinfo
+Tuleap
+Typora
+unocss
+unplugin
+unstub
+vite
+vitest
+Zune

.cspell/mermaid-terms.txt

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

@@ -0,0 +1,4 @@
+circo
+handdrawnSeed
+neato
+newbranch

.esbuild/build.ts

@@ -0,0 +1,65 @@
+import { build } from 'esbuild';
+import { mkdir, writeFile } from 'node:fs/promises';
+import { packageOptions } from '../.build/common.js';
+import { generateLangium } from '../.build/generateLangium.js';
+import { MermaidBuildOptions, defaultOptions, getBuildConfig } from './util.js';
+
+const shouldVisualize = process.argv.includes('--visualize');
+
+const buildPackage = async (entryName: keyof typeof packageOptions) => {
+  const commonOptions: MermaidBuildOptions = { ...defaultOptions, entryName } as const;
+  const buildConfigs: MermaidBuildOptions[] = [
+    // package.mjs
+    { ...commonOptions },
+    // package.min.mjs
+    {
+      ...commonOptions,
+      minify: true,
+      metafile: shouldVisualize,
+    },
+    // package.core.mjs
+    { ...commonOptions, core: true },
+  ];
+
+  if (entryName === 'mermaid') {
+    const iifeOptions: MermaidBuildOptions = { ...commonOptions, format: 'iife' };
+    buildConfigs.push(
+      // mermaid.js
+      { ...iifeOptions },
+      // mermaid.min.js
+      { ...iifeOptions, minify: true, metafile: shouldVisualize }
+    );
+  }
+
+  const results = await Promise.all(buildConfigs.map((option) => build(getBuildConfig(option))));
+
+  if (shouldVisualize) {
+    for (const { metafile } of results) {
+      if (!metafile) {
+        continue;
+      }
+      const fileName = Object.keys(metafile.outputs)
+        .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));
+    }
+  }
+};
+
+const handler = (e) => {
+  console.error(e);
+  process.exit(1);
+};
+
+const main = async () => {
+  await generateLangium();
+  await mkdir('stats').catch(() => {});
+  const packageNames = Object.keys(packageOptions) as (keyof typeof packageOptions)[];
+  // it should build `parser` before `mermaid` because it's a dependency
+  for (const pkg of packageNames) {
+    await buildPackage(pkg).catch(handler);
+  }
+};
+
+void main();

.esbuild/jisonPlugin.ts

@@ -0,0 +1,15 @@
+import { readFile } from 'node:fs/promises';
+import { transformJison } from '../.build/jisonTransformer.js';
+import { Plugin } from 'esbuild';
+
+export const jisonPlugin: Plugin = {
+  name: 'jison',
+  setup(build) {
+    build.onLoad({ filter: /\.jison$/ }, async (args) => {
+      // Load the file from the file system
+      const source = await readFile(args.path, 'utf8');
+      const contents = transformJison(source);
+      return { contents, warnings: [] };
+    });
+  },
+};

.esbuild/jsonSchemaPlugin.ts

@@ -0,0 +1,35 @@
+import type { JSONSchemaType } from 'ajv/dist/2019.js';
+import type { MermaidConfig } from '../packages/mermaid/src/config.type.js';
+import { readFile } from 'node:fs/promises';
+import { getDefaults, getSchema, loadSchema } from '../.build/jsonSchema.js';
+
+/**
+ * ESBuild plugin that handles JSON Schemas saved as a `.schema.yaml` file.
+ *
+ * Use `my-example.schema.yaml?only-defaults=true` to only load the default values.
+ */
+
+export const jsonSchemaPlugin = {
+  name: 'json-schema-plugin',
+  setup(build) {
+    let schema: JSONSchemaType<MermaidConfig> | undefined = undefined;
+    let content = '';
+
+    build.onLoad({ filter: /config\.schema\.yaml$/ }, async (args) => {
+      // Load the file from the file system
+      const source = await readFile(args.path, 'utf8');
+      const resolvedSchema: JSONSchemaType<MermaidConfig> =
+        content === source && schema ? schema : loadSchema(source, args.path);
+      if (content !== source) {
+        content = source;
+        schema = resolvedSchema;
+      }
+      const contents = args.suffix.includes('only-defaults')
+        ? getDefaults(resolvedSchema)
+        : getSchema(resolvedSchema);
+      return { contents, warnings: [] };
+    });
+  },
+};
+
+export default jsonSchemaPlugin;

.esbuild/server.ts

@@ -0,0 +1,102 @@
+import express from 'express';
+import type { NextFunction, Request, Response } from 'express';
+import cors from 'cors';
+import { getBuildConfig, defaultOptions } from './util.js';
+import { context } from 'esbuild';
+import chokidar from 'chokidar';
+import { generateLangium } from '../.build/generateLangium.js';
+import { packageOptions } from '../.build/common.js';
+
+const configs = Object.values(packageOptions).map(({ packageName }) =>
+  getBuildConfig({ ...defaultOptions, minify: false, core: false, entryName: packageName })
+);
+const mermaidIIFEConfig = getBuildConfig({
+  ...defaultOptions,
+  minify: false,
+  core: false,
+  entryName: 'mermaid',
+  format: 'iife',
+});
+configs.push(mermaidIIFEConfig);
+
+const contexts = await Promise.all(configs.map((config) => context(config)));
+
+const rebuildAll = async () => {
+  console.time('Rebuild time');
+  await Promise.all(contexts.map((ctx) => ctx.rebuild())).catch((e) => console.error(e));
+  console.timeEnd('Rebuild time');
+};
+
+let clients: { id: number; response: Response }[] = [];
+function eventsHandler(request: Request, response: Response, next: NextFunction) {
+  const headers = {
+    'Content-Type': 'text/event-stream',
+    Connection: 'keep-alive',
+    'Cache-Control': 'no-cache',
+  };
+  response.writeHead(200, headers);
+  const clientId = Date.now();
+  clients.push({
+    id: clientId,
+    response,
+  });
+  request.on('close', () => {
+    clients = clients.filter((client) => client.id !== clientId);
+  });
+}
+
+let timeoutId: NodeJS.Timeout | undefined = undefined;
+
+/**
+ * Debounce file change events to avoid rebuilding multiple times.
+ */
+function handleFileChange() {
+  if (timeoutId !== undefined) {
+    clearTimeout(timeoutId);
+  }
+  timeoutId = setTimeout(async () => {
+    await rebuildAll();
+    sendEventsToAll();
+    timeoutId = undefined;
+  }, 100);
+}
+
+function sendEventsToAll() {
+  clients.forEach(({ response }) => response.write(`data: ${Date.now()}\n\n`));
+}
+
+async function createServer() {
+  await generateLangium();
+  handleFileChange();
+  const app = express();
+  chokidar
+    .watch('**/src/**/*.{js,ts,langium,yaml,json}', {
+      ignoreInitial: true,
+      ignored: [/node_modules/, /dist/, /docs/, /coverage/],
+    })
+    .on('all', async (event, path) => {
+      // Ignore other events.
+      if (!['add', 'change'].includes(event)) {
+        return;
+      }
+      if (/\.langium$/.test(path)) {
+        await generateLangium();
+      }
+      console.log(`${path} changed. Rebuilding...`);
+      handleFileChange();
+    });
+
+  app.use(cors());
+  app.get('/events', eventsHandler);
+  for (const { packageName } of Object.values(packageOptions)) {
+    app.use(express.static(`./packages/${packageName}/dist`));
+  }
+  app.use(express.static('demos'));
+  app.use(express.static('cypress/platform'));
+
+  app.listen(9000, () => {
+    console.log(`Listening on http://localhost:9000`);
+  });
+}
+
+createServer();

.esbuild/util.ts

@@ -0,0 +1,101 @@
+import { resolve } from 'path';
+import { fileURLToPath } from 'url';
+import type { BuildOptions } from 'esbuild';
+import { readFileSync } from 'fs';
+import jsonSchemaPlugin from './jsonSchemaPlugin.js';
+import { packageOptions } from '../.build/common.js';
+import { jisonPlugin } from './jisonPlugin.js';
+
+const __dirname = fileURLToPath(new URL('.', import.meta.url));
+
+export interface MermaidBuildOptions extends BuildOptions {
+  minify: boolean;
+  core: boolean;
+  metafile: boolean;
+  format: 'esm' | 'iife';
+  entryName: keyof typeof packageOptions;
+}
+
+export const defaultOptions: Omit<MermaidBuildOptions, 'entryName'> = {
+  minify: false,
+  metafile: false,
+  core: false,
+  format: 'esm',
+} as const;
+
+const buildOptions = (override: BuildOptions): BuildOptions => {
+  return {
+    bundle: true,
+    minify: true,
+    keepNames: true,
+    platform: 'browser',
+    tsconfig: 'tsconfig.json',
+    resolveExtensions: ['.ts', '.js', '.json', '.jison', '.yaml'],
+    external: ['require', 'fs', 'path'],
+    outdir: 'dist',
+    plugins: [jisonPlugin, jsonSchemaPlugin],
+    sourcemap: 'external',
+    ...override,
+  };
+};
+
+const getFileName = (fileName: string, { core, format, minify }: MermaidBuildOptions) => {
+  if (core) {
+    fileName += '.core';
+  } else if (format === 'esm') {
+    fileName += '.esm';
+  }
+  if (minify) {
+    fileName += '.min';
+  }
+  return fileName;
+};
+
+export const getBuildConfig = (options: MermaidBuildOptions): BuildOptions => {
+  const { core, entryName, metafile, format, minify } = options;
+  const external: string[] = ['require', 'fs', 'path'];
+  const { name, file, packageName } = packageOptions[entryName];
+  const outFileName = getFileName(name, options);
+  let output: BuildOptions = buildOptions({
+    absWorkingDir: resolve(__dirname, `../packages/${packageName}`),
+    entryPoints: {
+      [outFileName]: `src/${file}`,
+    },
+    metafile,
+    minify,
+    logLevel: 'info',
+    chunkNames: `chunks/${outFileName}/[name]-[hash]`,
+    define: {
+      'import.meta.vitest': 'undefined',
+    },
+  });
+
+  if (core) {
+    const { dependencies } = JSON.parse(
+      readFileSync(resolve(__dirname, `../packages/${packageName}/package.json`), 'utf-8')
+    );
+    // Core build is used to generate file without bundled dependencies.
+    // This is used by downstream projects to bundle dependencies themselves.
+    // Ignore dependencies and any dependencies of dependencies
+    external.push(...Object.keys(dependencies));
+    output.external = external;
+  }
+
+  if (format === 'iife') {
+    output.format = 'iife';
+    output.splitting = false;
+    output.globalName = '__esbuild_esm_mermaid';
+    // Workaround for removing the .default access in esbuild IIFE.
+    // https://github.com/mermaid-js/mermaid/pull/4109#discussion_r1292317396
+    output.footer = {
+      js: 'globalThis.mermaid = globalThis.__esbuild_esm_mermaid.default;',
+    };
+    output.outExtension = { '.js': '.js' };
+  } else {
+    output.format = 'esm';
+    output.splitting = true;
+    output.outExtension = { '.js': '.mjs' };
+  }
+
+  return output;
+};

.eslintignore

@@ -1,8 +0,0 @@
-dist/**
-.github/**
-docs/Setup.md
-cypress.config.js
-cypress/plugins/index.js
-coverage
-*.json
-node_modules

.eslintignore

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

.eslintrc.cjs

@@ -14,7 +14,7 @@ module.exports = {
     },
     tsconfigRootDir: __dirname,
     sourceType: 'module',
-    ecmaVersion: 2020,
+    ecmaVersion: 2022,
     allowAutomaticSingleRunInference: true,
     project: ['./tsconfig.eslint.json', './packages/*/tsconfig.json'],
     parser: '@typescript-eslint/parser',
@@ -23,7 +23,7 @@ module.exports = {
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended',
     'plugin:json/recommended',
-    'plugin:markdown/recommended',
+    'plugin:markdown/recommended-legacy',
     'plugin:@cspell/recommended',
     'prettier',
   ],
@@ -53,6 +53,7 @@ module.exports = {
     '@typescript-eslint/no-floating-promises': 'error',
     '@typescript-eslint/no-misused-promises': 'error',
     '@typescript-eslint/no-unused-vars': 'warn',
+    '@typescript-eslint/consistent-type-definitions': 'error',
     '@typescript-eslint/ban-ts-comment': [
       'error',
       {
@@ -63,13 +64,24 @@ module.exports = {
         minimumDescriptionLength: 10,
       },
     ],
+    '@typescript-eslint/naming-convention': [
+      'error',
+      {
+        selector: 'typeLike',
+        format: ['PascalCase'],
+        custom: {
+          regex: '^I[A-Z]',
+          match: false,
+        },
+      },
+    ],
     'json/*': ['error', 'allowComments'],
     '@cspell/spellchecker': [
       'error',
       {
-        checkIdentifiers: false,
+        checkIdentifiers: true,
-        checkStrings: false,
+        checkStrings: true,
-        checkStringTemplates: false,
+        checkStringTemplates: true,
       },
     ],
     'no-empty': [
@@ -148,6 +160,19 @@ module.exports = {
         '@typescript-eslint/no-unused-vars': 'off',
       },
     },
+    {
+      files: ['*.spec.{ts,js}', 'tests/**', 'cypress/**/*.js'],
+      rules: {
+        '@cspell/spellchecker': [
+          'error',
+          {
+            checkIdentifiers: false,
+            checkStrings: false,
+            checkStringTemplates: false,
+          },
+        ],
+      },
+    },
     {
       files: ['*.html', '*.md', '**/*.md/*'],
       rules: {

.github/ISSUE_TEMPLATE/config.yml

@@ -4,7 +4,7 @@ contact_links:
     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/wwtabKgp8y
+    url: https://discord.gg/AgrbSrBer3
     about: Join our Community on Discord for Help and a casual chat.
   - name: Documentation
     url: https://mermaid.js.org

.github/codecov.yaml

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

.github/lychee.toml

@@ -35,7 +35,13 @@ exclude = [
 'packages/mermaid/src/docs/config/setup/*',
 
 # Ignore Discord invite
-"https://discord.gg"
+"https://discord.gg",
+
+# BundlePhobia has frequent downtime
+"https://bundlephobia.com",
+
+# Chrome webstore migration issue. Temporary
+"https://chromewebstore.google.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://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md)
+- [ ] :book: have read the [contribution guidelines](https://mermaid.js.org/community/contributing.html)
 - [ ] :computer: have added necessary unit/e2e tests.
-- [ ] :notebook: have added documentation. Make sure [`MERMAID_RELEASE_VERSION`](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/docs/community/contributing.md#update-documentation) is used for all new features.
+- [ ] :notebook: have added documentation. Make sure [`MERMAID_RELEASE_VERSION`](https://mermaid.js.org/community/contributing.html#update-documentation) is used for all new features.
 - [ ] :bookmark: targeted `develop` branch

.github/workflows/build-docs.yml

@@ -24,7 +24,7 @@ jobs:
         uses: actions/setup-node@v4
         with:
           cache: pnpm
-          node-version: 18
+          node-version-file: '.node-version'
 
       - name: Install Packages
         run: pnpm install --frozen-lockfile

.github/workflows/build.yml

@@ -12,9 +12,6 @@ on:
 permissions:
   contents: read
 
-env:
-  node-version: 18.x
-
 jobs:
   build-mermaid:
     runs-on: ubuntu-latest
@@ -24,11 +21,11 @@ jobs:
       - uses: pnpm/action-setup@v2
         # uses version from "packageManager" field in package.json
 
-      - name: Setup Node.js ${{ env.node-version }}
+      - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
           cache: pnpm
-          node-version: ${{ env.node-version }}
+          node-version-file: '.node-version'
 
       - name: Install Packages
         run: |
@@ -40,13 +37,13 @@ jobs:
         run: pnpm run build
 
       - name: Upload Mermaid Build as Artifact
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: mermaid-build
           path: packages/mermaid/dist
 
       - name: Upload Mermaid Mindmap Build as Artifact
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         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@v2
+        uses: github/codeql-action/init@v3
         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@v2
+        uses: github/codeql-action/autobuild@v3
 
       # ℹ️ Command-line programs to run using the OS shell.
       # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
@@ -59,4 +59,4 @@ jobs:
       #   make release
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v2
+        uses: github/codeql-action/analyze@v3

.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@v3
+        uses: actions/dependency-review-action@v4

.github/workflows/e2e-applitools.yml

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

.github/workflows/e2e.yml

@@ -17,20 +17,32 @@ permissions:
   contents: read
 
 env:
-  node-version: 18.x
+  # 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.
-  # For PRs and MergeQueues, the target commit is used, and for push events, github.event.previous is used.
+  targetHash: >-
-  targetHash: ${{ github.event.pull_request.base.sha || github.event.merge_group.base_sha || (github.event.before == '0000000000000000000000000000000000000000' && 'develop' || github.event.before)  }}
+    ${{ 
-
+      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
+    }}
 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@v2
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 18.x
+          node-version-file: '.node-version'
       - name: Cache snapshots
         id: cache-snapshot
         uses: actions/cache@v4
@@ -46,17 +58,35 @@ jobs:
         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
+
       - name: Cypress run
-        uses: cypress-io/github-action@v4
+        uses: cypress-io/github-action@v6
         id: cypress-snapshot-gen
         if: ${{ steps.cache-snapshot.outputs.cache-hit != 'true' }}
         with:
+          install: false
           start: pnpm run dev
           wait-on: 'http://localhost:9000'
           browser: chrome
 
   e2e:
     runs-on: ubuntu-latest
+    container:
+      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
@@ -68,28 +98,43 @@ jobs:
       - uses: pnpm/action-setup@v2
         # uses version from "packageManager" field in package.json
 
-      - name: Setup Node.js ${{ env.node-version }}
+      - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: ${{ env.node-version }}
+          node-version-file: '.node-version'
 
       # These cached snapshots are downloaded, providing the reference snapshots.
       - name: Cache snapshots
         id: cache-snapshot
-        uses: actions/cache/restore@v3
+        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"
+
       # Install NPM dependencies, cache them correctly
       # and run all Cypress tests
       - name: Cypress run
-        uses: cypress-io/github-action@v4
+        uses: cypress-io/github-action@v6
         id: cypress
         # If CYPRESS_RECORD_KEY is set, run in parallel on all containers
         # Otherwise (e.g. if running from fork), we run on a single container only
         if: ${{ ( env.CYPRESS_RECORD_KEY != '' ) || ( matrix.containers == 1 ) }}
         with:
+          install: false
           start: pnpm run dev:coverage
           wait-on: 'http://localhost:9000'
           browser: chrome
@@ -103,7 +148,7 @@ jobs:
           CYPRESS_COMMIT: ${{ github.sha }}
 
       - name: Upload Coverage to Codecov
-        uses: codecov/codecov-action@v3
+        uses: codecov/codecov-action@v4
         # Run step only pushes to develop and pull_requests
         if: ${{ steps.cypress.conclusion == 'success' && (github.event_name == 'pull_request' || github.ref == 'refs/heads/develop')}}
         with:
@@ -140,7 +185,7 @@ jobs:
       - name: Save snapshots cache
         id: cache-upload
         if: ${{ github.event_name == 'push' && needs.e2e.result != 'failure' }}
-        uses: actions/cache/save@v3
+        uses: actions/cache/save@v4
         with:
           path: ./snapshots
           key: ${{ runner.os }}-snapshots-${{ github.event.after }}

.github/workflows/link-checker.yml

@@ -29,14 +29,14 @@ jobs:
       - uses: actions/checkout@v4
 
       - name: Restore lychee cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: .lycheecache
           key: cache-lychee-${{ github.sha }}
           restore-keys: cache-lychee-
 
       - name: Link Checker
-        uses: lycheeverse/lychee-action@v1.9.1
+        uses: lycheeverse/lychee-action@v1.9.3
         with:
           args: >-
             --config .github/lychee.toml

.github/workflows/lint.yml

@@ -13,9 +13,6 @@ on:
 permissions:
   contents: write
 
-env:
-  node-version: 18.x
-
 jobs:
   lint:
     runs-on: ubuntu-latest
@@ -25,11 +22,11 @@ jobs:
       - uses: pnpm/action-setup@v2
         # uses version from "packageManager" field in package.json
 
-      - name: Setup Node.js ${{ env.node-version }}
+      - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
           cache: pnpm
-          node-version: ${{ env.node-version }}
+          node-version-file: '.node-version'
 
       - name: Install Packages
         run: |

.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@v5
+        uses: release-drafter/release-drafter@v6
         with:
           config-name: pr-labeler.yml
           disable-autolabeler: false

.github/workflows/publish-docs.yml

@@ -31,19 +31,19 @@ jobs:
         uses: actions/setup-node@v4
         with:
           cache: pnpm
-          node-version: 18
+          node-version-file: '.node-version'
 
       - name: Install Packages
         run: pnpm install --frozen-lockfile
 
       - name: Setup Pages
-        uses: actions/configure-pages@v3
+        uses: actions/configure-pages@v4
 
       - name: Run Build
         run: pnpm --filter mermaid run docs:build:vitepress
 
       - name: Upload artifact
-        uses: actions/upload-pages-artifact@v1
+        uses: actions/upload-pages-artifact@v3
         with:
           path: packages/mermaid/src/vitepress/.vitepress/dist
 
@@ -56,4 +56,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v2
+        uses: actions/deploy-pages@v4

.github/workflows/release-draft.yml

@@ -12,11 +12,11 @@ jobs:
   draft-release:
     runs-on: ubuntu-latest
     permissions:
-      contents: write # write permission is required to create a github release
+      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
+        uses: release-drafter/release-drafter@v6
         with:
           disable-autolabeler: true
         env:

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

@@ -19,7 +19,7 @@ jobs:
         uses: actions/setup-node@v4
         with:
           cache: pnpm
-          node-version: 18.x
+          node-version-file: '.node-version'
 
       - name: Install Packages
         run: |

.github/workflows/release-publish.yml

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

.github/workflows/test.yml

@@ -5,9 +5,6 @@ on: [push, pull_request, merge_group]
 permissions:
   contents: read
 
-env:
-  node-version: 18.x
-
 jobs:
   unit-test:
     runs-on: ubuntu-latest
@@ -17,11 +14,11 @@ jobs:
       - uses: pnpm/action-setup@v2
         # uses version from "packageManager" field in package.json
 
-      - name: Setup Node.js ${{ env.node-version }}
+      - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
           cache: pnpm
-          node-version: ${{ env.node-version }}
+          node-version-file: '.node-version'
 
       - name: Install Packages
         run: |
@@ -42,7 +39,7 @@ jobs:
           pnpm exec vitest run ./packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts --coverage
 
       - name: Upload Coverage to Codecov
-        uses: codecov/codecov-action@v3
+        uses: codecov/codecov-action@v4
         # Run step only pushes to develop and pull_requests
         if: ${{ github.event_name == 'pull_request' || github.ref == 'refs/heads/develop' }}
         with:

.github/workflows/update-browserlist.yml

@@ -19,7 +19,7 @@ jobs:
           message: 'chore: update browsers list'
           push: false
       - name: Create Pull Request
-        uses: peter-evans/create-pull-request@v5
+        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/
 
@@ -46,4 +46,9 @@ 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

@@ -1,4 +0,0 @@
-#!/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"
 
-pnpm run pre-commit
+NODE_OPTIONS="--max_old_space_size=8192" pnpm run pre-commit

.lintstagedrc.mjs

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

.node-version

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

.npmrc

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

.prettierignore

@@ -1,6 +1,7 @@
 dist
 cypress/platform/xss3.html
 .cache
+.pnpm-store
 coverage
 # Autogenerated by PNPM
 pnpm-lock.yaml
@@ -10,6 +11,10 @@ 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
+!/demos/dev/example.html
+# TODO: Lots of errors to fix
+cypress/platform/state-refactor.html

.prettierrc.json

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

.vite/build.ts

@@ -3,11 +3,12 @@ import { resolve } from 'path';
 import { fileURLToPath } from 'url';
 import jisonPlugin from './jisonPlugin.js';
 import jsonSchemaPlugin from './jsonSchemaPlugin.js';
-import { readFileSync } from 'fs';
 import typescript from '@rollup/plugin-typescript';
 import { visualizer } from 'rollup-plugin-visualizer';
 import type { TemplateType } from 'rollup-plugin-visualizer/dist/plugin/template-types.js';
 import istanbul from 'vite-plugin-istanbul';
+import { packageOptions } from '../.build/common.js';
+import { generateLangium } from '../.build/generateLangium.js';
 
 const visualize = process.argv.includes('--visualize');
 const watch = process.argv.includes('--watch');
@@ -36,24 +37,6 @@ const visualizerOptions = (packageName: string, core = false): PluginOption[] =>
   );
 };
 
-const packageOptions = {
-  mermaid: {
-    name: 'mermaid',
-    packageName: 'mermaid',
-    file: 'mermaid.ts',
-  },
-  'mermaid-example-diagram': {
-    name: 'mermaid-example-diagram',
-    packageName: 'mermaid-example-diagram',
-    file: 'detector.ts',
-  },
-  'mermaid-zenuml': {
-    name: 'mermaid-zenuml',
-    packageName: 'mermaid-zenuml',
-    file: 'detector.ts',
-  },
-};
-
 interface BuildOptions {
   minify: boolean | 'esbuild';
   core?: boolean;
@@ -72,34 +55,8 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
       sourcemap,
       entryFileNames: `${name}.esm${minify ? '.min' : ''}.mjs`,
     },
-    {
-      name,
-      format: 'umd',
-      sourcemap,
-      entryFileNames: `${name}${minify ? '.min' : ''}.js`,
-    },
   ];
 
-  if (core) {
-    const { dependencies } = JSON.parse(
-      readFileSync(resolve(__dirname, `../packages/${packageName}/package.json`), 'utf-8')
-    );
-    // Core build is used to generate file without bundled dependencies.
-    // This is used by downstream projects to bundle dependencies themselves.
-    // Ignore dependencies and any dependencies of dependencies
-    // Adapted from the RegEx used by `rollup-plugin-node`
-    external.push(new RegExp('^(?:' + Object.keys(dependencies).join('|') + ')(?:/.+)?$'));
-    // This needs to be an array. Otherwise vite will build esm & umd with same name and overwrite esm with umd.
-    output = [
-      {
-        name,
-        format: 'esm',
-        sourcemap,
-        entryFileNames: `${name}.core.mjs`,
-      },
-    ];
-  }
-
   const config: InlineConfig = {
     configFile: false,
     build: {
@@ -129,7 +86,7 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
       // @ts-expect-error According to the type definitions, rollup plugins are incompatible with vite
       typescript({ compilerOptions: { declaration: false } }),
       istanbul({
-        exclude: ['node_modules', 'test/', '__mocks__'],
+        exclude: ['node_modules', 'test/', '__mocks__', 'generated'],
         extension: ['.js', '.ts'],
         requireEnv: true,
         forceBuildInstrument: coverage,
@@ -149,24 +106,28 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
 
 const buildPackage = async (entryName: keyof typeof packageOptions) => {
   await build(getBuildConfig({ minify: false, entryName }));
-  await build(getBuildConfig({ minify: 'esbuild', entryName }));
-  await build(getBuildConfig({ minify: false, core: true, entryName }));
 };
 
 const main = async () => {
   const packageNames = Object.keys(packageOptions) as (keyof typeof packageOptions)[];
-  for (const pkg of packageNames.filter((pkg) => !mermaidOnly || pkg === 'mermaid')) {
+  for (const pkg of packageNames.filter(
+    (pkg) => !mermaidOnly || pkg === 'mermaid' || pkg === 'parser'
+  )) {
     await buildPackage(pkg);
   }
 };
 
+await generateLangium();
+
 if (watch) {
+  await build(getBuildConfig({ minify: false, watch, core: false, entryName: 'parser' }));
   build(getBuildConfig({ minify: false, watch, core: false, entryName: 'mermaid' }));
   if (!mermaidOnly) {
     build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' }));
     build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-zenuml' }));
   }
 } else if (visualize) {
+  await build(getBuildConfig({ minify: false, watch, core: false, entryName: 'parser' }));
   await build(getBuildConfig({ minify: false, core: true, entryName: 'mermaid' }));
   await build(getBuildConfig({ minify: false, core: false, entryName: 'mermaid' }));
 } else {

.vite/jisonPlugin.ts

@@ -1,10 +1,10 @@
-import { transformJison } from './jisonTransformer.js';
+import { transformJison } from '../.build/jisonTransformer.js';
+
 const fileRegex = /\.(jison)$/;
 
 export default function jison() {
   return {
     name: 'jison',
-
     transform(src: string, id: string) {
       if (fileRegex.test(id)) {
         return {

.vite/jsonSchemaPlugin.ts

@@ -1,109 +1,5 @@
-import { load, JSON_SCHEMA } from 'js-yaml';
-import assert from 'node:assert';
-import Ajv2019, { type JSONSchemaType } from 'ajv/dist/2019.js';
 import { PluginOption } from 'vite';
-
+import { getDefaults, getSchema, loadSchema } from '../.build/jsonSchema.js';
-import type { MermaidConfig, BaseDiagramConfig } from '../packages/mermaid/src/config.type.js';
-
-/**
- * All of the keys in the mermaid config that have a mermaid diagram config.
- */
-const MERMAID_CONFIG_DIAGRAM_KEYS = [
-  'flowchart',
-  'sequence',
-  'gantt',
-  'journey',
-  'class',
-  'state',
-  'er',
-  'pie',
-  'quadrantChart',
-  'xyChart',
-  'requirement',
-  'mindmap',
-  'timeline',
-  'gitGraph',
-  'c4',
-  'sankey',
-] as const;
-
-/**
- * Generate default values from the JSON Schema.
- *
- * AJV does not support nested default values yet (or default values with $ref),
- * so we need to manually find them (this may be fixed in ajv v9).
- *
- * @param mermaidConfigSchema - The Mermaid JSON Schema to use.
- * @returns The default mermaid config object.
- */
-function generateDefaults(mermaidConfigSchema: JSONSchemaType<MermaidConfig>) {
-  const ajv = new Ajv2019({
-    useDefaults: true,
-    allowUnionTypes: true,
-    strict: true,
-  });
-
-  ajv.addKeyword({
-    keyword: 'meta:enum', // used by jsonschema2md
-    errors: false,
-  });
-  ajv.addKeyword({
-    keyword: 'tsType', // used by json-schema-to-typescript
-    errors: false,
-  });
-
-  // ajv currently doesn't support nested default values, see https://github.com/ajv-validator/ajv/issues/1718
-  // (may be fixed in v9) so we need to manually use sub-schemas
-  const mermaidDefaultConfig = {};
-
-  assert.ok(mermaidConfigSchema.$defs);
-  const baseDiagramConfig = mermaidConfigSchema.$defs.BaseDiagramConfig;
-
-  for (const key of MERMAID_CONFIG_DIAGRAM_KEYS) {
-    const subSchemaRef = mermaidConfigSchema.properties[key].$ref;
-    const [root, defs, defName] = subSchemaRef.split('/');
-    assert.strictEqual(root, '#');
-    assert.strictEqual(defs, '$defs');
-    const subSchema = {
-      $schema: mermaidConfigSchema.$schema,
-      $defs: mermaidConfigSchema.$defs,
-      ...mermaidConfigSchema.$defs[defName],
-    } as JSONSchemaType<BaseDiagramConfig>;
-
-    const validate = ajv.compile(subSchema);
-
-    mermaidDefaultConfig[key] = {};
-
-    for (const required of subSchema.required ?? []) {
-      if (subSchema.properties[required] === undefined && baseDiagramConfig.properties[required]) {
-        mermaidDefaultConfig[key][required] = baseDiagramConfig.properties[required].default;
-      }
-    }
-    if (!validate(mermaidDefaultConfig[key])) {
-      throw new Error(
-        `schema for subconfig ${key} does not have valid defaults! Errors were ${JSON.stringify(
-          validate.errors,
-          undefined,
-          2
-        )}`
-      );
-    }
-  }
-
-  const validate = ajv.compile(mermaidConfigSchema);
-
-  if (!validate(mermaidDefaultConfig)) {
-    throw new Error(
-      `Mermaid config JSON Schema does not have valid defaults! Errors were ${JSON.stringify(
-        validate.errors,
-        undefined,
-        2
-      )}`
-    );
-  }
-
-  return mermaidDefaultConfig;
-}
 
 /**
  * Vite plugin that handles JSON Schemas saved as a `.schema.yaml` file.
@@ -120,32 +16,13 @@ export default function jsonSchemaPlugin(): PluginOption {
         return;
       }
 
-      if (idAsUrl.searchParams.get('only-defaults')) {
+      const jsonSchema = loadSchema(src, idAsUrl.pathname);
-        const jsonSchema = load(src, {
+      return {
-          filename: idAsUrl.pathname,
+        code: idAsUrl.searchParams.get('only-defaults')
-          // only allow JSON types in our YAML doc (will probably be default in YAML 1.3)
+          ? getDefaults(jsonSchema)
-          // e.g. `true` will be parsed a boolean `true`, `True` will be parsed as string `"True"`.
+          : getSchema(jsonSchema),
-          schema: JSON_SCHEMA,
+        map: null, // no source map
-        }) as JSONSchemaType<MermaidConfig>;
+      };
-        return {
-          code: `export default ${JSON.stringify(generateDefaults(jsonSchema), undefined, 2)};`,
-          map: null, // no source map
-        };
-      } else {
-        return {
-          code: `export default ${JSON.stringify(
-            load(src, {
-              filename: idAsUrl.pathname,
-              // only allow JSON types in our YAML doc (will probably be default in YAML 1.3)
-              // e.g. `true` will be parsed a boolean `true`, `True` will be parsed as string `"True"`.
-              schema: JSON_SCHEMA,
-            }),
-            undefined,
-            2
-          )};`,
-          map: null, // provide source map if available
-        };
-      }
     },
   };
 }

.vite/server.ts

@@ -1,6 +1,7 @@
 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();
@@ -14,9 +15,9 @@ async function createServer() {
   });
 
   app.use(cors());
-  app.use(express.static('./packages/mermaid/dist'));
+  for (const { packageName } of Object.values(packageOptions)) {
-  app.use(express.static('./packages/mermaid-zenuml/dist'));
+    app.use(express.static(`./packages/${packageName}/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'));

.vscode/extensions.json

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

Dockerfile

@@ -1,2 +1,2 @@
-FROM node:18.19.0-alpine3.18 AS base
+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 -

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/wwtabKgp8y" 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://discord.gg/AgrbSrBer3" title="Discord invite">🙌 Join Us</a>
 </p>
 <p align="center">
 <a href="./README.zh-CN.md">简体中文</a>
@@ -33,7 +33,7 @@ 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/wwtabKgp8y)
+[![Join our Discord!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=discord&label=discord)](https://discord.gg/AgrbSrBer3)
 [![Twitter Follow](https://img.shields.io/badge/Social-mermaidjs__-blue?style=social&logo=X)](https://twitter.com/mermaidjs_)
 
 <img src="./img/header.png" alt="" />
@@ -42,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.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>
+<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>
 
 ## Table of content
 
@@ -53,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)
@@ -74,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](./docs/ecosystem/tutorials.md) page.
+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](./docs/ecosystem/integrations-community.md).
+Use Mermaid with your 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).
+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).
 
-For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./docs/intro/getting-started.md), [Usage](./docs/config/usage.md) and [Tutorials](./docs/ecosystem/tutorials.md).
+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).
 
 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.
 
@@ -91,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.github.io/mermaid/#/n00b-syntaxReference).**
+**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).**
 
 <!-- <Flowchart> -->
 
-### 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 [<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 LR
@@ -115,12 +115,12 @@ C -->|One| D[Result 1]
 C -->|Two| E[Result 2]
 ```
 
-### 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>]
+### 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>]
 
 ```
 sequenceDiagram
 Alice->>John: Hello John, how are you?
-loop Healthcheck
+loop HealthCheck
     John->>John: Fight against hypochondria
 end
 Note right of John: Rational thoughts!
@@ -132,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!
@@ -141,7 +141,7 @@ John->>Bob: How about you?
 Bob-->>John: Jolly good!
 ```
 
-### 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 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
@@ -165,7 +165,7 @@ gantt
     Parallel 4   :         des6, after des4, 1d
 ```
 
-### 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>]
+### 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>]
 
 ```
 classDiagram
@@ -207,7 +207,7 @@ class Class10 {
 
 ```
 
-### 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>]
+### 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>]
 
 ```
 stateDiagram-v2
@@ -229,7 +229,7 @@ Moving --> Crash
 Crash --> [*]
 ```
 
-### 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 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
@@ -247,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.github.io/mermaid/#/gantt">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.org/syntax/gantt.html">docs</a> - <a href="https://mermaid.live/edit#pako:eNptkU1vhCAQhv8KIenNugiI4rkf6bmXpvEyFVxJFDYyNt1u9r8X63Z7WQ9m5pknLzieaBeMpQ3dg0dsPUkPOhwteXZIXmJcbCT3xMAxkuh8Z8kIEclyMIB209fqKcwTICFvG4IvFy_oLrZ-g9F26ILfQgvNFN94VaRXQ1iWqpumZBcu1J8p1E1TXDx59eQNr5LyEqjJn6hv5QnGNlxevZJmdLLpy5xJSzut45biYCfb0iaVxvawjNjS1p-TCguG16PvaIPzYjO67e3BwX6GiTY9jPFKH43DMF_hGMDY1J4oHg-_f8hFTJFd8L3br3yZx4QHxENsdrt1nO8dDstH3oVpF50ZYMbhU6ud4qoGLqyqBJRCmO6j0HXPZdGbihUc6Pmc0QP49xD-b5X69ZQv2gjO81IwzWqhC1lKrjJ6pA3nVS7SMiVjrKirWlYp5fs3osgrWeo00lorLWvOzz8JVbXm">live editor</a>]
 
 ```
 gantt
@@ -285,7 +285,7 @@ gantt
     5    : 0, 5
 ```
 
-### 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>]
+### 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>]
 
 ```
   journey
@@ -311,7 +311,7 @@ gantt
       Sit down: 3: Me
 ```
 
-### C4 diagram [<a href="https://mermaid-js.github.io/mermaid/#/c4c">docs</a>]
+### C4 diagram [<a href="https://mermaid.js.org/syntax/c4.html">docs</a>]
 
 ```
 C4Context
@@ -405,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](CONTRIBUTING.md)
+Detailed information about how to contribute can be found in the [contribution guide](https://mermaid.js.org/community/contributing.html)
 
 ## 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/wwtabKgp8y" 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://discord.gg/AgrbSrBer3" title="Discord 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/wwtabKgp8y)
+[![Join our Discord!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=discord&label=discord)](https://discord.gg/AgrbSrBer3)
 [![Twitter Follow](https://img.shields.io/badge/Social-mermaidjs__-blue?style=social&logo=X)](https://twitter.com/mermaidjs_)
 
 <img src="./img/header.png" alt="" />
@@ -43,7 +43,7 @@ Mermaid
 
 **感谢所有参与进来提交 PR，解答疑问的人们! 🙏**
 
-<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>
+<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>
 
 ## 关于 Mermaid
 
@@ -57,20 +57,20 @@ Mermaid 是一个基于 Javascript 的图表绘制工具，通过解析类 Markd
 Mermaid 通过允许用户创建便于修改的图表来解决这一难题，它也可以作为生产脚本（或其他代码）的一部分。<br/>
 <br/>
 Mermaid 甚至能让非程序员也能通过 [Mermaid Live Editor](https://mermaid.live/) 轻松创建详细的图表。<br/>
-你可以访问 [教程](./docs/ecosystem/tutorials.md) 来查看 Live Editor 的视频教程，也可以查看 [Mermaid 的集成和使用](./docs/ecosystem/integrations-community.md) 这个清单来检查你的文档工具是否已经集成了 Mermaid 支持。
+你可以访问 [教程](https://mermaid.js.org/ecosystem/tutorials.html) 来查看 Live Editor 的视频教程，也可以查看 [Mermaid 的集成和使用](https://mermaid.js.org/ecosystem/integrations-community.html) 这个清单来检查你的文档工具是否已经集成了 Mermaid 支持。
 
-如果想要查看关于 Mermaid 更详细的介绍及基础使用方式，可以查看 [入门指引](./docs/intro/getting-started.md), [用法](./docs/config/usage.md) 和 [教程](./docs/ecosystem/tutorials.md).
+如果想要查看关于 Mermaid 更详细的介绍及基础使用方式，可以查看 [入门指引](https://mermaid.js.org/intro/getting-started.html), [用法](https://mermaid.js.org/config/usage.html) 和 [教程](https://mermaid.js.org/ecosystem/tutorials.html).
 
 <!-- </Main description> -->
 
 ## 示例
 
-**下面是一些可以使用 Mermaid 创建的图表示例。点击 [语法](https://mermaid-js.github.io/mermaid/#/n00b-syntaxReference) 查看详情。**
+**下面是一些可以使用 Mermaid 创建的图表示例。点击 [语法](https://mermaid.js.org/intro/syntax-reference.html) 查看详情。**
 
 <table>
 <!-- <Flowchart> -->
 
-### 流程图 [<a href="https://mermaid-js.github.io/mermaid/#/flowchart">文档</a> - <a href="https://mermaid.live/edit#base64:eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW0hhcmRdIC0tPnxUZXh0fCBCKFJvdW5kKVxuICAgIEIgLS0-IEN7RGVjaXNpb259XG4gICAgQyAtLT58T25lfCBEW1Jlc3VsdCAxXVxuICAgIEMgLS0-fFR3b3wgRVtSZXN1bHQgMl0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
+### 流程图 [<a href="https://mermaid.js.org/syntax/flowchart.html">文档</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.github.io/mermaid/#/sequenceDiagram">文档</a> - <a href="https://mermaid.live/edit#base64:eyJjb2RlIjoic2VxdWVuY2VEaWFncmFtXG5BbGljZS0-PkpvaG46IEhlbGxvIEpvaG4sIGhvdyBhcmUgeW91P1xubG9vcCBIZWFsdGhjaGVja1xuICAgIEpvaG4tPj5Kb2huOiBGaWdodCBhZ2FpbnN0IGh5cG9jaG9uZHJpYVxuZW5kXG5Ob3RlIHJpZ2h0IG9mIEpvaG46IFJhdGlvbmFsIHRob3VnaHRzIVxuSm9obi0tPj5BbGljZTogR3JlYXQhXG5Kb2huLT4-Qm9iOiBIb3cgYWJvdXQgeW91P1xuQm9iLS0-PkpvaG46IEpvbGx5IGdvb2QhIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
+### 时序图 [<a href="https://mermaid.js.org/syntax/sequenceDiagram.html">文档</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.github.io/mermaid/#/gantt">文档</a> - <a href="https://mermaid.live/edit#base64:eyJjb2RlIjoiZ2FudHRcbnNlY3Rpb24gU2VjdGlvblxuQ29tcGxldGVkIDpkb25lLCAgICBkZXMxLCAyMDE0LTAxLTA2LDIwMTQtMDEtMDhcbkFjdGl2ZSAgICAgICAgOmFjdGl2ZSwgIGRlczIsIDIwMTQtMDEtMDcsIDNkXG5QYXJhbGxlbCAxICAgOiAgICAgICAgIGRlczMsIGFmdGVyIGRlczEsIDFkXG5QYXJhbGxlbCAyICAgOiAgICAgICAgIGRlczQsIGFmdGVyIGRlczEsIDFkXG5QYXJhbGxlbCAzICAgOiAgICAgICAgIGRlczUsIGFmdGVyIGRlczMsIDFkXG5QYXJhbGxlbCA0ICAgOiAgICAgICAgIGRlczYsIGFmdGVyIGRlczQsIDFkIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
+### 甘特图 [<a href="https://mermaid.js.org/syntax/gantt.html">文档</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.github.io/mermaid/#/classDiagram">文档</a> - <a href="https://mermaid.live/edit#base64:eyJjb2RlIjoiY2xhc3NEaWFncmFtXG5DbGFzczAxIDx8LS0gQXZlcnlMb25nQ2xhc3MgOiBDb29sXG48PGludGVyZmFjZT4-IENsYXNzMDFcbkNsYXNzMDkgLS0-IEMyIDogV2hlcmUgYW0gaT9cbkNsYXNzMDkgLS0qIEMzXG5DbGFzczA5IC0tfD4gQ2xhc3MwN1xuQ2xhc3MwNyA6IGVxdWFscygpXG5DbGFzczA3IDogT2JqZWN0W10gZWxlbWVudERhdGFcbkNsYXNzMDEgOiBzaXplKClcbkNsYXNzMDEgOiBpbnQgY2hpbXBcbkNsYXNzMDEgOiBpbnQgZ29yaWxsYVxuY2xhc3MgQ2xhc3MxMCB7XG4gID4-c2VydmljZT4-XG4gIGludCBpZFxuICBzaXplKClcbn0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
+### 类图 [<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>]
 
 ```
 classDiagram
@@ -178,7 +178,7 @@ class Class10 {
 }
 ```
 
-### 状态图 [[<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>]
+### 状态图 [<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>]
 
 ```
 stateDiagram-v2
@@ -200,7 +200,7 @@ Moving --> Crash
 Crash --> [*]
 ```
 
-### 饼图 [<a href="https://mermaid-js.github.io/mermaid/#/pie">文档</a> - <a href="https://mermaid.live/edit#base64:eyJjb2RlIjoicGllXG5cIkRvZ3NcIiA6IDQyLjk2XG5cIkNhdHNcIiA6IDUwLjA1XG5cIlJhdHNcIiA6IDEwLjAxIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
+### 饼图 [<a href="https://mermaid.js.org/syntax/pie.html">文档</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.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>]
+### 用户体验旅程图 [<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>]
 
 ```
   journey
@@ -244,7 +244,7 @@ pie
       Sit down: 3: Me
 ```
 
-### C4 图 [<a href="https://mermaid-js.github.io/mermaid/#/c4c">文档</a>]
+### C4 图 [<a href="https://mermaid.js.org/syntax/c4.html">文档</a>]
 
 ```
 C4Context
@@ -338,7 +338,7 @@ npm publish
 
 Mermaid 是一个不断发展中的社区，并且还在接收新的贡献者。有很多不同的方式可以参与进来，而且我们还在寻找额外的帮助。如果你想知道如何开始贡献，请查看 [这个 issue](https://github.com/mermaid-js/mermaid/issues/866)。
 
-关于如何贡献的详细信息可以在 [贡献指南](CONTRIBUTING.md) 中找到。
+关于如何贡献的详细信息可以在 [贡献指南](https://mermaid.js.org/community/contributing.html) 中找到。
 
 ## 安全
 

__mocks__/c4Renderer.js

@@ -1,21 +0,0 @@
-/**
- * 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

@@ -1,16 +0,0 @@
-/**
- * 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

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

__mocks__/dagre-d3.ts

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

__mocks__/entity-decode/browser.ts

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

__mocks__/erRenderer.js

@@ -1,16 +0,0 @@
-/**
- * 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

@@ -1,24 +0,0 @@
-/**
- * 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

@@ -1,16 +0,0 @@
-/**
- * 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

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

__mocks__/journeyRenderer.js

@@ -1,15 +0,0 @@
-/**
- * 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

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

__mocks__/requirementRenderer.js

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

__mocks__/sankeyRenderer.js

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

__mocks__/sequenceRenderer.js

@@ -1,23 +0,0 @@
-/**
- * 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

@@ -1,22 +0,0 @@
-/**
- * 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,
-};

cSpell.json

@@ -1,209 +0,0 @@
-{
-  "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",
-    "codemia",
-    "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",
-    "inkdrop",
-    "jaoude",
-    "jgreywolf",
-    "jison",
-    "jiti",
-    "kaufmann",
-    "khroma",
-    "klemm",
-    "klink",
-    "knsv",
-    "knut",
-    "knutsveidqvist",
-    "laganeckas",
-    "linetype",
-    "lintstagedrc",
-    "logmsg",
-    "lucida",
-    "markdownish",
-    "matthieu",
-    "matthieumorel",
-    "mdast",
-    "mdbook",
-    "mermaidjs",
-    "mermerd",
-    "mindaugas",
-    "mindmap",
-    "mindmaps",
-    "mitigations",
-    "mkdocs",
-    "mmorel",
-    "mult",
-    "neurodiverse",
-    "nextra",
-    "nikolay",
-    "nirname",
-    "npmjs",
-    "orlandoni",
-    "pathe",
-    "pbrolin",
-    "phpbb",
-    "pixelmatch",
-    "plantuml",
-    "playfair",
-    "pnpm",
-    "podlite",
-    "quence",
-    "radious",
-    "ranksep",
-    "rect",
-    "rects",
-    "reda",
-    "redmine",
-    "regexes",
-    "rehype",
-    "roledescription",
-    "rozhkov",
-    "sandboxed",
-    "sankey",
-    "setupgraphviewbox",
-    "shiki",
-    "sidharth",
-    "sidharthv",
-    "sphinxcontrib",
-    "ssim",
-    "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

@@ -0,0 +1,45 @@
+# 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/integration/other/configuration.spec.js

@@ -118,11 +118,53 @@ describe('Configuration', () => {
     it('should not taint the initial configuration when using multiple directives', () => {
       const url = 'http://localhost:9000/regression/issue-1874.html';
       cy.visit(url);
-
+      cy.window().should('have.property', 'rendered', true);
-      cy.get('svg');
+      cy.get('svg').should('be.visible');
       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');
+        });
+      cy.matchImageSnapshot(
+        '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');
+        });
+      cy.matchImageSnapshot(
+        'configuration.spec-should-render-error-diagram-if-suppressErrorRendering-is-not-set'
+      );
+    });
+  });
 });

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

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

cypress/integration/other/iife.spec.js

@@ -0,0 +1,11 @@
+describe('IIFE', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:9000/iife.html');
+  });
+
+  it('should render when using mermaid.min.js', () => {
+    cy.window().should('have.property', 'rendered', true);
+    cy.get('svg').should('be.visible');
+    cy.get('#d2').should('contain', 'Hello');
+  });
+});

cypress/integration/other/webpackUsage.spec.js

@@ -1,16 +0,0 @@
-describe('Sequencediagram', () => {
-  it('should render a simple sequence diagrams', () => {
-    const url = 'http://localhost:9000/webpackUsage.html';
-
-    cy.visit(url);
-    cy.get('body').find('svg').should('have.length', 1);
-  });
-  it('should handle html escapings properly', () => {
-    const url = 'http://localhost:9000/webpackUsage.html?test-html-escaping=true';
-
-    cy.visit(url);
-    cy.get('body').find('svg').should('have.length', 1);
-
-    cy.get('g.label > foreignobject > div').should('not.contain.text', '<b>');
-  });
-});

cypress/integration/other/xss.spec.js

@@ -137,4 +137,9 @@ describe('XSS', () => {
     cy.wait(1000);
     cy.get('#the-malware').should('not.exist');
   });
+  it('should sanitize backticks block diagram labels properly', () => {
+    cy.visit('http://localhost:9000/xss25.html');
+    cy.wait(1000);
+    cy.get('#the-malware').should('not.exist');
+  });
 });

cypress/integration/rendering/block.spec.js

@@ -0,0 +1,386 @@
+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('BL16: width alignment - blocks shold be equal in width', () => {
+    imgSnapshotTest(
+      `block-beta
+    A("This is the text")
+    B
+    C
+      `,
+      {}
+    );
+  });
+
+  it('BL17: block types 1 - square, rounded and circle', () => {
+    imgSnapshotTest(
+      `block-beta
+    A["square"]
+    B("rounded")
+    C(("circle"))
+      `,
+      {}
+    );
+  });
+
+  it('BL18: block types 2 - odd, diamond and hexagon', () => {
+    imgSnapshotTest(
+      `block-beta
+    A>"rect_left_inv_arrow"]
+    B{"diamond"}
+    C{{"hexagon"}}
+      `,
+      {}
+    );
+  });
+
+  it('BL19: block types 3 - stadium', () => {
+    imgSnapshotTest(
+      `block-beta
+    A(["stadium"])
+      `,
+      {}
+    );
+  });
+
+  it('BL20: 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('BL21: block types 1 - square, rounded and circle', () => {
+    imgSnapshotTest(
+      `block-beta
+    A["square"]
+    B("rounded")
+    C(("circle"))
+      `,
+      {}
+    );
+  });
+
+  it('BL22: sizing - it should be possible to make a block wider', () => {
+    imgSnapshotTest(
+      `block-beta
+      A("rounded"):2
+      B:2
+      C
+      `,
+      {}
+    );
+  });
+
+  it('BL23: sizing - it should be possible to make a composite block wider', () => {
+    imgSnapshotTest(
+      `block-beta
+      block:2
+        A
+      end
+      B
+      `,
+      {}
+    );
+  });
+
+  it('BL24: block in the middle with space on each side', () => {
+    imgSnapshotTest(
+      `block-beta
+        columns 3
+        space
+        middle["In the middle"]
+        space
+      `,
+      {}
+    );
+  });
+  it('BL25: space and an edge', () => {
+    imgSnapshotTest(
+      `block-beta
+  columns 5
+    A space B
+    A --x B
+      `,
+      {}
+    );
+  });
+  it('BL26: block sizes for regular blocks', () => {
+    imgSnapshotTest(
+      `block-beta
+  columns 3
+    a["A wide one"] b:2 c:2 d
+      `,
+      {}
+    );
+  });
+  it('BL27: 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('BL23: 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/flowchart-elk.spec.js

@@ -844,3 +844,42 @@ end
     });
   });
 });
+
+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`,
+      { flowchart: { defaultRenderer: '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`,
+      { flowchart: { defaultRenderer: 'elk' } }
+    );
+    cy.get('svg').should((svg) => {
+      const edges = svg[0].querySelectorAll('.edges path');
+      console.log(edges);
+      expect(edges[0]).to.have.attr('pattern', 'solid');
+      expect(edges[1]).to.have.attr('pattern', 'dotted');
+      expect(edges[2]).to.have.css('stroke-width', '3.5px');
+      expect(edges[3]).to.have.css('stroke-width', '1.5px');
+    });
+  });
+});

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

@@ -760,6 +760,51 @@ A ~~~ B
     );
   });
 
+  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', () => {
@@ -904,6 +949,18 @@ 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)', () => {

cypress/integration/rendering/gantt.spec.js

@@ -92,6 +92,31 @@ 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(
       `
@@ -548,7 +573,28 @@ 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(
       `

cypress/integration/rendering/gitGraph.spec.js

@@ -943,4 +943,594 @@ gitGraph TB:
       { 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"
+        `,
+        {}
+      );
+    });
+  });
 });

cypress/integration/rendering/katex.spec.js

@@ -0,0 +1,36 @@
+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' }
+  //   );
+  // });
+});

cypress/integration/rendering/packet.spec.ts

@@ -0,0 +1,67 @@
+import { imgSnapshotTest } from '../../helpers/util';
+
+describe('packet structure', () => {
+  it('should render a simple packet diagram', () => {
+    imgSnapshotTest(
+      `packet-beta
+  title Hello world
+  0-10: "hello"
+`
+    );
+  });
+
+  it('should render a complex packet diagram', () => {
+    imgSnapshotTest(
+      `packet-beta
+        0-15: "Source Port"
+        16-31: "Destination Port"
+        32-63: "Sequence Number"
+        64-95: "Acknowledgment Number"
+        96-99: "Data Offset"
+        100-105: "Reserved"
+        106: "URG"
+        107: "ACK"
+        108: "PSH"
+        109: "RST"
+        110: "SYN"
+        111: "FIN"
+        112-127: "Window"
+        128-143: "Checksum"
+        144-159: "Urgent Pointer"
+        160-191: "(Options and Padding)"
+        192-223: "data"
+      `
+    );
+  });
+
+  it('should render a complex packet diagram with showBits false', () => {
+    imgSnapshotTest(
+      `
+      ---
+      title: "Packet Diagram"
+      config:
+        packet:
+          showBits: false
+      ---
+      packet-beta
+        0-15: "Source Port"
+        16-31: "Destination Port"
+        32-63: "Sequence Number"
+        64-95: "Acknowledgment Number"
+        96-99: "Data Offset"
+        100-105: "Reserved"
+        106: "URG"
+        107: "ACK"
+        108: "PSH"
+        109: "RST"
+        110: "SYN"
+        111: "FIN"
+        112-127: "Window"
+        128-143: "Checksum"
+        144-159: "Urgent Pointer"
+        160-191: "(Options and Padding)"
+        192-223: "data"
+      `
+    );
+  });
+});

cypress/integration/rendering/quadrantChart.spec.js

@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
+import { imgSnapshotTest } from '../../helpers/util.ts';
 
 describe('Quadrant Chart', () => {
   it('should render if only chart type is provided', () => {
@@ -226,4 +226,52 @@ describe('Quadrant Chart', () => {
     );
     cy.get('svg');
   });
+
+  it('it should render data points with styles', () => {
+    imgSnapshotTest(
+      `
+  quadrantChart
+    title Reach and engagement of campaigns
+    x-axis Reach -->
+    y-axis Engagement -->
+    quadrant-1 We should expand
+    quadrant-2 Need to promote
+    quadrant-3 Re-evaluate
+    quadrant-4 May be improved
+    Campaign A: [0.3, 0.6] radius: 20
+    Campaign B: [0.45, 0.23]     color: #ff0000  
+    Campaign C: [0.57, 0.69]  stroke-color: #ff00ff  
+    Campaign D: [0.78, 0.34]        stroke-width: 3px    
+    Campaign E: [0.40, 0.34] radius: 20,   color: #ff0000  , stroke-color  : #ff00ff,     stroke-width    :   3px   
+    Campaign F: [0.35, 0.78] stroke-width: 3px , color: #ff0000, radius: 20, stroke-color:     #ff00ff
+    Campaign G: [0.22, 0.22] stroke-width: 3px  , color: #309708  ,  radius  : 20  ,  stroke-color:    #5060ff
+    Campaign H: [0.22, 0.44]
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+
+  it('it should render data points with styles + classes', () => {
+    imgSnapshotTest(
+      `
+  quadrantChart
+    title Reach and engagement of campaigns
+    x-axis Reach -->
+    y-axis Engagement -->
+    quadrant-1 We should expand
+    quadrant-2 Need to promote
+    quadrant-3 Re-evaluate
+    quadrant-4 May be improved
+    Campaign A:::class1: [0.3, 0.6] radius: 20
+    Campaign B: [0.45, 0.23] color: #ff0000
+    Campaign C: [0.57, 0.69] stroke-color: #ff00ff
+    Campaign D:::class2: [0.78, 0.34] stroke-width: 3px
+    Campaign E:::class2: [0.40, 0.34] radius: 20, color: #ff0000, stroke-color: #ff00ff, stroke-width: 3px
+    Campaign F:::class1: [0.35, 0.78]
+    classDef class1 color: #908342, radius : 10, stroke-color: #310085, stroke-width: 10px
+    classDef class2 color: #f00fff, radius : 10
+    `
+    );
+  });
 });

cypress/integration/rendering/sequencediagram.spec.js

@@ -375,6 +375,29 @@ context('Sequence diagram', () => {
         {}
       );
     });
+    it('should have actor-top and actor-bottom classes on top and bottom actor box and symbol and actor-box and actor-man classes for text tags', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+          actor Bob
+          Alice->>Bob: Hi Bob
+          Bob->>Alice: Hi Alice
+      `,
+        {}
+      );
+      cy.get('.actor').should('have.class', 'actor-top');
+      cy.get('.actor-man').should('have.class', 'actor-top');
+      cy.get('.actor.actor-top').should('not.have.class', 'actor-bottom');
+      cy.get('.actor-man.actor-top').should('not.have.class', 'actor-bottom');
+
+      cy.get('.actor').should('have.class', 'actor-bottom');
+      cy.get('.actor-man').should('have.class', 'actor-bottom');
+      cy.get('.actor.actor-bottom').should('not.have.class', 'actor-top');
+      cy.get('.actor-man.actor-bottom').should('not.have.class', 'actor-top');
+
+      cy.get('text.actor-box').should('include.text', 'Alice');
+      cy.get('text.actor-man').should('include.text', 'Bob');
+    });
     it('should render long notes left of actor', () => {
       imgSnapshotTest(
         `
@@ -787,7 +810,10 @@ context('Sequence diagram', () => {
         note left of Alice: config: mirrorActors=true<br/>directive: mirrorActors=false
         Bob->>Alice: Short as well
       `,
-        { logLevel: 0, sequence: { mirrorActors: true, noteFontSize: 18, noteFontFamily: 'Arial' } }
+        {
+          logLevel: 0,
+          sequence: { mirrorActors: true, noteFontSize: 18, noteFontFamily: 'Arial' },
+        }
       );
     });
   });
@@ -838,7 +864,10 @@ context('Sequence diagram', () => {
         a->>j: Hello John, how are you?
         j-->>a: Great!
       `,
-        { logLevel: 0, sequence: { mirrorActors: true, noteFontSize: 18, noteFontFamily: 'Arial' } }
+        {
+          logLevel: 0,
+          sequence: { mirrorActors: true, noteFontSize: 18, noteFontFamily: 'Arial' },
+        }
       );
     });
     it('should support actor links and properties when not mirrored EXPERIMENTAL: USE WITH CAUTION', () => {

cypress/platform/ashish2.html

@@ -4,7 +4,7 @@
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
     />
     <link
       href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
@@ -33,7 +33,9 @@
         background-image: radial-gradient(#fff 1%, transparent 11%),
           radial-gradient(#fff 1%, transparent 11%);
         background-size: 20px 20px;
-        background-position: 0 0, 10px 10px;
+        background-position:
+          0 0,
+          10px 10px;
         background-repeat: repeat;
       }
       .malware {

cypress/platform/class.html

@@ -3,7 +3,7 @@
     <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
     />
     <link
       href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"

cypress/platform/click_security_loose.html

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

cypress/platform/click_security_other.html

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

cypress/platform/click_security_sandbox.html

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

cypress/platform/click_security_strict.html

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

cypress/platform/css1.html

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

cypress/platform/current.html

@@ -4,7 +4,7 @@
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
     />
     <link
       href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"

cypress/platform/current2.html

@@ -4,7 +4,7 @@
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
     />
     <link
       href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"

cypress/platform/e2e.html

@@ -1,7 +1,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <script src="./viewer.js" type="module"></script>
+    <script type="module" src="./viewer.js"></script>
     <link
       href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
       rel="stylesheet"

cypress/platform/empty.html

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

cypress/platform/external-diagrams-example-diagram.html

@@ -11,8 +11,7 @@ example-diagram
     <!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script> -->
     <!-- <script type="module" src="./external-diagrams-mindmap.mjs" /> -->
     <script type="module">
-      import exampleDiagram from '../../packages/mermaid-example-diagram/dist/mermaid-example-diagram.core.mjs';
+      import exampleDiagram from './mermaid-example-diagram.esm.mjs';
-      // import example from '../../packages/mermaid-example-diagram/src/detector';
       import mermaid from './mermaid.esm.mjs';
 
       await mermaid.registerExternalDiagrams([exampleDiagram]);

cypress/platform/flow-elk.html

@@ -0,0 +1,28 @@
+<html>
+  <body>
+    <pre class="mermaid">
+      flowchart-elk
+      a[hello] --> b[world]
+      b --> c{test}
+      c --> one
+      c --> two
+      c --> three
+    </pre>
+
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
+      import elk from './mermaid-flowchart-elk.esm.min.mjs';
+      if (window.location.search.includes('elk')) {
+        await mermaid.registerExternalDiagrams([elk]);
+      }
+      mermaid.initialize({
+        logLevel: 3,
+        startOnLoad: false,
+      });
+      await mermaid.run();
+      if (window.Cypress) {
+        window.rendered = true;
+      }
+    </script>
+  </body>
+</html>

cypress/platform/flowchart-refactor.html

@@ -0,0 +1,775 @@
+<html>
+
+<head>
+  <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
+  <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
+  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet" />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap" rel="stylesheet" />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
+    rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
+    rel="stylesheet" />
+
+  <style>
+    body {
+      font-family: 'Arial';
+    }
+
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      table-layout: fixed;
+    }
+
+    th,
+    td {
+      border: 1px solid black;
+      padding: 10px;
+      text-align: center;
+      vertical-align: middle;
+    }
+
+    .separator {
+      height: 20px;
+      background-color: #f0f0f0;
+    }
+
+    .vertical-header {
+      text-align: center;
+    }
+
+    .collapsible {
+      background-color: #f9f9f9;
+      color: #444;
+      cursor: pointer;
+      padding: 18px;
+      width: 100%;
+      border: none;
+      text-align: left;
+      outline: none;
+      font-size: 15px;
+    }
+
+    .active,
+    .collapsible:hover {
+      background-color: #ccc;
+    }
+
+    .collapsible:after {
+      content: '\002B';
+      color: #777;
+      font-weight: bold;
+      float: right;
+      margin-left: 2px;
+    }
+
+    .active:after {
+      content: "\2212";
+    }
+
+    .content {
+      padding: 0 5px;
+      max-height: 0;
+      overflow: hidden;
+      transition: max-height 0.2s ease-out;
+      background-color: #f1f1f1;
+    }
+
+    .content .pre-scrollable {
+      max-height: 200px;
+      overflow-y: scroll;
+    }
+  </style>
+</head>
+
+<body>
+  <table>
+    <tr>
+      <th></th> <!-- Placeholder for the top left corner -->
+      <th>Dagre</th>
+      <th>Dagre with rough</th>
+      <th>ELK</th>
+      <th>ELK with rough</th>
+    </tr>
+    <tr>
+      <th class="vertical-header">
+        <button class="collapsible">Stadium shape</button>
+        <div class="content">
+          <div class="pre-scrollable">
+            <pre>
+      flowchart LR
+    id1([This is the text in the box])
+
+  </pre>
+          </div>
+      </th>
+      <td>
+        <pre id="diagram1" class="mermaid">
+flowchart LR
+    id1([This is the text in the box])
+
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram2" class="mermaid">
+%%{init: {"look": "handdrawn"} }%%
+flowchart LR
+    id1([This is the text in the box])
+
+
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram3" class="mermaid">
+%%{init: {"handdrawn": false, "layout": "elk"} }%%
+flowchart LR
+    id1([This is the text in the box])
+
+
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram4" class="mermaid">
+%%{init: {"look": "handdrawn", "layout": "elk"} }%%
+flowchart LR
+    id1([This is the text in the box])
+
+
+      </pre>
+      </td>
+    </tr>
+    <!-- Separator row -->
+    <tr class="separator">
+      <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
+    </tr>
+
+    <tr>
+      <th class="vertical-header">
+        <button class="collapsible">Sub-Routine shape</button>
+        <div class="content">
+          <div class="pre-scrollable">
+            <pre>
+      flowchart LR
+    id1[[This is the text in the box]]
+    </pre>
+          </div>
+      </th>
+      <td>
+        <pre id="diagram5" class="mermaid">
+flowchart LR
+    id1[[This is the text in the box]]
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram6" class="mermaid">
+%%{init: {"look": "handdrawn"} }%%
+flowchart LR
+    id1[[This is the text in the box]]
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram7" class="mermaid">
+%%{init: {"handdrawn": false, "layout": "elk"} }%%
+flowchart LR
+    id1[[This is the text in the box]]
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram8" class="mermaid">
+%%{init: {"look": "handdrawn", "layout": "elk"} }%%
+flowchart LR
+    id1[[This is the text in the box]]
+      </pre>
+      </td>
+    </tr>
+    <!-- Separator row -->
+    <tr class="separator">
+      <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
+    </tr>
+
+    <tr>
+      <th class="vertical-header">
+        <button class="collapsible">Cylindrical shape</button>
+        <div class="content">
+          <div class="pre-scrollable">
+            <pre>
+              flowchart LR
+    id1[(Database)]
+    </pre>
+          </div>
+      </th>
+      <td>
+        <pre id="diagram9" class="mermaid">
+          flowchart LR
+    id1[(Database)]
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram10" class="mermaid">
+          %%{init: {"look": "handdrawn"} }%%
+          flowchart LR
+    id1[(Database)]
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram11" class="mermaid">
+          %%{init: {"handdrawn": false, "layout": "elk"} }%%
+          flowchart LR
+    id1[(Database)]
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram12" class="mermaid">
+          %%{init: {"look": "handdrawn", "layout": "elk"} }%%
+          flowchart LR
+    id1[(Database)]
+      </pre>
+      </td>
+    </tr>
+    <!-- Separator row -->
+    <tr class="separator">
+      <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
+    </tr>
+
+    <tr>
+      <th class="vertical-header">
+        <button class="collapsible">Circle shape</button>
+        <div class="content">
+          <div class="pre-scrollable">
+            <pre>
+              flowchart LR
+    id1((This is the text in the circle))
+    </pre>
+          </div>
+      </th>
+      <td>
+        <pre id="diagram13" class="mermaid">
+          flowchart LR
+    id1((This is the text in the circle))
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram14" class="mermaid">
+          %%{init: {"look": "handdrawn"} }%%
+          flowchart LR
+    id1((This is the text in the circle))
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram15" class="mermaid">
+          %%{init: {"handdrawn": false, "layout": "elk"} }%%
+          flowchart LR
+    id1((This is the text in the circle))
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram16" class="mermaid">
+          %%{init: {"look": "handdrawn", "layout": "elk"} }%%
+          flowchart LR
+    id1((This is the text in the circle))
+      </pre>
+      </td>
+    </tr>
+    <!-- Separator row -->
+    <tr class="separator">
+      <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
+    </tr>
+
+    <tr>
+      <th class="vertical-header">
+        <button class="collapsible">Double Circle shape</button>
+        <div class="content">
+          <div class="pre-scrollable">
+            <pre>
+              flowchart TD
+    id1(((This is the text in the circle)))
+    </pre>
+          </div>
+      </th>
+      <td>
+        <pre id="diagram17" class="mermaid">
+          flowchart TD
+    id1(((This is the text in the circle)))
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram18" class="mermaid">
+          %%{init: {"look": "handdrawn"} }%%
+          flowchart TD
+    id1(((This is the text in the circle)))
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram19" class="mermaid">
+          %%{init: {"handdrawn": false, "layout": "elk"} }%%
+          flowchart TD
+    id1(((This is the text in the circle)))
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram20" class="mermaid">
+          %%{init: {"look": "handdrawn", "layout": "elk"} }%%
+          flowchart TD
+    id1(((This is the text in the circle)))
+      </pre>
+      </td>
+    </tr>
+    <!-- Separator row -->
+    <tr class="separator">
+      <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
+    </tr>
+
+    <tr>
+      <th class="vertical-header">
+        <button class="collapsible">Asymmetric shape</button>
+        <div class="content">
+          <div class="pre-scrollable">
+            <pre>
+              flowchart LR
+    id1>This is the text in the box]
+    </pre>
+          </div>
+      </th>
+      <td>
+        <pre id="diagram21" class="mermaid">
+          flowchart LR
+    id1>This is the text in the box]
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram22" class="mermaid">
+          %%{init: {"look": "handdrawn"} }%%
+          flowchart LR
+    id1>This is the text in the box]  
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram23" class="mermaid">
+          %%{init: {"handdrawn": false, "layout": "elk"} }%%
+          flowchart LR
+    id1>This is the text in the box]  
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram24" class="mermaid">
+          %%{init: {"look": "handdrawn", "layout": "elk"} }%%
+          flowchart LR
+    id1>This is the text in the box]
+      </pre>
+      </td>
+    </tr>
+    <!-- Separator row -->
+    <tr class="separator">
+      <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
+    </tr>
+
+    <tr>
+      <th class="vertical-header">
+        <button class="collapsible">Rhombus/Diamond/Question shape</button>
+        <div class="content">
+          <div class="pre-scrollable">
+            <pre>
+              flowchart LR
+    id1{This is the text in the box}
+    </pre>
+          </div>
+      </th>
+      <td>
+        <pre id="diagram25" class="mermaid">
+          flowchart LR
+    id1{This is the text in the box}
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram26" class="mermaid">
+          %%{init: {"look": "handdrawn"} }%%
+          flowchart LR
+    id1{This is the text in the box}
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram27" class="mermaid">
+          %%{init: {"handdrawn": false, "layout": "elk"} }%%
+          flowchart LR
+    id1{This is the text in the box}
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram28" class="mermaid">
+          %%{init: {"look": "handdrawn", "layout": "elk"} }%%
+          flowchart LR
+    id1{This is the text in the box}
+      </pre>
+      </td>
+    </tr>
+    <!-- Separator row -->
+    <tr class="separator">
+      <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
+    </tr>
+
+    <tr>
+      <th class="vertical-header">
+        <button class="collapsible">Hexagon shape</button>
+        <div class="content">
+          <div class="pre-scrollable">
+            <pre>
+              flowchart LR
+    id1{{This is the text in the box}}
+    </pre>
+          </div>
+      </th>
+      <td>
+        <pre id="diagram29" class="mermaid">
+          flowchart LR
+    id1{{This is the text in the box}}
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram30" class="mermaid">
+          %%{init: {"look": "handdrawn"} }%%
+          flowchart LR
+    id1{{This is the text in the box}}
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram31" class="mermaid">
+          %%{init: {"handdrawn": false, "layout": "elk"} }%%
+          flowchart LR
+    id1{{This is the text in the box}}
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram32" class="mermaid">
+          %%{init: {"look": "handdrawn", "layout": "elk"} }%%
+          flowchart LR
+    id1{{This is the text in the box}}
+      </pre>
+      </td>
+    </tr>
+    <!-- Separator row -->
+    <tr class="separator">
+      <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
+    </tr>
+
+    <tr>
+      <th class="vertical-header">
+        <button class="collapsible">Parallelogram shape</button>
+        <div class="content">
+          <div class="pre-scrollable">
+            <pre>
+              flowchart TD
+    id1[/This is the text in the box/]
+    </pre>
+          </div>
+      </th>
+      <td>
+        <pre id="diagram33" class="mermaid">
+          flowchart TD
+    id1[/This is the text in the box/]
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram34" class="mermaid">
+          %%{init: {"look": "handdrawn"} }%%
+          flowchart TD
+    id1[/This is the text in the box/]  
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram35" class="mermaid">
+          %%{init: {"handdrawn": false, "layout": "elk"} }%%
+          flowchart TD
+    id1[/This is the text in the box/] 
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram36" class="mermaid">
+          %%{init: {"look": "handdrawn", "layout": "elk"} }%%
+          flowchart TD
+    id1[/This is the text in the box/]
+      </pre>
+      </td>
+    </tr>
+    <!-- Separator row -->
+    <tr class="separator">
+      <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->  
+    </tr>
+
+    <tr>
+      <th class="vertical-header">
+        <button class="collapsible">Parallelogram Alt shape</button>
+        <div class="content">
+          <div class="pre-scrollable">
+            <pre>
+              flowchart TD
+    id1[\This is the text in the box\]
+    </pre>
+          </div>
+      </th>
+      <td>
+        <pre id="diagram37" class="mermaid">
+          flowchart TD
+    id1[\This is the text in the box\]
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram38" class="mermaid">
+          %%{init: {"look": "handdrawn"} }%%
+          flowchart TD
+    id1[\This is the text in the box\]
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram39" class="mermaid">
+          %%{init: {"handdrawn": false, "layout": "elk"} }%%
+          flowchart TD
+    id1[\This is the text in the box\]
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram40" class="mermaid">
+          %%{init: {"look": "handdrawn", "layout": "elk"} }%%
+          flowchart TD
+    id1[\This is the text in the box\]
+
+      </pre>
+      </td>
+    </tr>
+    <!-- Separator row -->
+    <tr class="separator">
+      <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
+    </tr>
+
+    <tr>
+      <th class="vertical-header">
+        <button class="collapsible">Trapezoid shape</button>
+        <div class="content">
+          <div class="pre-scrollable">
+            <pre>
+              flowchart TD
+    A[/Christmas\]
+    </pre>
+          </div>
+      </th>
+      <td>
+        <pre id="diagram41" class="mermaid">
+          flowchart TD
+    A[/Christmas\]
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram42" class="mermaid">
+          %%{init: {"look": "handdrawn"} }%%
+          flowchart TD
+    A[/Christmas\]
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram43" class="mermaid">
+          %%{init: {"handdrawn": false, "layout": "elk"} }%%
+          flowchart TD
+    A[/Christmas\]
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram44" class="mermaid">
+          %%{init: {"look": "handdrawn", "layout": "elk"} }%%
+          flowchart TD
+    A[/Christmas\]
+      </pre>
+      </td>
+    </tr>
+    <!-- Separator row -->
+    <tr class="separator">
+      <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
+    </tr>
+
+    <tr>
+      <th class="vertical-header">
+        <button class="collapsible">Trapezoid Alt shape</button>
+        <div class="content">
+          <div class="pre-scrollable">
+            <pre>
+              flowchart TD
+    A[\Christmas/]
+    </pre>
+          </div>
+      </th>
+      <td>
+        <pre id="diagram45" class="mermaid">
+          flowchart TD
+    A[\Christmas/]
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram46" class="mermaid">
+          %%{init: {"look": "handdrawn"} }%%
+          flowchart TD
+    A[\Christmas/]
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram47" class="mermaid">
+          %%{init: {"handdrawn": false, "layout": "elk"} }%%
+          flowchart TD
+    A[\Christmas/]
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram48" class="mermaid">
+          %%{init: {"look": "handdrawn", "layout": "elk"} }%%
+          flowchart TD
+    A[\Christmas/]  
+      </pre>
+      </td>
+    </tr>
+    <!-- Separator row -->
+    <tr class="separator">
+      <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
+    </tr>
+
+    <tr>
+      <th class="vertical-header">
+        <button class="collapsible">Rect with rounded corner</button>
+        <div class="content">
+          <div class="pre-scrollable">
+            <pre>
+              flowchart LR
+    id1(This is the text in the box)
+    </pre>
+          </div>
+      </th>
+      <td>
+        <pre id="diagram49" class="mermaid">
+          flowchart LR
+    id1(This is the text in the box)
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram50" class="mermaid">
+          %%{init: {"look": "handdrawn"} }%%
+          flowchart LR
+    id1(This is the text in the box)
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram51" class="mermaid">
+          %%{init: {"handdrawn": false, "layout": "elk"} }%%
+          flowchart LR
+    id1(This is the text in the box)
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram52" class="mermaid">
+          %%{init: {"look": "handdrawn", "layout": "elk"} }%%
+          flowchart LR
+    id1(This is the text in the box) 
+      </pre>
+      </td>
+    </tr>
+    <!-- Separator row -->
+    <tr class="separator">
+      <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
+    </tr>
+
+    <tr>
+      <th class="vertical-header">
+        <button class="collapsible">Rect with sharp corner</button>
+        <div class="content">
+          <div class="pre-scrollable">
+            <pre>
+              flowchart LR
+    id1[This is the text in the box]
+    </pre>
+          </div>
+      </th>
+      <td>
+        <pre id="diagram53" class="mermaid">
+          flowchart LR
+    id1[This is the text in the box]
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram54" class="mermaid">
+          %%{init: {"look": "handdrawn"} }%%
+          flowchart LR
+    id1[This is the text in the box]
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram55" class="mermaid">
+          %%{init: {"handdrawn": false, "layout": "elk"} }%%
+          flowchart LR
+    id1[This is the text in the box]
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram56" class="mermaid">
+          %%{init: {"look": "handdrawn", "layout": "elk"} }%%
+          flowchart LR
+    id1[This is the text in the box]
+      </pre>
+      </td>
+    </tr>
+    <!-- Separator row -->
+    <tr class="separator">
+      <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
+    </tr>
+
+  </table>
+
+
+  <script type="module">
+    import mermaid from './mermaid.esm.mjs';
+    import { layouts } from './mermaid-layout-elk.esm.mjs';
+    mermaid.registerLayoutLoaders(layouts);
+    mermaid.parseError = function (err, hash) {
+
+    };
+
+    mermaid.initialize({
+      handdrawn: false,
+      mergeEdges: true,
+      layout: 'dagre',
+      flowchart: { titleTopMargin: 10 },
+      // fontFamily: 'Caveat',
+      fontFamily: 'Kalam',
+      sequence: {
+        actorFontFamily: 'courier',
+        noteFontFamily: 'courier',
+        messageFontFamily: 'courier',
+      },
+      fontSize: 16,
+      logLevel: 0,
+    });
+    function callback() {
+      alert('It worked');
+    }
+    mermaid.parseError = function (err, hash) {
+      console.error('In parse error:');
+      console.error(err);
+    };
+
+
+    let coll = document.getElementsByClassName("collapsible");
+    for (const element of coll) {
+  element.addEventListener("click", function () {
+        this.classList.toggle("active");
+        let content = this.nextElementSibling;
+        if (content.style.maxHeight) {
+          content.style.maxHeight = null;
+        } else {
+          content.style.maxHeight = content.scrollHeight + "px";
+        }
+      });
+    }
+
+  </script>
+</body>
+
+</html>