Merge branch 'develop' into pr/itsalam/4844

* develop: (517 commits) chore: Minor fixes chore: Build docs Use develop as base on develop branch. Update renovate json update link update announcement and blog pages Remove `--force` flag Tweak editor.bash update link chore: update browsers list Update integrations-community: add Drupal and module. Support Firefox Address review comments Change run symbol feat: Make the examples interactive in the documentation site. Add langium chore: update browsers list chore(deps): update all patch dependencies chore(deps): update all minor dependencies Update keywords and description ...
2024-03-23 13:53:51 +05:30 · 2024-03-23 13:53:51 +05:30 · a41d6cfef1
parent 7abcb61afb be1270d070
commit a41d6cfef1
356 changed files with 16525 additions and 8385 deletions
--- a/.build/common.ts
+++ b/.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-flowchart-elk': {
+    name: 'mermaid-flowchart-elk',
+    packageName: 'mermaid-flowchart-elk',
+    file: 'detector.ts',
+  },
+} as const;
--- a/.build/generateLangium.ts
+++ b/.build/generateLangium.ts
@ -0,0 +1,5 @@
+import { generate } from 'langium-cli';
+
+export async function generateLangium() {
+  await generate({ file: `./packages/parser/langium-config.json` });
+}
--- a/.build/jisonTransformer.ts
+++ b/.build/jisonTransformer.ts
--- a/.build/jsonSchema.ts
+++ b/.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)};`;
+};
--- a/.build/types.ts
+++ b/.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);
+}
--- a/.cspell/code-terms.txt
+++ b/.cspell/code-terms.txt
@ -0,0 +1,140 @@
+# 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
+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
+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
--- a/.cspell/contributors.txt
+++ b/.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
--- a/.cspell/cspell.config.yaml
+++ b/.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
--- a/.cspell/libraries.txt
+++ b/.cspell/libraries.txt
@ -0,0 +1,71 @@
+# 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
+rscratch
+sparkline
+sphinxcontrib
+ssim
+stylis
+Swimm
+tsbuildinfo
+Tuleap
+Typora
+unocss
+unplugin
+unstub
+vite
+vitest
+Zune
--- a/.cspell/mermaid-terms.txt
+++ b/.cspell/mermaid-terms.txt
@ -0,0 +1,39 @@
+Adamiecki
+arrowend
+bmatrix
+braintree
+catmull
+compositTitleSize
+doublecircle
+elems
+gantt
+gitgraph
+gzipped
+knsv
+Knut
+marginx
+marginy
+Markdownish
+mermaidjs
+mindmap
+mindmaps
+multigraph
+nodesep
+NOTEGROUP
+Pinterest
+rankdir
+ranksep
+rect
+rects
+sandboxed
+siebling
+statediagram
+substate
+Sveidqvist
+unfixable
+Viewbox
+viewports
+visio
+vitepress
+xlink
+xychart
--- a/.cspell/misc-terms.txt
+++ b/.cspell/misc-terms.txt
@ -0,0 +1 @@
+newbranch
--- a/.esbuild/build.ts
+++ b/.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 = { ...defaultOptions, entryName } as const;
+  const buildConfigs = [
+    // 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();
--- a/.esbuild/jisonPlugin.ts
+++ b/.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: [] };
+    });
+  },
+};
--- a/.esbuild/jsonSchemaPlugin.ts
+++ b/.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;
--- a/.esbuild/server.ts
+++ b/.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();
--- a/.esbuild/util.ts
+++ b/.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 {
+  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;
+};
--- a/.eslintignore
+++ b/.eslintignore
@ -6,3 +6,6 @@ cypress/plugins/index.js
 coverage
 *.json
 node_modules
+
+# autogenereated by langium-cli
+generated/
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@ -63,13 +63,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,
-        checkStrings: false,
-        checkStringTemplates: false,
+        checkIdentifiers: true,
+        checkStrings: true,
+        checkStringTemplates: true,
      },
    ],
    'no-empty': [
@ -148,6 +159,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: {
--- a/.github/ISSUE_TEMPLATE/config.yml
+++ b/.github/ISSUE_TEMPLATE/config.yml
@ -3,9 +3,9 @@ contact_links:
  - name: GitHub Discussions
    url: https://github.com/mermaid-js/mermaid/discussions
    about: Ask the Community questions or share your own graphs in our discussions.
-  - name: Slack
-    url: https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE
-    about: Join our Community on Slack for Help and a casual chat.
+  - name: Discord
+    url: https://discord.gg/AgrbSrBer3
+    about: Join our Community on Discord for Help and a casual chat.
  - name: Documentation
    url: https://mermaid.js.org
    about: Read our documentation for all that Mermaid.js can offer.
--- a/.github/codecov.yaml
+++ b/.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
--- a/.github/lychee.toml
+++ b/.github/lychee.toml
@ -34,8 +34,14 @@ exclude = [
 # Don't check files that are generated during the build via `pnpm docs:code`
 'packages/mermaid/src/docs/config/setup/*',

-# Ignore slack invite
-"https://join.slack.com/"
+# Ignore Discord invite
+"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.
--- a/.github/pull_request_template.md
+++ b/.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
--- a/.github/workflows/build-docs.yml
+++ b/.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
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@ -15,20 +15,17 @@ permissions:
 jobs:
  build-mermaid:
    runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [18.x]
    steps:
      - uses: actions/checkout@v4

      - 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:
          cache: pnpm
-          node-version: ${{ matrix.node-version }}
+          node-version-file: '.node-version'

      - name: Install Packages
        run: |
--- a/.github/workflows/e2e-applitools.yml
+++ b/.github/workflows/e2e-applitools.yml
@ -21,9 +21,9 @@ env:
 jobs:
  e2e-applitools:
    runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [18.x]
+    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:
      - 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
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@ -1,54 +1,96 @@
+# We use github cache to save snapshots between runs.
+# For PRs and MergeQueues, the target commit is used, and for push events, github.event.previous is used.
+# If a snapshot for a given Hash is not found, we checkout that commit, run the tests and cache the snapshots.
+# These are then downloaded before running the E2E, providing the reference snapshots.
+# If there are any errors, the diff image is uploaded to artifacts, and the user is notified.
+
 name: E2E

 on:
  push:
+    branches-ignore:
+      - 'gh-readonly-queue/**'
  pull_request:
  merge_group:

 permissions:
  contents: read

+env:
+  # For PRs and MergeQueues, the target commit is used, and for push events to non-develop branches, github.event.previous is used if available. Otherwise, 'develop' is used.
+  targetHash: >-
+    ${{ 
+      github.event.pull_request.base.sha || 
+      github.event.merge_group.base_sha || 
+      (
+        (
+          (github.event_name == 'push' && github.ref == 'refs/heads/develop') || 
+          github.event.before == '0000000000000000000000000000000000000000'
+        ) && 'develop'
+      ) || 
+      github.event.before
+    }}
 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
        with:
          save-always: true
          path: ./cypress/snapshots
-          key: ${{ runner.os }}-snapshots
+          key: ${{ runner.os }}-snapshots-${{ env.targetHash }}

+      # If a snapshot for a given Hash is not found, we checkout that commit, run the tests and cache the snapshots.
      - name: Switch to base branch
        if: ${{ steps.cache-snapshot.outputs.cache-hit != 'true' }}
        uses: actions/checkout@v4
        with:
-          ref: ${{ github.event_name == 'pull_request' && github.event.pull_request.base.sha || github.event_name == 'merge_group' && github.event.merge_group.base.sha || 'develop' }}
+          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
      matrix:
-        node-version: [18.x]
        containers: [1, 2, 3, 4]
    steps:
      - uses: actions/checkout@v4
@ -56,27 +98,43 @@ 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'

+      # These cached snapshots are downloaded, providing the reference snapshots.
      - name: Cache snapshots
        id: cache-snapshot
        uses: actions/cache/restore@v3
        with:
          path: ./cypress/snapshots
-          key: ${{ runner.os }}-snapshots
+          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
@ -101,9 +159,54 @@ jobs:
          verbose: true
          token: 6845cc80-77ee-4e17-85a1-026cd95e0766

+      # We upload the artifacts into numbered archives to prevent overwriting
      - name: Upload Artifacts
-        uses: actions/upload-artifact@v3
-        if: ${{ failure() && steps.cypress.conclusion == 'failure' }}
+        uses: actions/upload-artifact@v4
+        if: ${{ always() }}
+        with:
+          name: snapshots-${{ matrix.containers }}
+          retention-days: 1
+          path: ./cypress/snapshots
+
+  combineArtifacts:
+    needs: e2e
+    runs-on: ubuntu-latest
+    if: ${{ always() }}
+    steps:
+      # Download all snapshot artifacts and merge them into a single folder
+      - name: Download All Artifacts
+        uses: actions/download-artifact@v4
+        with:
+          path: snapshots
+          pattern: snapshots-*
+          merge-multiple: true
+
+      # For successful push events, we save the snapshots cache
+      - name: Save snapshots cache
+        id: cache-upload
+        if: ${{ github.event_name == 'push' && needs.e2e.result != 'failure' }}
+        uses: actions/cache/save@v3
+        with:
+          path: ./snapshots
+          key: ${{ runner.os }}-snapshots-${{ github.event.after }}
+
+      - name: Flatten images to a folder
+        if: ${{ needs.e2e.result == 'failure'  }}
+        run: |
+          mkdir errors
+          cd snapshots
+          find . -mindepth 2 -type d -name "*__diff_output__*" -exec sh -c 'mv "$0"/*.png ../errors/' {} \;
+
+      - name: Upload Error snapshots
+        if: ${{ needs.e2e.result == 'failure' }}
+        uses: actions/upload-artifact@v4
+        id: upload-artifacts
        with:
          name: error-snapshots
-          path: cypress/snapshots/**/__diff_output__/*
+          retention-days: 10
+          path: errors/
+
+      - name: Notify Users
+        if: ${{ needs.e2e.result == 'failure' }}
+        run: |
+          echo "::error title=Visual tests failed::You can view images that failed by downloading the error-snapshots artifact: ${{ steps.upload-artifacts.outputs.artifact-url }}"
--- a/.github/workflows/link-checker.yml
+++ b/.github/workflows/link-checker.yml
@ -36,7 +36,7 @@ jobs:
          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
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@ -16,20 +16,17 @@ permissions:
 jobs:
  lint:
    runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [18.x]
    steps:
      - uses: actions/checkout@v4

      - 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:
          cache: pnpm
-          node-version: ${{ matrix.node-version }}
+          node-version-file: '.node-version'

      - name: Install Packages
        run: |
--- a/.github/workflows/publish-docs.yml
+++ b/.github/workflows/publish-docs.yml
@ -31,7 +31,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
--- a/.github/workflows/release-draft.yml
+++ b/.github/workflows/release-draft.yml
@ -12,7 +12,7 @@ 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
--- a/.github/workflows/release-preview-publish.yml
+++ b/.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: |
--- a/.github/workflows/release-publish.yml
+++ b/.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: |
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@ -8,20 +8,17 @@ permissions:
 jobs:
  unit-test:
    runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [18.x]
    steps:
      - uses: actions/checkout@v4

      - 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:
          cache: pnpm
-          node-version: ${{ matrix.node-version }}
+          node-version-file: '.node-version'

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

 demos/dev/**
 !/demos/dev/example.html
+!/demos/dev/reload.js
 tsx-0/**
+
+# autogenereated by langium-cli
+generated/
--- a/.lintstagedrc.mjs
+++ b/.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'],
 };
--- a/.node-version
+++ b/.node-version
@ -0,0 +1 @@
+v20.11.1
--- a/.npmrc
+++ b/.npmrc
@ -1,3 +1,4 @@
 registry=https://registry.npmjs.org
 auto-install-peers=true
 strict-peer-dependencies=false
+package-import-method=clone-or-copy
--- a/.prettierignore
+++ b/.prettierignore
@ -1,6 +1,7 @@
 dist
 cypress/platform/xss3.html
 .cache
+.pnpm-store
 coverage
 # Autogenerated by PNPM
 pnpm-lock.yaml
@ -10,6 +11,8 @@ 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
--- a/.vite/build.ts
+++ b/.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 {
--- a/.vite/jisonPlugin.ts
+++ b/.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 {
--- a/.vite/jsonSchemaPlugin.ts
+++ b/.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 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;
-}
+import { getDefaults, getSchema, loadSchema } from '../.build/jsonSchema.js';

 /**
 * 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 = 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,
-        }) 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
-        };
-      }
+      const jsonSchema = loadSchema(src, idAsUrl.pathname);
+      return {
+        code: idAsUrl.searchParams.get('only-defaults')
+          ? getDefaults(jsonSchema)
+          : getSchema(jsonSchema),
+        map: null, // no source map
+      };
    },
  };
 }
--- a/.vite/server.ts
+++ b/.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'));
-  app.use(express.static('./packages/mermaid-zenuml/dist'));
-  app.use(express.static('./packages/mermaid-example-diagram/dist'));
+  for (const { packageName } of Object.values(packageOptions)) {
+    app.use(express.static(`./packages/${packageName}/dist`));
+  }
  app.use(vite.middlewares);
  app.use(express.static('demos'));
  app.use(express.static('cypress/platform'));
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -2,7 +2,7 @@
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
-    "zixuanchen.vitest-explorer",
+    "vitest.explorer",
    "luniclynx.bison"
  ]
 }
--- a/2
+++ b/2
@ -1,2 +1,2 @@
-FROM node:18.19.0-alpine3.18 AS base
+FROM node:20.11.1-alpine3.19 AS base
 RUN wget -qO- https://get.pnpm.io/install.sh | ENV="$HOME/.shrc" SHELL="$(which sh)" sh -
--- a/README.md
+++ b/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://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE" title="Slack 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 Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
+[![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.
-Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/ecosystem/integrations-community.md).
+For video tutorials, visit our [Tutorials](https://mermaid.js.org/ecosystem/tutorials.html) page.
+Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](https://mermaid.js.org/ecosystem/integrations-community.html).

-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

--- a/README.zh-CN.md
+++ b/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://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE" title="Slack 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 Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
+[![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) 中找到。

 ## 安全

--- a/mocks/c4Renderer.js
+++ b/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,
-};
--- a/mocks/classRenderer-v2.js
+++ b/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,
-};
--- a/mocks/classRenderer.js
+++ b/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,
-};
--- a/mocks/dagre-d3.ts
+++ b/mocks/dagre-d3.ts
@ -1 +0,0 @@
-// DO NOT delete this file. It is used by vitest to mock the dagre-d3 module.
--- a/mocks/entity-decode/browser.ts
+++ b/mocks/entity-decode/browser.ts
@ -1,3 +0,0 @@
-module.exports = function (txt: string) {
-  return txt;
-};
--- a/mocks/erRenderer.js
+++ b/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,
-};
--- a/mocks/flowRenderer-v2.js
+++ b/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,
-};
--- a/mocks/ganttRenderer.js
+++ b/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,
-};
--- a/mocks/gitGraphRenderer.js
+++ b/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,
-};
--- a/mocks/journeyRenderer.js
+++ b/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,
-};
--- a/mocks/pieRenderer.ts
+++ b/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 };
--- a/mocks/requirementRenderer.js
+++ b/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,
-};
--- a/mocks/sankeyRenderer.js
+++ b/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,
-};
--- a/mocks/sequenceRenderer.js
+++ b/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,
-};
--- a/mocks/stateRenderer-v2.js
+++ b/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,
-};
--- a/applitools.config.js
+++ b/applitools.config.js
@ -1,19 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const { defineConfig } = require('cypress');
-
-module.exports = defineConfig({
-  testConcurrency: 1,
-  browser: [
-    // Add browsers with different viewports
-    //   { width: 800, height: 600, name: 'chrome' },
-    //   { width: 700, height: 500, name: 'firefox' },
-    //   { width: 1600, height: 1200, name: 'ie11' },
-    //   { width: 1024, height: 768, name: 'edgechromium' },
-    //   { width: 800, height: 600, name: 'safari' },
-    //   // Add mobile emulation devices in Portrait mode
-    //   { deviceName: 'iPhone X', screenOrientation: 'portrait' },
-    //   { deviceName: 'Pixel 2', screenOrientation: 'portrait' },
-  ],
-  // set batch name to the configuration
-  // batchName: `Mermaid ${process.env.APPLI_BRANCH ?? "'no APPLI_BRANCH set'"}`,
-});
--- a/cSpell.json
+++ b/cSpell.json
@ -1,208 +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",
-    "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"
-  ]
-}
--- a/cspell.config.yaml
+++ b/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
--- a/cypress.config.cjs
+++ b/cypress.config.cjs
@ -1,32 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-
-const { defineConfig } = require('cypress');
-const { addMatchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin');
-const coverage = require('@cypress/code-coverage/task');
-
-module.exports = defineConfig({
-  projectId: 'n2sma2',
-  viewportWidth: 1440,
-  viewportHeight: 1024,
-  e2e: {
-    specPattern: 'cypress/integration/**/*.{js,ts}',
-    setupNodeEvents(on, config) {
-      coverage(on, config);
-      on('before:browser:launch', (browser = {}, launchOptions) => {
-        if (browser.name === 'chrome' && browser.isHeadless) {
-          launchOptions.args.push('--window-size=1440,1024', '--force-device-scale-factor=1');
-        }
-        return launchOptions;
-      });
-      addMatchImageSnapshotPlugin(on, config);
-      // copy any needed variables from process.env to config.env
-      config.env.useAppli = process.env.USE_APPLI ? true : false;
-
-      // do not forget to return the changed config object!
-      return config;
-    },
-  },
-  video: false,
-});
-
-require('@applitools/eyes-cypress')(module);
--- a/cypress.config.ts
+++ b/cypress.config.ts
@ -0,0 +1,30 @@
+import { defineConfig } from 'cypress';
+import { addMatchImageSnapshotPlugin } from 'cypress-image-snapshot/plugin';
+import coverage from '@cypress/code-coverage/task';
+import eyesPlugin from '@applitools/eyes-cypress';
+export default eyesPlugin(
+  defineConfig({
+    projectId: 'n2sma2',
+    viewportWidth: 1440,
+    viewportHeight: 1024,
+    e2e: {
+      specPattern: 'cypress/integration/**/*.{js,ts}',
+      setupNodeEvents(on, config) {
+        coverage(on, config);
+        on('before:browser:launch', (browser, launchOptions) => {
+          if (browser.name === 'chrome' && browser.isHeadless) {
+            launchOptions.args.push('--window-size=1440,1024', '--force-device-scale-factor=1');
+          }
+          return launchOptions;
+        });
+        addMatchImageSnapshotPlugin(on, config);
+        // copy any needed variables from process.env to config.env
+        config.env.useAppli = process.env.USE_APPLI ? true : false;
+
+        // do not forget to return the changed config object!
+        return config;
+      },
+    },
+    video: false,
+  })
+);
--- a/cypress/integration/other/flowchart-elk.spec.js
+++ b/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',
+    });
+  });
+});
--- a/cypress/integration/other/iife.spec.js
+++ b/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');
+  });
+});
--- a/cypress/integration/other/webpackUsage.spec.js
+++ b/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>');
-  });
-});
--- a/cypress/integration/rendering/block.spec.js
+++ b/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
+      `,
+      {}
+    );
+  });
+});
--- a/cypress/integration/rendering/debug.spec.js
+++ b/cypress/integration/rendering/debug.spec.js
@ -1,12 +0,0 @@
-import { imgSnapshotTest } from '../../helpers/util.ts';
-
-describe('Flowchart', () => {
-  it('34: testing the label width in percy', () => {
-    imgSnapshotTest(
-      `graph TD
-      A[Christmas]
-      `,
-      { theme: 'forest', fontFamily: '"Noto Sans SC", sans-serif' }
-    );
-  });
-});
--- a/cypress/integration/rendering/flowchart-v2.spec.js
+++ b/cypress/integration/rendering/flowchart-v2.spec.js
@ -741,6 +741,25 @@ A ~~~ B
    );
  });

