Update docs

.build/common.ts

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

.build/generateLangium.ts

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

.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)};`;
-};

.build/langium-cli.d.ts

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

.esbuild/build.ts

@@ -1,65 +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';
-import { generateLangium } from '../.build/generateLangium.js';
-
-const shouldVisualize = process.argv.includes('--visualize');
-
-const buildPackage = async (entryName: keyof typeof packageOptions) => {
-  const commonOptions = { ...defaultOptions, entryName } as const;
-  const buildConfigs = [
-    // package.mjs
-    { ...commonOptions },
-    // package.min.mjs
-    {
-      ...commonOptions,
-      minify: true,
-      metafile: shouldVisualize,
-    },
-    // package.core.mjs
-    { ...commonOptions, core: true },
-  ];
-
-  if (entryName === 'mermaid') {
-    const iifeOptions: MermaidBuildOptions = { ...commonOptions, format: 'iife' };
-    buildConfigs.push(
-      // mermaid.js
-      { ...iifeOptions },
-      // mermaid.min.js
-      { ...iifeOptions, minify: true, metafile: shouldVisualize }
-    );
-  }
-
-  const results = await Promise.all(buildConfigs.map((option) => build(getBuildConfig(option))));
-
-  if (shouldVisualize) {
-    for (const { metafile } of results) {
-      if (!metafile) {
-        continue;
-      }
-      const fileName = Object.keys(metafile.outputs)
-        .filter((file) => !file.includes('chunks') && file.endsWith('js'))[0]
-        .replace('dist/', '');
-      // Upload metafile into https://esbuild.github.io/analyze/
-      await writeFile(`stats/${fileName}.meta.json`, JSON.stringify(metafile));
-    }
-  }
-};
-
-const handler = (e) => {
-  console.error(e);
-  process.exit(1);
-};
-
-const main = async () => {
-  await generateLangium();
-  await mkdir('stats').catch(() => {});
-  const packageNames = Object.keys(packageOptions) as (keyof typeof packageOptions)[];
-  // it should build `parser` before `mermaid` because it's a dependecy
-  for (const pkg of packageNames) {
-    await 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,116 +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';
-import { generateLangium } from '../.build/generateLangium.js';
-
-const parserCtx = await context(
-  getBuildConfig({ ...defaultOptions, minify: false, core: false, entryName: 'parser' })
-);
-const mermaidCtx = await context(
-  getBuildConfig({ ...defaultOptions, minify: false, core: false, entryName: 'mermaid' })
-);
-const mermaidIIFECtx = await context(
-  getBuildConfig({
-    ...defaultOptions,
-    minify: false,
-    core: false,
-    entryName: 'mermaid',
-    format: 'iife',
-  })
-);
-const externalCtx = await context(
-  getBuildConfig({
-    ...defaultOptions,
-    minify: false,
-    core: false,
-    entryName: 'mermaid-example-diagram',
-  })
-);
-const zenumlCtx = await context(
-  getBuildConfig({ ...defaultOptions, minify: false, core: false, entryName: 'mermaid-zenuml' })
-);
-const contexts = [parserCtx, mermaidCtx, mermaidIIFECtx, externalCtx, zenumlCtx];
-
-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() {
-  await generateLangium();
-  handleFileChange();
-  const app = express();
-  chokidar
-    .watch('**/src/**/*.{js,ts,langium,yaml,json}', {
-      ignoreInitial: true,
-      ignored: [/node_modules/, /dist/, /docs/, /coverage/],
-    })
-    .on('all', async (event, path) => {
-      // Ignore other events.
-      if (!['add', 'change'].includes(event)) {
-        return;
-      }
-      if (/\.langium$/.test(path)) {
-        await generateLangium();
-      }
-      console.log(`${path} changed. Rebuilding...`);
-      handleFileChange();
-    });
-
-  app.use(cors());
-  app.get('/events', eventsHandler);
-  app.use(express.static('./packages/parser/dist'));
-  app.use(express.static('./packages/mermaid/dist'));
-  app.use(express.static('./packages/mermaid-zenuml/dist'));
-  app.use(express.static('./packages/mermaid-example-diagram/dist'));
-  app.use(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;
-};

.eslintignore

@@ -6,6 +6,3 @@ cypress/plugins/index.js
 coverage
 *.json
 node_modules
-
-# autogenereated by langium-cli
-generated/

.gitignore

@@ -46,7 +46,3 @@ stats/
 
 demos/dev/**
 !/demos/dev/example.html
-!/demos/dev/reload.js
-
-# autogenereated by langium-cli
-generated/

.prettierignore

@@ -10,6 +10,3 @@ stats
 .nyc_output
 # Autogenerated by `pnpm run --filter mermaid types:build-config`
 packages/mermaid/src/config.type.ts
-
-# autogenereated by langium-cli
-generated/

.vite/build.ts

@@ -3,12 +3,11 @@ import { resolve } from 'path';
 import { fileURLToPath } from 'url';
 import jisonPlugin from './jisonPlugin.js';
 import jsonSchemaPlugin from './jsonSchemaPlugin.js';
+import { readFileSync } from 'fs';
 import typescript from '@rollup/plugin-typescript';
 import { visualizer } from 'rollup-plugin-visualizer';
 import type { TemplateType } from 'rollup-plugin-visualizer/dist/plugin/template-types.js';
 import istanbul from 'vite-plugin-istanbul';
-import { packageOptions } from '../.build/common.js';
-import { generateLangium } from '../.build/generateLangium.js';
 
 const visualize = process.argv.includes('--visualize');
 const watch = process.argv.includes('--watch');
@@ -37,6 +36,24 @@ const visualizerOptions = (packageName: string, core = false): PluginOption[] =>
   );
 };
 
+const packageOptions = {
+  mermaid: {
+    name: 'mermaid',
+    packageName: 'mermaid',
+    file: 'mermaid.ts',
+  },
+  'mermaid-example-diagram': {
+    name: 'mermaid-example-diagram',
+    packageName: 'mermaid-example-diagram',
+    file: 'detector.ts',
+  },
+  'mermaid-zenuml': {
+    name: 'mermaid-zenuml',
+    packageName: 'mermaid-zenuml',
+    file: 'detector.ts',
+  },
+};
+
 interface BuildOptions {
   minify: boolean | 'esbuild';
   core?: boolean;
@@ -55,8 +72,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: {
@@ -83,7 +126,7 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
       // @ts-expect-error According to the type definitions, rollup plugins are incompatible with vite
       typescript({ compilerOptions: { declaration: false } }),
       istanbul({
-        exclude: ['node_modules', 'test/', '__mocks__', 'generated'],
+        exclude: ['node_modules', 'test/', '__mocks__'],
         extension: ['.js', '.ts'],
         requireEnv: true,
         forceBuildInstrument: coverage,
@@ -103,28 +146,24 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
 
 const buildPackage = async (entryName: keyof typeof packageOptions) => {
   await build(getBuildConfig({ minify: false, entryName }));
+  await build(getBuildConfig({ minify: 'esbuild', entryName }));
+  await build(getBuildConfig({ minify: false, core: true, entryName }));
 };
 
 const main = async () => {
   const packageNames = Object.keys(packageOptions) as (keyof typeof packageOptions)[];
-  for (const pkg of packageNames.filter(
-    (pkg) => !mermaidOnly || pkg === 'mermaid' || pkg === 'parser'
-  )) {
+  for (const pkg of packageNames.filter((pkg) => !mermaidOnly || pkg === 'mermaid')) {
     await buildPackage(pkg);
   }
 };
 
-await generateLangium();
-
 if (watch) {
-  await build(getBuildConfig({ minify: false, watch, core: false, entryName: 'parser' }));
   build(getBuildConfig({ minify: false, watch, core: false, entryName: 'mermaid' }));
   if (!mermaidOnly) {
     build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' }));
     build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-zenuml' }));
   }
 } else if (visualize) {
-  await build(getBuildConfig({ minify: false, watch, core: false, entryName: 'parser' }));
   await build(getBuildConfig({ minify: false, core: true, entryName: 'mermaid' }));
   await build(getBuildConfig({ minify: false, core: false, entryName: 'mermaid' }));
 } else {

.vite/jisonPlugin.ts

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

.vite/server.ts

@@ -14,7 +14,6 @@ async function createServer() {
   });
 
   app.use(cors());
-  app.use(express.static('./packages/parser/dist'));
   app.use(express.static('./packages/mermaid/dist'));
   app.use(express.static('./packages/mermaid-zenuml/dist'));
   app.use(express.static('./packages/mermaid-example-diagram/dist'));

README.md

@@ -60,7 +60,7 @@ Use Mermaid with your favorite applications, check out the list of [Integrations
 
 You can also use Mermaid within [GitHub](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) as well many of your other favorite applications—check out the list of [Integrations and Usages of Mermaid](./docs/ecosystem/integrations.md).
 
-For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./docs/intro/getting-started.md), [Usage](./docs/config/usage.md) and [Tutorials](./docs/config/Tutorials.md).
+For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./docs/intro/n00b-gettingStarted.md), [Usage](./docs/config/usage.md) and [Tutorials](./docs/config/Tutorials.md).
 
 In our release process we rely heavily on visual regression tests using [applitools](https://applitools.com/). Applitools is a great service which has been easy to use and integrate with our tests.
 

README.zh-CN.md

@@ -55,7 +55,7 @@ Mermaid 通过允许用户创建便于修改的图表来解决这一难题，它
 Mermaid 甚至能让非程序员也能通过 [Mermaid Live Editor](https://mermaid.live/) 轻松创建详细的图表。<br/>
 你可以访问 [教程](./docs/config/Tutorials.md) 来查看 Live Editor 的视频教程，也可以查看 [Mermaid 的集成和使用](./docs/ecosystem/integrations.md) 这个清单来检查你的文档工具是否已经集成了 Mermaid 支持。
 
-如果想要查看关于 Mermaid 更详细的介绍及基础使用方式，可以查看 [入门指引](./docs/intro/getting-started.md), [用法](./docs/config/usage.md) 和 [教程](./docs/config/Tutorials.md).
+如果想要查看关于 Mermaid 更详细的介绍及基础使用方式，可以查看 [入门指引](./docs/intro/n00b-gettingStarted.md), [用法](./docs/config/usage.md) 和 [教程](./docs/config/Tutorials.md).
 
 <!-- </Main description> -->
 

cSpell.json

@@ -57,7 +57,6 @@
     "gzipped",
     "huynh",
     "huynhicode",
-    "iife",
     "inkdrop",
     "jaoude",
     "jgreywolf",
@@ -71,7 +70,6 @@
     "knut",
     "knutsveidqvist",
     "laganeckas",
-    "langium",
     "linetype",
     "lintstagedrc",
     "logmsg",
@@ -83,7 +81,6 @@
     "mdbook",
     "mermaidjs",
     "mermerd",
-    "metafile",
     "mindaugas",
     "mindmap",
     "mindmaps",
@@ -97,7 +94,6 @@
     "nirname",
     "npmjs",
     "orlandoni",
-    "outdir",
     "pathe",
     "pbrolin",
     "phpbb",
@@ -158,8 +154,7 @@
     "xlink",
     "yash",
     "yokozuna",
-    "zenuml",
-    "zune"
+    "zenuml"
   ],
   "patterns": [
     { "name": "Markdown links", "pattern": "\\((.*)\\)", "description": "" },

cypress/helpers/util.ts

@@ -18,11 +18,7 @@ const utf8ToB64 = (str: string): string => {
   return Buffer.from(decodeURIComponent(encodeURIComponent(str))).toString('base64');
 };
 
-const batchId: string =
-  'mermaid-batch-' +
-  (Cypress.env('useAppli')
-    ? Date.now().toString()
-    : Cypress.env('CYPRESS_COMMIT') || Date.now().toString());
+const batchId: string = 'mermaid-batch-' + Cypress.env('CYPRESS_COMMIT') || Date.now().toString();
 
 export const mermaidUrl = (
   graphStr: string,

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/rendering/erDiagram.spec.js

@@ -305,21 +305,4 @@ ORDER ||--|{ LINE-ITEM : contains
       {}
     );
   });
-
-  it('should render entities with entity name aliases', () => {
-    imgSnapshotTest(
-      `
-    erDiagram
-      p[Person] {
-        varchar(64) firstName
-        varchar(64) lastName
-      }
-      c["Customer Account"] {
-        varchar(128) email
-      }
-      p ||--o| c : has
-      `,
-      { logLevel: 1 }
-    );
-  });
 });

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

@@ -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/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
    */

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>

demos/dev/example.html

@@ -5,8 +5,6 @@
     <title>Mermaid development page</title>
   </head>
   <body>
-    <pre class="mermaid">info</pre>
-
     <pre id="diagram" class="mermaid">
 graph TB
       a --> b
@@ -32,7 +30,5 @@ graph TB
       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

@@ -110,20 +110,6 @@
         }
         MANUFACTURER only one to zero or more CAR : makes
     </pre>
-    <hr />
-
-    <pre class="mermaid">
-    erDiagram
-      p[Person] {
-          string firstName
-          string lastName
-      }
-      a["Customer Account"] {
-          string email
-      }
-      p ||--o| a : has
-    </pre>
-    <hr />
 
     <script type="module">
       import mermaid from './mermaid.esm.mjs';

demos/pie.html

@@ -37,7 +37,7 @@
     </pre>
 
     <script type="module">
-      import mermaid from '/mermaid.esm.mjs';
+      import mermaid from './mermaid.esm.mjs';
       mermaid.initialize({
         theme: 'forest',
         logLevel: 3,

docker-compose.yml

@@ -5,7 +5,7 @@ services:
     stdin_open: true
     tty: true
     working_dir: /mermaid
-    mem_limit: '4G'
+    mem_limit: '2G'
     environment:
       - NODE_OPTIONS=--max_old_space_size=4096
     volumes:

docs/community/code.md

@@ -156,7 +156,7 @@ We know it can sometimes be hard to code _and_ write user documentation.
 
 Our documentation is managed in `packages/mermaid/src/docs`. Details on how to edit is in the [Contributing Documentation](#contributing-documentation) section.
 
-Create another issue specifically for the documentation.
+Create another issue specifically for the documentation.\
 You will need to help with the PR, but definitely ask for help if you feel stuck.
 When it feels hard to write stuff out, explaining it to someone and having that person ask you clarifying questions can often be 80% of the work!
 

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>

docs/intro/getting-started.md

@@ -111,9 +111,9 @@ b. The importing of mermaid library through the `mermaid.esm.mjs` or `mermaid.es
 <body>
   Here is a mermaid diagram:
   <pre class="mermaid">
