Merge branch 'develop' into sidv/removeTriage

.build/common.ts

@@ -1,20 +0,0 @@
-/**
- * Shared common options for both ESBuild and Vite
- */
-export 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',
-  },
-} as const;

.build/jsonSchema.ts

@@ -1,122 +0,0 @@
-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',
-  '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.
- */
-export 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)};`;
-};

.esbuild/build.ts

@@ -1,60 +0,0 @@
-import { build } from 'esbuild';
-import { mkdir, writeFile } from 'node:fs/promises';
-import { MermaidBuildOptions, defaultOptions, getBuildConfig } from './util.js';
-import { packageOptions } from '../.build/common.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 mkdir('stats').catch(() => {});
-  const packageNames = Object.keys(packageOptions) as (keyof typeof packageOptions)[];
-  await Promise.allSettled(packageNames.map((pkg) => buildPackage(pkg).catch(handler)));
-};
-
-void main();

.esbuild/jisonPlugin.ts

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

.esbuild/jsonSchemaPlugin.ts

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

.esbuild/server.ts

@@ -1,107 +0,0 @@
-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';
-
-const mermaidCtx = await context(
-  getBuildConfig({ ...defaultOptions, minify: false, core: false, entryName: 'mermaid' }),
-);
-const mermaidIIFECtx = await context(
-  getBuildConfig({
-    ...defaultOptions,
-    minify: false,
-    core: false,
-    entryName: 'mermaid',
-    format: 'iife',
-  }),
-);
-const externalCtx = await context(
-  getBuildConfig({
-    ...defaultOptions,
-    minify: false,
-    core: false,
-    entryName: 'mermaid-example-diagram',
-  }),
-);
-const zenumlCtx = await context(
-  getBuildConfig({ ...defaultOptions, minify: false, core: false, entryName: 'mermaid-zenuml' }),
-);
-const contexts = [mermaidCtx, mermaidIIFECtx, externalCtx, zenumlCtx];
-
-const rebuildAll = async () => {
-  console.time('Rebuild time');
-  await Promise.all(contexts.map((ctx) => ctx.rebuild()));
-  console.timeEnd('Rebuild time');
-};
-
-let clients: { id: number; response: Response }[] = [];
-function eventsHandler(request: Request, response: Response, 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() {
-  handleFileChange();
-  const app = express();
-  chokidar
-    .watch('**/src/**/*.{js,ts,yaml,json}', {
-      ignoreInitial: true,
-      ignored: [/node_modules/, /dist/, /docs/, /coverage/],
-    })
-    .on('all', async (event, path) => {
-      // Ignore other events.
-      if (!['add', 'change'].includes(event)) {
-        return;
-      }
-      console.log(`${path} changed. Rebuilding...`);
-      handleFileChange();
-    });
-
-  app.use(cors());
-  app.get('/events', eventsHandler);
-  app.use(express.static('./packages/mermaid/dist'));
-  app.use(express.static('./packages/mermaid-zenuml/dist'));
-  app.use(express.static('./packages/mermaid-example-diagram/dist'));
-  app.use(express.static('demos'));
-  app.use(express.static('cypress/platform'));
-
-  app.listen(9000, () => {
-    console.log(`Listening on http://localhost:9000`);
-  });
-}
-
-createServer();

.esbuild/util.ts

@@ -1,98 +0,0 @@
-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]`,
-  });
-
-  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;
-};

.eslintrc.cjs

@@ -38,18 +38,12 @@ module.exports = {
     'lodash',
     'unicorn',
   ],
-  ignorePatterns: [
-    // this file is automatically generated by `pnpm run --filter mermaid types:build-config`
-    'packages/mermaid/src/config.type.ts',
-  ],
   rules: {
     curly: 'error',
     'no-console': 'error',
     'no-prototype-builtins': 'off',
     'no-unused-vars': 'off',
     'cypress/no-async-tests': 'off',
-    '@typescript-eslint/no-unused-vars': 'warn',
-    '@typescript-eslint/no-explicit-any': 'warn',
     '@typescript-eslint/no-floating-promises': 'error',
     '@typescript-eslint/no-misused-promises': 'error',
     '@typescript-eslint/ban-ts-comment': [

.github/codecov.yaml

@@ -11,7 +11,5 @@ comment:
 coverage:
   status:
     project:
-      off
-      # Turing off for now as code coverage isn't stable and causes unnecessary build failures.
-      # default:
-      #   threshold: 2%
+      default:
+        threshold: 2%

.github/lychee.toml

@@ -1,44 +0,0 @@
-#############################  Display  #############################
-
-# Verbose program output
-# Accepts log level: "error", "warn", "info", "debug", "trace"
-verbose = "debug"
-
-# Don't show interactive progress bar while checking links.
-no_progress = true
-
-#############################  Cache  ###############################
-
-# Enable link caching. This can be helpful to avoid checking the same links on
-# multiple runs.
-cache = true
-
-# Discard all cached requests older than this duration.
-max_cache_age = "1d"
-
-#############################  Requests  ############################
-
-# Comma-separated list of accepted status codes for valid links.
-accept = [200, 429]
-
-#############################  Exclusions  ##########################
-
-# Exclude URLs and mail addresses from checking (supports regex).
-exclude = [
-# Network error: Forbidden
-"https://codepen.io",
-
-# Timeout error, maybe Twitter has anti-bot defenses against GitHub's CI servers?
-"https://twitter.com/mermaidjs_",
-
-# 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/"
-]
-
-# Exclude all private IPs from checking.
-# Equivalent to setting `exclude_private`, `exclude_link_local`, and
-# `exclude_loopback` to true.
-exclude_all_private = true

.github/pr-labeler.yml

@@ -1,4 +1,3 @@
-'Type: Bug / Error': ['bug/*', fix/*]
-'Type: Enhancement': ['feature/*', 'feat/*']
-'Type: Other': ['other/*', 'chore/*', 'test/*', 'refactor/*']
-'Area: Documentation': ['docs/*']
+'Type: Bug / Error': 'bug/*'
+'Type: Enhancement': 'feature/*'
+'Type: Other': 'other/*'

.github/pull_request_template.md

@@ -13,6 +13,6 @@ 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)
-- [ ] :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/development.md#3-update-documentation) is used for all new features.
+- [ ] :computer: have added unit/e2e tests (if appropriate)
+- [ ] :notebook: have added documentation (if appropriate)
 - [ ] :bookmark: targeted `develop` branch

.github/release-drafter.yml

@@ -1,27 +1,14 @@
 name-template: '$NEXT_PATCH_VERSION'
 tag-template: '$NEXT_PATCH_VERSION'
 categories:
-  - title: '🚨 **Breaking Changes**'
-    labels:
-      - 'Breaking Change'
   - title: '🚀 Features'
     labels:
       - 'Type: Enhancement'
-      - 'feature' # deprecated, new PRs shouldn't have this
   - title: '🐛 Bug Fixes'
     labels:
       - 'Type: Bug / Error'
-      - 'fix' # deprecated, new PRs shouldn't have this
   - title: '🧰 Maintenance'
-    labels:
-      - 'Type: Other'
-      - 'chore' # deprecated, new PRs shouldn't have this
-  - title: '⚡️ Performance'
-    labels:
-      - 'Type: Performance'
-  - title: '📚 Documentation'
-    labels:
-      - 'Area: Documentation'
+    label: 'Type: Other'
 change-template: '- $TITLE (#$NUMBER) @$AUTHOR'
 sort-by: title
 sort-direction: ascending

.github/workflows/build-docs.yml

@@ -1,10 +1,6 @@
 name: Build Vitepress docs
 
 on:
-  push:
-    branches:
-      - master
-      - release/*
   pull_request:
   merge_group:
 
@@ -29,9 +25,5 @@ jobs:
       - name: Install Packages
         run: pnpm install --frozen-lockfile
 
-      - name: Verify release verion
-        if: ${{ github.event_name == 'push' && (github.ref == 'refs/heads/master' || startsWith(github.ref, 'refs/heads/release')) }}
-        run: pnpm --filter mermaid run docs:verify-version
-
       - name: Run Build
         run: pnpm --filter mermaid run docs:build:vitepress

.github/workflows/e2e.yml

@@ -30,7 +30,7 @@ jobs:
       # Install NPM dependencies, cache them correctly
       # and run all Cypress tests
       - name: Cypress run
-        uses: cypress-io/github-action@v6
+        uses: cypress-io/github-action@v4
         id: cypress
         # If CYPRESS_RECORD_KEY is set, run in parallel on all containers
         # Otherwise (e.g. if running from fork), we run on a single container only
@@ -44,24 +44,16 @@ jobs:
           parallel: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
         env:
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
-          VITE_COVERAGE: true
-          CYPRESS_COVERAGE: true
-          CYPRESS_COMMIT: ${{ github.sha }}
-
-      - name: Check coverage files
-        run: |
-          ls -lh ./coverage
-          ls -lh ./coverage/cypress
-
+          VITEST_COVERAGE: true
       - name: Upload Coverage to Codecov
         uses: codecov/codecov-action@v3
+        if: steps.cypress.conclusion == 'success'
         with:
-          files: ./coverage/cypress/lcov.info
+          files: coverage/cypress/lcov.info
           flags: e2e
           name: mermaid-codecov
           fail_ci_if_error: false
           verbose: true
-          token: 6845cc80-77ee-4e17-85a1-026cd95e0766
       - name: Upload Artifacts
         uses: actions/upload-artifact@v3
         if: ${{ failure() && steps.cypress.conclusion == 'failure' }}

.github/workflows/issue-triage.yml

@@ -1,14 +0,0 @@
-name: Apply triage label to new issue
-
-on:
-  issues:
-    types: [opened]
-
-jobs:
-  triage:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: andymckay/labeler@1.0.4
-        with:
-          repo-token: '${{ secrets.GITHUB_TOKEN }}'
-          add-labels: 'Status: Triage'

.github/workflows/link-checker.yml

@@ -20,7 +20,7 @@ on:
     - cron: '30 8 * * *'
 
 jobs:
-  link-checker:
+  linkChecker:
     runs-on: ubuntu-latest
     permissions:
       # lychee only uses the GITHUB_TOKEN to avoid rate-limiting
@@ -39,7 +39,10 @@ jobs:
         uses: lycheeverse/lychee-action@v1.8.0
         with:
           args: >-
-            --config .github/lychee.toml
+            --verbose
+            --no-progress
+            --cache
+            --max-cache-age 1d
             packages/mermaid/src/docs/**/*.md
             README.md
             README.zh-CN.md

.github/workflows/lint.yml

@@ -53,33 +53,6 @@ jobs:
               exit 1
           fi
 
-      - name: Verify `./src/config.type.ts` is in sync with `./src/schemas/config.schema.yaml`
-        shell: bash
-        run: |
-          if ! pnpm run --filter mermaid types:verify-config; then
-            ERROR_MESSAGE='Running `pnpm run --filter mermaid types:verify-config` failed.'
-            ERROR_MESSAGE+=' This should be fixed by running'
-            ERROR_MESSAGE+=' `pnpm run --filter mermaid types:build-config`'
-            ERROR_MESSAGE+=' on your local machine.'
-            echo "::error title=Lint failure::${ERROR_MESSAGE}"
-            # make sure to return an error exitcode so that GitHub actions shows a red-cross
-            exit 1
-          fi
-
-      - name: Verify no circular dependencies
-        working-directory: ./packages/mermaid
-        shell: bash
-        run: |
-          if ! pnpm run --filter mermaid checkCircle; then
-            ERROR_MESSAGE='Circular dependency detected.'
-            ERROR_MESSAGE+=' This should be fixed by removing the circular dependency.'
-            ERROR_MESSAGE+=' Run `pnpm run --filter mermaid checkCircle` on your local machine'
-            ERROR_MESSAGE+=' to see the circular dependency.'
-            echo "::error title=Lint failure::${ERROR_MESSAGE}"
-            # make sure to return an error exitcode so that GitHub actions shows a red-cross
-            exit 1
-          fi
-
       - name: Verify Docs
         id: verifyDocs
         working-directory: ./packages/mermaid

.github/workflows/pr-labeler-config-validator.yml

@@ -1,15 +1,11 @@
 name: Validate PR Labeler Configuration
 on:
-  push:
-    paths:
-      - .github/workflows/pr-labeler-config-validator.yml
-      - .github/workflows/pr-labeler.yml
-      - .github/pr-labeler.yml
+  push: {}
   pull_request:
-    paths:
-      - .github/workflows/pr-labeler-config-validator.yml
-      - .github/workflows/pr-labeler.yml
-      - .github/pr-labeler.yml
+    types:
+      - opened
+      - synchronize
+      - ready_for_review
 
 jobs:
   pr-labeler:

.gitignore

@@ -43,7 +43,3 @@ stats/
 **/contributor-names.json
 .pnpm-store
 .nyc_output
-
-demos/dev/**
-!/demos/dev/example.html
-!/demos/dev/reload.js

.lycheeignore

@@ -0,0 +1,17 @@
+# These links are ignored by our link checker https://github.com/lycheeverse/lychee
+# The file allows you to list multiple regular expressions for exclusion (one pattern per line).
+
+# Network error: Forbidden
+https://codepen.io
+
+# Timeout error, maybe Twitter has anti-bot defenses against GitHub's CI servers?
+https://twitter.com/mermaidjs_
+
+# Don't check files that are generated during the build via `pnpm docs:code`
+packages/mermaid/src/docs/config/setup/*
+
+# Ignore localhost
+http://localhost:3333/
+
+# Ignore slack invite
+https://join.slack.com/

.prettierignore

@@ -5,8 +5,5 @@ coverage
 # Autogenerated by PNPM
 pnpm-lock.yaml
 stats
-**/.vitepress/components.d.ts
-**/.vitepress/cache
+packages/mermaid/src/docs/.vitepress/components.d.ts
 .nyc_output
-# Autogenerated by `pnpm run --filter mermaid types:build-config`
-packages/mermaid/src/config.type.ts

.vite/build.ts

@@ -2,12 +2,11 @@ import { build, InlineConfig, type PluginOption } from 'vite';
 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';
 
 const visualize = process.argv.includes('--visualize');
 const watch = process.argv.includes('--watch');
@@ -32,10 +31,28 @@ const visualizerOptions = (packageName: string, core = false): PluginOption[] =>
         template: chartType as TemplateType,
         gzipSize: true,
         brotliSize: true,
-      }) as PluginOption,
+      }) as 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;
@@ -54,8 +71,34 @@ 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: {
@@ -78,7 +121,6 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
     },
     plugins: [
       jisonPlugin(),
-      jsonSchemaPlugin(), // handles `.schema.yaml` files
       // @ts-expect-error According to the type definitions, rollup plugins are incompatible with vite
       typescript({ compilerOptions: { declaration: false } }),
       istanbul({
@@ -102,6 +144,8 @@ 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 () => {

.vite/jisonPlugin.ts

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

.vite/jsonSchemaPlugin.ts

@@ -1,28 +0,0 @@
-import { PluginOption } from 'vite';
-import { getDefaults, getSchema, loadSchema } from '../.build/jsonSchema.js';
-
-/**
- * Vite 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 default function jsonSchemaPlugin(): PluginOption {
-  return {
-    name: 'json-schema-plugin',
-    transform(src: string, id: string) {
-      const idAsUrl = new URL(id, 'file:///');
-
-      if (!idAsUrl.pathname.endsWith('schema.yaml')) {
-        return;
-      }
-
-      const jsonSchema = loadSchema(src, idAsUrl.pathname);
-      return {
-        code: idAsUrl.searchParams.get('only-defaults')
-          ? getDefaults(jsonSchema)
-          : getSchema(jsonSchema),
-        map: null, // no source map
-      };
-    },
-  };
-}

.vscode/launch.json

@@ -17,7 +17,7 @@
       "name": "Docs generation",
       "type": "node",
       "request": "launch",
-      "args": ["scripts/docs.cli.mts"],
+      "args": ["src/docs.mts"],
       "runtimeArgs": ["--loader", "ts-node/esm"],
       "cwd": "${workspaceRoot}/packages/mermaid",
       "skipFiles": ["<node_internals>/**", "**/node_modules/**"],

CONTRIBUTING.md

@@ -26,14 +26,9 @@ Install required packages:
 ```bash
 # npx is required for first install as volta support for pnpm is not added yet.
 npx pnpm install