+  it('5059: Should render when subgraph contains only subgraphs, has link to outside and itself is part of a link', () => {
+    imgSnapshotTest(
+      `flowchart
+
+      subgraph Main
+        subgraph Child1
+          Node1
+          Node2
+        end
+        subgraph Child2
+          Node3
+          Node4
+        end
+      end
+      Main --> Out1
+      Child2 --> Out2`
+    );
+  });
+
  describe('Markdown strings flowchart (#4220)', () => {
    describe('html labels', () => {
      it('With styling and classes', () => {
--- a/cypress/integration/rendering/gantt.spec.js
+++ b/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(
      `
@ -583,4 +629,106 @@ describe('Gantt diagram', () => {
      {}
    );
  });
+
+  it("should render when there's a semicolon in the title", () => {
+    imgSnapshotTest(
+      `
+      gantt
+      title ;Gantt With a Semicolon in the Title
+      dateFormat  YYYY-MM-DD
+      section Section
+      A task           :a1, 2014-01-01, 30d
+      Another task     :after a1  , 20d
+      section Another
+      Task in sec      :2014-01-12  , 12d
+      another task      : 24d
+    `,
+      {}
+    );
+  });
+
+  it("should render when there's a semicolon in a section is true", () => {
+    imgSnapshotTest(
+      `
+      gantt
+      title Gantt Digram
+      dateFormat  YYYY-MM-DD
+      section ;Section With a Semicolon
+      A task           :a1, 2014-01-01, 30d
+      Another task     :after a1  , 20d
+      section Another
+      Task in sec      :2014-01-12  , 12d
+      another task      : 24d
+    `,
+      {}
+    );
+  });
+
+  it("should render when there's a semicolon in the task data", () => {
+    imgSnapshotTest(
+      `
+      gantt
+      title Gantt Digram
+      dateFormat  YYYY-MM-DD
+      section Section
+      ;A task with a semiclon           :a1, 2014-01-01, 30d
+      Another task     :after a1  , 20d
+      section Another
+      Task in sec      :2014-01-12  , 12d
+      another task      : 24d
+    `,
+      {}
+    );
+  });
+
+  it("should render when there's a hashtag in the title", () => {
+    imgSnapshotTest(
+      `
+      gantt
+      title #Gantt With a Hashtag in the Title
+      dateFormat  YYYY-MM-DD
+      section Section
+      A task           :a1, 2014-01-01, 30d
+      Another task     :after a1  , 20d
+      section Another
+      Task in sec      :2014-01-12  , 12d
+      another task      : 24d
+    `,
+      {}
+    );
+  });
+
+  it("should render when there's a hashtag in a section is true", () => {
+    imgSnapshotTest(
+      `
+      gantt
+      title Gantt Digram
+      dateFormat  YYYY-MM-DD
+      section #Section With a Hashtag
+      A task           :a1, 2014-01-01, 30d
+      Another task     :after a1  , 20d
+      section Another
+      Task in sec      :2014-01-12  , 12d
+      another task      : 24d
+    `,
+      {}
+    );
+  });
+
+  it("should render when there's a hashtag in the task data", () => {
+    imgSnapshotTest(
+      `
+      gantt
+      title Gantt Digram
+      dateFormat  YYYY-MM-DD
+      section Section
+      #A task with a hashtag           :a1, 2014-01-01, 30d
+      Another task     :after a1  , 20d
+      section Another
+      Task in sec      :2014-01-12  , 12d
+      another task      : 24d
+    `,
+      {}
+    );
+  });
 });
--- a/cypress/integration/rendering/gitGraph.spec.js
+++ b/cypress/integration/rendering/gitGraph.spec.js
@ -826,4 +826,191 @@ gitGraph TB:
      cherry-pick id: "M" parent:"B"`
    );
  });
+  it('41: should render default GitGraph with parallelCommits set to false', () => {
+    imgSnapshotTest(
+      `gitGraph
+      commit id:"1-abcdefg"
+      commit id:"2-abcdefg"
+      branch develop
+      commit id:"3-abcdefg"
+      commit id:"4-abcdefg"
+      checkout main
+      branch feature
+      commit id:"5-abcdefg"
+      commit id:"6-abcdefg"
+      checkout main
+      commit id:"7-abcdefg"
+      commit id:"8-abcdefg"
+      `,
+      { gitGraph: { parallelCommits: false } }
+    );
+  });
+  it('42: should render GitGraph with parallel commits', () => {
+    imgSnapshotTest(
+      `gitGraph
+      commit id:"1-abcdefg"
+      commit id:"2-abcdefg"
+      branch develop
+      commit id:"3-abcdefg"
+      commit id:"4-abcdefg"
+      checkout main
+      branch feature
+      commit id:"5-abcdefg"
+      commit id:"6-abcdefg"
+      checkout main
+      commit id:"7-abcdefg"
+      commit id:"8-abcdefg"
+      `,
+      { gitGraph: { parallelCommits: true } }
+    );
+  });
+  it('43: should render GitGraph with parallel commits | Vertical Branch', () => {
+    imgSnapshotTest(
+      `gitGraph TB:
+      commit id:"1-abcdefg"
+      commit id:"2-abcdefg"
+      branch develop
+      commit id:"3-abcdefg"
+      commit id:"4-abcdefg"
+      checkout main
+      branch feature
+      commit id:"5-abcdefg"
+      commit id:"6-abcdefg"
+      checkout main
+      commit id:"7-abcdefg"
+      commit id:"8-abcdefg"
+      `,
+      { gitGraph: { parallelCommits: true } }
+    );
+  });
+  it('44: should render GitGraph with unconnected branches and no parallel commits', () => {
+    imgSnapshotTest(
+      `gitGraph
+      branch dev
+      branch v2
+      branch feat
+      commit id:"1-abcdefg"
+      commit id:"2-abcdefg"
+      checkout main
+      commit id:"3-abcdefg"
+      checkout dev
+      commit id:"4-abcdefg"
+      checkout v2
+      commit id:"5-abcdefg"
+      checkout main
+      commit id:"6-abcdefg"
+      `,
+      { gitGraph: { parallelCommits: false } }
+    );
+  });
+  it('45: should render GitGraph with unconnected branches and parallel commits', () => {
+    imgSnapshotTest(
+      `gitGraph
+      branch dev
+      branch v2
+      branch feat
+      commit id:"1-abcdefg"
+      commit id:"2-abcdefg"
+      checkout main
+      commit id:"3-abcdefg"
+      checkout dev
+      commit id:"4-abcdefg"
+      checkout v2
+      commit id:"5-abcdefg"
+      checkout main
+      commit id:"6-abcdefg"
+      `,
+      { gitGraph: { parallelCommits: true } }
+    );
+  });
+  it('46: should render GitGraph with unconnected branches and parallel commits | Vertical Branch', () => {
+    imgSnapshotTest(
+      `gitGraph TB:
+      branch dev
+      branch v2
+      branch feat
+      commit id:"1-abcdefg"
+      commit id:"2-abcdefg"
+      checkout main
+      commit id:"3-abcdefg"
+      checkout dev
+      commit id:"4-abcdefg"
+      checkout v2
+      commit id:"5-abcdefg"
+      checkout main
+      commit id:"6-abcdefg"
+      `,
+      { gitGraph: { parallelCommits: true } }
+    );
+  });
+  it('46: should render GitGraph with merge back and merge forward', () => {
+    imgSnapshotTest(
+      `gitGraph LR:
+      commit id:"1-abcdefg"
+
+      branch branch-A
+      branch branch-B
+      commit id:"2-abcdefg"
+
+      checkout branch-A
+      merge branch-B
+
+      checkout branch-B
+      merge branch-A
+      `,
+      { gitGraph: { parallelCommits: true } }
+    );
+  });
+  it('47: should render GitGraph with merge back and merge forward | Vertical Branch', () => {
+    imgSnapshotTest(
+      `gitGraph TB:
+      commit id:"1-abcdefg"
+
+      branch branch-A
+      branch branch-B
+      commit id:"2-abcdefg"
+
+      checkout branch-A
+      merge branch-B
+
+      checkout branch-B
+      merge branch-A
+      `,
+      { gitGraph: { parallelCommits: true } }
+    );
+  });
+  it('48: should render GitGraph with merge on a new branch | Vertical Branch', () => {
+    imgSnapshotTest(
+      `gitGraph LR:
+      commit id:"1-abcdefg"
+
+      branch branch-B order: 2
+      commit id:"2-abcdefg"
+
+      branch branch-A
+      merge main
+
+      checkout branch-B
+      merge branch-A
+      `,
+      { gitGraph: { parallelCommits: true } }
+    );
+  });
+  it('49: should render GitGraph with merge on a new branch | Vertical Branch', () => {
+    imgSnapshotTest(
+      `gitGraph TB:
+      commit id:"1-abcdefg"
+
+      branch branch-B order: 2
+      commit id:"2-abcdefg"
+
+      branch branch-A
+      merge main
+
+      checkout branch-B
+      merge branch-A
+      `,
+      { gitGraph: { parallelCommits: true } }
+    );
+  });
 });
--- a/cypress/integration/rendering/katex.spec.js
+++ b/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' }
+  //   );
+  // });
+});
--- a/cypress/integration/rendering/packet.spec.ts
+++ b/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"
+      `
+    );
+  });
+});
--- a/cypress/integration/rendering/sequencediagram.spec.js
+++ b/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(
        `