-        graph TD
-        A[Client] --> B[Load Balancer]
-        B --> C[Server01]
+        graph TD 
+        A[Client] --> B[Load Balancer] 
+        B --> C[Server01] 
         B --> D[Server02]
   </pre>
 </body>
@@ -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>
@@ -152,23 +152,23 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. However, doi
   <body>
     Here is one mermaid diagram:
     <pre class="mermaid">
-            graph TD
-            A[Client] --> B[Load Balancer]
-            B --> C[Server1]
+            graph TD 
+            A[Client] --> B[Load Balancer] 
+            B --> C[Server1] 
             B --> D[Server2]
     </pre>
 
     And here is another:
     <pre class="mermaid">
-            graph TD
+            graph TD 
             A[Client] -->|tcp_123| B
-            B(Load Balancer)
-            B -->|tcp_456| C[Server1]
+            B(Load Balancer) 
+            B -->|tcp_456| C[Server1] 
             B -->|tcp_456| D[Server2]
     </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>
@@ -185,15 +185,15 @@ In this example mermaid.js is referenced in `src` as a separate JavaScript file,
   </head>
   <body>
     <pre class="mermaid">
-            graph LR
-            A --- B
-            B-->C[fa:fa-ban forbidden]
+            graph LR 
+            A --- B 
+            B-->C[fa:fa-ban forbidden] 
             B-->D(fa:fa-spinner);
     </pre>
     <pre class="mermaid">
-            graph TD
-            A[Client] --> B[Load Balancer]
-            B --> C[Server1]
+            graph TD 
+            A[Client] --> B[Load Balancer] 
+            B --> C[Server1] 
             B --> D[Server2]
     </pre>
     <script type="module">

docs/intro/index.md

@@ -296,7 +296,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
 
@@ -314,7 +314,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>
 ```
@@ -402,7 +402,7 @@ Update version number in `package.json`.
 npm publish
 ```
 