-pnpm test # run unit tests
-pnpm dev # starts a dev server
+pnpm test
 ```
 
-Open <http://localhost:9000> in your browser after starting the dev server.
-You can also duplicate the `example.html` file in `demos/dev`, rename it and add your own mermaid code to it.
-That will be served at <http://localhost:9000/dev/your-file-name.html>.
-
 ### Docker
 
 If you are using docker and docker-compose, you have self-documented `run` bash script, which is a convenient alias for docker-compose commands:
@@ -69,7 +64,7 @@ eg: `feature/2945_state-diagram-new-arrow-florbs`, `bug/1123_fix_random_ugly_red
 
 Documentation is necessary for all non bugfix/refactoring changes.
 
-Only make changes to files that are in [`/packages/mermaid/src/docs`](packages/mermaid/src/docs)
+Only make changes to files are in [`/packages/mermaid/src/docs`](packages/mermaid/src/docs)
 
 **_DO NOT CHANGE FILES IN `/docs`_**
 

__mocks__/pieRenderer.js

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

__mocks__/pieRenderer.ts

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

cSpell.json

@@ -44,7 +44,6 @@
     "faber",
     "flatmap",
     "foswiki",
-    "frontmatter",
     "ftplugin",
     "gantt",
     "gitea",
@@ -57,7 +56,6 @@
     "gzipped",
     "huynh",
     "huynhicode",
-    "iife",
     "inkdrop",
     "jaoude",
     "jgreywolf",
@@ -82,7 +80,6 @@
     "mdbook",
     "mermaidjs",
     "mermerd",
-    "metafile",
     "mindaugas",
     "mindmap",
     "mindmaps",
@@ -92,10 +89,7 @@
     "mult",
     "neurodiverse",
     "nextra",
-    "nikolay",
-    "nirname",
     "orlandoni",
-    "outdir",
     "pathe",
     "pbrolin",
     "phpbb",
@@ -108,12 +102,9 @@
     "ranksep",
     "rect",
     "rects",
-    "reda",
     "redmine",
-    "regexes",
     "rehype",
     "roledescription",
-    "rozhkov",
     "sandboxed",
     "sankey",
     "setupgraphviewbox",
@@ -130,7 +121,6 @@
     "stylis",
     "subhash-halder",
     "substate",
-    "sulais",
     "sveidqvist",
     "swimm",
     "techn",
@@ -141,7 +131,6 @@
     "tsdoc",
     "tuleap",
     "tylerlong",
-    "typora",
     "ugge",
     "unist",
     "unocss",
@@ -155,7 +144,6 @@
     "vueuse",
     "xlink",
     "yash",