@ -792,6 +815,34 @@ context('Sequence diagram', () => {
    });
  });
  context('links', () => {
+    it('should support actor links', () => {
+      renderGraph(
+        `
+      sequenceDiagram
+        link Alice: Dashboard @ https://dashboard.contoso.com/alice
+        link Alice: Wiki @ https://wiki.contoso.com/alice
+        link John: Dashboard @ https://dashboard.contoso.com/john
+        link John: Wiki @ https://wiki.contoso.com/john
+        Alice->>John: Hello John<br/>
+        John-->>Alice: Great<br/><br/>day!
+      `,
+        { securityLevel: 'loose' }
+      );
+      cy.get('#actor0_popup').should((popupMenu) => {
+        const style = popupMenu.attr('style');
+        expect(style).to.undefined;
+      });
+      cy.get('#root-0').click();
+      cy.get('#actor0_popup').should((popupMenu) => {
+        const style = popupMenu.attr('style');
+        expect(style).to.match(/^display: block;$/);
+      });
+      cy.get('#root-0').click();
+      cy.get('#actor0_popup').should((popupMenu) => {
+        const style = popupMenu.attr('style');
+        expect(style).to.match(/^display: none;$/);
+      });
+    });
    it('should support actor links and properties EXPERIMENTAL: USE WITH CAUTION', () => {
      //Be aware that the syntax for "properties" is likely to be changed.
      imgSnapshotTest(
--- a/cypress/platform/e2e.html
+++ b/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"
--- a/cypress/platform/external-diagrams-example-diagram.html
+++ b/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 example from '../../packages/mermaid-example-diagram/src/detector';
+      import exampleDiagram from './mermaid-example-diagram.esm.mjs';
      import mermaid from './mermaid.esm.mjs';

      await mermaid.registerExternalDiagrams([exampleDiagram]);
--- a/cypress/platform/flow-elk.html
+++ b/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>
--- a/cypress/platform/iife.html
+++ b/cypress/platform/iife.html
@ -0,0 +1,29 @@
+<html>
+  <body>
+    <pre id="diagram" class="mermaid">
+graph TB
+      a --> b
+      a --> c
+      b --> d
+      c --> d
+    </pre>
+
+    <div id="d2"></div>
+
+    <script src="/mermaid.min.js"></script>
+    <script>
+      mermaid.initialize({
+        startOnLoad: true,
+      });
+      const value = `graph TD\nHello --> World`;
+      const el = document.getElementById('d2');
+      mermaid.render('did', value).then(({ svg }) => {
+        console.log(svg);
+        el.innerHTML = svg;
+        if (window.Cypress) {
+          window.rendered = true;
+        }
+      });
+    </script>
+  </body>
+</html>
--- a/cypress/platform/interaction.html
+++ b/cypress/platform/interaction.html
@ -17,20 +17,20 @@
    graph TB
      Function-->URL
      click Function clickByFlow "Add a div"
-      click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+      click URL "http://localhost:9000/info.html" "Visit <strong>mermaid docs</strong>"
      </pre>
      <pre id="FirstLine" class="mermaid2">
  graph TB
    1Function-->2URL
    click 1Function clickByFlow "Add a div"
-    click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+    click 2URL "http://localhost:9000/info.html" "Visit <strong>mermaid docs</strong>"
      </pre>

      <pre id="FirstLine" class="mermaid2">
  classDiagram
    class Test
    class ShapeLink
-    link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
+    link ShapeLink "http://localhost:9000/info.html" "This is a tooltip for a link"
    class ShapeCallback
    callback ShapeCallback "clickByClass" "This is a tooltip for a callback"
      </pre>
@ -42,7 +42,7 @@
      <pre id="FirstLine" class="mermaid">
  classDiagram-v2
    class ShapeLink
-    link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
+    link ShapeLink "http://localhost:9000/info.html" "This is a tooltip for a link"
      </pre>
    </div>

@ -77,7 +77,7 @@
    Calling a Callback (look at the console log) :cl2, after cl1, 3d
    Calling a Callback with args :cl3, after cl1, 3d

-    click cl1 href "http://localhost:9000/webpackUsage.html"
+    click cl1 href "http://localhost:9000/info.html"
    click cl2 call clickByGantt()
    click cl3 call clickByGantt("test1", test2, test3)

@ -102,9 +102,15 @@
        div.className = 'created-by-gant-click';
        div.style = 'padding: 20px; background: green; color: white;';
        div.innerText = 'Clicked By Gant';
-        if (arg1) div.innerText += ' ' + arg1;
-        if (arg2) div.innerText += ' ' + arg2;
-        if (arg3) div.innerText += ' ' + arg3;
+        if (arg1) {
+          div.innerText += ' ' + arg1;
+        }
+        if (arg2) {
+          div.innerText += ' ' + arg2;
+        }
+        if (arg3) {
+          div.innerText += ' ' + arg3;
+        }

        document.getElementsByTagName('body')[0].appendChild(div);
      }
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@ -17,24 +17,30 @@
    <style>
      body {
        /* background: rgb(221, 208, 208); */
-        /* background:#333; */
+        background: #333;
        font-family: 'Arial';
        /* font-size: 18px !important; */
      }
      h1 {
        color: grey;
      }
+      .mermaid {
+        border: 1px solid #ddd;
+        margin: 10px;
+      }
      .mermaid2 {
        display: none;
      }
      .mermaid svg {
        /* font-size: 18px !important; */
-        background-color: #efefef;
-        background-image: radial-gradient(#fff 51%, transparent 91%),
-          radial-gradient(#fff 51%, transparent 91%);
+        /* background-color: #efefef; */
+        background-color: #333;
+        background-image: radial-gradient(#333 51%, transparent 91%),
+          radial-gradient(#333 51%, transparent 91%);
        background-size: 20px 20px;
        background-position: 0 0, 10px 10px;
        background-repeat: repeat;
+        border: 2px solid rgb(131, 142, 205);
      }
      .malware {
        position: fixed;
@ -58,46 +64,192 @@
  </head>
  <body>
    <pre id="diagram" class="mermaid">
-flowchart TB
-    C & D & E & F & G & H & I & J & K & L & M & N & O & P & Q & R & S & T & U & V & W & X & Y & Z & A1 & A2 & A3 & A4 & A5 & A6 & A7 & A8
-      ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
-    C & D & E & F & G & H & I & J & K & L & M & N & O & P & Q & R & S & T & U & V & W & X & Y & Z & A1 & A2 & A3 & A4 & A5 & A6 & A7 & A8
+      block-beta
+  blockArrowId<["Label"]>(right)
+  blockArrowId2<["Label"]>(left)
+  blockArrowId3<["Label"]>(up)
+  blockArrowId4<["Label"]>(down)
+  blockArrowId5<["Label"]>(x)
+  blockArrowId6<["Label"]>(y)
+  blockArrowId6<["Label"]>(x, down)
+    </pre>
+    <pre id="diagram" class="mermaid">
+block-beta
+  block:e:4
+    columns 2
+      f
+      g
+  end
+
+    </pre>
+    <pre id="diagram" class="mermaid">
+block-beta
+  block:e:4
+    columns 2
+      f
+      g
+      h
+  end
+
+    </pre>
+    <pre id="diagram" class="mermaid">
+block-beta
+  columns 4
+  a b c d
+  block:e:4
+    columns 2
+      f
+      g
+      h
+  end
+  i:4

    </pre>
    <pre id="diagram" class="mermaid2">
-    flowchart TB
-      A & A & A & A & A & A & A & A --->  C & D & E & F & G & H & I & J & K & L & M & N & O & P & Q & R & S & T & U & V & W & X & Y & Z
+flowchart LR
+  X-- "y" -->z
    </pre>
    <pre id="diagram" class="mermaid2">
-    flowchart TB
-      A1 & A2 & A3 & A4 & A5 & A6 & A7 & A8 -->  C & D & E & F & G & H & I & J & K & L & M & N & O & P & Q & R & S & T & U & V & W & X & Y & Z
+block-beta
+columns 5
+   A space B
+   A --x B
    </pre>
+    <pre id="diagram" class="mermaid2">
+block-beta
+columns 3
+  a["A wide one"] b:2 c:2 d
+    </pre>
+    <pre id="diagram" class="mermaid2">
+block-beta
+  block:e
+      f
+  end
+    </pre>
+    <pre id="diagram" class="mermaid2">
+block-beta
+  columns 3
+  a:3
+  block:e:3
+      f
+  end
+  g
+    </pre>
+    <pre id="diagram" class="mermaid2">
+block-beta
+  columns 3
+  a:3
+  block:e:3
+      f
+      g
+  end
+  h
+  i
+  j
+
+    </pre>
+    <pre id="diagram" class="mermaid2">
+block-beta
+columns 3
+  a b:2
+  block:e:3
+      f
+  end
+  g h i
+    </pre>
+    <pre id="diagram" class="mermaid">
+block-beta
+columns 3
+  a b c
+  e:3
+  f g h
+    </pre>
+    <pre id="diagram" class="mermaid">
+block-beta
+columns 1
+  db(("DB"))
+  blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down)
+  block:ID
+    A
+    B["A wide one in the middle"]
+    C
+  end
+  space
+  D
+  ID --> D
+  C --> D
+  style B fill:#f9F,stroke:#333,stroke-width:4px
+    </pre>
+    <pre id="diagram" class="mermaid">
+block-beta
+  columns 5
+  A1:3
+  A2:1
+  A3
+  B1 B2 B3:3
+    </pre>
+    <pre id="diagram" class="mermaid2">
+block-beta
+  block
+    D
+    E
+  end
+  db("This is the text in the box")
+    </pre>
+    <pre id="diagram" class="mermaid2">
+block-beta
+
+      block
+        D
+      end
+      A["A: I am a wide one"]
+    </pre>
+    <pre id="diagram" class="mermaid2">
+block-beta
+    A["square"]
+    B("rounded")
+    C(("circle"))
+    </pre>
+    <pre id="diagram" class="mermaid2">
+block-beta
+    A>"rect_left_inv_arrow"]
+    B{"diamond"}
+    C{{"hexagon"}}
+    </pre>
+    <pre id="diagram" class="mermaid2">
+block-beta
+    A(["stadium"])
+    </pre>
+    <pre id="diagram" class="mermaid2">
+block-beta
+    %% A[["subroutine"]]
+    %% B[("cylinder")]
+    C>"surprise"]
+    </pre>
+    <pre id="diagram" class="mermaid2">
+block-beta
+    A[/"lean right"/]
+    B[\"lean left"\]
+    C[/"trapezoid"\]
+    D[\"trapezoid"/]
+    </pre>
+
    <pre id="diagram" class="mermaid2">
 flowchart
-Node1:::class1 --> Node2:::class2
-Node1:::class1 --> Node3:::class2
-Node3 --> Node4((I am a circle)):::larger
+      B
+      style B fill:#f9F,stroke:#333,stroke-width:4px
+    </pre>

-classDef class1 fill:lightblue
-classDef class2 fill:pink
-classDef larger font-size:30px,fill:yellow
-      </pre
-    >
    <pre id="diagram" class="mermaid2">
-stateDiagram-v2
-    [*] --> Still
-    Still --> [*]
-    Still --> Moving
-    Moving --> Still
-    Moving --> Crash
-    Crash --> [*]    </pre
-    >
+      flowchart LR
+      a1 -- apa --> b1
+    </pre>
+
    <pre id="diagram" class="mermaid2">
 flowchart RL
-    subgraph "`one`"
-      a1 -- l1 --> a2
-      a1 -- l2 --> a2
-    end
+  subgraph "`one`"
+    id
+  end
    </pre>
    <pre id="diagram" class="mermaid2">
 flowchart RL
@ -442,14 +594,8 @@ mindmap
      //   useMaxWidth: false,
      // });
      mermaid.initialize({
-        flowchart: { titleTopMargin: 10 },
-        fontFamily: 'courier',
-        sequence: {
-          actorFontFamily: 'courier',
-          noteFontFamily: 'courier',
-          messageFontFamily: 'courier',
-        },
-        fontSize: 16,
+        theme: 'dark',
+        startOnLoad: true,
        logLevel: 0,
      });
      function callback() {
--- a/cypress/platform/viewer.js
+++ b/cypress/platform/viewer.js
@ -1,6 +1,6 @@
-import mermaid2 from './mermaid.esm.mjs';
-import externalExample from '../../packages/mermaid-example-diagram/dist/mermaid-example-diagram.core.mjs';
-import zenUml from '../../packages/mermaid-zenuml/dist/mermaid-zenuml.core.mjs';
+import mermaid from './mermaid.esm.mjs';
+import externalExample from './mermaid-example-diagram.esm.mjs';
+import zenUml from './mermaid-zenuml.esm.mjs';

 function b64ToUtf8(str) {
  return decodeURIComponent(escape(window.atob(str)));
@ -45,9 +45,9 @@ const contentLoaded = async function () {
      document.getElementsByTagName('body')[0].appendChild(div);
    }

-    await mermaid2.registerExternalDiagrams([externalExample, zenUml]);
-    mermaid2.initialize(graphObj.mermaid);
-    await mermaid2.run();
+    await mermaid.registerExternalDiagrams([externalExample, zenUml]);
+    mermaid.initialize(graphObj.mermaid);
+    await mermaid.run();
  }
 };

@ -95,18 +95,14 @@ const contentLoadedApi = async function () {
        divs[i] = div;
      }

-      const defaultE2eCnf = { theme: 'forest' };
+      const defaultE2eCnf = { theme: 'forest', startOnLoad: false };

      const cnf = merge(defaultE2eCnf, graphObj.mermaid);

-      mermaid2.initialize(cnf);
+      mermaid.initialize(cnf);

      for (let i = 0; i < numCodes; i++) {
-        const { svg, bindFunctions } = await mermaid2.render(
-          'newid' + i,
-          graphObj.code[i],
-          divs[i]
-        );
+        const { svg, bindFunctions } = await mermaid.render('newid' + i, graphObj.code[i], divs[i]);
        div.innerHTML = svg;
        bindFunctions(div);
      }
@ -114,18 +110,21 @@ const contentLoadedApi = async function () {
      const div = document.createElement('div');
      div.id = 'block';
      div.className = 'mermaid';
-      console.warn('graphObj.mermaid', graphObj.mermaid);
+      console.warn('graphObj', graphObj);
      document.getElementsByTagName('body')[0].appendChild(div);
-      mermaid2.initialize(graphObj.mermaid);
-
-      const { svg, bindFunctions } = await mermaid2.render('newid', graphObj.code, div);
+      mermaid.initialize(graphObj.mermaid);
+      const { svg, bindFunctions } = await mermaid.render('newid', graphObj.code, div);
      div.innerHTML = svg;
+      console.log(div.innerHTML);
      bindFunctions(div);
    }
  }
 };

 if (typeof document !== 'undefined') {
+  mermaid.initialize({
+    startOnLoad: false,
+  });
  /*!
   * Wait for document loaded before starting the execution
   */
--- a/cypress/platform/webpackUsage.html
+++ b/cypress/platform/webpackUsage.html
@ -1,19 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <style>
-      /* .mermaid {
-    font-family: "trebuchet ms", verdana, arial;;
-  } */
-      /* .mermaid {
-    font-family: 'arial';
-  } */
-    </style>
-  </head>
-  <body>
-    <div id="graph-to-be"></div>
-    <script type="module" charset="utf-8">
-      import './bundle-test.js';
-    </script>
-  </body>
-</html>
--- a/cypress/platform/xss.html
+++ b/cypress/platform/xss.html
@ -1,6 +1,5 @@
 <html>
  <head>
-    <script src="./viewer.js" type="module"></script>
    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
    <style>
      .malware {
@ -33,12 +32,6 @@
    </script>
  </head>
  <body>
-    <script type="module">
-      import mermaid from './mermaid.esm.mjs';
-      mermaid.initialize({
-        startOnLoad: false,
-        useMaxWidth: true,
-      });
-    </script>
+    <script type="module" src="./viewer.js"></script>
  </body>
 </html>
--- a/cypress/support/commands.js
+++ b/cypress/support/commands.js
@ -26,12 +26,16 @@

 import { addMatchImageSnapshotCommand } from 'cypress-image-snapshot/command';

-addMatchImageSnapshotCommand({
-  comparisonMethod: 'ssim',
-  failureThreshold: 0.01,
-  failureThresholdType: 'percent',
-  customDiffConfig: {
-    ssim: 'fast',
-  },
-  blur: 1,
-});
+// The SSIM comparison method can be used if the pixelmatch is throwing lots of false positives.
+// SSIM actually does not catch minute changes in the image, so it is not as accurate as pixelmatch.
+// addMatchImageSnapshotCommand({
+//   comparisonMethod: 'ssim',
+//   failureThreshold: 0.01,
+//   failureThresholdType: 'percent',
+//   customDiffConfig: {
+//     ssim: 'fast',
+//   },
+//   blur: 1,
+// });
+
+addMatchImageSnapshotCommand();
--- a/demos/block.html
+++ b/demos/block.html
@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Mermaid Block diagram demo page</title>
+    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
+  </head>
+
+  <body>
+    <h1>Block diagram demos</h1>
+    <pre id="diagram" class="mermaid">
+block-beta
+columns 1
+  db(("DB"))
+  blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down)
+  block:ID
+    A
+    B["A wide one in the middle"]
+    C
+  end
+  space
+  D
+  ID --> D
+  C --> D
+  style B fill:#f9F,stroke:#333,stroke-width:4px
+    </pre>
+    <pre id="diagram" class="mermaid">
+block-beta
+    A1["square"]
+    B1("rounded")
+    C1(("circle"))
+    A2>"rect_left_inv_arrow"]
+    B2{"diamond"}
+    C2{{"hexagon"}}
+    </pre>
+
+    <pre id="diagram" class="mermaid">
+block-beta
+    A1(["stadium"])
+    A2[["subroutine"]]
+    B1[("cylinder")]
+    C1>"surprise"]
+    A3[/"lean right"/]
+    B2[\"lean left"\]
+    C2[/"trapezoid"\]
+    D2[\"trapezoid"/]
+    </pre>
+
+    <pre id="diagram" class="mermaid">
+block-beta
+  block:e:4
+    columns 2
+      f
+      g
+  end
+
+    </pre>
+    <pre id="diagram" class="mermaid">
+block-beta
+  block:e:4
+    columns 2
+      f
+      g
+      h
+  end
+
+    </pre>
+    <pre id="diagram" class="mermaid">
+block-beta
+  columns 3
+  a:3
+  block:e:3
+      f
+      g
+  end
+  h
+  i
+  j
+
+    </pre>
+    <pre id="diagram" class="mermaid">
+block-beta
+  columns 4
+  a b c d
+  block:e:4
+    columns 2
+      f
+      g
+      h
+  end
+  i:4
+
+    </pre>
+    <pre id="diagram" class="mermaid">
+flowchart LR
+  X-- "a label" -->z
+    </pre>
+    <pre id="diagram" class="mermaid">
+block-beta
+columns 5
+   A space B
+   A --x B
+    </pre>
+    <pre id="diagram" class="mermaid">
+block-beta
+columns 3
+  a["A wide one"] b:2 c:2 d
+    </pre>
+
+    <pre id="diagram" class="mermaid">
+block-beta
+columns 3
+  a b c
+  e:3
+  f g h
+    </pre>
+
+    <pre id="diagram" class="mermaid">
+block-beta
+
+  A1:3
+  A2:1
+  A3
+    </pre>
+
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
+      mermaid.initialize({
+        theme: 'default',
+        logLevel: 3,
+        securityLevel: 'loose',
+        block: {
+          padding: 10,
+        },
+      });
+    </script>
+  </body>
+</html>
--- a/demos/dev/example.html
+++ b/demos/dev/example.html
@ -3,6 +3,22 @@
 <html>
  <head>
    <title>Mermaid development page</title>
+    <style>
+      .container {
+        display: flex;
+        flex-direction: row;
+      }
+
+      #code {
+        max-width: 30vw;
+        width: 30vw;
+      }
+
+      #dynamicDiagram {
+        padding-left: 2em;
+        flex: 1;
+      }
+    </style>
  </head>
  <body>
    <pre id="diagram" class="mermaid">
@ -13,22 +29,37 @@ graph TB
      c --> d
    </pre>

-    <div id="dynamicDiagram"></div>
+    <hr />
+    Type code to view diagram:
+    <div class="container">
+      <textarea name="code" id="code" cols="30" rows="10"></textarea>
+      <div id="dynamicDiagram"></div>
+    </div>
+    <pre class="mermaid">info</pre>

    <script type="module">
      import mermaid from '/mermaid.esm.mjs';
-      mermaid.parseError = function (err, hash) {
-        console.error('Mermaid error: ', err);
-      };
+      async function render(str) {
+        const { svg } = await mermaid.render('dynamic', str);
+        document.getElementById('dynamicDiagram').innerHTML = svg;
+      }
+      const storeKey = window.location.pathname;
+      const code = localStorage.getItem(storeKey);
+      if (code) {
+        document.getElementById('code').value = code;
+        await render(code);
+      }
      mermaid.initialize({
        startOnLoad: true,
        logLevel: 0,
      });
-      const value = `graph TD\nHello --> World`;
-      const el = document.getElementById('dynamicDiagram');
-      const { svg } = await mermaid.render('dd', value);
-      console.log(svg);
-      el.innerHTML = svg;
+      document.getElementById('code').addEventListener('input', async (e) => {
+        const value = e.target.value;
+        localStorage.setItem(storeKey, value);
+        await render(value);
+      });
    </script>
+
+    <script src="/dev/reload.js"></script>
  </body>
 </html>
--- a/demos/dev/reload.js
+++ b/demos/dev/reload.js
@ -0,0 +1,22 @@
+// Connect to the server and reload the page if the server sends a reload message
+const connectToEvents = () => {
+  const events = new EventSource('/events');
+  const loadTime = Date.now();
+  events.onmessage = (event) => {
+    const time = JSON.parse(event.data);
+    if (time && time > loadTime) {
+      location.reload();
+    }
+  };
+  events.onerror = (error) => {
+    console.error(error);
+    events.close();
+    // Try to reconnect after 1 second in case of errors
+    setTimeout(connectToEvents, 1000);
+  };
+  events.onopen = () => {
+    console.log('Connected to live reload server');
+  };
+};
+
+setTimeout(connectToEvents, 500);
--- a/demos/flowchart-elk.html
+++ b/demos/flowchart-elk.html
@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Mermaid Flowchart ELK Test Page</title>
+  </head>
+
+  <body>
+    <h1>Flowchart ELK</h1>
+    <pre class="mermaid">
+		flowchart-elk TD
+      A([Start]) ==> B[Step 1]
+      B ==> C{Flow 1}
+      C -- Choice 1.1 --> D[Step 2.1]
+      C -- Choice 1.3 --> I[Step 2.3]
+      C == Choice 1.2 ==> E[Step 2.2]
+      D --> F{Flow 2}
+      E ==> F{Flow 2}
+      F{Flow 2} == Choice 2.1 ==> H[Feedback node]
+      H[Feedback node] ==> B[Step 1]
+      F{Flow 2} == Choice 2.2 ==> G((Finish))
+      
+    </pre>
+
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
+      import flowchartELK from './mermaid-flowchart-elk.esm.mjs';
+      await mermaid.registerExternalDiagrams([flowchartELK]);
+      mermaid.initialize({
+        logLevel: 3,
+      });
+    </script>
+  </body>
+</html>
--- a/demos/flowchart.html
+++ b/demos/flowchart.html
@ -1102,6 +1102,57 @@
    </pre>
    <hr />

+    <h2>Sample 20</h2>
+    <h3>graph</h3>
+    <pre class="mermaid">
+      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}$$")
+    </pre>
+    <hr />
+
+    <h3>flowchart</h3>
+    <pre class="mermaid">
+      flowchart 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}$$")
+    </pre>
+    <hr />
+
+    <h2>Sample 21</h2>
+    <h3>graph</h3>
+    <pre class="mermaid">
+      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$$"]
+    </pre>
+    <hr />
+
+    <h3>flowchart</h3>
+    <pre class="mermaid">
+      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$$"]
+    </pre>
+    <hr />
+
+    <h2>Sample 22</h2>
+    <h3>graph</h3>
+    <pre class="mermaid">
+      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$$"]
+    </pre>
+    <hr />
+
+    <h3>flowchart</h3>
+    <pre class="mermaid">
+      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$$"]
+    </pre>
+    <hr />
+
    <hr />

    <pre class="mermaid">