-The above command generates files into the `dist` folder and publishes them to [npmjs.com](https://www.npmjs.com/).
+The above command generates files into the `dist` folder and publishes them to [npmjs.org](npmjs.org).
 
 ## Security and safe diagrams
 

docs/intro/syntax-reference.md

@@ -72,7 +72,7 @@ The following are the most commonly used methods, and they are all tied to Merma
 
 Here you can edit certain values to change the behavior and appearance of the diagram.
 
-### [The initialize() call](./getting-started.md#_3-calling-the-javascript-api)
+### [The initialize() call](./getting-started#_3-calling-the-javascript-api)
 
 Used when Mermaid is called via an API, or through a `<script>` tag.
 

docs/news/announcements.md

@@ -6,8 +6,8 @@
 
 # Announcements
 
-## [Special cases broke Microsoft Zune and can ruin your code base too](https://www.mermaidchart.com/blog/posts/special-cases-broke-microsoft-zune-and-can-ruin-your-code-base-too/)
+## [From Chaos to Clarity: Exploring Mind Maps with MermaidJS](https://www.mermaidchart.com/blog/posts/from-chaos-to-clarity-exploring-mind-maps-with-mermaidjs)
 
-23 August 2023 · 15 mins
+24 July 2023 · 4 mins
 
-Read about the pitfalls of special cases in programming, illustrating how they can lead to complexity, diminish readability, and create maintenance challenges.
+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.

docs/news/blog.md

@@ -6,24 +6,6 @@
 
 # Blog
 
-## [Special cases broke Microsoft Zune and can ruin your code base too](https://www.mermaidchart.com/blog/posts/special-cases-broke-microsoft-zune-and-can-ruin-your-code-base-too/)
-
-23 August 2023 · 15 mins
-
-Read about the pitfalls of special cases in programming, illustrating how they can lead to complexity, diminish readability, and create maintenance challenges.
-
-## [New AI chatbot now available on Mermaid Chart to simplify text-based diagram creation](https://www.mermaidchart.com/blog/posts/ai-chatbot-now-available-on-mermaid-chart-to-simplify-text-based-diagram-creation/)
-
-14 August 2023 · 4 mins
-
-Introducing Mermaid Chart’s new AI chatbot, a diagramming assistant that simplifies text-based diagram creation for everyone, from developers to educators, offering features to start, edit, and fix diagrams, and embodying our vision to make diagramming accessible, user-friendly, and fun.
-
-## [Believe It or Not, You Still Need an Online UML Diagram Tool](https://www.mermaidchart.com/blog/posts/uml-diagram-tool/)
-
-14 August 2023 · 8 mins
-
-A UML diagram tool helps developers and other professionals quickly create and share UML diagrams that communicate information about complex software systems.
-
 ## [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

docs/syntax/entityRelationshipDiagram.md

@@ -198,34 +198,6 @@ 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.
 
-### Entity Name Aliases (v\<MERMAID_RELEASE_VERSION>+)
-
-An alias can be added to an entity using square brackets. If provided, the alias will be showed in the diagram instead of the entity name.
-
-```mermaid-example
-erDiagram
-    p[Person] {
-        string firstName
-        string lastName
-    }
-    a["Customer Account"] {
-        string email
-    }
-    p ||--o| a : has
-```
-
-```mermaid
-erDiagram
-    p[Person] {
-        string firstName
-        string lastName
-    }
-    a["Customer Account"] {
-        string email
-    }
-    p ||--o| a : has
-```
-
 #### Attribute Keys and Comments
 
 Attributes may also have a `key` or comment defined. Keys can be `PK`, `FK` or `UK`, for Primary Key, Foreign Key or Unique Key. To specify multiple key constraints on a single attribute, separate them with a comma (e.g., `PK, FK`).. A `comment` is defined by double quotes at the end of an attribute. Comments themselves cannot have double-quote characters in them.

docs/syntax/flowchart.md

@@ -1098,7 +1098,7 @@ The icons are accessed via the syntax fa:#icon class name#.
 
 ```mermaid-example
 flowchart TD
-    B["fa:fa-twitter for peace"]
+    B["fab:fa-twitter for peace"]
     B-->C[fa:fa-ban forbidden]
     B-->D(fa:fa-spinner)
     B-->E(A fa:fa-camera-retro perhaps?)
@@ -1106,7 +1106,7 @@ flowchart TD
 
 ```mermaid
 flowchart TD
-    B["fa:fa-twitter for peace"]
+    B["fab:fa-twitter for peace"]
     B-->C[fa:fa-ban forbidden]
     B-->D(fa:fa-spinner)
     B-->E(A fa:fa-camera-retro perhaps?)

docs/syntax/mindmap.md

@@ -300,7 +300,7 @@ From version 9.4.0 you can simplify this code to:
 
 ```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>
 ```
 

docs/syntax/timeline.md

@@ -469,7 +469,7 @@ You can use this method to add mermaid including the timeline diagram to a web p
 
 ```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>
 ```
 

netlify.toml

@@ -1,18 +0,0 @@
-# Settings in the [build] context are global and are applied to
-# all contexts unless otherwise overridden by more specific contexts.
-[build]
-  # Directory where the build system installs dependencies
-  # and runs your build. Store your package.json, .nvmrc, etc here.
-  # If not set, defaults to the root directory.
-  base = ""
-
-  # Directory that contains the deploy-ready HTML files and
-  # assets generated by the build. This is an absolute path relative
-  # to the base directory, which is the root by default (/).
-  # This sample publishes the directory located at the absolute
-  # path "root/project/build-output"
-
-  publish = "mermaid-live-editor/docs"
-
-  # Default build command.
-  command = "./scripts/editor.bash"

package.json

@@ -15,14 +15,14 @@
     "git graph"
   ],
   "scripts": {
-    "build": "pnpm build:esbuild && pnpm build:types",
-    "build:esbuild": "pnpm run -r clean && ts-node-esm --transpileOnly .esbuild/build.ts",
-    "build:mermaid": "pnpm build:esbuild --mermaid",
-    "build:viz": "pnpm build:esbuild --visualize",
-    "build:types": "tsc -p ./packages/parser/tsconfig.json --emitDeclarationOnly && tsc -p ./packages/mermaid/tsconfig.json --emitDeclarationOnly && tsc -p ./packages/mermaid-zenuml/tsconfig.json --emitDeclarationOnly && tsc -p ./packages/mermaid-example-diagram/tsconfig.json --emitDeclarationOnly",
-    "dev": "ts-node-esm --transpileOnly .esbuild/server.ts",
-    "dev:vite": "ts-node-esm --transpileOnly .vite/server.ts",
-    "dev:coverage": "pnpm coverage:cypress:clean && VITE_COVERAGE=true pnpm dev:vite",
+    "build:vite": "ts-node-esm --transpileOnly .vite/build.ts",
+    "build:mermaid": "pnpm build:vite --mermaid",
+    "build:viz": "pnpm build:mermaid --visualize",
+    "build:types": "tsc -p ./packages/mermaid/tsconfig.json --emitDeclarationOnly && tsc -p ./packages/mermaid-zenuml/tsconfig.json --emitDeclarationOnly && tsc -p ./packages/mermaid-example-diagram/tsconfig.json --emitDeclarationOnly",
+    "build:watch": "pnpm build:vite --watch",
+    "build": "pnpm run -r clean && pnpm build:types && pnpm build:vite",
+    "dev": "concurrently \"pnpm build:vite --watch\" \"ts-node-esm .vite/server.ts\"",
+    "dev:coverage": "pnpm coverage:cypress:clean && VITE_COVERAGE=true pnpm dev",
     "release": "pnpm build",
     "lint": "eslint --cache --cache-strategy content --ignore-path .gitignore . && pnpm lint:jison && prettier --cache --check .",
     "lint:fix": "eslint --cache --cache-strategy content --fix --ignore-path .gitignore . && prettier --write . && ts-node-esm scripts/fixCSpell.ts",
@@ -31,8 +31,8 @@
     "cypress": "cypress run",
     "cypress:open": "cypress open",
     "e2e": "start-server-and-test dev http://localhost:9000/ cypress",
-    "e2e:coverage": "start-server-and-test dev:coverage http://localhost:9000/ cypress",
     "coverage:cypress:clean": "rimraf .nyc_output coverage/cypress",
+    "e2e:coverage": "pnpm coverage:cypress:clean && VITE_COVERAGE=true pnpm e2e",
     "coverage:merge": "ts-node-esm scripts/coverage.ts",
     "coverage": "pnpm test:coverage --run && pnpm e2e:coverage && pnpm coverage:merge",
     "ci": "vitest run",
@@ -82,7 +82,6 @@
     "@vitest/spy": "^0.34.0",
     "@vitest/ui": "^0.34.0",
     "ajv": "^8.12.0",
-    "chokidar": "^3.5.3",
     "concurrently": "^8.0.1",
     "cors": "^2.8.5",
     "cypress": "^12.10.0",
@@ -107,7 +106,6 @@
     "jison": "^0.4.18",
     "js-yaml": "^4.1.0",
     "jsdom": "^22.0.0",
-    "langium-cli": "2.0.1",
     "lint-staged": "^13.2.1",
     "nyc": "^15.1.0",
     "path-browserify": "^1.0.1",

packages/mermaid-example-diagram/package.json

@@ -43,7 +43,8 @@
     "cytoscape-cose-bilkent": "^4.1.0",
     "cytoscape-fcose": "^2.1.0",
     "d3": "^7.0.0",
-    "khroma": "^2.0.0"
+    "khroma": "^2.0.0",
+    "non-layered-tidy-tree-layout": "^2.0.2"
   },
   "devDependencies": {
     "@types/cytoscape": "^3.19.9",

packages/mermaid-zenuml/package.json

@@ -19,7 +19,6 @@
     "mermaid"
   ],
   "scripts": {
-    "clean": "rimraf dist",
     "prepublishOnly": "pnpm -w run build"
   },
   "repository": {

packages/mermaid-zenuml/src/parser.ts

@@ -5,6 +5,7 @@
  * This is a dummy parser that satisfies the mermaid API logic.
  */
 export default {
+  parser: { yy: {} },
   parse: () => {
     // no op
   },

packages/mermaid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "11.0.0-alpha.2",
+  "version": "10.3.1",
   "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
   "module": "./dist/mermaid.core.mjs",
@@ -60,6 +60,8 @@
   },
   "dependencies": {
     "@braintree/sanitize-url": "^6.0.1",
+    "@types/d3-scale": "^4.0.3",
+    "@types/d3-scale-chromatic": "^3.0.0",
     "cytoscape": "^3.23.0",
     "cytoscape-cose-bilkent": "^4.1.0",
     "cytoscape-fcose": "^2.1.0",
@@ -72,10 +74,11 @@
     "khroma": "^2.0.0",
     "lodash-es": "^4.17.21",
     "mdast-util-from-markdown": "^1.3.0",
-    "mermaid-parser": "workspace:^",
+    "non-layered-tidy-tree-layout": "^2.0.2",
     "stylis": "^4.1.3",
     "ts-dedent": "^2.2.0",
-    "uuid": "^9.0.0"
+    "uuid": "^9.0.0",
+    "web-worker": "^1.2.0"
   },
   "devDependencies": {
     "@adobe/jsonschema2md": "^7.1.4",
@@ -83,7 +86,6 @@
     "@types/d3": "^7.4.0",
     "@types/d3-sankey": "^0.12.1",
     "@types/d3-scale": "^4.0.3",
-    "@types/d3-scale-chromatic": "^3.0.0",
     "@types/d3-selection": "^3.0.5",
     "@types/d3-shape": "^3.1.1",
     "@types/dompurify": "^3.0.2",

packages/mermaid/src/Diagram.ts

@@ -50,10 +50,7 @@ export class Diagram {
     this.parser.parse = (text: string) =>
       originalParse(cleanupComments(extractFrontMatter(text, this.db, configApi.addDirective)));
 
-    if (this.parser.parser !== undefined) {
-      // The parser.parser.yy is only present in JISON parsers. So, we'll only set if required.
-      this.parser.parser.yy = this.db;
-    }
+    this.parser.parser.yy = this.db;
     this.init = diagram.init;
     this.parse();
   }

packages/mermaid/src/diagram-api/diagram-orchestration.ts

@@ -45,6 +45,7 @@ export const addDiagrams = () => {
       styles: {}, // should never be used
       renderer: {}, // should never be used
       parser: {
+        parser: { yy: {} },
         parse: () => {
           throw new Error(
             'Diagrams beginning with --- are not valid. ' +

packages/mermaid/src/diagram-api/diagramAPI.spec.ts

@@ -39,6 +39,7 @@ describe('DiagramAPI', () => {
           parse: (_text) => {
             return;
           },
+          parser: { yy: {} },
         },
         renderer: {},
         styles: {},

packages/mermaid/src/diagram-api/types.ts

@@ -80,7 +80,7 @@ export type DrawDefinition = (
 
 export interface ParserDefinition {
   parse: (text: string) => void;
-  parser?: { yy: DiagramDB };
+  parser: { yy: DiagramDB };
 }
 
 /**

packages/mermaid/src/diagram.spec.ts

@@ -30,6 +30,9 @@ describe('diagram detection', () => {
               parse: () => {
                 // no-op
               },
+              parser: {
+                yy: {},
+              },
             },
             renderer: {},
             styles: {},

packages/mermaid/src/diagrams/common/populateCommonDb.ts

@@ -1,15 +0,0 @@
-import type { DiagramAST } from 'mermaid-parser';
-
-import type { DiagramDB } from '../../diagram-api/types.js';
-
-export function populateCommonDb(ast: DiagramAST, db: DiagramDB) {
-  if (ast.accDescr) {
-    db.setAccDescription?.(ast.accDescr);
-  }
-  if (ast.accTitle) {
-    db.setAccTitle?.(ast.accTitle);
-  }
-  if (ast.title) {
-    db.setDiagramTitle?.(ast.title);
-  }
-}

packages/mermaid/src/diagrams/er/erDb.js

@@ -32,13 +32,10 @@ export const parseDirective = function (statement, context, type) {
   mermaidAPI.parseDirective(this, statement, context, type);
 };
 
-const addEntity = function (name, alias = undefined) {
+const addEntity = function (name) {
   if (entities[name] === undefined) {
-    entities[name] = { attributes: [], alias: alias };
+    entities[name] = { attributes: [] };
     log.info('Added new entity :', name);
-  } else if (entities[name] && !entities[name].alias && alias) {
-    entities[name].alias = alias;
-    log.info(`Add alias '${alias}' to entity '${name}'`);
   }
 
   return entities[name];

packages/mermaid/src/diagrams/er/erRenderer.js

@@ -326,7 +326,7 @@ const drawEntities = function (svgNode, entities, graph) {
       .style('text-anchor', 'middle')
       .style('font-family', getConfig().fontFamily)
       .style('font-size', conf.fontSize + 'px')
-      .text(entities[entityName].alias ?? entityName);
+      .text(entityName);
 
     const { width: entityWidth, height: entityHeight } = drawAttributes(
       groupNode,

packages/mermaid/src/diagrams/er/parser/erDiagram.jison

@@ -35,8 +35,6 @@ accDescr\s*"{"\s*                                { this.begin("acc_descr_multili
 <block>[\n]+                    /* nothing */
 <block>"}"                      { this.popState(); return 'BLOCK_STOP'; }
 <block>.                        return yytext[0];
-"["                             return 'SQS';
-"]"                             return 'SQE';
 
 "one or zero"                   return 'ZERO_OR_ONE';
 "one or more"                   return 'ONE_OR_MORE';
@@ -104,21 +102,17 @@ statement
           yy.addEntity($1);
           yy.addEntity($3);
           yy.addRelationship($1, $5, $3, $2);
+          /*console.log($1 + $2 + $3 + ':' + $5);*/
       }
     | entityName BLOCK_START attributes BLOCK_STOP
       {
+          /* console.log('detected block'); */
           yy.addEntity($1);
           yy.addAttributes($1, $3);
+          /* console.log('handled block'); */
       }
     | entityName BLOCK_START BLOCK_STOP { yy.addEntity($1); }
     | entityName { yy.addEntity($1); }
-    | entityName SQS entityName SQE BLOCK_START attributes BLOCK_STOP
-      {
-          yy.addEntity($1, $3);
-          yy.addAttributes($1, $6);
-      }
-    | entityName SQS entityName SQE BLOCK_START BLOCK_STOP { yy.addEntity($1, $3); }
-    | entityName SQS entityName SQE { yy.addEntity($1, $3); }
     | title title_value  { $$=$2.trim();yy.setAccTitle($$); }
     | acc_title acc_title_value  { $$=$2.trim();yy.setAccTitle($$); }
     | acc_descr acc_descr_value  { $$=$2.trim();yy.setAccDescription($$); }

packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js

@@ -133,43 +133,6 @@ describe('when parsing ER diagram it...', function () {
       const entities = erDb.getEntities();
       expect(entities.hasOwnProperty(hyphensUnderscore)).toBe(true);
     });
-
-    it('can have an alias', function () {
-      const entity = 'foo';
-      const alias = 'bar';
-      erDiagram.parser.parse(`erDiagram\n${entity}["${alias}"]\n`);
-      const entities = erDb.getEntities();
-      expect(entities.hasOwnProperty(entity)).toBe(true);
-      expect(entities[entity].alias).toBe(alias);
-    });
-
-    it('can have an alias even if the relationship is defined before class', function () {
-      const firstEntity = 'foo';
-      const secondEntity = 'bar';
-      const alias = 'batman';
-      erDiagram.parser.parse(
-        `erDiagram\n${firstEntity} ||--o| ${secondEntity} : rel\nclass ${firstEntity}["${alias}"]\n`
-      );
-      const entities = erDb.getEntities();
-      expect(entities.hasOwnProperty(firstEntity)).toBe(true);
-      expect(entities.hasOwnProperty(secondEntity)).toBe(true);
-      expect(entities[firstEntity].alias).toBe(alias);
-      expect(entities[secondEntity].alias).toBeUndefined();
-    });
-
-    it('can have an alias even if the relationship is defined after class', function () {
-      const firstEntity = 'foo';
-      const secondEntity = 'bar';
-      const alias = 'batman';
-      erDiagram.parser.parse(
-        `erDiagram\nclass ${firstEntity}["${alias}"]\n${firstEntity} ||--o| ${secondEntity} : rel\n`
-      );
-      const entities = erDb.getEntities();
-      expect(entities.hasOwnProperty(firstEntity)).toBe(true);
-      expect(entities.hasOwnProperty(secondEntity)).toBe(true);
-      expect(entities[firstEntity].alias).toBe(alias);
-      expect(entities[secondEntity].alias).toBeUndefined();
-    });
   });
 
   describe('attribute name', () => {

packages/mermaid/src/diagrams/error/errorDiagram.ts

@@ -5,6 +5,7 @@ const diagram: DiagramDefinition = {
   db: {},
   renderer,
   parser: {
+    parser: { yy: {} },
     parse: (): void => {
       return;
     },

packages/mermaid/src/diagrams/info/info.spec.ts

@@ -1,31 +1,24 @@
-import { parser } from './infoParser.js';
+// @ts-ignore - jison doesn't export types
+import { parser } from './parser/info.jison';
+import { db } from './infoDb.js';
+
+describe('info diagram', () => {
+  beforeEach(() => {
+    parser.yy = db;
+    parser.yy.clear();
+  });
 
-describe('info', () => {
   it('should handle an info definition', () => {
     const str = `info`;
-    expect(() => {
-      parser.parse(str);
-    }).not.toThrow();
+    parser.parse(str);
+
+    expect(db.getInfo()).toBeFalsy();
   });
 
   it('should handle an info definition with showInfo', () => {
     const str = `info showInfo`;
-    expect(() => {
-      parser.parse(str);
-    }).not.toThrow();
-  });
+    parser.parse(str);
 
-  it('should throw because of unsupported info grammar', () => {
-    const str = `info unsupported`;
-    expect(() => {
-      parser.parse(str);
-    }).toThrow('Parsing failed: unexpected character: ->u<- at offset: 5, skipped 11 characters.');
-  });
-
-  it('should throw because of unsupported info grammar', () => {
-    const str = `info unsupported`;
-    expect(() => {
-      parser.parse(str);
-    }).toThrow('Parsing failed: unexpected character: ->u<- at offset: 5, skipped 11 characters.');
+    expect(db.getInfo()).toBeTruthy();
   });
 });

packages/mermaid/src/diagrams/info/infoDb.ts

@@ -1,10 +1,23 @@
 import type { InfoFields, InfoDB } from './infoTypes.js';
-import { version } from '../../../package.json';
 
-export const DEFAULT_INFO_DB: InfoFields = { version } as const;
+export const DEFAULT_INFO_DB: InfoFields = {
+  info: false,
+} as const;
 
-export const getVersion = (): string => DEFAULT_INFO_DB.version;
+let info: boolean = DEFAULT_INFO_DB.info;
+
+export const setInfo = (toggle: boolean): void => {
+  info = toggle;
+};
+
+export const getInfo = (): boolean => info;
+
+const clear = (): void => {
+  info = DEFAULT_INFO_DB.info;
+};
 
 export const db: InfoDB = {
-  getVersion,
+  clear,
+  setInfo,
+  getInfo,
 };

packages/mermaid/src/diagrams/info/infoDiagram.ts

@@ -1,5 +1,6 @@
 import type { DiagramDefinition } from '../../diagram-api/types.js';
-import { parser } from './infoParser.js';
+// @ts-ignore - jison doesn't export types
+import parser from './parser/info.jison';
 import { db } from './infoDb.js';
 import { renderer } from './infoRenderer.js';
 

packages/mermaid/src/diagrams/info/infoParser.ts

@@ -1,12 +0,0 @@
-import type { Info } from 'mermaid-parser';
-import { parse } from 'mermaid-parser';
-
-import { log } from '../../logger.js';
-import type { ParserDefinition } from '../../diagram-api/types.js';
-
-export const parser: ParserDefinition = {
-  parse: (input: string): void => {
-    const ast: Info = parse('info', input);
-    log.debug(ast);
-  },
-};

packages/mermaid/src/diagrams/info/infoTypes.ts

@@ -1,9 +1,11 @@
 import type { DiagramDB } from '../../diagram-api/types.js';
 
 export interface InfoFields {
-  version: string;
+  info: boolean;
 }
 
 export interface InfoDB extends DiagramDB {
-  getVersion: () => string;
+  clear: () => void;
+  setInfo: (info: boolean) => void;
+  getInfo: () => boolean;
 }

packages/mermaid/src/diagrams/info/parser/info.jison

@@ -0,0 +1,48 @@
+/** mermaid
+ *  https://knsv.github.io/mermaid
+ *  (c) 2015 Knut Sveidqvist
+ *  MIT license.
+ */
+%lex
+
+%options case-insensitive
+
+%{
+	// Pre-lexer code can go here
+%}
+
+%%
+
+"info"		      return 'info'    ;
+[\s\n\r]+         return 'NL'      ;
+[\s]+ 		      return 'space';
+"showInfo"		  return 'showInfo';
+<<EOF>>           return 'EOF'     ;
+.                 return 'TXT' ;
+
+/lex
+
+%start start
+
+%% /* language grammar */
+
+start
+// %{	: info document 'EOF' { return yy; } }
+	: info document 'EOF' { return yy; }
+	;
+
+document
+	: /* empty */
+	| document line
+	;
+
+line
+	: statement { }
+	| 'NL'
+	;
+
+statement
+	:  showInfo   { yy.setInfo(true);  }
+	;
+
+%%

packages/mermaid/src/diagrams/pie/parser/pie.jison

@@ -0,0 +1,106 @@
+/** mermaid
+ *  https://knsv.github.io/mermaid
+ *  (c) 2015 Knut Sveidqvist
+ *  MIT license.
+ */
+%lex
+%options case-insensitive
+
+%x string
+%x title
+%x open_directive
+%x type_directive
+%x arg_directive
+%x close_directive
+%x acc_title
+%x acc_descr
+%x acc_descr_multiline
+%%
+\%\%\{                                                          { 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';
+\%\%(?!\{)[^\n]*                                                /* skip comments */
+[^\}]\%\%[^\n]*                                                 /* skip comments */{ /*console.log('');*/ }
+[\n\r]+                                                         return 'NEWLINE';
+\%\%[^\n]*                                                      /* do nothing */
+[\s]+ 		                                                      /* ignore */
+title                                                           { this.begin("title");return 'title'; }
+<title>(?!\n|;|#)*[^\n]*                                        { this.popState(); return "title_value"; }
+
+accTitle\s*":"\s*                                               { this.begin("acc_title");return 'acc_title'; }
+<acc_title>(?!\n|;|#)*[^\n]*                                    { this.popState(); return "acc_title_value"; }
+accDescr\s*":"\s*                                               { this.begin("acc_descr");return 'acc_descr'; }
+<acc_descr>(?!\n|;|#)*[^\n]*                                    { this.popState(); return "acc_descr_value"; }
+accDescr\s*"{"\s*                                { this.begin("acc_descr_multiline");}
+<acc_descr_multiline>[\}]                       { this.popState(); }
+<acc_descr_multiline>[^\}]*                     return "acc_descr_multiline_value";
+["]                                                             { this.begin("string"); }
+<string>["]                                                     { this.popState(); }
+<string>[^"]*                                                   { return "txt"; }
+"pie"		                                                        return 'PIE';
+"showData"                                                      return 'showData';
+":"[\s]*[\d]+(?:\.[\d]+)?                                       return "value";
+<<EOF>>                                                         return 'EOF';
+
+/lex
+
+%start start
+
+%% /* language grammar */
+
+start
+  : eol start
+  | directive start
+	| PIE document
+  | PIE showData document {yy.setShowData(true);}
+	;
+
+document
+	: /* empty */
+	| document line
+	;
+
+line
+	: statement eol { $$ = $1 }
+	;
+
+statement
+  :
+	| txt value          { yy.addSection($1,yy.cleanupValue($2)); }
+	| title title_value  { $$=$2.trim();yy.setDiagramTitle($$); }
+  | acc_title acc_title_value  { $$=$2.trim();yy.setAccTitle($$); }
+  | acc_descr acc_descr_value  { $$=$2.trim();yy.setAccDescription($$); }
+  | acc_descr_multiline_value { $$=$1.trim();yy.setAccDescription($$); }  | section {yy.addSection($1.substr(8));$$=$1.substr(8);}
+	| directive
+	;
+
+directive
+  : openDirective typeDirective closeDirective
+  | openDirective typeDirective ':' argDirective closeDirective
+  ;
+
+eol
+  : NEWLINE
+  | ';'
+  | EOF
+  ;
+
+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', 'pie'); }
+  ;
+
+%%

packages/mermaid/src/diagrams/pie/pie.spec.ts

@@ -1,4 +1,5 @@
-import { parser } from './pieParser.js';
+// @ts-ignore: JISON doesn't support types
+import { parser } from './parser/pie.jison';
 import { DEFAULT_PIE_DB, db } from './pieDb.js';
 import { setConfig } from '../../config.js';
 
@@ -7,7 +8,13 @@ setConfig({
 });
 
 describe('pie', () => {
-  beforeEach(() => db.clear());
+  beforeAll(() => {
+    parser.yy = db;
+  });
+
+  beforeEach(() => {
+    parser.yy.clear();
+  });
 
   describe('parse', () => {
     it('should handle very simple pie', () => {

packages/mermaid/src/diagrams/pie/pieDb.ts

@@ -1,5 +1,7 @@
 import { log } from '../../logger.js';
 import { parseDirective as _parseDirective } from '../../directiveUtils.js';
+import { getConfig as commonGetConfig } from '../../config.js';
+import { sanitizeText } from '../common/common.js';
 import {
   setAccTitle,
   getAccTitle,
@@ -10,7 +12,7 @@ import {
   clear as commonClear,
 } from '../../commonDb.js';
 import type { ParseDirectiveDefinition } from '../../diagram-api/types.js';
-import type { PieFields, PieDB, Sections, D3Section } from './pieTypes.js';
+import type { PieFields, PieDB, Sections } from './pieTypes.js';
 import type { RequiredDeep } from 'type-fest';
 import type { PieDiagramConfig } from '../../config.type.js';
 import DEFAULT_CONFIG from '../../defaultConfig.js';
@@ -39,7 +41,8 @@ const clear = (): void => {
   commonClear();
 };
 
-const addSection = ({ label, value }: D3Section): void => {
+const addSection = (label: string, value: number): void => {
+  label = sanitizeText(label, commonGetConfig());
   if (sections[label] === undefined) {
     sections[label] = value;
     log.debug(`added new section: ${label}, with value: ${value}`);
@@ -48,6 +51,13 @@ const addSection = ({ label, value }: D3Section): void => {
 
 const getSections = (): Sections => sections;
 
+const cleanupValue = (value: string): number => {
+  if (value.substring(0, 1) === ':') {
+    value = value.substring(1).trim();
+  }
+  return Number(value.trim());
+};
+
 const setShowData = (toggle: boolean): void => {
   showData = toggle;
 };
@@ -68,6 +78,7 @@ export const db: PieDB = {
 
   addSection,
   getSections,
+  cleanupValue,
   setShowData,
   getShowData,
 };

packages/mermaid/src/diagrams/pie/pieDiagram.ts

@@ -1,5 +1,6 @@
 import type { DiagramDefinition } from '../../diagram-api/types.js';
-import { parser } from './pieParser.js';
+// @ts-ignore: JISON doesn't support types
+import parser from './parser/pie.jison';
 import { db } from './pieDb.js';
 import styles from './pieStyles.js';
 import { renderer } from './pieRenderer.js';

packages/mermaid/src/diagrams/pie/pieParser.ts

@@ -1,24 +0,0 @@
-import type { Pie, PieSection } from 'mermaid-parser';
-import { parse } from 'mermaid-parser';
-
-import { log } from '../../logger.js';
-import type { ParserDefinition } from '../../diagram-api/types.js';
-import { populateCommonDb } from '../common/populateCommonDb.js';
-import type { PieDB } from './pieTypes.js';
-import { db } from './pieDb.js';
-
-function populateDb(ast: Pie, db: PieDB) {
-  populateCommonDb(ast, db);
-  db.setShowData(ast.showData);
-  ast.sections.map((section: PieSection) => {
-    db.addSection(section);
-  });
-}
-
-export const parser: ParserDefinition = {
-  parse: (input: string): void => {
-    const ast: Pie = parse('pie', input);
-    log.debug(ast);
-    populateDb(ast, db);
-  },
-};

packages/mermaid/src/diagrams/pie/pieRenderer.ts

@@ -6,24 +6,22 @@ import { configureSvgSize } from '../../setupGraphViewbox.js';
 import { getConfig } from '../../config.js';
 import { cleanAndMerge, parseFontSize } from '../../utils.js';
 import type { DrawDefinition, Group, SVG } from '../../diagram-api/types.js';
-import type { D3Section, PieDB, Sections } from './pieTypes.js';
+import type { D3Sections, PieDB, Sections } from './pieTypes.js';
 import type { MermaidConfig, PieDiagramConfig } from '../../config.type.js';
 import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
 
-const createPieArcs = (sections: Sections): d3.PieArcDatum<D3Section>[] => {
+const createPieArcs = (sections: Sections): d3.PieArcDatum<D3Sections>[] => {
   // Compute the position of each group on the pie:
-  const pieData: D3Section[] = Object.entries(sections)
-    .map((element: [string, number]): D3Section => {
+  const pieData: D3Sections[] = Object.entries(sections).map(
+    (element: [string, number]): D3Sections => {
       return {
         label: element[0],
         value: element[1],
       };
-    })
-    .sort((a: D3Section, b: D3Section): number => {
-      return b.value - a.value;
-    });
-  const pie: d3.Pie<unknown, D3Section> = d3pie<D3Section>().value(
-    (d3Section: D3Section): number => d3Section.value
+    }
+  );
+  const pie: d3.Pie<unknown, D3Sections> = d3pie<D3Sections>().value(
+    (d3Section: D3Sections): number => d3Section.value
   );
   return pie(pieData);
 };
@@ -66,11 +64,13 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => {
   const textPosition: number = pieConfig.textPosition;
   const radius: number = Math.min(width, height) / 2 - MARGIN;
   // Shape helper to build arcs:
-  const arcGenerator: d3.Arc<unknown, d3.PieArcDatum<D3Section>> = arc<d3.PieArcDatum<D3Section>>()
+  const arcGenerator: d3.Arc<unknown, d3.PieArcDatum<D3Sections>> = arc<
+    d3.PieArcDatum<D3Sections>
+  >()
     .innerRadius(0)
     .outerRadius(radius);
-  const labelArcGenerator: d3.Arc<unknown, d3.PieArcDatum<D3Section>> = arc<
-    d3.PieArcDatum<D3Section>
+  const labelArcGenerator: d3.Arc<unknown, d3.PieArcDatum<D3Sections>> = arc<
+    d3.PieArcDatum<D3Sections>
   >()
     .innerRadius(radius * textPosition)
     .outerRadius(radius * textPosition);
@@ -83,7 +83,7 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => {
     .attr('class', 'pieOuterCircle');
 
   const sections: Sections = db.getSections();
-  const arcs: d3.PieArcDatum<D3Section>[] = createPieArcs(sections);
+  const arcs: d3.PieArcDatum<D3Sections>[] = createPieArcs(sections);
 
   const myGeneratedColors = [
     themeVariables.pie1,
@@ -109,7 +109,7 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => {
     .enter()
     .append('path')
     .attr('d', arcGenerator)
-    .attr('fill', (datum: d3.PieArcDatum<D3Section>) => {
+    .attr('fill', (datum: d3.PieArcDatum<D3Sections>) => {
       return color(datum.data.label);
     })
     .attr('class', 'pieCircle');
@@ -125,10 +125,10 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => {
     .data(arcs)
     .enter()
     .append('text')
-    .text((datum: d3.PieArcDatum<D3Section>): string => {
+    .text((datum: d3.PieArcDatum<D3Sections>): string => {
       return ((datum.data.value / sum) * 100).toFixed(0) + '%';
     })
-    .attr('transform', (datum: d3.PieArcDatum<D3Section>): string => {
+    .attr('transform', (datum: d3.PieArcDatum<D3Sections>): string => {
       return 'translate(' + labelArcGenerator.centroid(datum) + ')';
     })
     .style('text-anchor', 'middle')
@@ -168,7 +168,7 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => {
     .append('text')
     .attr('x', LEGEND_RECT_SIZE + LEGEND_SPACING)
     .attr('y', LEGEND_RECT_SIZE - LEGEND_SPACING)
-    .text((datum: d3.PieArcDatum<D3Section>): string => {
+    .text((datum: d3.PieArcDatum<D3Sections>): string => {
       const { label, value } = datum.data;
       if (db.getShowData()) {
         return `${label} [${value}]`;

packages/mermaid/src/diagrams/pie/pieTypes.ts

@@ -36,7 +36,7 @@ export interface PieStyleOptions {
 
 export type Sections = Record<string, number>;
 
-export interface D3Section {
+export interface D3Sections {
   label: string;
   value: number;
 }
@@ -56,8 +56,9 @@ export interface PieDB extends DiagramDB {
   getAccDescription: () => string;
 
   // diagram db
-  addSection: ({ label, value }: D3Section) => void;
+  addSection: (label: string, value: number) => void;
   getSections: () => Sections;
+  cleanupValue: (value: string) => number;
   setShowData: (toggle: boolean) => void;
   getShowData: () => boolean;
 }

packages/mermaid/src/docs/.vitepress/theme/redirect.spec.ts

@@ -21,15 +21,6 @@ test.each([
   ],
   ['https://mermaid-js.github.io/mermaid/#/n00b-advanced', 'config/advanced.html'], // without .md
   ['https://mermaid-js.github.io/mermaid/#/n00b-advanced.md', 'config/advanced.html'], // with .md
-
-  ['https://mermaid-js.github.io/mermaid/#/n00b-gettingstarted', 'intro/getting-started.html'],
-  ['https://mermaid-js.github.io/mermaid/#/n00b-gettingstarted.md', 'intro/getting-started.html'],
-  ['https://mermaid-js.github.io/mermaid/#/n00b-overview', 'intro/getting-started.html'],
-  ['https://mermaid-js.github.io/mermaid/#/n00b-overview.md', 'intro/getting-started.html'],
-  ['https://mermaid-js.github.io/mermaid/#/n00b-syntaxreference', 'intro/syntax-reference.html'],
-  ['https://mermaid-js.github.io/mermaid/#/n00b-syntaxreference.md', 'intro/syntax-reference.html'],
-  ['https://mermaid-js.github.io/mermaid/#/quickstart', 'intro/getting-started.html'],
-  ['https://mermaid-js.github.io/mermaid/#/quickstart.md', 'intro/getting-started.html'],
   [
     'https://mermaid-js.github.io/mermaid/#/flowchart?id=a-node-in-the-form-of-a-circle', // with id, without .md
     'syntax/flowchart.html#a-node-in-the-form-of-a-circle',

packages/mermaid/src/docs/.vitepress/theme/redirect.ts

@@ -25,13 +25,9 @@ const getBaseFile = (url: URL): Redirect => {
 };
 
 /**
- * Used to redirect old (pre-vitepress) documentation pages to corresponding new pages.
- * The key is the old documentation ID, and the value is the new documentation path.
- * No key should be added here as it already has all the old documentation IDs.
- * If you are changing a documentation page, you should update the corresponding value here, and add an entry in the urlRedirectMap below.
+ * Used to redirect old documentation pages to corresponding new pages.
  */
 const idRedirectMap: Record<string, string> = {
-  // ID of the old documentation page: Path of the new documentation page
   '8.6.0_docs': '',
   accessibility: 'config/theming',
   breakingchanges: '',
@@ -55,9 +51,13 @@ const idRedirectMap: Record<string, string> = {
   mindmap: 'syntax/mindmap',
   'more-pages': '',
   'n00b-advanced': 'config/advanced',
+  'config/n00b-advanced': 'config/advanced',
   'n00b-gettingstarted': 'intro/getting-started',
+  'intro/n00b-gettingStarted': 'intro/getting-started',
   'n00b-overview': 'intro/getting-started',
   'n00b-syntaxreference': 'intro/syntax-reference',
+  'intro/n00b-syntaxReference': 'intro/syntax-reference',
+  'community/n00b-overview': 'intro/getting-started',
   newdiagram: 'community/newDiagram',
   pie: 'syntax/pie',
   plugins: '',
@@ -77,19 +77,10 @@ const idRedirectMap: Record<string, string> = {
 
 /**
  * Used to redirect pages that have been moved in the vitepress site.
- * No keys should be deleted from here.
- * If you are changing a documentation page, you should update the corresponding value here,
- * and update the entry in the idRedirectMap above if it was present
- * (No need to add new keys in idRedirectMap).
  */
 const urlRedirectMap: Record<string, string> = {
-  // Old URL: New URL
   '/misc/faq.html': 'configure/faq.html',
   '/syntax/c4c.html': 'syntax/c4.html',
-  '/config/n00b-advanced.html': 'config/advanced',
-  '/intro/n00b-gettingStarted.html': 'intro/getting-started',
-  '/intro/n00b-syntaxReference.html': 'intro/syntax-reference',
-  '/community/n00b-overview.html': 'intro/getting-started',
 };
 
 /**

packages/mermaid/src/docs/community/code.md

@@ -145,7 +145,7 @@ We know it can sometimes be hard to code _and_ write user documentation.
 
 Our documentation is managed in `packages/mermaid/src/docs`. Details on how to edit is in the [Contributing Documentation](#contributing-documentation) section.
 
-Create another issue specifically for the documentation.
+Create another issue specifically for the documentation.  
 You will need to help with the PR, but definitely ask for help if you feel stuck.
 When it feels hard to write stuff out, explaining it to someone and having that person ask you clarifying questions can often be 80% of the work!
 

packages/mermaid/src/docs/intro/getting-started.md

@@ -94,9 +94,9 @@ b. The importing of mermaid library through the `mermaid.esm.mjs` or `mermaid.es
 <body>
   Here is a mermaid diagram:
   <pre class="mermaid">
-        graph TD
-        A[Client] --> B[Load Balancer]
-        B --> C[Server01]
+        graph TD 
+        A[Client] --> B[Load Balancer] 
+        B --> C[Server01] 
         B --> D[Server02]
   </pre>
 </body>
@@ -135,18 +135,18 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. However, doi
   <body>
     Here is one mermaid diagram:
     <pre class="mermaid">
-            graph TD
-            A[Client] --> B[Load Balancer]
-            B --> C[Server1]
+            graph TD 
+            A[Client] --> B[Load Balancer] 
+            B --> C[Server1] 
             B --> D[Server2]
     </pre>
 
     And here is another:
     <pre class="mermaid">
-            graph TD
+            graph TD 
             A[Client] -->|tcp_123| B
-            B(Load Balancer)
-            B -->|tcp_456| C[Server1]
+            B(Load Balancer) 
+            B -->|tcp_456| C[Server1] 
             B -->|tcp_456| D[Server2]
     </pre>
 
@@ -168,15 +168,15 @@ In this example mermaid.js is referenced in `src` as a separate JavaScript file,
   </head>
   <body>
     <pre class="mermaid">
-            graph LR
-            A --- B
-            B-->C[fa:fa-ban forbidden]
+            graph LR 
+            A --- B 
+            B-->C[fa:fa-ban forbidden] 
             B-->D(fa:fa-spinner);
     </pre>
     <pre class="mermaid">
-            graph TD
-            A[Client] --> B[Load Balancer]
-            B --> C[Server1]
+            graph TD 
+            A[Client] --> B[Load Balancer] 
+            B --> C[Server1] 
             B --> D[Server2]
     </pre>
     <script type="module">

packages/mermaid/src/docs/intro/index.md

@@ -179,7 +179,7 @@ Update version number in `package.json`.
 npm publish
 ```
 
-The above command generates files into the `dist` folder and publishes them to [npmjs.com](https://www.npmjs.com/).
+The above command generates files into the `dist` folder and publishes them to [npmjs.org](npmjs.org).
 
 ## Security and safe diagrams
 

packages/mermaid/src/docs/intro/syntax-reference.md

@@ -54,7 +54,7 @@ The following are the most commonly used methods, and they are all tied to Merma
 
 Here you can edit certain values to change the behavior and appearance of the diagram.
 
-### [The initialize() call](./getting-started.md#_3-calling-the-javascript-api)
+### [The initialize() call](./getting-started#_3-calling-the-javascript-api)
 
 Used when Mermaid is called via an API, or through a `<script>` tag.
 

packages/mermaid/src/docs/news/announcements.md

@@ -1,7 +1,7 @@
 # Announcements
 
-## [Special cases broke Microsoft Zune and can ruin your code base too](https://www.mermaidchart.com/blog/posts/special-cases-broke-microsoft-zune-and-can-ruin-your-code-base-too/)
+## [From Chaos to Clarity: Exploring Mind Maps with MermaidJS](https://www.mermaidchart.com/blog/posts/from-chaos-to-clarity-exploring-mind-maps-with-mermaidjs)
 
-23 August 2023 · 15 mins
+24 July 2023 · 4 mins
 
-Read about the pitfalls of special cases in programming, illustrating how they can lead to complexity, diminish readability, and create maintenance challenges.
+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.

packages/mermaid/src/docs/news/blog.md

@@ -1,23 +1,5 @@
 # Blog
 
-## [Special cases broke Microsoft Zune and can ruin your code base too](https://www.mermaidchart.com/blog/posts/special-cases-broke-microsoft-zune-and-can-ruin-your-code-base-too/)
-
-23 August 2023 · 15 mins
-
-Read about the pitfalls of special cases in programming, illustrating how they can lead to complexity, diminish readability, and create maintenance challenges.
-
-## [New AI chatbot now available on Mermaid Chart to simplify text-based diagram creation](https://www.mermaidchart.com/blog/posts/ai-chatbot-now-available-on-mermaid-chart-to-simplify-text-based-diagram-creation/)
-
-14 August 2023 · 4 mins
-
-Introducing Mermaid Chart’s new AI chatbot, a diagramming assistant that simplifies text-based diagram creation for everyone, from developers to educators, offering features to start, edit, and fix diagrams, and embodying our vision to make diagramming accessible, user-friendly, and fun.
-
-## [Believe It or Not, You Still Need an Online UML Diagram Tool](https://www.mermaidchart.com/blog/posts/uml-diagram-tool/)
-
-14 August 2023 · 8 mins
-
-A UML diagram tool helps developers and other professionals quickly create and share UML diagrams that communicate information about complex software systems.
-
 ## [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

packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md

@@ -144,22 +144,6 @@ 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.
 
-### Entity Name Aliases (v<MERMAID_RELEASE_VERSION>+)
-
-An alias can be added to an entity using square brackets. If provided, the alias will be showed in the diagram instead of the entity name.
-
-```mermaid-example
-erDiagram
-    p[Person] {
-        string firstName
-        string lastName
-    }
-    a["Customer Account"] {
-        string email
-    }
-    p ||--o| a : has
-```
-
 #### Attribute Keys and Comments
 
 Attributes may also have a `key` or comment defined. Keys can be `PK`, `FK` or `UK`, for Primary Key, Foreign Key or Unique Key. To specify multiple key constraints on a single attribute, separate them with a comma (e.g., `PK, FK`).. A `comment` is defined by double quotes at the end of an attribute. Comments themselves cannot have double-quote characters in them.

packages/mermaid/src/docs/syntax/flowchart.md

@@ -751,7 +751,7 @@ The icons are accessed via the syntax fa:#icon class name#.
 
 ```mermaid-example
 flowchart TD
-    B["fa:fa-twitter for peace"]
+    B["fab:fa-twitter for peace"]
     B-->C[fa:fa-ban forbidden]
     B-->D(fa:fa-spinner)
     B-->E(A fa:fa-camera-retro perhaps?)

packages/mermaid/src/mermaid.spec.ts

@@ -102,6 +102,7 @@ describe('when using mermaid and ', () => {
           parse: (_text) => {
             return;
           },
+          parser: { yy: {} },
         },
         styles: () => {
           // do nothing

packages/mermaid/src/schemas/config.schema.yaml

@@ -7,7 +7,7 @@
 #   - `scripts/create-types-from-json-schema.mjs`
 #     Used to generate the `src/config.type.ts` TypeScript types for MermaidConfig
 #     with the `json-schema-to-typescript` NPM package.
-#   - `.build/jsonSchema.ts`
+#   - `.vite/jsonSchemaPlugin.ts`
 #     Used to generate the default values from the `default` keys in this
 #     JSON Schema using the `ajv` NPM package.
 #     Non-JSON values, like functions or `undefined`, still need to be manually
@@ -21,7 +21,7 @@
 # - Use `meta:enum` to document enum values (from jsonschema2md)
 # - Use `tsType` to override the TypeScript type (from json-schema-to-typescript)
 # - If adding a new object to `MermaidConfig` (e.g. a new diagram type),
-#   you may need to add it to `.build/jsonSchema.ts` and `src/docs.mts`
+#   you may need to add it to `.vite/jsonSchemaPlugin.ts` and `src/docs.mts`
 #   to get the docs/default values to generate properly.
 $id: https://mermaid-js.github.io/schemas/config.schema.json
 $schema: https://json-schema.org/draft/2019-09/schema

packages/parser/LICENSE

@@ -1,21 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2023 Yokozuna59
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

packages/parser/README.md

@@ -1,63 +0,0 @@
-<p align="center">
-<img src="https://raw.githubusercontent.com/mermaid-js/mermaid/develop/docs/public/favicon.svg" height="150">
-
-</p>
-<h1 align="center">
-Mermaid Parser
-</h1>
-
-<p align="center">
-Mermaid parser package
-<p>
-
-[![NPM](https://img.shields.io/npm/v/mermaid-parser)](https://www.npmjs.com/package/mermaid-parser)
-
-## How the package works
-
-The package exports a `parse` function that has two parameters:
-
-```ts
-declare function parse<T extends DiagramAST>(
-  diagramType: keyof typeof initializers,
-  text: string
-): T;
-```
-
-## How does a Langium-based parser work?
-
-```mermaid
-sequenceDiagram
-actor Package
-participant Module
-participant TokenBuilder
-participant Lexer
-participant Parser
-participant ValueConverter
-
-
-Package ->> Module: Create services
-Module ->> TokenBuilder: Override or/and<br>reorder rules
-TokenBuilder ->> Lexer: Read the string and transform<br>it into a token stream
-Lexer ->> Parser: Parse token<br>stream into AST
-Parser ->> ValueConverter: Clean/modify tokenized<br>rules returned value
-ValueConverter -->> Package: Return AST
-```
-
-- When to override `TokenBuilder`?
-
-  - To override keyword rules.
-  - To override terminal rules that need a custom function.
-  - To manually reorder the list of rules.
-
-- When to override `Lexer`?
-
-  - To modify input before tokenizing.
-  - To insert/modify tokens that cannot or have not been parsed.
-
-- When to override `LangiumParser`?
-
-  - To insert or modify attributes that can't be parsed.
-
-- When to override `ValueConverter`?
-
-  - To modify the returned value from the parser.

packages/parser/langium-config.json

@@ -1,18 +0,0 @@
-{
-  "projectName": "Mermaid",
-  "languages": [
-    {
-      "id": "info",
-      "grammar": "src/language/info/info.langium",
-      "fileExtensions": [".mmd", ".mermaid"]
-    },
-    {
-      "id": "pie",
-      "grammar": "src/language/pie/pie.langium",
-      "fileExtensions": [".mmd", ".mermaid"]
-    }
-  ],
-  "mode": "production",
-  "importExtension": ".js",
-  "out": "src/language/generated"
-}

packages/parser/package.json

@@ -1,48 +0,0 @@
-{
-  "name": "mermaid-parser",
-  "version": "0.2.0",
-  "description": "MermaidJS parser",
-  "author": "Yokozuna59",
-  "contributors": [
-    "Yokozuna59",
-    "Sidharth Vinod (https://sidharth.dev)"
-  ],
-  "homepage": "https://github.com/mermaid-js/mermaid/tree/develop/packages/mermaid/parser/#readme",
-  "types": "dist/src/index.d.ts",
-  "type": "module",
-  "exports": {
-    ".": {
-      "import": "./dist/mermaid-parser.core.mjs",
-      "types": "./dist/src/index.d.ts"
-    }
-  },
-  "scripts": {
-    "clean": "rimraf dist src/language/generated",
-    "langium:generate": "langium generate",
-    "langium:watch": "langium generate --watch",
-    "prepublishOnly": "pnpm -w run build"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/mermaid-js/mermaid.git",
-    "directory": "packages/parser"
-  },
-  "license": "MIT",
-  "keywords": [
-    "mermaid",
-    "parser",
-    "ast"
-  ],
-  "dependencies": {
-    "langium": "2.0.1"
-  },
-  "devDependencies": {
-    "langium-cli": "2.0.1"
-  },
-  "files": [
-    "dist/"
-  ],
-  "publishConfig": {
-    "access": "public"
-  }
-}

packages/parser/src/index.ts

@@ -1,3 +0,0 @@
-export type { Info, Pie, PieSection } from './language/index.js';
-export type { DiagramAST } from './parse.js';
-export { parse, MermaidParseError } from './parse.js';

packages/parser/src/language/chevrotainWrapper.ts

@@ -1,51 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-type CustomPatternMatcherReturn = [string] & { payload?: any };
-
-export type CustomPatternMatcherFunc = (
-  text: string,
-  offset: number,
-  tokens: IToken[],
-  groups: {
-    [groupName: string]: IToken[];
-  }
-) => CustomPatternMatcherReturn | RegExpExecArray | null;
-
-interface ICustomPattern {
-  exec: CustomPatternMatcherFunc;
-}
-
-type TokenPattern = RegExp | string | CustomPatternMatcherFunc | ICustomPattern;
-
-export interface IToken {
-  image: string;
-  startOffset: number;
-  startLine?: number;
-  startColumn?: number;
-  endOffset?: number;
-  endLine?: number;
-  endColumn?: number;
-  isInsertedInRecovery?: boolean;
-  tokenTypeIdx: number;
-  tokenType: TokenType;
-  payload?: any;
-}
-
-export interface TokenType {
-  name: string;
-  GROUP?: string;
-  PATTERN?: TokenPattern;
-  LABEL?: string;
-  LONGER_ALT?: TokenType | TokenType[];
-  POP_MODE?: boolean;
-  PUSH_MODE?: string;
-  LINE_BREAKS?: boolean;
-  CATEGORIES?: TokenType[];
-  tokenTypeIdx?: number;
-  categoryMatches?: number[];
-  categoryMatchesMap?: {
-    [tokType: number]: boolean;
-  };
-  isParent?: boolean;
-  START_CHARS_HINT?: (string | number)[];
-}

packages/parser/src/language/common/common.langium

@@ -1,14 +0,0 @@
-fragment TitleAndAccessibilities:
-  ((accDescr=ACC_DESCR | accTitle=ACC_TITLE | title=TITLE) NEWLINE+)+
-;
-
-terminal NEWLINE: /\r?\n/;
-terminal ACC_DESCR: /accDescr(?:[\t ]*:[\t ]*[^\n\r]*?(?=%%)|\s*{[^}]*})|accDescr(?:[\t ]*:[\t ]*[^\n\r]*|\s*{[^}]*})/;
-terminal ACC_TITLE: /accTitle[\t ]*:[\t ]*[^\n\r]*?(?=%%)|accTitle[\t ]*:[\t ]*[^\n\r]*/;
-terminal TITLE: /title(?:[\t ]+[^\n\r]*?|)(?=%%)|title(?:[\t ]+[^\n\r]*|)/;
-
-hidden terminal WHITESPACE: /[\t ]+/;
-// TODO: add YAML_COMMENT hidden rule without interfere actual grammar
-hidden terminal YAML: /---[\t ]*\r?\n[\S\s]*?---[\t ]*(?!.)/;
-hidden terminal DIRECTIVE: /[\t ]*%%{[\S\s]*?}%%\s*/;
-hidden terminal SINGLE_LINE_COMMENT: /[\t ]*%%[^\n\r]*/;

packages/parser/src/language/common/commonLexer.ts

@@ -1,8 +0,0 @@
-import type { LexerResult } from 'langium';
-import { DefaultLexer } from 'langium';
-
-export class CommonLexer extends DefaultLexer {
-  public override tokenize(text: string): LexerResult {
-    return super.tokenize(text + '\n');
-  }
-}

packages/parser/src/language/common/commonMatcher.ts

@@ -1,14 +0,0 @@
-/**
- * Matches single and multiline accessible description
- */
-export const accessibilityDescrRegex = /accDescr(?:[\t ]*:[\t ]*([^\n\r]*)|\s*{([^}]*)})/;
-
-/**
- * Matches single line accessible title
- */
-export const accessibilityTitleRegex = /accTitle[\t ]*:[\t ]*([^\n\r]*)/;
-
-/**
- * Matches a single line title
- */
-export const titleRegex = /title([\t ]+([^\n\r]*)|)/;

packages/parser/src/language/common/index.ts

@@ -1,2 +0,0 @@
-export * from './commonLexer.js';
-export * from './valueConverter.js';

packages/parser/src/language/common/tokenBuilder.ts

@@ -1,26 +0,0 @@
-import type { GrammarAST, Stream, TokenBuilderOptions } from 'langium';
-import type { TokenType } from '../chevrotainWrapper.js';
-
-import { DefaultTokenBuilder } from 'langium';
-
-export class MermaidTokenBuilder extends DefaultTokenBuilder {
-  private keywords: Set<string>;
-  constructor(public _keywords: string[]) {
-    super();
-    this.keywords = new Set<string>(_keywords);
-  }
-
-  protected override buildKeywordTokens(
-    rules: Stream<GrammarAST.AbstractRule>,
-    terminalTokens: TokenType[],
-    options?: TokenBuilderOptions
-  ): TokenType[] {
-    const tokenTypes: TokenType[] = super.buildKeywordTokens(rules, terminalTokens, options);
-    tokenTypes.forEach((tokenType: TokenType): void => {
-      if (this.keywords.has(tokenType.name) && tokenType.PATTERN !== undefined) {
-        tokenType.PATTERN = new RegExp(tokenType.PATTERN.toString() + '(?!\\S)');
-      }
-    });
-    return tokenTypes;
-  }
-}