-    "yokozuna",
     "zenuml"
   ],
   "patterns": [

cypress/helpers/util.js

@@ -0,0 +1,93 @@
+const utf8ToB64 = (str) => {
+  return window.btoa(unescape(encodeURIComponent(str)));
+};
+
+const batchId = 'mermaid-batch' + new Date().getTime();
+
+export const mermaidUrl = (graphStr, options, api) => {
+  const obj = {
+    code: graphStr,
+    mermaid: options,
+  };
+  const objStr = JSON.stringify(obj);
+  let url = 'http://localhost:9000/e2e.html?graph=' + utf8ToB64(objStr);
+  if (api) {
+    url = 'http://localhost:9000/xss.html?graph=' + graphStr;
+  }
+
+  if (options.listUrl) {
+    cy.log(options.listId, ' ', url);
+  }
+
+  return url;
+};
+
+export const imgSnapshotTest = (graphStr, _options = {}, api = false, validation = undefined) => {
+  cy.log(_options);
+  const options = Object.assign(_options);
+  if (!options.fontFamily) {
+    options.fontFamily = 'courier';
+  }
+  if (!options.sequence) {
+    options.sequence = {};
+  }
+  if (!options.sequence || (options.sequence && !options.sequence.actorFontFamily)) {
+    options.sequence.actorFontFamily = 'courier';
+  }
+  if (options.sequence && !options.sequence.noteFontFamily) {
+    options.sequence.noteFontFamily = 'courier';
+  }
+  options.sequence.actorFontFamily = 'courier';
+  options.sequence.noteFontFamily = 'courier';
+  options.sequence.messageFontFamily = 'courier';
+  if (options.sequence && !options.sequence.actorFontFamily) {
+    options.sequence.actorFontFamily = 'courier';
+  }
+  if (!options.fontSize) {
+    options.fontSize = '16px';
+  }
+  const url = mermaidUrl(graphStr, options, api);
+  openURLAndVerifyRendering(url, options, validation);
+};
+
+export const urlSnapshotTest = (url, _options, api = false, validation) => {
+  const options = Object.assign(_options);
+  openURLAndVerifyRendering(url, options, validation);
+};
+
+export const renderGraph = (graphStr, options, api) => {
+  const url = mermaidUrl(graphStr, options, api);
+  openURLAndVerifyRendering(url, options);
+};
+
+export const openURLAndVerifyRendering = (url, options, validation = undefined) => {
+  const useAppli = Cypress.env('useAppli');
+  const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
+
+  if (useAppli) {
+    cy.log('Opening eyes ' + Cypress.spec.name + ' --- ' + name);
+    cy.eyesOpen({
+      appName: 'Mermaid',
+      testName: name,
+      batchName: Cypress.spec.name,
+      batchId: batchId + Cypress.spec.name,
+    });
+  }
+
+  cy.visit(url);
+  cy.window().should('have.property', 'rendered', true);
+  cy.get('svg').should('be.visible');
+
+  if (validation) {
+    cy.get('svg').should(validation);
+  }
+
+  if (useAppli) {
+    cy.log('Check eyes' + Cypress.spec.name);
+    cy.eyesCheckWindow('Click!');
+    cy.log('Closing eyes' + Cypress.spec.name);
+    cy.eyesClose();
+  } else {
+    cy.matchImageSnapshot(name);
+  }
+};

cypress/helpers/util.ts

@@ -1,132 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { Buffer } from 'buffer';
-import type { MermaidConfig } from '../../packages/mermaid/src/config.type.js';
-
-interface CypressConfig {
-  listUrl?: boolean;
-  listId?: string;
-  name?: string;
-}
-type CypressMermaidConfig = MermaidConfig & CypressConfig;
-
-interface CodeObject {
-  code: string;
-  mermaid: CypressMermaidConfig;
-}
-
-const utf8ToB64 = (str: string): string => {
-  return Buffer.from(decodeURIComponent(encodeURIComponent(str))).toString('base64');
-};
-
-const batchId: string = 'mermaid-batch-' + Cypress.env('CYPRESS_COMMIT') || Date.now().toString();
-
-export const mermaidUrl = (
-  graphStr: string,
-  options: CypressMermaidConfig,
-  api: boolean
-): string => {
-  const codeObject: CodeObject = {
-    code: graphStr,
-    mermaid: options,
-  };
-  const objStr: string = JSON.stringify(codeObject);
-  let url = `http://localhost:9000/e2e.html?graph=${utf8ToB64(objStr)}`;
-  if (api) {
-    url = `http://localhost:9000/xss.html?graph=${graphStr}`;
-  }
-
-  if (options.listUrl) {
-    cy.log(options.listId, ' ', url);
-  }
-
-  return url;
-};
-
-export const imgSnapshotTest = (
-  graphStr: string,
-  _options: CypressMermaidConfig = {},
-  api = false,
-  validation?: any
-): void => {
-  cy.log(JSON.stringify(_options));
-  const options: CypressMermaidConfig = Object.assign(_options);
-  if (!options.fontFamily) {
-    options.fontFamily = 'courier';
-  }
-  if (!options.sequence) {
-    options.sequence = {};
-  }
-  if (!options.sequence || (options.sequence && !options.sequence.actorFontFamily)) {
-    options.sequence.actorFontFamily = 'courier';
-  }
-  if (options.sequence && !options.sequence.noteFontFamily) {
-    options.sequence.noteFontFamily = 'courier';
-  }
-  options.sequence.actorFontFamily = 'courier';
-  options.sequence.noteFontFamily = 'courier';
-  options.sequence.messageFontFamily = 'courier';
-  if (options.sequence && !options.sequence.actorFontFamily) {
-    options.sequence.actorFontFamily = 'courier';
-  }
-  if (!options.fontSize) {
-    options.fontSize = 16;
-  }
-
-  const url: string = mermaidUrl(graphStr, options, api);
-  openURLAndVerifyRendering(url, options, validation);
-};
-
-export const urlSnapshotTest = (
-  url: string,
-  _options: CypressMermaidConfig,
-  _api = false,
-  validation?: any
-): void => {
-  const options: CypressMermaidConfig = Object.assign(_options);
-  openURLAndVerifyRendering(url, options, validation);
-};
-
-export const renderGraph = (
-  graphStr: string,
-  options: CypressMermaidConfig = {},
-  api = false
-): void => {
-  const url: string = mermaidUrl(graphStr, options, api);
-  openURLAndVerifyRendering(url, options);
-};
-
-export const openURLAndVerifyRendering = (
-  url: string,
-  options: CypressMermaidConfig,
-  validation?: any
-): void => {
-  const useAppli: boolean = Cypress.env('useAppli');
-  const name: string = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
-
-  if (useAppli) {
-    cy.log(`Opening eyes ${Cypress.spec.name} --- ${name}`);
-    cy.eyesOpen({
-      appName: 'Mermaid',
-      testName: name,
-      batchName: Cypress.spec.name,
-      batchId: batchId + Cypress.spec.name,
-    });
-  }
-
-  cy.visit(url);
-  cy.window().should('have.property', 'rendered', true);
-  cy.get('svg').should('be.visible');
-
-  if (validation) {
-    cy.get('svg').should(validation);
-  }
-
-  if (useAppli) {
-    cy.log(`Check eyes ${Cypress.spec.name}`);
-    cy.eyesCheckWindow('Click!');
-    cy.log(`Closing eyes ${Cypress.spec.name}`);
-    cy.eyesClose();
-  } else {
-    cy.matchImageSnapshot(name);
-  }
-};

cypress/integration/other/configuration.spec.js

@@ -1,4 +1,4 @@
-import { renderGraph } from '../../helpers/util.ts';
+import { renderGraph } from '../../helpers/util.js';
 describe('Configuration', () => {
   describe('arrowMarkerAbsolute', () => {
     it('should handle default value false of arrowMarkerAbsolute', () => {

cypress/integration/other/external-diagrams.spec.js

@@ -1,4 +1,4 @@
-import { urlSnapshotTest } from '../../helpers/util.ts';
+import { urlSnapshotTest } from '../../helpers/util.js';
 
 describe('mermaid', () => {
   describe('registerDiagram', () => {

cypress/integration/other/ghsa.spec.js

@@ -1,4 +1,4 @@
-import { urlSnapshotTest, openURLAndVerifyRendering } from '../../helpers/util.ts';
+import { urlSnapshotTest, openURLAndVerifyRendering } from '../../helpers/util.js';
 
 describe('CSS injections', () => {
   it('should not allow CSS injections outside of the diagram', () => {

cypress/integration/other/iife.spec.js

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

cypress/integration/other/webpackUsage.spec.js

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

cypress/integration/other/xss.spec.js

@@ -1,4 +1,4 @@
-import { mermaidUrl } from '../../helpers/util.ts';
+import { mermaidUrl } from '../../helpers/util.js';
 describe('XSS', () => {
   it('should handle xss in tags', () => {
     const str =

cypress/integration/rendering/appli.spec.js

@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util.ts';
+import { imgSnapshotTest } from '../../helpers/util.js';
 
 describe('Git Graph diagram', () => {
   it('1: should render a simple gitgraph with commit on main branch', () => {

cypress/integration/rendering/c4.spec.js

@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
 
 describe('C4 diagram', () => {
   it('should render a simple C4Context diagram', () => {

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

@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util.ts';
+import { imgSnapshotTest } from '../../helpers/util.js';
 describe('Class diagram V2', () => {
   it('0: should render a simple class diagram', () => {
     imgSnapshotTest(

cypress/integration/rendering/classDiagram.spec.js

@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
 
 describe('Class diagram', () => {
   it('1: should render a simple class diagram', () => {
@@ -423,82 +423,4 @@ describe('Class diagram', () => {
     );
     cy.get('svg');
   });
-
-  it('should render class diagram with newlines in title', () => {
-    imgSnapshotTest(`
-      classDiagram
-        Animal <|-- \`Du\nck\`
-        Animal : +int age
-        Animal : +String gender
-        Animal: +isMammal()
-        Animal: +mate()
-        class \`Du\nck\` {
-          +String beakColor
-          +String featherColor
-          +swim()
-          +quack()
-        }
-      `);
-    cy.get('svg');
-  });
-
-  it('should render class diagram with many newlines in title', () => {
-    imgSnapshotTest(`
-    classDiagram
-      class \`This\nTitle\nHas\nMany\nNewlines\` {
-        +String Also
-        -Stirng Many
-        #int Members
-        +And()
-        -Many()
-        #Methods()
-      }
-    `);
-  });
-
-  it('should render with newlines in title and an annotation', () => {
-    imgSnapshotTest(`
-    classDiagram
-      class \`This\nTitle\nHas\nMany\nNewlines\` {
-        +String Also
-        -Stirng Many
-        #int Members
-        +And()
-        -Many()
-        #Methods()
-      }
-      &lt;&lt;Interface&gt;&gt; \`This\nTitle\nHas\nMany\nNewlines\`  
-    `);
-  });
-
-  it('should handle newline title in namespace', () => {
-    imgSnapshotTest(`
-    classDiagram
-      namespace testingNamespace {
-      class \`This\nTitle\nHas\nMany\nNewlines\` {
-        +String Also
-        -Stirng Many
-        #int Members
-        +And()
-        -Many()
-        #Methods()
-      }
-    }
-    `);
-  });
-
-  it('should handle newline in string label', () => {
-    imgSnapshotTest(`
-      classDiagram
-        class A["This has\na newline!"] {
-          +String boop
-          -Int beep
-          #double bop
-        }
-
-        class B["This title also has\na newline"]
-        B : +with(more)
-        B : -methods()
-      `);
-  });
 });

cypress/integration/rendering/conf-and-directives.spec.js

@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util.ts';
+import { imgSnapshotTest } from '../../helpers/util.js';
 
 describe('Configuration and directives - nodes should be light blue', () => {
   it('No config - use default', () => {
@@ -14,6 +14,7 @@ describe('Configuration and directives - nodes should be light blue', () => {
         `,
       {}
     );
+    cy.get('svg');
   });
   it('Settings from initialize - nodes should be green', () => {
     imgSnapshotTest(
@@ -27,6 +28,7 @@ graph TD
           end          `,
       { theme: 'forest' }
     );
+    cy.get('svg');
   });
   it('Settings from initialize overriding themeVariable - nodes should be red', () => {
     imgSnapshotTest(
@@ -44,6 +46,7 @@ graph TD
         `,
       { theme: 'base', themeVariables: { primaryColor: '#ff0000' }, logLevel: 0 }
     );
+    cy.get('svg');
   });
   it('Settings from directive - nodes should be grey', () => {
     imgSnapshotTest(
@@ -59,24 +62,7 @@ graph TD
         `,
       {}
     );
-  });
-  it('Settings from frontmatter - nodes should be grey', () => {
-    imgSnapshotTest(
-      `
----
-config:
-  theme: neutral
----
-graph TD
-          A(Start) --> B[/Another/]
-          A[/Another/] --> C[End]
-          subgraph section
-            B
-            C
-          end
-        `,
-      {}
-    );
+    cy.get('svg');
   });
 
   it('Settings from directive overriding theme variable - nodes should be red', () => {
@@ -93,6 +79,7 @@ graph TD
         `,
       {}
     );
+    cy.get('svg');
   });
   it('Settings from initialize and directive - nodes should be grey', () => {
     imgSnapshotTest(
@@ -108,6 +95,7 @@ graph TD
         `,
       { theme: 'forest' }
     );
+    cy.get('svg');
   });
   it('Theme from initialize, directive overriding theme variable - nodes should be red', () => {
     imgSnapshotTest(
@@ -123,71 +111,8 @@ graph TD
         `,
       { theme: 'base' }
     );
+    cy.get('svg');
   });
-  it('Theme from initialize, frontmatter overriding theme variable - nodes should be red', () => {
-    imgSnapshotTest(
-      `
----
-config:
-  theme: base
-  themeVariables:
-    primaryColor: '#ff0000'
----
-graph TD
-          A(Start) --> B[/Another/]
-          A[/Another/] --> C[End]
-          subgraph section
-            B
-            C
-          end
-        `,
-      { theme: 'forest' }
-    );
-  });
-  it('Theme from initialize, frontmatter overriding theme variable, directive overriding primaryColor - nodes should be red', () => {
-    imgSnapshotTest(
-      `
----
-config:
-  theme: base
-  themeVariables:
-    primaryColor: '#00ff00'
----
-%%{init: {'theme': 'base', 'themeVariables':{ 'primaryColor': '#ff0000'}}}%%
-graph TD
-          A(Start) --> B[/Another/]
-          A[/Another/] --> C[End]
-          subgraph section
-            B
-            C
-          end
-        `,
-      { theme: 'forest' }
-    );
-  });
-
-  it('should render if values are not quoted properly', () => {
-    // #ff0000 is not quoted properly, and will evaluate to null.
-    // This test ensures that the rendering still works.
-    imgSnapshotTest(
-      `---
-config:
-  theme: base
-  themeVariables:
-    primaryColor: #ff0000
----
-graph TD
-          A(Start) --> B[/Another/]
-          A[/Another/] --> C[End]
-          subgraph section
-            B
-            C
-          end
-        `,
-      { theme: 'forest' }
-    );
-  });
-
   it('Theme variable from initialize, theme from directive - nodes should be red', () => {
     imgSnapshotTest(
       `
@@ -202,11 +127,13 @@ graph TD
         `,
       { themeVariables: { primaryColor: '#ff0000' } }
     );
+    cy.get('svg');
   });
   describe('when rendering several diagrams', () => {
     it('diagrams should not taint later diagrams', () => {
       const url = 'http://localhost:9000/theme-directives.html';
       cy.visit(url);
+      cy.get('svg');
       cy.matchImageSnapshot('conf-and-directives.spec-when-rendering-several-diagrams-diagram-1');
     });
   });

cypress/integration/rendering/current.spec.js

@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util.ts';
+import { imgSnapshotTest } from '../../helpers/util.js';
 
 describe('Current diagram', () => {
   it('should render a state with states in it', () => {

cypress/integration/rendering/debug.spec.js

@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util.ts';
+import { imgSnapshotTest } from '../../helpers/util.js';
 
 describe('Flowchart', () => {
   it('34: testing the label width in percy', () => {

cypress/integration/rendering/erDiagram.spec.js

@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
 
 describe('Entity Relationship Diagram', () => {
   it('should render a simple ER diagram', () => {
@@ -200,27 +200,6 @@ describe('Entity Relationship Diagram', () => {
     );
   });
 
-  it('should render entities with attributes that begin with asterisk', () => {
-    imgSnapshotTest(
-      `
-    erDiagram
-        BOOK {
-          int         *id
-          string      name
-          varchar(99) summary
-        }
-        BOOK }o..o{ STORE : soldBy
-        STORE {
-          int         *id
-          string      name
-          varchar(50) address
-        }
-        `,
-      { loglevel: 1 }
-    );
-    cy.get('svg');
-  });
-
   it('should render entities with keys', () => {
     renderGraph(
       `

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

@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
 
 describe.skip('Flowchart ELK', () => {
   it('1-elk: should render a simple flowchart', () => {
@@ -681,7 +681,7 @@ title: Simple flowchart
 flowchart-elk TD
 A --> B
 `,
-      { flowchart: { titleTopMargin: 0 } }
+      { titleTopMargin: 0 }
     );
   });
   it('elk: should include classes on the edges', () => {
@@ -710,7 +710,7 @@ flowchart-elk LR
     style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
     classDef someclass fill:#f96
 `,
-          { flowchart: { titleTopMargin: 0 } }
+          { titleTopMargin: 0 }
         );
       });
       it('With formatting in a node', () => {
@@ -726,7 +726,7 @@ flowchart-elk LR
   b --> d(The dog in the hog)
   c --> d
 `,
-          { flowchart: { titleTopMargin: 0 } }
+          { titleTopMargin: 0 }
         );
       });
       it('New line in node and formatted edge label', () => {
@@ -736,7 +736,7 @@ flowchart-elk LR
 b("\`The dog in **the** hog.(1)
 NL\`") --"\`1o **bold**\`"--> c
 `,
-          { flowchart: { titleTopMargin: 0 } }
+          { titleTopMargin: 0 }
         );
       });
       it('Wrapping long text with a new line', () => {
@@ -749,7 +749,7 @@ Word!
 Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`) --> c
 
 `,
-          { flowchart: { titleTopMargin: 0 } }
+          { titleTopMargin: 0 }
         );
       });
       it('Sub graphs and markdown strings', () => {
@@ -766,7 +766,7 @@ subgraph "\`**Two**\`"
 end
 
 `,
-          { flowchart: { titleTopMargin: 0 } }
+          { titleTopMargin: 0 }
         );
       });
     });
@@ -782,7 +782,7 @@ flowchart-elk LR
     style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
     classDef someclass fill:#f96
 `,
-          { flowchart: { titleTopMargin: 0 } }
+          { titleTopMargin: 0 }
         );
       });
       it('With formatting in a node', () => {
@@ -798,7 +798,7 @@ flowchart-elk LR
   b --> d(The dog in the hog)
   c --> d
 `,
-          { flowchart: { titleTopMargin: 0 } }
+          { titleTopMargin: 0 }
         );
       });
       it('New line in node and formatted edge label', () => {
@@ -808,7 +808,7 @@ flowchart-elk LR
 b("\`The dog in **the** hog.(1)
 NL\`") --"\`1o **bold**\`"--> c
 `,
-          { flowchart: { titleTopMargin: 0 } }
+          { titleTopMargin: 0 }
         );
       });
       it('Wrapping long text with a new line', () => {
@@ -821,7 +821,7 @@ Word!
 Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`") --> c
 
 `,
-          { flowchart: { titleTopMargin: 0 } }
+          { titleTopMargin: 0 }
         );
       });
       it('Sub graphs and markdown strings', () => {
@@ -838,7 +838,7 @@ subgraph "\`**Two**\`"
 end
 
 `,
-          { flowchart: { titleTopMargin: 0 } }
+          { titleTopMargin: 0 }
         );
       });
     });

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

@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
 
 describe('Flowchart v2', () => {
   it('1: should render a simple flowchart', () => {
@@ -449,7 +449,7 @@ flowchart TD
       { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
-  it('65-1: text-color from classes', () => {
+  it('65: text-color from classes', () => {
     imgSnapshotTest(
       `
       flowchart LR
@@ -460,31 +460,6 @@ flowchart TD
       { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
-  it('65-2: bold text from classes', () => {
-    imgSnapshotTest(
-      `
-      flowchart
-        classDef cat fill:#f9d5e5, stroke:#233d4d,stroke-width:2px, font-weight:bold;
-        CS(A long bold text to be viewed):::cat
-      `,
-      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
-    );
-  });
-  it('65-3: bigger font from classes', () => {
-    imgSnapshotTest(
-      `
-flowchart
-  Node1:::class1 --> Node2:::class2
-  Node1:::class1 --> Node3:::class2
-  Node3 --> Node4((I am a circle)):::larger
-
-  classDef class1 fill:lightblue
-  classDef class2 fill:pink
-  classDef larger font-size:30px,fill:yellow
-      `,
-      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
-    );
-  });
   it('66: More nested subgraph cases (TB)', () => {
     imgSnapshotTest(
       `
@@ -696,7 +671,7 @@ title: Simple flowchart
 flowchart TD
 A --> B
 `,
-      { flowchart: { titleTopMargin: 10 } }
+      { titleTopMargin: 0 }
     );
   });
   it('3192: It should be possieble to render flowcharts with invisible edges', () => {
@@ -707,7 +682,7 @@ title: Simple flowchart with invisible edges
 flowchart TD
 A ~~~ B
 `,
-      { flowchart: { titleTopMargin: 10 } }
+      { titleTopMargin: 0 }
     );
   });
   it('4023: Should render html labels with images and-or text correctly', () => {
@@ -720,15 +695,6 @@ A ~~~ B
       {}
     );
   });
-
-  it('4439: Should render the graph even if some images are missing', () => {
-    imgSnapshotTest(
-      `flowchart TD
-    B[<img>]
-    B-->C[<img>]`,
-      {}
-    );
-  });
   describe('Markdown strings flowchart (#4220)', () => {
     describe('html labels', () => {
       it('With styling and classes', () => {
@@ -741,7 +707,7 @@ flowchart LR
     style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
     classDef someclass fill:#f96
 `,
-          { flowchart: { titleTopMargin: 0 } }
+          { titleTopMargin: 0 }
         );
       });
       it('With formatting in a node', () => {
@@ -757,7 +723,7 @@ flowchart LR
   b --> d(The dog in the hog)
   c --> d
 `,
-          { flowchart: { titleTopMargin: 0 } }
+          { titleTopMargin: 0 }
         );
       });
       it('New line in node and formatted edge label', () => {
@@ -767,7 +733,7 @@ flowchart LR
 b("\`The dog in **the** hog.(1)
 NL\`") --"\`1o **bold**\`"--> c
 `,
-          { flowchart: { titleTopMargin: 0 } }
+          { titleTopMargin: 0 }
         );
       });
       it('Wrapping long text with a new line', () => {
@@ -780,7 +746,7 @@ Word!
 Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`") --> c
 
 `,
-          { flowchart: { titleTopMargin: 0 } }
+          { titleTopMargin: 0 }
         );
       });
       it('Sub graphs and markdown strings', () => {
@@ -797,7 +763,7 @@ subgraph "\`**Two**\`"
 end
 
 `,
-          { flowchart: { titleTopMargin: 0 } }
+          { titleTopMargin: 0 }
         );
       });
     });
@@ -813,7 +779,7 @@ flowchart LR
     style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
     classDef someclass fill:#f96
 `,
-          { flowchart: { titleTopMargin: 0 } }
+          { titleTopMargin: 0 }
         );
       });
       it('With formatting in a node', () => {
@@ -829,7 +795,7 @@ flowchart LR
   b --> d(The dog in the hog)
   c --> d
 `,
-          { flowchart: { titleTopMargin: 0 } }
+          { titleTopMargin: 0 }
         );
       });
       it('New line in node and formatted edge label', () => {
@@ -839,7 +805,7 @@ flowchart LR
 b("\`The dog in **the** hog.(1)
 NL\`") --"\`1o **bold**\`"--> c
 `,
-          { flowchart: { titleTopMargin: 0 } }
+          { titleTopMargin: 0 }
         );
       });
       it('Wrapping long text with a new line', () => {
@@ -852,7 +818,7 @@ Word!
 Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`") --> c
 
 `,
-          { flowchart: { titleTopMargin: 0 } }
+          { titleTopMargin: 0 }
         );
       });
       it('Sub graphs and markdown strings', () => {
@@ -869,7 +835,7 @@ subgraph "\`**Two**\`"
 end
 
 `,
-          { flowchart: { titleTopMargin: 0 } }
+          { titleTopMargin: 0 }
         );
       });
     });

cypress/integration/rendering/flowchart.spec.js

@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
 
 describe('Graph', () => {
   it('1: should render a simple flowchart no htmlLabels', () => {
@@ -891,27 +891,4 @@ graph TD
       { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
-  it('66: apply class called default on node called default', () => {
-    imgSnapshotTest(
-      `
-      graph TD
-        classDef default fill:#a34,stroke:#000,stroke-width:4px,color:#fff 
-        hello --> default
-      `,
-      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
-    );
-  });
-
-  it('67: should be able to style default node independently', () => {
-    imgSnapshotTest(
-      `
-    flowchart TD
-      classDef default fill:#a34
-      hello --> default
-
-      style default stroke:#000,stroke-width:4px
-    `,
-      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
-    );
-  });
 });

cypress/integration/rendering/gantt.spec.js

@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
 
 describe('Gantt diagram', () => {
   beforeEach(() => {
@@ -414,28 +414,6 @@ describe('Gantt diagram', () => {
     );
   });
 
-  it('should render a gantt diagram with tick is 1 week, with the day starting on monday', () => {
-    imgSnapshotTest(
-      `
-      gantt
-        title A Gantt Diagram
-        dateFormat   YYYY-MM-DD
-        axisFormat   %m-%d
-        tickInterval 1week
-        weekday      monday
-        excludes     weekends
-
-        section Section
-        A task           : a1, 2022-10-01, 30d
-        Another task     : after a1, 20d
-        section Another
-        Task in sec      : 2022-10-20, 12d
-        another task     : 24d
-      `,
-      {}
-    );
-  });
-
   it('should render a gantt diagram with tick is 1 month', () => {
     imgSnapshotTest(
       `

cypress/integration/rendering/gitGraph.spec.js

@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util.ts';
+import { imgSnapshotTest } from '../../helpers/util.js';
 
 describe('Git Graph diagram', () => {
   it('1: should render a simple gitgraph with commit on main branch', () => {
@@ -333,372 +333,4 @@ gitGraph
       {}
     );
   });
-  it('15: should render a simple gitgraph with commit on main branch | Vertical Branch', () => {
-    imgSnapshotTest(
-      `gitGraph TB:
-       commit id: "1"
-       commit id: "2"
-       commit id: "3"
-      `,
-      {}
-    );
-  });
-  it('16: should render a simple gitgraph with commit on main branch with Id | Vertical Branch', () => {
-    imgSnapshotTest(
-      `gitGraph TB:
-       commit id: "One"
-       commit id: "Two"
-       commit id: "Three"
-      `,
-      {}
-    );
-  });
-  it('17: should render a simple gitgraph with different commitTypes on main branch | Vertical Branch', () => {
-    imgSnapshotTest(
-      `gitGraph TB:
-       commit id: "Normal Commit"
-       commit id: "Reverse Commit" type: REVERSE
-       commit id: "Hightlight Commit" type: HIGHLIGHT
-      `,
-      {}
-    );
-  });
-  it('18: should render a simple gitgraph with tags commitTypes on main branch | Vertical Branch', () => {
-    imgSnapshotTest(
-      `gitGraph TB:
-       commit id: "Normal Commit with tag" tag: "v1.0.0"
-       commit id: "Reverse Commit with tag" type: REVERSE tag: "RC_1"
-       commit id: "Hightlight Commit" type: HIGHLIGHT  tag: "8.8.4"
-      `,
-      {}
-    );
-  });
-  it('19: should render a simple gitgraph with two branches | Vertical Branch', () => {
-    imgSnapshotTest(
-      `gitGraph TB:
-       commit id: "1"
-       commit id: "2"
-       branch develop
-       checkout develop
-       commit id: "3"
-       commit id: "4"
-       checkout main
-       commit id: "5"
-       commit id: "6"
-      `,
-      {}
-    );
-  });
-  it('20: should render a simple gitgraph with two branches and merge commit | Vertical Branch', () => {
-    imgSnapshotTest(
-      `gitGraph TB:
-       commit id: "1"
-       commit id: "2"
-       branch develop
-       checkout develop
-       commit id: "3"
-       commit id: "4"
-       checkout main
-       merge develop
-       commit id: "5"
-       commit id: "6"
-      `,
-      {}
-    );
-  });
-  it('21: should render a simple gitgraph with three branches and tagged merge commit | Vertical Branch', () => {
-    imgSnapshotTest(
-      `gitGraph TB:
-       commit id: "1"
-       commit id: "2"
-       branch nice_feature
-       checkout nice_feature
-       commit id: "3"
-       checkout main
-       commit id: "4"
-       checkout nice_feature
-       branch very_nice_feature
-       checkout very_nice_feature
-       commit id: "5"
-       checkout main
-       commit id: "6"
-       checkout nice_feature
-       commit id: "7"
-       checkout main
-       merge nice_feature id: "12345" tag: "my merge commit"
-       checkout very_nice_feature
-       commit id: "8"
-       checkout main
-       commit id: "9"
-      `,
-      {}
-    );
-  });
-  it('22: should render a simple gitgraph with more than 8 branchs &  overriding variables | Vertical Branch', () => {
-    imgSnapshotTest(
-      `%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
-        'gitBranchLabel0': '#ffffff',
-        'gitBranchLabel1': '#ffffff',
-        'gitBranchLabel2': '#ffffff',
-        'gitBranchLabel3': '#ffffff',
-        'gitBranchLabel4': '#ffffff',
-        'gitBranchLabel5': '#ffffff',
-        'gitBranchLabel6': '#ffffff',
-        'gitBranchLabel7': '#ffffff',
-  } } }%%
-  gitGraph TB:
-    checkout main
-    branch branch1
-    branch branch2
-    branch branch3
-    branch branch4
-    branch branch5
-    branch branch6
-    branch branch7
-    branch branch8
-    branch branch9
-    checkout branch1
-    commit id: "1"
-      `,
-      {}
-    );
-  });
-  it('23: should render a simple gitgraph with rotated labels | Vertical Branch', () => {
-    imgSnapshotTest(
-      `%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'gitGraph': {
-        'rotateCommitLabel': true
-  } } }%%
-        gitGraph TB:
-        commit id: "75f7219e83b321cd3fdde7dcf83bc7c1000a6828"
-        commit id: "0db4784daf82736dec4569e0dc92980d328c1f2e"
-        commit id: "7067e9973f9eaa6cd4a4b723c506d1eab598e83e"
-        commit id: "66972321ad6c199013b5b31f03b3a86fa3f9817d"
-      `,
-      {}
-    );
-  });
-  it('24: should render a simple gitgraph with horizontal labels | Vertical Branch', () => {
-    imgSnapshotTest(
-      `%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'gitGraph': {
-        'rotateCommitLabel': false
-  } } }%%
-        gitGraph TB:
-        commit id: "Alpha"
-        commit id: "Beta"
-        commit id: "Gamma"
-        commit id: "Delta"
-      `,
-      {}
-    );
-  });
-  it('25: should render a simple gitgraph with cherry pick commit | Vertical Branch', () => {
-    imgSnapshotTest(
-      `
-    gitGraph TB:
-       commit id: "ZERO"
-       branch develop
-       commit id:"A"
-       checkout main
-       commit id:"ONE"
-       checkout develop
-       commit id:"B"
-       checkout main
-       commit id:"TWO"
-       cherry-pick id:"A"
-       commit id:"THREE"
-       checkout develop
-       commit id:"C"
-      `,
-      {}
-    );
-  });
-  it('26: should render a gitgraph with cherry pick commit with custom tag | Vertical Branch', () => {
-    imgSnapshotTest(
-      `
-    gitGraph TB:
-       commit id: "ZERO"
-       branch develop
-       commit id:"A"
-       checkout main
-       commit id:"ONE"
-       checkout develop
-       commit id:"B"
-       checkout main
-       commit id:"TWO"
-       cherry-pick id:"A" tag: "snapshot"
-       commit id:"THREE"
-       checkout develop
-       commit id:"C"
-      `,
-      {}
-    );
-  });
-  it('27: should render a gitgraph with cherry pick commit with no tag | Vertical Branch', () => {
-    imgSnapshotTest(
-      `
-    gitGraph TB:
-       commit id: "ZERO"
-       branch develop
-       commit id:"A"
-       checkout main
-       commit id:"ONE"
-       checkout develop
-       commit id:"B"
-       checkout main
-       commit id:"TWO"
-       cherry-pick id:"A" tag: ""
-       commit id:"THREE"
-       checkout develop
-       commit id:"C"
-      `,
-      {}
-    );
-  });
-  it('28: should render a simple gitgraph with two cherry pick commit | Vertical Branch', () => {
-    imgSnapshotTest(
-      `
-    gitGraph TB:
-       commit id: "ZERO"
-       branch develop
-       commit id:"A"
-       checkout main
-       commit id:"ONE"
-       checkout develop
-       commit id:"B"
-       branch featureA
-       commit id:"FIX"
-       commit id: "FIX-2"
-       checkout main
-       commit id:"TWO"
-       cherry-pick id:"A"
-       commit id:"THREE"
-       cherry-pick id:"FIX"
-       checkout develop
-       commit id:"C"
-       merge featureA
-      `,
-      {}
-    );
-  });
-  it('29: should render commits for more than 8 branches | Vertical Branch', () => {
-    imgSnapshotTest(
-      `
-      gitGraph TB:
-      checkout main
-      %% Make sure to manually set the ID of all commits, for consistent visual tests
-      commit id: "1-abcdefg"
-      checkout main
-      branch branch1
-      commit id: "2-abcdefg"
-      checkout main
-      merge branch1
-      branch branch2
-      commit id: "3-abcdefg"
-      checkout main
-      merge branch2
-      branch branch3
-      commit id: "4-abcdefg"
-      checkout main
-      merge branch3
-      branch branch4
-      commit id: "5-abcdefg"
-      checkout main
-      merge branch4
-      branch branch5
-      commit id: "6-abcdefg"
-      checkout main
-      merge branch5
-      branch branch6
-      commit id: "7-abcdefg"
-      checkout main
-      merge branch6
-      branch branch7
-      commit id: "8-abcdefg"
-      checkout main
-      merge branch7
-      branch branch8
-      commit id: "9-abcdefg"
-      checkout main
-      merge branch8
-      branch branch9
-      commit id: "10-abcdefg"
-      `,
-      {}
-    );
-  });
-  it('30: should render a simple gitgraph with three branches,custom merge commit id,tag,type | Vertical Branch', () => {
-    imgSnapshotTest(
-      `gitGraph TB:
-       commit id: "1"
-       commit id: "2"
-       branch nice_feature
-       checkout nice_feature
-       commit id: "3"
-       checkout main
-       commit id: "4"
-       checkout nice_feature
-       branch very_nice_feature
-       checkout very_nice_feature
-       commit id: "5"
-       checkout main
-       commit id: "6"
-       checkout nice_feature
-       commit id: "7"
-       checkout main
-       merge nice_feature id: "customID" tag: "customTag" type: REVERSE
-       checkout very_nice_feature
-       commit id: "8"
-       checkout main
-       commit id: "9"
-      `,
-      {}
-    );
-  });
-  it('31: should render a simple gitgraph with a title | Vertical Branch', () => {
-    imgSnapshotTest(
-      `---
-title: simple gitGraph
----
-gitGraph TB:
-  commit id: "1-abcdefg"
-`,
-      {}
-    );
-  });
-  it('32: should render a simple gitgraph overlapping commits | Vertical Branch', () => {
-    imgSnapshotTest(
-      `gitGraph TB:
-       commit id:"s1"
-       commit id:"s2"
-       branch branch1
-       commit id:"s3"
-       commit id:"s4"
-       checkout main
-       commit id:"s5"
-       checkout branch1
-       commit id:"s6"
-       commit id:"s7"
-       merge main
-      `,
-      {}
-    );
-  });
-  it('33: should render a simple gitgraph overlapping commits', () => {
-    imgSnapshotTest(
-      `gitGraph
-       commit id:"s1"
-       commit id:"s2"
-       branch branch1
-       commit id:"s3"
-       commit id:"s4"
-       checkout main
-       commit id:"s5"
-       checkout branch1
-       commit id:"s6"
-       commit id:"s7"
-       merge main
-      `,
-      {}
-    );
-  });
 });

cypress/integration/rendering/info.spec.ts

@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util.ts';
+import { imgSnapshotTest } from '../../helpers/util.js';
 
 describe('info diagram', () => {
   it('should handle an info definition', () => {

cypress/integration/rendering/journey.spec.js

@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
 
 describe('User journey diagram', () => {
   it('Simple test', () => {

cypress/integration/rendering/mindmap.spec.ts

@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util.ts';
+import { imgSnapshotTest } from '../../helpers/util.js';
 
 /**
  * Check whether the SVG Element has a Mindmap root
@@ -242,7 +242,8 @@ mindmap
     a second line 😎\`]
       id2[\`The dog in **the** hog... a *very long text* about it
 Word!\`]
-`
+`,
+        { titleTopMargin: 0 }
       );
     });
   });

cypress/integration/rendering/pie.spec.js

@@ -1,85 +1,89 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
 
-describe('pie chart', () => {
+describe('Pie Chart', () => {
   it('should render a simple pie diagram', () => {
     imgSnapshotTest(
-      `pie title Sports in Sweden
-        "Bandy": 40
-        "Ice-Hockey": 80
-        "Football": 90
       `
+    pie title Sports in Sweden
+       "Bandy" : 40
+       "Ice-Hockey" : 80
+       "Football" : 90
+      `,
+      {}
     );
+    cy.get('svg');
   });
-
   it('should render a simple pie diagram with long labels', () => {
     imgSnapshotTest(
-      `pie title NETFLIX
-        "Time spent looking for movie": 90
-        "Time spent watching it": 10
       `
+      pie title NETFLIX
+         "Time spent looking for movie" : 90
+         "Time spent watching it" : 10
+        `,
+      {}
     );
+    cy.get('svg');
   });
-
   it('should render a simple pie diagram with capital letters for labels', () => {
     imgSnapshotTest(
-      `pie title What Voldemort doesn't have?
-        "FRIENDS": 2
-        "FAMILY": 3
-        "NOSE": 45
       `
+      pie title What Voldemort doesn't have?
+         "FRIENDS" : 2
+         "FAMILY" : 3
+         "NOSE" : 45
+        `,
+      {}
     );
+    cy.get('svg');
   });
-
   it('should render a pie diagram when useMaxWidth is true (default)', () => {
     renderGraph(
-      `pie title Sports in Sweden
-        "Bandy": 40
-        "Ice-Hockey": 80
-        "Football": 90
+      `
+    pie title Sports in Sweden
+       "Bandy" : 40
+       "Ice-Hockey" : 80
+       "Football" : 90
       `,
       { pie: { useMaxWidth: true } }
     );
     cy.get('svg').should((svg) => {
       expect(svg).to.have.attr('width', '100%');
+      // expect(svg).to.have.attr('height');
+      // const height = parseFloat(svg.attr('height'));
+      // expect(height).to.eq(450);
       const style = svg.attr('style');
       expect(style).to.match(/^max-width: [\d.]+px;$/);
       const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
       expect(maxWidthValue).to.eq(984);
     });
   });
-
   it('should render a pie diagram when useMaxWidth is false', () => {
     renderGraph(
-      `pie title Sports in Sweden
-        "Bandy": 40
-        "Ice-Hockey": 80
-        "Football": 90
+      `
+    pie title Sports in Sweden
+       "Bandy" : 40
+       "Ice-Hockey" : 80
+       "Football" : 90
       `,
       { pie: { useMaxWidth: false } }
     );
     cy.get('svg').should((svg) => {
+      // const height = parseFloat(svg.attr('height'));
       const width = parseFloat(svg.attr('width'));
+      // expect(height).to.eq(450);
       expect(width).to.eq(984);
       expect(svg).to.not.have.attr('style');
     });
   });
-
-  it('should render a pie diagram when textPosition is setted', () => {
+  it('should render a pie diagram when textPosition is set', () => {
     imgSnapshotTest(
-      `pie
-        "Dogs": 50
-        "Cats": 25
-      `,
+      `
+        pie
+          "Dogs": 50
+          "Cats": 25
+        `,
       { logLevel: 1, pie: { textPosition: 0.9 } }
     );
-  });
-
-  it('should render a pie diagram with showData', () => {
-    imgSnapshotTest(
-      `pie showData
-        "Dogs": 50
-        "Cats": 25
-      `
-    );
+    cy.get('svg');
   });
 });

cypress/integration/rendering/quadrantChart.spec.js

@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
 
 describe('Quadrant Chart', () => {
   it('should render if only chart type is provided', () => {

cypress/integration/rendering/requirement.spec.js

@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
 
 describe('Requirement diagram', () => {
   it('sample', () => {

cypress/integration/rendering/sankey.spec.ts

@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
 
 describe('Sankey Diagram', () => {
   it('should render a simple example', () => {

cypress/integration/rendering/sequencediagram.spec.js

@@ -1,6 +1,6 @@
 /// <reference types="Cypress" />
 
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
 
 context('Sequence diagram', () => {
   it('should render a sequence diagram with boxes', () => {

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

@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
 
 describe('State diagram', () => {
   it('v2 should render a simple info', () => {

cypress/integration/rendering/stateDiagram.spec.js

@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
 
 describe('State diagram', () => {
   it('should render a simple state diagrams', () => {

cypress/integration/rendering/theme.spec.js

@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util.ts';
+import { imgSnapshotTest } from '../../helpers/util.js';
 
 describe('themeCSS balancing, it', () => {
   it('should not allow unbalanced CSS definitions', () => {

cypress/integration/rendering/timeline.spec.ts

@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util.ts';
+import { imgSnapshotTest } from '../../helpers/util.js';
 
 describe('Timeline diagram', () => {
   it('1: should render a simple timeline with no specific sections', () => {

cypress/integration/rendering/zenuml.spec.js

@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util.ts';
+import { imgSnapshotTest } from '../../helpers/util.js';
 
 describe('Zen UML', () => {
   it('Basic Zen UML diagram', () => {

cypress/platform/e2e.html

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

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

@@ -11,7 +11,8 @@ 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 './mermaid-example-diagram.esm.mjs';
+      import exampleDiagram from '../../packages/mermaid-example-diagram/dist/mermaid-example-diagram.core.mjs';
+      // import example from '../../packages/mermaid-example-diagram/src/detector';
       import mermaid from './mermaid.esm.mjs';
 
       await mermaid.registerExternalDiagrams([exampleDiagram]);

cypress/platform/iife.html

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

cypress/platform/interaction.html

@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8" />
@@ -17,20 +17,20 @@
     graph TB
       Function-->URL
       click Function clickByFlow "Add a div"
-      click URL "http://localhost:9000/info.html" "Visit <strong>mermaid docs</strong>"
+      click URL "http://localhost:9000/webpackUsage.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/info.html" "Visit <strong>mermaid docs</strong>"
+    click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
       </pre>
 
       <pre id="FirstLine" class="mermaid2">
   classDiagram
     class Test
     class ShapeLink
-    link ShapeLink "http://localhost:9000/info.html" "This is a tooltip for a link"
+    link ShapeLink "http://localhost:9000/webpackUsage.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/info.html" "This is a tooltip for a link"
+    link ShapeLink "http://localhost:9000/webpackUsage.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/info.html"
+    click cl1 href "http://localhost:9000/webpackUsage.html"
     click cl2 call clickByGantt()
     click cl3 call clickByGantt("test1", test2, test3)
 
@@ -102,15 +102,9 @@
         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);
       }

cypress/platform/knsv2.html

@@ -58,23 +58,6 @@
   </head>
   <body>
     <pre id="diagram" class="mermaid">
-      flowchart
-        classDef mainCategories fill:#f9d5e5, stroke:#233d4d,stroke-width:2px, font-weight:bold;
-        CS(Customer Awareness Journey):::mainCategories
-      </pre
-    >
-    <pre id="diagram" class="mermaid">
-flowchart
-Node1:::class1 --> Node2:::class2
-Node1:::class1 --> Node3:::class2
-Node3 --> Node4((I am a circle)):::larger
-
-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 --> [*]
@@ -90,7 +73,7 @@ flowchart RL
       a1 -- l2 --> a2
     end
     </pre>
-    <pre id="diagram" class="mermaid2">
+    <pre id="diagram" class="mermaid">
 flowchart RL
     subgraph "`one`"
       a1 -- l1 --> a2
@@ -115,11 +98,11 @@ flowchart LR
         way`"]
   </pre
     >
-    <pre id="diagram" class="mermaid2">
+    <pre id="diagram" class="mermaid">
       classDiagram-v2
         note "I love this diagram!\nDo you love it?"
     </pre>
-    <pre id="diagram" class="mermaid2">
+    <pre id="diagram" class="mermaid">
     stateDiagram-v2
     State1: The state with a note with minus - and plus + in it
     note left of State1
@@ -164,7 +147,7 @@ mindmap
       शान्तिः سلام  和平 `"]
 
     </pre>
-    <pre id="diagram" class="mermaid2">
+    <pre id="diagram" class="mermaid">
 %%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
 flowchart TB
   %% I could not figure out how to use double quotes in labels in Mermaid
@@ -416,31 +399,21 @@ mindmap
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };
-      // mermaid.initialize({
-      //   // theme: 'forest',
-      //   startOnLoad: true,
-      //   logLevel: 0,
-      //   flowchart: {
-      //     // defaultRenderer: 'elk',
-      //     useMaxWidth: false,
-      //     // htmlLabels: false,
-      //     htmlLabels: true,
-      //   },
-      //   // htmlLabels: false,
-      //   gantt: {
-      //     useMaxWidth: false,
-      //   },
-      //   useMaxWidth: false,
-      // });
       mermaid.initialize({
-        flowchart: { titleTopMargin: 10 },
-        fontFamily: 'courier',
-        sequence: {
-          actorFontFamily: 'courier',
-          noteFontFamily: 'courier',
-          messageFontFamily: 'courier',
+        // theme: 'forest',
+        startOnLoad: true,
+        logLevel: 0,
+        flowchart: {
+          // defaultRenderer: 'elk',
+          useMaxWidth: false,
+          // htmlLabels: false,
+          htmlLabels: true,
         },
-        fontSize: 16,
+        // htmlLabels: false,
+        gantt: {
+          useMaxWidth: false,
+        },
+        useMaxWidth: false,
       });
       function callback() {
         alert('It worked');

cypress/platform/viewer.js

@@ -1,6 +1,6 @@
-import mermaid from './mermaid.esm.mjs';
-import externalExample from './mermaid-example-diagram.esm.mjs';
-import zenUml from './mermaid-zenuml.esm.mjs';
+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';
 
 function b64ToUtf8(str) {
   return decodeURIComponent(escape(window.atob(str)));
@@ -45,9 +45,9 @@ const contentLoaded = async function () {
       document.getElementsByTagName('body')[0].appendChild(div);
     }
 
-    await mermaid.registerExternalDiagrams([externalExample, zenUml]);
-    mermaid.initialize(graphObj.mermaid);
-    await mermaid.run();
+    await mermaid2.registerExternalDiagrams([externalExample, zenUml]);
+    mermaid2.initialize(graphObj.mermaid);
+    await mermaid2.run();
   }
 };
 
@@ -95,14 +95,18 @@ const contentLoadedApi = async function () {
         divs[i] = div;
       }
 
-      const defaultE2eCnf = { theme: 'forest', startOnLoad: false };
+      const defaultE2eCnf = { theme: 'forest' };
 
       const cnf = merge(defaultE2eCnf, graphObj.mermaid);
 
-      mermaid.initialize(cnf);
+      mermaid2.initialize(cnf);
 
       for (let i = 0; i < numCodes; i++) {
-        const { svg, bindFunctions } = await mermaid.render('newid' + i, graphObj.code[i], divs[i]);
+        const { svg, bindFunctions } = await mermaid2.render(
+          'newid' + i,
+          graphObj.code[i],
+          divs[i]
+        );
         div.innerHTML = svg;
         bindFunctions(div);
       }
@@ -110,21 +114,18 @@ const contentLoadedApi = async function () {
       const div = document.createElement('div');
       div.id = 'block';
       div.className = 'mermaid';
-      console.warn('graphObj', graphObj);
+      console.warn('graphObj.mermaid', graphObj.mermaid);
       document.getElementsByTagName('body')[0].appendChild(div);
-      mermaid.initialize(graphObj.mermaid);
-      const { svg, bindFunctions } = await mermaid.render('newid', graphObj.code, div);
+      mermaid2.initialize(graphObj.mermaid);
+
+      const { svg, bindFunctions } = await mermaid2.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
    */
@@ -139,6 +140,6 @@ if (typeof document !== 'undefined') {
         void contentLoaded().finally(markRendered);
       }
     },
-    false,
+    false
   );
 }

cypress/platform/webpackUsage.html

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

cypress/platform/xss.html

@@ -1,5 +1,6 @@
 <html>
   <head>
+    <script src="./viewer.js" type="module"></script>
     <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
     <style>
       .malware {
@@ -32,6 +33,12 @@
     </script>
   </head>
   <body>
-    <script type="module" src="./viewer.js"></script>
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
+      mermaid.initialize({
+        startOnLoad: false,
+        useMaxWidth: true,
+      });
+    </script>
   </body>
 </html>

cypress/tsconfig.json

@@ -2,9 +2,7 @@
   "compilerOptions": {
     "target": "es2020",
     "lib": ["es2020", "dom"],
-    "types": ["cypress", "node"],
-    "allowImportingTsExtensions": true,
-    "noEmit": true
+    "types": ["cypress", "node"]
   },
   "include": ["**/*.ts"]
 }

demos/dev/example.html

@@ -1,38 +0,0 @@
-<!--Do not edit this file-->
-<!--Duplicate this file to any name you like, run `pnpm dev`, open http://localhost:9000/dev/name.html to view-->
-<html>
-  <head>
-    <title>Mermaid development page</title>
-  </head>
-  <body>
-    <pre class="mermaid">info</pre>
-
-    <pre id="diagram" class="mermaid">
-graph TB
-      a --> b
-      a --> c
-      b --> d
-      c --> d
-    </pre>
-
-    <div id="dynamicDiagram"></div>
-
-    <script type="module">
-      import mermaid from '/mermaid.esm.mjs';
-      mermaid.parseError = function (err, hash) {
-        console.error('Mermaid error: ', err);
-      };
-      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;
-    </script>
-
-    <script src="/dev/reload.js"></script>
-  </body>
-</html>

demos/dev/reload.js

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

demos/er.html

@@ -21,8 +21,6 @@
     <pre class="mermaid">
       ---
       title: This is a title
-      config:
-        theme: forest
       ---
       erDiagram
         %% title This is a title

demos/flowchart.html

@@ -123,13 +123,6 @@
 
     <h3>flowchart</h3>
     <pre class="mermaid">
-    ---
-    title: This is another complicated flow
-    config:
-      theme: base
-      flowchart:
-        curve: cardinal
-    ---
     flowchart LR
     sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
 

demos/pie.html

@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
@@ -7,6 +7,7 @@
     <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
     <style>
       div.mermaid {
+        /* font-family: 'trebuchet ms', verdana, arial; */
         font-family: 'Courier New', Courier, monospace !important;
       }
     </style>
@@ -16,32 +17,37 @@
     <h1>Pie chart demos</h1>
     <pre class="mermaid">
       pie title Pets adopted by volunteers
-        accTitle: simple pie char demo
-        accDescr: pie chart with 3 sections: dogs, cats, rats. Most are dogs.
-        "Dogs": 386
-        "Cats": 85
-        "Rats": 15
+      accTitle: simple pie char demo
+      accDescr: pie chart with 3 sections: dogs, cats, rats. Most are dogs.
+    "Dogs" : 386
+    "Cats" : 85
+    "Rats" : 15
     </pre>
 
     <hr />
     <pre class="mermaid">
-      %%{init: {"pie": {"textPosition": 0.9}, "themeVariables": {"pieOuterStrokeWidth": "5px"}}}%%
-      pie
-        title Key elements in Product X
+    %%{init: {"pie": {"textPosition": 0.9}, "themeVariables": {"pieOuterStrokeWidth": "5px"}} }%%
+    pie
+      title Key elements in Product X
         accTitle: Key elements in Product X
-        accDescr: This is a pie chart showing the key elements in Product X.
-        "Calcium": 42.96
-        "Potassium": 50.05
-        "Magnesium": 10.01
-        "Iron": 5
+      accDescr: This is a pie chart showing the key elements in Product X.
+      "Calcium" : 42.96
+      "Potassium" : 50.05
+      "Magnesium" : 10.01
+      "Iron" :  5
     </pre>
 
     <script type="module">
-      import mermaid from '/mermaid.esm.mjs';
+      import mermaid from './mermaid.esm.mjs';
       mermaid.initialize({
         theme: 'forest',
+        // themeCSS: '.node rect { fill: red; }',
         logLevel: 3,
         securityLevel: 'loose',
+        // flowchart: { curve: 'basis' },
+        // gantt: { axisFormat: '%m/%d/%Y' },
+        sequence: { actorMargin: 50 },
+        // sequenceDiagram: { actorMargin: 300 } // deprecated
       });
     </script>
   </body>

docker-compose.yml

@@ -1,7 +1,7 @@
 version: '3.9'
 services:
   mermaid:
-    image: node:18.17.1-alpine3.18
+    image: node:18.16.1-alpine3.18
     stdin_open: true
     tty: true
     working_dir: /mermaid
@@ -17,7 +17,7 @@ services:
       - 9000:9000
       - 3333:3333
   cypress:
-    image: cypress/included:12.17.4
+    image: cypress/included:12.16.0
     stdin_open: true
     tty: true
     working_dir: /mermaid

docs/community/development.md

@@ -70,21 +70,7 @@ pnpm test
 
 The `test` script and others are in the top-level `package.json` file.
 
-All tests should run successfully without any errors or failures. (You might see _lint_ or _formatting_ "warnings"; those are ok during this step.)
-
-#### 4. Make your changes
-
-Now you are ready to make your changes!
-Edit whichever files in `src` as required.
-
-#### 5. See your changes
-
-Open <http://localhost:9000> in your browser, after starting the dev server.
-There is a list of demos that can be used to see and test your changes.
-
-If you need a specific diagram, you can duplicate the `example.html` file in `/demos/dev` and add your own mermaid code to your copy.
-That will be served at <http://localhost:9000/dev/your-file-name.html>.
-After making code changes, the dev server will rebuild the mermaid library. You will need to reload the browser page yourself to see the changes. (PRs for auto reload are welcome!)
+All tests should run successfully without any errors or failures. (You might see _lint_ or _formatting_ warnings; those are ok during this step.)
 
 ### Docker
 
@@ -237,9 +223,6 @@ If the users have no way to know that things have changed, then you haven't real
 Likewise, if users don't know that there is a new feature that you've implemented, it will forever remain unknown and unused.
 
 The documentation has to be updated to users know that things have changed and added!
-If you are adding a new feature, add `(v<MERMAID_RELEASE_VERSION>+)` in the title or description. It will be replaced automatically with the current version number when the release happens.
-
-eg: `# Feature Name (v<MERMAID_RELEASE_VERSION>+)`
 
 We know it can sometimes be hard to code _and_ write user documentation.
 

docs/community/newDiagram.md

@@ -10,7 +10,7 @@
 
 #### Grammar
 
-This would be to define a JISON grammar for the new diagram type. That should start with a way to identify that the text in the mermaid tag is a diagram of that type. Create a new folder under diagrams for your new diagram type and a parser folder in it. This leads us to step 2.
+This would be to define a jison grammar for the new diagram type. That should start with a way to identify that the text in the mermaid tag is a diagram of that type. Create a new folder under diagrams for your new diagram type and a parser folder in it. This leads us to step 2.
 
 For instance:
 
@@ -60,7 +60,7 @@ Place the renderer in the diagram folder.
 
 ### Step 3: Detection of the new diagram type
 
-The second thing to do is to add the capability to detect the new diagram to type to the detectType in `diagram-api/detectType.ts`. The detection should return a key for the new diagram type.
+The second thing to do is to add the capability to detect the new diagram to type to the detectType in utils.js. The detection should return a key for the new diagram type.
 [This key will be used to as the aria roledescription](#aria-roledescription), so it should be a word that clearly describes the diagram type.
 For example, if your new diagram use a UML deployment diagram, a good key would be "UMLDeploymentDiagram" because assistive technologies such as a screen reader
 would voice that as "U-M-L Deployment diagram." Another good key would be "deploymentDiagram" because that would be voiced as "Deployment Diagram." A bad key would be "deployment" because that would not sufficiently describe the diagram.
@@ -124,6 +124,53 @@ There are a few features that are common between the different types of diagrams
 
 Here some pointers on how to handle these different areas.
 
+#### [Directives](../config/directives.md)
+
+Here is example handling from flowcharts:
+Jison:
+
+```jison
+/* lexical grammar */
+%lex
+%x open_directive
+%x type_directive
+%x arg_directive
+%x close_directive
+
+\%\%\{                                                          { this.begin('open_directive'); return 'open_directive'; }
+<open_directive>((?:(?!\}\%\%)[^:.])*)                          { this.begin('type_directive'); return 'type_directive'; }
+<type_directive>":"                                             { this.popState(); this.begin('arg_directive'); return ':'; }
+<type_directive,arg_directive>\}\%\%                            { this.popState(); this.popState(); return 'close_directive'; }
+<arg_directive>((?:(?!\}\%\%).|\n)*)                            return 'arg_directive';
+
+/* language grammar */
+
+/* ... */
+
+directive
+  : openDirective typeDirective closeDirective separator
+  | openDirective typeDirective ':' argDirective closeDirective separator
+  ;
+
+openDirective
+  : open_directive { yy.parseDirective('%%{', 'open_directive'); }
+  ;
+
+typeDirective
+  : type_directive { yy.parseDirective($1, 'type_directive'); }
+  ;
+
+argDirective
+  : arg_directive { $1 = $1.trim().replace(/'/g, '"'); yy.parseDirective($1, 'arg_directive'); }
+  ;
+
+closeDirective
+  : close_directive { yy.parseDirective('}%%', 'close_directive', 'flowchart'); }
+  ;
+```
+
+It is probably a good idea to keep the handling similar to this in your new diagram. The parseDirective function is provided by the mermaidAPI.
+
 ## Accessibility
 
 Mermaid automatically adds the following accessibility information for the diagram SVG HTML element:
@@ -142,7 +189,7 @@ See [the definition of aria-roledescription](https://www.w3.org/TR/wai-aria-1.1/
 
 The syntax for accessible titles and descriptions is described in [the Accessibility documenation section.](../config/accessibility.md)
 
-As a design goal, the jison syntax should be similar between the diagrams.
+In a similar way to the directives, the jison syntax are quite similar between the diagrams.
 
 ```jison
 

docs/config/configuration.md

@@ -10,41 +10,10 @@ When mermaid starts, configuration is extracted to determine a configuration to
 
 - The default configuration
 - Overrides at the site level are set by the initialize call, and will be applied to all diagrams in the site/app. The term for this is the **siteConfig**.
-- Frontmatter (v\<MERMAID_RELEASE_VERSION>+) - diagram authors can update select configuration parameters in the frontmatter of the diagram. These are applied to the render config.
-- Directives (Deprecated by Frontmatter) - diagram authors can update select configuration parameters directly in the diagram code via directives. These are applied to the render config.
+- Directives - diagram authors can update select configuration parameters directly in the diagram code via directives. These are applied to the render config.
 
 **The render config** is configuration that is used when rendering by applying these configurations.
 
-## Frontmatter config
-
-The entire mermaid configuration (except the secure configs) can be overridden by the diagram author in the frontmatter of the diagram. The frontmatter is a YAML block at the top of the diagram.
-
-```mermaid-example
----
-title: Hello Title
-config:
-  theme: base
-  themeVariables:
-    primaryColor: "#00ff00"
----
-flowchart
-	Hello --> World
-
-```
-
-```mermaid
----
-title: Hello Title
-config:
-  theme: base
-  themeVariables:
-    primaryColor: "#00ff00"
----
-flowchart
-	Hello --> World
-
-```
-
 ## Theme configuration
 
 ## Starting mermaid

docs/config/directives.md

@@ -6,9 +6,6 @@
 
 # Directives
 
-> **Warning**
-> Directives are deprecated from v\<MERMAID_RELEASE_VERSION>. Please use the `config` key in frontmatter to pass configuration. See [Configuration](./configuration.md) for more details.
-
 ## Directives
 
 Directives give a diagram author the capability to alter the appearance of a diagram before rendering by changing the applied configuration.

docs/config/setup/interfaces/mermaidAPI.ParseOptions.md

@@ -16,4 +16,4 @@
 
 #### Defined in
 
-[mermaidAPI.ts:78](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L78)
+[mermaidAPI.ts:77](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L77)

docs/config/setup/interfaces/mermaidAPI.RenderResult.md

@@ -39,7 +39,7 @@ bindFunctions?.(div); // To call bindFunctions only if it's present.
 
 #### Defined in
 
-[mermaidAPI.ts:98](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L98)
+[mermaidAPI.ts:97](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L97)
 
 ---
 
@@ -51,4 +51,4 @@ The svg code for the rendered graph.
 
 #### Defined in
 
-[mermaidAPI.ts:88](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L88)
+[mermaidAPI.ts:87](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L87)

docs/config/setup/modules/config.md

@@ -14,7 +14,7 @@
 
 #### Defined in
 
-[config.ts:8](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L8)
+[config.ts:7](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L7)
 
 ## Functions
 
@@ -26,9 +26,9 @@ Pushes in a directive to the configuration
 
 #### Parameters
 
-| Name        | Type            | Description              |
-| :---------- | :-------------- | :----------------------- |
-| `directive` | `MermaidConfig` | The directive to push in |
+| Name        | Type  | Description              |
+| :---------- | :---- | :----------------------- |
+| `directive` | `any` | The directive to push in |
 
 #### Returns
 
@@ -36,7 +36,7 @@ Pushes in a directive to the configuration
 
 #### Defined in
 
-[config.ts:188](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L188)
+[config.ts:191](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L191)
 
 ---
 
@@ -60,7 +60,7 @@ The currentConfig
 
 #### Defined in
 
-[config.ts:131](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L131)
+[config.ts:137](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L137)
 
 ---
 
@@ -118,7 +118,7 @@ The siteConfig
 
 #### Defined in
 
-[config.ts:218](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L218)
+[config.ts:223](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L223)
 
 ---
 
@@ -147,7 +147,7 @@ options in-place
 
 #### Defined in
 
-[config.ts:146](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L146)
+[config.ts:152](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L152)
 
 ---
 
@@ -242,10 +242,10 @@ The new siteConfig
 
 #### Parameters
 
-| Name          | Type               |
-| :------------ | :----------------- |
-| `siteCfg`     | `MermaidConfig`    |
-| `_directives` | `MermaidConfig`\[] |
+| Name          | Type            |
+| :------------ | :-------------- |
+| `siteCfg`     | `MermaidConfig` |
+| `_directives` | `any`\[]        |
 
 #### Returns
 
@@ -253,7 +253,7 @@ The new siteConfig
 
 #### Defined in
 
-[config.ts:15](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L15)
+[config.ts:14](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L14)
 
 ---
 

docs/config/setup/modules/defaultConfig.md

@@ -10,24 +10,47 @@
 
 ### configKeys
 
-• `Const` **configKeys**: `Set`<`string`>
+• `Const` **configKeys**: `string`\[]
 
 #### Defined in
 
-[defaultConfig.ts:268](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L268)
+[defaultConfig.ts:2300](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L2300)
 
 ---
 
 ### default
 
-• `Const` **default**: `RequiredDeep`<`MermaidConfig`>
+• `Const` **default**: `Partial`<`MermaidConfig`>
 
-Default mermaid configuration options.
+**Configuration methods in Mermaid version 8.6.0 have been updated, to learn more\[[click
+here](8.6.0_docs.md)].**
 
-Please see the Mermaid config JSON Schema for the default JSON values.
-Non-JSON JS default values are listed in this file, e.g. functions, or
-`undefined` (explicitly set so that `configKeys` finds them).
+## **What follows are config instructions for older versions**
+
+These are the default options which can be overridden with the initialization call like so:
+
+**Example 1:**
+
+```js
+mermaid.initialize({ flowchart: { htmlLabels: false } });
+```
+
+**Example 2:**
+
+```html
+<script>
+  const config = {
+    startOnLoad: true,
+    flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
+    securityLevel: 'loose',
+  };
+  mermaid.initialize(config);
+</script>
+```
+
+A summary of all options and their defaults is found [here](#mermaidapi-configuration-defaults).
+A description of each option follows below.
 
 #### Defined in
 
-[defaultConfig.ts:18](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L18)
+[defaultConfig.ts:33](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L33)

docs/config/setup/modules/mermaidAPI.md

@@ -25,7 +25,7 @@ Renames and re-exports [mermaidAPI](mermaidAPI.md#mermaidapi)
 
 #### Defined in
 
-[mermaidAPI.ts:82](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L82)
+[mermaidAPI.ts:81](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L81)
 
 ## Variables
 
@@ -96,7 +96,7 @@ mermaid.initialize(config);
 
 #### Defined in
 
-[mermaidAPI.ts:673](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L673)
+[mermaidAPI.ts:663](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L663)
 
 ## Functions
 
@@ -127,7 +127,7 @@ Return the last node appended
 
 #### Defined in
 
-[mermaidAPI.ts:310](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L310)
+[mermaidAPI.ts:308](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L308)
 
 ---
 
@@ -320,4 +320,4 @@ Remove any existing elements from the given document
 
 #### Defined in
 
-[mermaidAPI.ts:360](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L360)
+[mermaidAPI.ts:358](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L358)

docs/config/usage.md

@@ -64,7 +64,7 @@ Example:
 
 ```html
 <script type="module">
-  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
+  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
 </script>
 ```
 
@@ -83,7 +83,7 @@ Example:
       B-->D(fa:fa-spinner);
     </pre>
     <script type="module">
-      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
+      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
     </script>
   </body>
 </html>
@@ -228,7 +228,7 @@ mermaid fully supports webpack. Here is a [working demo](https://github.com/merm
 
 The main idea of the API is to be able to call a render function with the graph definition as a string. The render function will render the graph and call a callback with the resulting SVG code. With this approach it is up to the site creator to fetch the graph definition from the site (perhaps from a textarea), render it and place the graph somewhere in the site.
 
-The example below shows an example of how this could be used. The example just logs the resulting SVG to the JavaScript console.
+The example below show an outline of how this could be used. The example just logs the resulting SVG to the JavaScript console.
 
 ```html
 <script type="module">

docs/ecosystem/integrations.md

@@ -187,7 +187,6 @@ They also serve as proof of concept, for the variety of things that can be built
 - [mdbook](https://rust-lang.github.io/mdBook/index.html)
   - [mdbook-mermaid](https://github.com/badboy/mdbook-mermaid)
 - [Quarto](https://quarto.org/)
-- [Typora](https://typora.io/) ([Native support](https://support.typora.io/Draw-Diagrams-With-Markdown/#mermaid))
 
 ## Browser Extensions
 

docs/intro/index.md

@@ -14,12 +14,8 @@ It is a JavaScript based diagramming and charting tool that renders Markdown-ins
 
 <img src="/header.png" alt="" />
 
-<div class='badges'>
-
 [![Build CI Status](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![npm minified gzipped bundle size](https://img.shields.io/bundlephobia/minzip/mermaid)](https://bundlephobia.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid) [![NPM](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) [![Twitter Follow](https://img.shields.io/twitter/follow/mermaidjs_?style=social)](https://twitter.com/mermaidjs_)
 
-</div>
-
 <!-- Mermaid book banner -->
 
 [![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!](img/book-banner-post-release.jpg)](https://mermaid-js.github.io/mermaid/landing/)
@@ -289,7 +285,7 @@ To select a version:
 
 Replace `<version>` with the desired version number.
 
-Latest Version: <https://cdn.jsdelivr.net/npm/mermaid@11>
+Latest Version: <https://cdn.jsdelivr.net/npm/mermaid@10>
 
 ## Deploying Mermaid
 
@@ -307,7 +303,7 @@ To Deploy Mermaid:
 
 ```html
 <script type="module">
-  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
+  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
   mermaid.initialize({ startOnLoad: true });
 </script>
 ```
@@ -391,13 +387,7 @@ The above command generates files into the `dist` folder and publishes them to \
 - [Live Editor](https://github.com/mermaid-js/mermaid-live-editor)
 - [HTTP Server](https://github.com/TomWright/mermaid-server)
 
-## Contributors
-
-<div class='badges'>
-
-[![Good first issue](https://img.shields.io/github/labels/mermaid-js/mermaid/Good%20first%20issue%21)](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Good+first+issue%21%22) [![Contributors](https://img.shields.io/github/contributors/mermaid-js/mermaid)](https://github.com/mermaid-js/mermaid/graphs/contributors) [![Commits](https://img.shields.io/github/commit-activity/m/mermaid-js/mermaid)](https://github.com/mermaid-js/mermaid/graphs/contributors)
-
-</div>
+## Contributors [![Good first issue](https://img.shields.io/github/labels/mermaid-js/mermaid/Good%20first%20issue%21)](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Good+first+issue%21%22) [![Contributors](https://img.shields.io/github/contributors/mermaid-js/mermaid)](https://github.com/mermaid-js/mermaid/graphs/contributors) [![Commits](https://img.shields.io/github/commit-activity/m/mermaid-js/mermaid)](https://github.com/mermaid-js/mermaid/graphs/contributors)
 
 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.
 
@@ -432,14 +422,20 @@ A quick note from Knut Sveidqvist:
 _Mermaid was created by Knut Sveidqvist for easier documentation._
 
 <style scoped>
- .badges > p {
-    display: flex;
-  }
-  .badges > p > a {
-    margin: 0 0.5rem;
+  #contributors + p,
+  #about-mermaid + p + p + blockquote + img + p
+  {
+    display: flex
   }
 
-  .dark #VPContent > div > div > div.content > div > main > div > div > img {
+  #contributors + p a,
+  #about-mermaid + p + p + blockquote + img + p a
+  {
+    margin: 0 0.5rem
+  }
+
+  .dark #VPContent > div > div > div.content > div > main > div > div > img
+  {
     filter: invert(1) hue-rotate(217deg)  contrast(0.72);
   }
 </style>

docs/intro/n00b-gettingStarted.md

@@ -128,7 +128,7 @@ b. The importing of mermaid library through the `mermaid.esm.mjs` or `mermaid.es
 ```html
 <body>
   <script type="module">
-    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
+    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
     mermaid.initialize({ startOnLoad: true });
   </script>
 </body>
@@ -168,7 +168,7 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. However, doi
     </pre>
 
     <script type="module">
-      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
+      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
       mermaid.initialize({ startOnLoad: true });
     </script>
   </body>

docs/news/announcements.md

@@ -6,8 +6,8 @@
 
 # Announcements
 
-## [From Chaos to Clarity: Exploring Mind Maps with MermaidJS](https://www.mermaidchart.com/blog/posts/from-chaos-to-clarity-exploring-mind-maps-with-mermaidjs)
+## [Sequence diagrams, the only good thing UML brought to software development](https://www.mermaidchart.com/blog/posts/sequence-diagrams-the-good-thing-uml-brought-to-software-development/)
 
-24 July 2023 · 4 mins
+15 June 2023 · 12 mins
 
-Introducing the concept of mind mapping as a tool for organizing complex information, and highlights Mermaid as a user-friendly software that simplifies the creation and editing of mind maps for applications in IT solution design, business decision-making, and knowledge organization.
+Sequence diagrams really shine when you’re documenting different parts of a system and the various ways these parts interact with each other.

docs/news/blog.md

@@ -6,24 +6,6 @@
 
 # Blog
 
-## [From Chaos to Clarity: Exploring Mind Maps with MermaidJS](https://www.mermaidchart.com/blog/posts/from-chaos-to-clarity-exploring-mind-maps-with-mermaidjs)
-
-24 July 2023 · 4 mins
-
-Introducing the concept of mind mapping as a tool for organizing complex information, and highlights Mermaid as a user-friendly software that simplifies the creation and editing of mind maps for applications in IT solution design, business decision-making, and knowledge organization.
-
-## [Mermaid Chart Announces Visual Studio Code Plugin to Simplify Development Workflows](https://www.mermaidchart.com/blog/posts/mermaid-chart-announces-visual-studio-code-plugin)
-
-17 July 2023 · 3 mins
-
-New Integration Enhances Workflows By Enabling Developers To Reference And Edit Diagrams Within Visual Studio Code.
-
-## [Mermaid Chart’s ChatGPT Plugin Combines Generative AI and Smart Diagramming For Users](https://www.mermaidchart.com/blog/posts/mermaid-chart-chatgpt-plugin-combines-generative-ai-and-smart-diagramming)
-
-29 June 2023 · 4 mins
-
-Mermaid Chart’s new ChatGPT plugin integrates AI-powered text prompts with Mermaid’s intuitive diagramming editor, enabling users to generate, edit, and share complex diagrams with ease and efficiency.
-
 ## [Sequence diagrams, the only good thing UML brought to software development](https://www.mermaidchart.com/blog/posts/sequence-diagrams-the-good-thing-uml-brought-to-software-development/)
 
 15 June 2023 · 12 mins

docs/syntax/c4c.md

@@ -2,13 +2,13 @@
 >
 > ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
 >
-> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/c4.md](../../packages/mermaid/src/docs/syntax/c4.md).
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/c4c.md](../../packages/mermaid/src/docs/syntax/c4c.md).
 
 # C4 Diagrams
 
 > C4 Diagram: This is an experimental diagram for now. The syntax and properties can change in future releases. Proper documentation will be provided when the syntax is stable.
 
-Mermaid's C4 diagram syntax is compatible with plantUML. See example below:
+Mermaid's c4 diagram syntax is compatible with plantUML. See example below:
 
 ```mermaid-example
     C4Context
@@ -114,7 +114,7 @@ For an example, see the source code demos/index.html
 - Dynamic diagram (C4Dynamic)
 - Deployment diagram (C4Deployment)
 
-Please refer to the linked document [C4-PlantUML syntax](https://github.com/plantuml-stdlib/C4-PlantUML/blob/master/README.md) for how to write the C4 diagram.
+Please refer to the linked document [C4-PlantUML syntax](https://github.com/plantuml-stdlib/C4-PlantUML/blob/master/README.md) for how to write the c4 diagram.
 
 C4 diagram is fixed style, such as css color, so different css is not provided under different skins.
 updateElementStyle and UpdateElementStyle are written in the diagram last part. updateElementStyle is inconsistent with the original definition and updates the style of the relationship, including the offset of the text label relative to the original position.
@@ -123,10 +123,10 @@ The layout does not use a fully automated layout algorithm. The position of shap
 The number of shapes per row and the number of boundaries can be adjusted using UpdateLayoutConfig.
 
 - Layout
-  - Lay_U, Lay_Up
-  - Lay_D, Lay_Down
-  - Lay_L, Lay_Left
-  - Lay_R, Lay_Right
+- - Lay_U, Lay_Up
+- - Lay_D, Lay_Down
+- - Lay_L, Lay_Left
+- - Lay_R, Lay_Right
 
 The following unfinished features are not supported in the short term.
 
@@ -140,70 +140,111 @@ The following unfinished features are not supported in the short term.
 
 - [x] System Context
 
-  - [x] Person(alias, label, ?descr, ?sprite, ?tags, $link)
-  - [x] Person_Ext
-  - [x] System(alias, label, ?descr, ?sprite, ?tags, $link)
-  - [x] SystemDb
-  - [x] SystemQueue
-  - [x] System_Ext
-  - [x] SystemDb_Ext
-  - [x] SystemQueue_Ext
-  - [x] Boundary(alias, label, ?type, ?tags, $link)
-  - [x] Enterprise_Boundary(alias, label, ?tags, $link)
-  - [x] System_Boundary
+- - [x] Person(alias, label, ?descr, ?sprite, ?tags, $link)
+
+- - [x] Person_Ext
+
+- - [x] System(alias, label, ?descr, ?sprite, ?tags, $link)
+
+- - [x] SystemDb
+
+- - [x] SystemQueue
+
+- - [x] System_Ext
+
+- - [x] SystemDb_Ext
+
+- - [x] SystemQueue_Ext
+
+- - [x] Boundary(alias, label, ?type, ?tags, $link)
+
+- - [x] Enterprise_Boundary(alias, label, ?tags, $link)
+
+- - [x] System_Boundary
 
 - [x] Container diagram
 
-  - [x] Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
-  - [x] ContainerDb
-  - [x] ContainerQueue
-  - [x] Container_Ext
-  - [x] ContainerDb_Ext
-  - [x] ContainerQueue_Ext
-  - [x] Container_Boundary(alias, label, ?tags, $link)
+- - [x] Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
+
+- - [x] ContainerDb
+
+- - [x] ContainerQueue
+
+- - [x] Container_Ext
+
+- - [x] ContainerDb_Ext
+
+- - [x] ContainerQueue_Ext
+
+- - [x] Container_Boundary(alias, label, ?tags, $link)
 
 - [x] Component diagram
 
-  - [x] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
-  - [x] ComponentDb
-  - [x] ComponentQueue
-  - [x] Component_Ext
-  - [x] ComponentDb_Ext
-  - [x] ComponentQueue_Ext
+- - [x] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
+
+- - [x] ComponentDb
+
+- - [x] ComponentQueue
+
+- - [x] Component_Ext
+
+- - [x] ComponentDb_Ext
+
+- - [x] ComponentQueue_Ext
 
 - [x] Dynamic diagram
 
-  - [x] RelIndex(index, from, to, label, ?tags, $link)
+- - [x] RelIndex(index, from, to, label, ?tags, $link)
 
 - [x] Deployment diagram
 
-  - [x] Deployment_Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link)
-  - [x] Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link): short name of Deployment_Node()
-  - [x] Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, $link): left aligned Node()
-  - [x] Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): right aligned Node()
+- - [x] Deployment_Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link)
+
+- - [x] Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link): short name of Deployment_Node()
+
+- - [x] Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, $link): left aligned Node()
+
+- - [x] Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): right aligned Node()
 
 - [x] Relationship Types
 
-  - [x] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link)
-  - [x] BiRel (bidirectional relationship)
-  - [x] Rel_U, Rel_Up
-  - [x] Rel_D, Rel_Down
-  - [x] Rel_L, Rel_Left
-  - [x] Rel_R, Rel_Right
-  - [x] Rel_Back
-  - [x] RelIndex \* Compatible with C4-Plantuml syntax, but ignores the index parameter. The sequence number is determined by the order in which the rel statements are written.
+- - [x] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link)
+
+- - [x] BiRel (bidirectional relationship)
+
+- - [x] Rel_U, Rel_Up
+
+- - [x] Rel_D, Rel_Down
+
+- - [x] Rel_L, Rel_Left
+
+- - [x] Rel_R, Rel_Right
+
+- - [x] Rel_Back
+
+- - [x] RelIndex \* Compatible with C4-Plantuml syntax, but ignores the index parameter. The sequence number is determined by the order in which the rel statements are written.
 
 - [ ] Custom tags/stereotypes support and skin param updates
-  - [ ] AddElementTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new element tag. The styles of the tagged elements are updated and the tag is displayed in the calculated legend.
-  - [ ] AddRelTag(tagStereo, ?textColor, ?lineColor, ?lineStyle, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new Relationship tag. The styles of the tagged relationships are updated and the tag is displayed in the calculated legend.
-  - [x] UpdateElementStyle(elementName, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): This call updates the default style of the elements (component, ...) and creates no additional legend entry.
-  - [x] UpdateRelStyle(from, to, ?textColor, ?lineColor, ?offsetX, ?offsetY): This call updates the default relationship colors and creates no additional legend entry. Two new parameters, offsetX and offsetY, are added to set the offset of the original position of the text.
-  - [ ] RoundedBoxShape(): This call returns the name of the rounded box shape and can be used as ?shape argument.
-  - [ ] EightSidedShape(): This call returns the name of the eight sided shape and can be used as ?shape argument.
-  - [ ] DashedLine(): This call returns the name of the dashed line and can be used as ?lineStyle argument.
-  - [ ] DottedLine(): This call returns the name of the dotted line and can be used as ?lineStyle argument.
-  - [ ] BoldLine(): This call returns the name of the bold line and can be used as ?lineStyle argument.
-  - [x] UpdateLayoutConfig(?c4ShapeInRow, ?c4BoundaryInRow): New. This call updates the default c4ShapeInRow(4) and c4BoundaryInRow(2).
+
+- - [ ] AddElementTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new element tag. The styles of the tagged elements are updated and the tag is displayed in the calculated legend.
+
+- - [ ] AddRelTag(tagStereo, ?textColor, ?lineColor, ?lineStyle, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new Relationship tag. The styles of the tagged relationships are updated and the tag is displayed in the calculated legend.
+
+- - [x] UpdateElementStyle(elementName, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): This call updates the default style of the elements (component, ...) and creates no additional legend entry.
+
+- - [x] UpdateRelStyle(from, to, ?textColor, ?lineColor, ?offsetX, ?offsetY): This call updates the default relationship colors and creates no additional legend entry. Two new parameters, offsetX and offsetY, are added to set the offset of the original position of the text.
+
+- - [ ] RoundedBoxShape(): This call returns the name of the rounded box shape and can be used as ?shape argument.
+
+- - [ ] EightSidedShape(): This call returns the name of the eight sided shape and can be used as ?shape argument.
+
+- - [ ] DashedLine(): This call returns the name of the dashed line and can be used as ?lineStyle argument.
+
+- - [ ] DottedLine(): This call returns the name of the dotted line and can be used as ?lineStyle argument.
+
+- - [ ] BoldLine(): This call returns the name of the bold line and can be used as ?lineStyle argument.
+
+- - [x] UpdateLayoutConfig(?c4ShapeInRow, ?c4BoundaryInRow): New. This call updates the default c4ShapeInRow(4) and c4BoundaryInRow(2).
 
 There are two ways to assign parameters with question marks. One uses the non-named parameter assignment method in the order of the parameters, and the other uses the named parameter assignment method, where the name must start with a $ symbol.
 

docs/syntax/entityRelationshipDiagram.md

@@ -196,7 +196,7 @@ erDiagram
     }
 ```
 
-The `type` values must begin with an alphabetic character and may contain digits, hyphens, underscores, parentheses and square brackets. The `name` values follow a similar format to `type`, but may start with an asterisk as another option to indicate an attribute is a primary key. Other than that, there are no restrictions, and there is no implicit set of valid data types.
+The `type` and `name` values must begin with an alphabetic character and may contain digits, hyphens, underscores, parentheses and square brackets. Other than that, there are no restrictions, and there is no implicit set of valid data types.
 
 #### Attribute Keys and Comments
 

docs/syntax/flowchart.md

@@ -608,12 +608,12 @@ It is possible to escape characters using the syntax exemplified here.
 
 ```mermaid-example
     flowchart LR
-        A["A double quote:#quot;"] --> B["A dec char:#9829;"]
+        A["A double quote:#quot;"] -->B["A dec char:#9829;"]
 ```
 
 ```mermaid
     flowchart LR
-        A["A double quote:#quot;"] --> B["A dec char:#9829;"]
+        A["A double quote:#quot;"] -->B["A dec char:#9829;"]
 ```
 
 Numbers given are base 10, so `#` can be encoded as `#35;`. It is also supported to use HTML character names.
@@ -748,48 +748,6 @@ flowchart LR
   B1 --> B2
 ```
 
-#### Limitation
-
-If any of a subgraph's nodes are linked to the outside, subgraph direction will be ignored. Instead the subgraph will inherit the direction of the parent graph:
-
-```mermaid-example
-flowchart LR
-    subgraph subgraph1
-        direction TB
-        top1[top] --> bottom1[bottom]
-    end
-    subgraph subgraph2
-        direction TB
-        top2[top] --> bottom2[bottom]
-    end
-    %% ^ These subgraphs are identical, except for the links to them:
-
-    %% Link *to* subgraph1: subgraph1 direction is mantained
-    outside --> subgraph1
-    %% Link *within* subgraph2:
-    %% subgraph2 inherits the direction of the top-level graph (LR)
-    outside ---> top2
-```
-
-```mermaid
-flowchart LR
-    subgraph subgraph1
-        direction TB
-        top1[top] --> bottom1[bottom]
-    end
-    subgraph subgraph2
-        direction TB
-        top2[top] --> bottom2[bottom]
-    end
-    %% ^ These subgraphs are identical, except for the links to them:
-
-    %% Link *to* subgraph1: subgraph1 direction is mantained
-    outside --> subgraph1
-    %% Link *within* subgraph2:
-    %% subgraph2 inherits the direction of the top-level graph (LR)
-    outside ---> top2
-```
-
 ## Markdown Strings
 
 The "Markdown Strings" feature enhances flowcharts and mind maps by offering a more versatile string type, which supports text formatting options such as bold and italics, and automatically wraps text within labels.
@@ -1033,24 +991,6 @@ flowchart LR
     classDef someclass fill:#f96
 ```
 
-This form can be used when declaring multiple links between nodes:
-
-```mermaid-example
-flowchart LR
-    A:::foo & B:::bar --> C:::foobar
-    classDef foo stroke:#f00
-    classDef bar stroke:#0f0
-    classDef foobar stroke:#00f
-```
-
-```mermaid
-flowchart LR
-    A:::foo & B:::bar --> C:::foobar
-    classDef foo stroke:#f00
-    classDef bar stroke:#0f0
-    classDef foobar stroke:#00f
-```
-
 ### Css classes
 
 It is also possible to predefine classes in css styles that can be applied from the graph definition as in the example

docs/syntax/gantt.md

@@ -257,22 +257,6 @@ The pattern is:
 
 More info in: <https://github.com/d3/d3-time#interval_every>
 
-Week-based `tickInterval`s start the week on sunday by default. If you wish to specify another weekday on which the `tickInterval` should start, use the `weekday` option:
-
-```mermaid-example
-gantt
-  tickInterval 1week
-  weekday monday
-```
-
-```mermaid
-gantt
-  tickInterval 1week
-  weekday monday
-```
-
-Support: v10.3.0+
-
 ## Output in compact mode
 
 The compact mode allows you to display multiple tasks in the same row. Compact mode can be enabled for a gantt chart by setting the display mode of the graph via preceeding YAML settings.

docs/syntax/gitgraph.md

@@ -825,82 +825,6 @@ NOTE: Because we have overridden the `mainBranchOrder` to `2`, the `main` branch
 
 Here, we have changed the default main branch name to `MetroLine1`.
 
-## Orientation (v10.3.0+)
-
-In Mermaid, the default orientation is Left to Right. The branches are lined vertically.
-
-Usage example:
-
-```mermaid-example
-    gitGraph
-       commit
-       commit
-       branch develop
-       commit
-       commit
-       commit
-       checkout main
-       commit
-       commit
-       merge develop
-       commit
-       commit
-```
-
-```mermaid
-    gitGraph
-       commit
-       commit
-       branch develop
-       commit
-       commit
-       commit
-       checkout main
-       commit
-       commit
-       merge develop
-       commit
-       commit
-```
-
-Sometimes we may want to change the orientation. Currently, Mermaid supports two orientations: **Left to Right**(default) and **Top to Bottom**.
-
-In order to change the orientation from top to bottom i.e. branches lined horizontally, you need to add `TB` along with `gitGraph`.
-
-Usage example:
-
-```mermaid-example
-    gitGraph TB:
-       commit
-       commit
-       branch develop
-       commit
-       commit
-       commit
-       checkout main
-       commit
-       commit
-       merge develop
-       commit
-       commit
-```
-
-```mermaid
-    gitGraph TB:
-       commit
-       commit
-       branch develop
-       commit
-       commit
-       commit
-       checkout main
-       commit
-       commit
-       merge develop
-       commit
-       commit
-```
-
 ## Themes
 
 Mermaid supports a bunch of pre-defined themes which you can use to find the right one for you. PS: you can actually override an existing theme's variable to get your own custom theme going. Learn more about theming your diagram [here](../config/theming.md).