@ -1524,11 +1575,11 @@
      F{Flow 2} == Choice 2.1 ==> H[Feedback node]
      H[Feedback node] ==> B[Step 1]
      F{Flow 2} == Choice 2.2 ==> G((Finish))
-      
+
      linkStyle 0,1,4,6,7,8,9 stroke:gold, stroke-width:4px

      classDef active_node fill:#0CF,stroke:#09F,stroke-width:6px
-      classDef unactive_node fill:#e0e0e0,stroke:#bdbdbd,stroke-width:3px      
+      classDef unactive_node fill:#e0e0e0,stroke:#bdbdbd,stroke-width:3px
      classDef bugged_node fill:#F88,stroke:#F22,stroke-width:3px
      classDef start_node,finish_node fill:#3B1,stroke:#391,stroke-width:8px

--- a/demos/gantt.html
+++ b/demos/gantt.html
@ -30,6 +30,21 @@
    </pre>
    <hr />

+    <pre class="mermaid">
+      gantt
+        title #; Gantt Diagrams Allow Semicolons and Hashtags #;!
+        accTitle: A simple sample gantt diagram
+        accDescr: 2 sections with 2 tasks each, from 2014
+        dateFormat  YYYY-MM-DD
+        section #;Section
+        #;A task           :a1, 2014-01-01, 30d
+        #;Another task     :after a1  , 20d
+        section #;Another
+        Task in sec      :2014-01-12  , 12d
+        another task      : 24d
+    </pre>
+    <hr />
+
    <pre class="mermaid">
    gantt
      title Airworks roadmap
--- a/demos/index.html
+++ b/demos/index.html
@ -81,6 +81,12 @@
      <li>
        <h2><a href="./sankey.html">Sankey</a></h2>
      </li>
+      <li>
+        <h2><a href="./packet.html">Packet</a></h2>
+      </li>
+      <li>
+        <h2><a href="./block.html">Layered Blocks</a></h2>
+      </li>
    </ul>
  </body>
 </html>
--- a/demos/packet.html
+++ b/demos/packet.html
@ -0,0 +1,141 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Mermaid Quick Test Page</title>
+    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
+    <style>
+      div.mermaid {
+        font-family: 'Courier New', Courier, monospace !important;
+      }
+    </style>
+  </head>
+
+  <body>
+    <h1>Packet diagram demo</h1>
+
+    <div class="diagrams">
+      <pre class="mermaid">
+      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"
+    </pre
+      >
+
+      <pre class="mermaid">
+      ---
+      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"
+    </pre
+      >
+
+      <pre class="mermaid">
+      ---
+      config:
+        theme: forest
+      ---
+      packet-beta
+        title Forest theme
+        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"
+    </pre
+      >
+
+      <pre class="mermaid" style="background-color: black">
+      ---
+      config:
+        theme: dark
+      ---
+      packet-beta
+        title Dark theme
+        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"
+    </pre
+      >
+    </div>
+    <script type="module">
+      import mermaid from '/mermaid.esm.mjs';
+      mermaid.initialize({
+        logLevel: 3,
+        securityLevel: 'loose',
+      });
+    </script>
+
+    <style>
+      .diagrams {
+        display: flex;
+        flex-wrap: wrap;
+      }
+      pre {
+        width: 45vw;
+        padding: 2em;
+      }
+    </style>
+  </body>
+</html>
--- a/demos/pie.html
+++ b/demos/pie.html
@ -15,7 +15,7 @@
  <body>
    <h1>Pie chart demos</h1>
    <pre class="mermaid">
-      pie title Pets adopted by volunteers
+      pie title Default text position: Animal adoption
        accTitle: simple pie char demo
        accDescr: pie chart with 3 sections: dogs, cats, rats. Most are dogs.
        "Dogs": 386
@ -27,7 +27,7 @@
    <pre class="mermaid">
      %%{init: {"pie": {"textPosition": 0.9}, "themeVariables": {"pieOuterStrokeWidth": "5px"}}}%%
      pie
-        title Key elements in Product X
+        title Offset labels close to border: Product X
        accTitle: Key elements in Product X
        accDescr: This is a pie chart showing the key elements in Product X.
        "Calcium": 42.96
@ -36,8 +36,21 @@
        "Iron": 5
    </pre>

+    <pre class="mermaid">
+      %%{init: {"pie": {"textPosition": 0.45}, "themeVariables": {"pieOuterStrokeWidth": "5px"}}}%%
+      pie
+        title Centralized labels: Languages
+        accTitle: Key elements in Product X
+        accDescr: This is a pie chart showing the key elements in Product X.
+        "JavaScript": 30
+        "Python": 25
+        "Java": 20
+        "C#": 15
+        "Others": 10
+    </pre>
+
    <script type="module">
-      import mermaid from './mermaid.esm.mjs';
+      import mermaid from '/mermaid.esm.mjs';
      mermaid.initialize({
        theme: 'forest',
        logLevel: 3,
--- a/demos/sequence.html
+++ b/demos/sequence.html
@ -16,50 +16,74 @@
  <body>
    <h1>Sequence diagram demos</h1>
    <pre class="mermaid">
-		sequenceDiagram
-			accTitle: test the accTitle
-			accDescr: Test a description
+    sequenceDiagram
+      accTitle: test the accTitle
+      accDescr: Test a description

 			participant Alice
 			participant Bob
 			participant John as John<br />Second Line
+			link Alice: Dashboard @ https://dashboard.contoso.com/alice
+			link Alice: Wiki @ https://wiki.contoso.com/alice
+			link John: Dashboard @ https://dashboard.contoso.com/john
+			link John: Wiki @ https://wiki.contoso.com/john
 			autonumber 10 10
 			rect rgb(200, 220, 100)
 			rect rgb(200, 255, 200)

-			Alice ->> Bob: Hello Bob, how are you?
-			Bob-->>John: How about you John?
-			end
+      Alice ->> Bob: Hello Bob, how are you?
+      Bob-->>John: How about you John?
+      end

-			Bob--x Alice: I am good thanks!
-			Bob-x John: I am good thanks!
-			Note right of John: John thinks a long<br />long time, so long<br />that the text does<br />not fit on a row.
+      Bob--x Alice: I am good thanks!
+      Bob-x John: I am good thanks!
+      Note right of John: John thinks a long<br />long time, so long<br />that the text does<br />not fit on a row.

-			Bob-->Alice: Checking with John...
-			Note over John:wrap: John looks like he's still thinking, so Bob prods him a bit.
-			Bob-x John: Hey John - we're still waiting to know<br />how you're doing
-			Note over John:nowrap: John's trying hard not to break his train of thought.
-			Bob-x John:wrap: John! Are you still debating about how you're doing? How long does it take??
-			Note over John: After a few more moments, John<br />finally snaps out of it.
-			end
+      Bob-->Alice: Checking with John...
+      Note over John:wrap: John looks like he's still thinking, so Bob prods him a bit.
+      Bob-x John: Hey John - we're still waiting to know<br />how you're doing
+      Note over John:nowrap: John's trying hard not to break his train of thought.
+      Bob-x John:wrap: John! Are you still debating about how you're doing? How long does it take??
+      Note over John: After a few more moments, John<br />finally snaps out of it.
+      end

-			autonumber off
-			alt either this
-			Alice->>+John: Yes
-			John-->>-Alice: OK
-			else or this
-			autonumber
-			Alice->>John: No
-			else or this will happen
-			Alice->John: Maybe
-			end
-			autonumber 200
-			par this happens in parallel
-			Alice -->> Bob: Parallel message 1
-			and
-			Alice -->> John: Parallel message 2
-			end
-	</pre>
+      autonumber off
+      alt either this
+      Alice->>+John: Yes
+      John-->>-Alice: OK
+      else or this
+      autonumber
+      Alice->>John: No
+      else or this will happen
+      Alice->John: Maybe
+      end
+      autonumber 200
+      par this happens in parallel
+      Alice -->> Bob: Parallel message 1
+      and
+      Alice -->> John: Parallel message 2
+      end
+  </pre>
+    <hr />
+    <pre class="mermaid">
+    ---
+    title: With forced menus
+    config:
+      sequence:
+        forceMenus: true
+    ---
+    sequenceDiagram
+      participant Alice
+      participant John
+      link Alice: Dashboard @ https://dashboard.contoso.com/alice
+      link Alice: Wiki @ https://wiki.contoso.com/alice
+      link John: Dashboard @ https://dashboard.contoso.com/john
+      link John: Wiki @ https://wiki.contoso.com/john
+      Alice->>John: Hello John, how are you?
+      John-->>Alice: Great!
+      Alice-)John: See you later!
+  </pre
+    >
    <hr />
    <pre class="mermaid">
    sequenceDiagram
@ -129,18 +153,18 @@
    <hr />

    <pre class="mermaid">
-      sequenceDiagram
-      box lightgreen Alice & John
-      participant A
-      participant J
-      end
-      box Another Group very very long description not wrapped
-      participant B
-      end
-      A->>J: Hello John, how are you?
-      J->>A: Great!
-      A->>B: Hello Bob, how are you ?
-      </pre
+        sequenceDiagram
+        box lightgreen Alice & John
+        participant A
+        participant J
+        end
+        box Another Group very very long description not wrapped
+        participant B
+        end
+        A->>J: Hello John, how are you?
+        J->>A: Great!
+        A->>B: Hello Bob, how are you ?
+        </pre
    >
    <hr />

@ -163,7 +187,57 @@
        Note left of Bob: Alice/Bob Note
      end
    </pre>
+    <pre class="mermaid">
+      sequenceDiagram
+        actor Alice
+        actor John
+        Alice-xJohn: Hello John, how are you?
+        John--xAlice: Great!
+    </pre>

+    <hr />
+
+    <pre class="mermaid">
+    sequenceDiagram
+    participant 1 as $$\frac{\lim_{x\rightarrow0}{\frac{1}{x}}}{\frac{-b\pm\sqrt{b^2-4ac}}{2a}}$$
+    participant 2 as $$\beta$$
+    participant 3 as $$\delta$$
+    participant 4 as $$\frac{\frac{\lim_{x\rightarrow0}{\frac{1}{x}}}{\frac{-b\pm\sqrt{b^2-4ac}}{2a}}}{\frac{\text{d}}{\text{d}x}{x^2}}$$
+    1->>2: $$\sqrt{2}$$
+    note right of 2: $$\frac{1+\frac{1+\frac{1+\frac{1}{2}}{2}}{2}}{2}+\frac{-b\pm\sqrt{b^2-4ac}}{2a}$$
+    2->>3: $$\frac{\lim_{x\rightarrow0}{\frac{1}{x}}}{\frac{-b\pm\sqrt{b^2-4ac}}{2a}}$$
+    note right of 3: $$\frac{-b\pm\sqrt{b^2-4ac}}{2a}$$
+    3->>4: $$\lim_{x\rightarrow0}{\frac{1}{x}}$$;
+    note right of 4: multiline
+    4->>1: multiline<br />using #lt;br /#gt;
+    note right of 1: multiline<br />$$\frac{1}{2}$$<br />3rd line
+    </pre>
+    <hr />
+    <pre class="mermaid">
+      sequenceDiagram
+      autonumber
+      participant 1 as $$\alpha$$lex
+      participant 2 as $$\beta$$ob
+      participant 3 as $$\theta$$iffany
+      1->>2: Hello John, does&nbsp; $$\frac{1}{2}+1=2$$?
+      loop $$\frac{1}{2}+1=2$$
+          2->>2: $$\frac{1}{2}+1=\frac{3}{2}$$
+      end
+      Note right of 2: $$x = \begin{cases} 1 &\text{if } \frac{1}{2}+1=2 \\ 0 &\text{if } \frac{1}{2}+1\ne2 \end{cases}$$
+      2-->>1: $$\frac{1}{2}+1\ne2\implies 1$$
+      2->>3: $$\frac{\text{d}}{\text{d}x}{3x^2+2x+1}$$
+      3-->>2: $$6x+2$$
+    </pre>
+
+    <hr />
+
+    <pre class="mermaid">
+    sequenceDiagram
+      actor Alice
+      actor John
+      Alice-xJohn: Hello John, how are you?
+      John--xAlice: Great!
+    </pre>
    <script type="module">
      import mermaid from './mermaid.esm.mjs';
      mermaid.initialize({
--- a/demos/xychart.html
+++ b/demos/xychart.html
@ -137,7 +137,7 @@ config:
    plotReservedSpacePercent: 60
 ---
    xychart-beta
-      title "Sales Revene"
+      title "Sales Revenue"
      x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
      y-axis "Revenue (in $)" 4000 --> 11000
      bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
@ -163,7 +163,7 @@ config:
      plotColorPalette: "#008000, #faba63"
 ---
    xychart-beta
-      title "Sales Revene"
+      title "Sales Revenue"
      x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
      y-axis "Revenue (in $)" 4000 --> 11000
      bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -8,7 +8,7 @@ services:
    tty: true
    working_dir: /mermaid
    mem_limit: '8G'
-    entrypoint: '/mermaid/docker-entrypoint.sh'
+    entrypoint: docker-entrypoint.sh
    environment:
      - NODE_OPTIONS=--max_old_space_size=8192
    volumes:
--- a/Show More
+++ b/Show More
				`@ -1 +0,0 @@`
				`// DO NOT delete this file. It is used by vitest to mock the dagre-d3 module.`