Started railroad diagrams

2025-12-10 06:24:16 +01:00 · 2023-08-03 17:27:41 +03:00
67 changed files with 1009 additions and 1009 deletions
--- a/.github/lychee.toml
+++ b/.github/lychee.toml
@@ -1,44 +0,0 @@
-#############################  Display  #############################
-
-# Verbose program output
-# Accepts log level: "error", "warn", "info", "debug", "trace"
-verbose = "debug"
-
-# Don't show interactive progress bar while checking links.
-no_progress = true
-
-#############################  Cache  ###############################
-
-# Enable link caching. This can be helpful to avoid checking the same links on
-# multiple runs.
-cache = true
-
-# Discard all cached requests older than this duration.
-max_cache_age = "1d"
-
-#############################  Requests  ############################
-
-# Comma-separated list of accepted status codes for valid links.
-accept = [200, 429]
-
-#############################  Exclusions  ##########################
-
-# Exclude URLs and mail addresses from checking (supports regex).
-exclude = [
-# Network error: Forbidden
-"https://codepen.io",
-
-# Timeout error, maybe Twitter has anti-bot defenses against GitHub's CI servers?
-"https://twitter.com/mermaidjs_",
-
-# Don't check files that are generated during the build via `pnpm docs:code`
-'packages/mermaid/src/docs/config/setup/*',
-
-# Ignore slack invite
-"https://join.slack.com/"
-]
-
-# Exclude all private IPs from checking.
-# Equivalent to setting `exclude_private`, `exclude_link_local`, and
-# `exclude_loopback` to true.
-exclude_all_private = true
--- a/.github/workflows/link-checker.yml
+++ b/.github/workflows/link-checker.yml
@@ -20,7 +20,7 @@ on:
    - cron: '30 8 * * *'

 jobs:
-  link-checker:
+  linkChecker:
    runs-on: ubuntu-latest
    permissions:
      # lychee only uses the GITHUB_TOKEN to avoid rate-limiting
@@ -39,7 +39,10 @@ jobs:
        uses: lycheeverse/lychee-action@v1.8.0
        with:
          args: >-
-            --config .github/lychee.toml
+            --verbose
+            --no-progress
+            --cache
+            --max-cache-age 1d
            packages/mermaid/src/docs/**/*.md
            README.md
            README.zh-CN.md
--- a/.lycheeignore
+++ b/.lycheeignore
@@ -0,0 +1,17 @@
+# These links are ignored by our link checker https://github.com/lycheeverse/lychee
+# The file allows you to list multiple regular expressions for exclusion (one pattern per line).
+
+# Network error: Forbidden
+https://codepen.io
+
+# Timeout error, maybe Twitter has anti-bot defenses against GitHub's CI servers?
+https://twitter.com/mermaidjs_
+
+# Don't check files that are generated during the build via `pnpm docs:code`
+packages/mermaid/src/docs/config/setup/*
+
+# Ignore localhost
+http://localhost:3333/
+
+# Ignore slack invite
+https://join.slack.com/
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -64,7 +64,7 @@ eg: `feature/2945_state-diagram-new-arrow-florbs`, `bug/1123_fix_random_ugly_red

 Documentation is necessary for all non bugfix/refactoring changes.

-Only make changes to files that are in [`/packages/mermaid/src/docs`](packages/mermaid/src/docs)
+Only make changes to files are in [`/packages/mermaid/src/docs`](packages/mermaid/src/docs)

 **_DO NOT CHANGE FILES IN `/docs`_**

--- a/mocks/railroadRenderer.js
+++ b/mocks/railroadRenderer.js
@@ -0,0 +1,13 @@
+/**
+ * Mocked Railroad diagram renderer
+ */
+
+import { vi } from 'vitest';
+
+export const draw = vi.fn().mockImplementation(() => {
+  return '';
+});
+
+export default {
+  draw,
+};
--- a/cypress/integration/rendering/flowchart-v2.spec.js
+++ b/cypress/integration/rendering/flowchart-v2.spec.js
@@ -449,7 +449,7 @@ flowchart TD
      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
    );
  });
-  it('65-1: text-color from classes', () => {
+  it('65: text-color from classes', () => {
    imgSnapshotTest(
      `
      flowchart LR
@@ -460,31 +460,6 @@ flowchart TD
      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
    );
  });
-  it('65-2: bold text from classes', () => {
-    imgSnapshotTest(
-      `
-      flowchart
-        classDef cat fill:#f9d5e5, stroke:#233d4d,stroke-width:2px, font-weight:bold;
-        CS(A long bold text to be viewed):::cat
-      `,
-      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
-    );
-  });
-  it('65-3: bigger font from classes', () => {
-    imgSnapshotTest(
-      `
-flowchart
-  Node1:::class1 --> Node2:::class2
-  Node1:::class1 --> Node3:::class2
-  Node3 --> Node4((I am a circle)):::larger
-
-  classDef class1 fill:lightblue
-  classDef class2 fill:pink
-  classDef larger font-size:30px,fill:yellow
-      `,
-      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
-    );
-  });
  it('66: More nested subgraph cases (TB)', () => {
    imgSnapshotTest(
      `
--- a/cypress/integration/rendering/flowchart.spec.js
+++ b/cypress/integration/rendering/flowchart.spec.js
@@ -891,27 +891,4 @@ graph TD
      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
    );
  });
-  it('66: apply class called default on node called default', () => {
-    imgSnapshotTest(
-      `
-      graph TD
-        classDef default fill:#a34,stroke:#000,stroke-width:4px,color:#fff 
-        hello --> default
-      `,
-      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
-    );
-  });
-
-  it('67: should be able to style default node independently', () => {
-    imgSnapshotTest(
-      `
-    flowchart TD
-      classDef default fill:#a34
-      hello --> default
-
-      style default stroke:#000,stroke-width:4px
-    `,
-      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
-    );
-  });
 });
--- a/cypress/integration/rendering/railroad.spec.ts
+++ b/cypress/integration/rendering/railroad.spec.ts
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -58,21 +58,12 @@
  </head>
  <body>
    <pre id="diagram" class="mermaid">
-      flowchart
-        classDef mainCategories fill:#f9d5e5, stroke:#233d4d,stroke-width:2px, font-weight:bold;
-        CS(Customer Awareness Journey):::mainCategories
-      </pre
-    >
-    <pre id="diagram" class="mermaid">
-flowchart
-Node1:::class1 --> Node2:::class2
-Node1:::class1 --> Node3:::class2
-Node3 --> Node4((I am a circle)):::larger
-
-classDef class1 fill:lightblue
-classDef class2 fill:pink
-classDef larger font-size:30px,fill:yellow
-      </pre
+---
+title: Simple flowchart with invisible edges
+---
+flowchart TD
+A ~~~ B
+  </pre
    >
    <pre id="diagram" class="mermaid2">
 stateDiagram-v2
--- a/demos/index.html
+++ b/demos/index.html
@@ -7,7 +7,6 @@
    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
    <style>
      div.mermaid {
-        /* font-family: 'trebuchet ms', verdana, arial; */
        font-family: 'Courier New', Courier, monospace !important;
      }
    </style>
@@ -78,6 +77,9 @@
      <li>
        <h2><a href="./sankey.html">Sankey</a></h2>
      </li>
+      <li>
+        <h2><a href="./railroad.html">Railroad</a></h2>
+      </li>
    </ul>
  </body>
 </html>
--- a/demos/railroad.html
+++ b/demos/railroad.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Railroad Mermaid Quick Test Page</title>
+    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
+    <style>
+      div.mermaid {
+        font-family: 'Courier New', Courier, monospace !important;
+      }
+    </style>
+  </head>
+
+  <body>
+    <h1>Railroad diagram demos</h1>
+    <h2>Example</h2>
+    <pre class="mermaid">
+      railroad-beta
+    </pre>
+
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
+      mermaid.initialize({
+        theme: 'default',
+        logLevel: 3,
+        securityLevel: 'loose',
+        railroad: {},
+      });
+    </script>
+  </body>
+</html>
--- a/docs/community/newDiagram.md
+++ b/docs/community/newDiagram.md
@@ -10,7 +10,7 @@

 #### Grammar

-This would be to define a JISON grammar for the new diagram type. That should start with a way to identify that the text in the mermaid tag is a diagram of that type. Create a new folder under diagrams for your new diagram type and a parser folder in it. This leads us to step 2.
+This would be to define a jison grammar for the new diagram type. That should start with a way to identify that the text in the mermaid tag is a diagram of that type. Create a new folder under diagrams for your new diagram type and a parser folder in it. This leads us to step 2.

 For instance:

@@ -60,7 +60,7 @@ Place the renderer in the diagram folder.

 ### Step 3: Detection of the new diagram type

-The second thing to do is to add the capability to detect the new diagram to type to the detectType in `diagram-api/detectType.ts`. The detection should return a key for the new diagram type.
+The second thing to do is to add the capability to detect the new diagram to type to the detectType in utils.js. The detection should return a key for the new diagram type.
 [This key will be used to as the aria roledescription](#aria-roledescription), so it should be a word that clearly describes the diagram type.
 For example, if your new diagram use a UML deployment diagram, a good key would be "UMLDeploymentDiagram" because assistive technologies such as a screen reader
 would voice that as "U-M-L Deployment diagram." Another good key would be "deploymentDiagram" because that would be voiced as "Deployment Diagram." A bad key would be "deployment" because that would not sufficiently describe the diagram.
--- a/docs/config/setup/modules/mermaidAPI.md
+++ b/docs/config/setup/modules/mermaidAPI.md
@@ -96,7 +96,7 @@ mermaid.initialize(config);

 #### Defined in

-[mermaidAPI.ts:668](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L668)
+[mermaidAPI.ts:667](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L667)

 ## Functions

@@ -127,7 +127,7 @@ Return the last node appended

 #### Defined in

-[mermaidAPI.ts:309](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L309)
+[mermaidAPI.ts:308](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L308)

 ---

@@ -153,7 +153,7 @@ the cleaned up svgCode

 #### Defined in

-[mermaidAPI.ts:255](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L255)
+[mermaidAPI.ts:256](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L256)

 ---

@@ -179,7 +179,7 @@ the string with all the user styles

 #### Defined in

-[mermaidAPI.ts:184](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L184)
+[mermaidAPI.ts:185](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L185)

 ---

@@ -202,7 +202,7 @@ the string with all the user styles

 #### Defined in

-[mermaidAPI.ts:232](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L232)
+[mermaidAPI.ts:233](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L233)

 ---

@@ -229,7 +229,7 @@ with an enclosing block that has each of the cssClasses followed by !important;

 #### Defined in

-[mermaidAPI.ts:168](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L168)
+[mermaidAPI.ts:169](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L169)

 ---

@@ -249,7 +249,7 @@ with an enclosing block that has each of the cssClasses followed by !important;

 #### Defined in

-[mermaidAPI.ts:154](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L154)
+[mermaidAPI.ts:155](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L155)

 ---

@@ -269,7 +269,7 @@ with an enclosing block that has each of the cssClasses followed by !important;

 #### Defined in

-[mermaidAPI.ts:125](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L125)
+[mermaidAPI.ts:126](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L126)

 ---

@@ -295,7 +295,7 @@ Put the svgCode into an iFrame. Return the iFrame code

 #### Defined in

-[mermaidAPI.ts:286](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L286)
+[mermaidAPI.ts:287](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L287)

 ---

@@ -320,4 +320,4 @@ Remove any existing elements from the given document

 #### Defined in

-[mermaidAPI.ts:359](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L359)
+[mermaidAPI.ts:358](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L358)
--- a/docs/intro/index.md
+++ b/docs/intro/index.md
@@ -387,9 +387,7 @@ The above command generates files into the `dist` folder and publishes them to \
 - [Live Editor](https://github.com/mermaid-js/mermaid-live-editor)
 - [HTTP Server](https://github.com/TomWright/mermaid-server)

-## Contributors
-
-[![Good first issue](https://img.shields.io/github/labels/mermaid-js/mermaid/Good%20first%20issue%21)](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Good+first+issue%21%22) [![Contributors](https://img.shields.io/github/contributors/mermaid-js/mermaid)](https://github.com/mermaid-js/mermaid/graphs/contributors) [![Commits](https://img.shields.io/github/commit-activity/m/mermaid-js/mermaid)](https://github.com/mermaid-js/mermaid/graphs/contributors)
+## Contributors [![Good first issue](https://img.shields.io/github/labels/mermaid-js/mermaid/Good%20first%20issue%21)](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Good+first+issue%21%22) [![Contributors](https://img.shields.io/github/contributors/mermaid-js/mermaid)](https://github.com/mermaid-js/mermaid/graphs/contributors) [![Commits](https://img.shields.io/github/commit-activity/m/mermaid-js/mermaid)](https://github.com/mermaid-js/mermaid/graphs/contributors)

 Mermaid is a growing community and is always accepting new contributors. There's a lot of different ways to help out and we're always looking for extra hands! Look at [this issue](https://github.com/mermaid-js/mermaid/issues/866) if you want to know where to start helping out.

--- a/docs/news/announcements.md
+++ b/docs/news/announcements.md
@@ -6,8 +6,8 @@

 # Announcements

-## [From Chaos to Clarity: Exploring Mind Maps with MermaidJS](https://www.mermaidchart.com/blog/posts/from-chaos-to-clarity-exploring-mind-maps-with-mermaidjs)
+## [Mermaid Chart Announces Visual Studio Code Plugin to Simplify Development Workflows](https://www.mermaidchart.com/blog/posts/mermaid-chart-announces-visual-studio-code-plugin)

-24 July 2023 · 4 mins
+17 July 2023 · 3 mins

-Introducing the concept of mind mapping as a tool for organizing complex information, and highlights Mermaid as a user-friendly software that simplifies the creation and editing of mind maps for applications in IT solution design, business decision-making, and knowledge organization.
+New Integration Enhances Workflows By Enabling Developers To Reference And Edit Diagrams Within Visual Studio Code.
--- a/docs/news/blog.md
+++ b/docs/news/blog.md
@@ -6,12 +6,6 @@

 # Blog

-## [From Chaos to Clarity: Exploring Mind Maps with MermaidJS](https://www.mermaidchart.com/blog/posts/from-chaos-to-clarity-exploring-mind-maps-with-mermaidjs)
-
-24 July 2023 · 4 mins
-
-Introducing the concept of mind mapping as a tool for organizing complex information, and highlights Mermaid as a user-friendly software that simplifies the creation and editing of mind maps for applications in IT solution design, business decision-making, and knowledge organization.
-
 ## [Mermaid Chart Announces Visual Studio Code Plugin to Simplify Development Workflows](https://www.mermaidchart.com/blog/posts/mermaid-chart-announces-visual-studio-code-plugin)

 17 July 2023 · 3 mins
--- a/docs/syntax/flowchart.md
+++ b/docs/syntax/flowchart.md
@@ -608,12 +608,12 @@ It is possible to escape characters using the syntax exemplified here.

 ```mermaid-example
    flowchart LR
-        A["A double quote:#quot;"] --> B["A dec char:#9829;"]
+        A["A double quote:#quot;"] -->B["A dec char:#9829;"]
 ```

 ```mermaid
    flowchart LR
-        A["A double quote:#quot;"] --> B["A dec char:#9829;"]
+        A["A double quote:#quot;"] -->B["A dec char:#9829;"]
 ```

 Numbers given are base 10, so `#` can be encoded as `#35;`. It is also supported to use HTML character names.
--- a/packages/mermaid-zenuml/package.json
+++ b/packages/mermaid-zenuml/package.json
@@ -33,7 +33,7 @@
  ],
  "license": "MIT",
  "dependencies": {
-    "@zenuml/core": "^3.0.6"
+    "@zenuml/core": "^3.0.3"
  },
  "devDependencies": {
    "mermaid": "workspace:^"
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -1,6 +1,6 @@
 {
  "name": "mermaid",
-  "version": "10.3.1",
+  "version": "10.3.0",
  "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
  "type": "module",
  "module": "./dist/mermaid.core.mjs",
--- a/packages/mermaid/scripts/create-types-from-json-schema.mts
+++ b/packages/mermaid/scripts/create-types-from-json-schema.mts
@@ -18,7 +18,6 @@ import { promisify } from 'node:util';

 import { load, JSON_SCHEMA } from 'js-yaml';
 import { compile, type JSONSchema } from 'json-schema-to-typescript';
-import prettier from 'prettier';

 import _Ajv2019, { type JSONSchemaType } from 'ajv/dist/2019.js';

@@ -208,7 +207,6 @@ async function generateTypescript(mermaidConfigSchema: JSONSchemaType<MermaidCon
    {
      additionalProperties: false, // in JSON Schema 2019-09, these are called `unevaluatedProperties`
      unreachableDefinitions: true, // definition for FontConfig is unreachable
-      style: (await prettier.resolveConfig('.')) ?? {},
    }
  );

--- a/packages/mermaid/src/Diagram.ts
+++ b/packages/mermaid/src/Diagram.ts
@@ -4,9 +4,8 @@ import { getDiagram, registerDiagram } from './diagram-api/diagramAPI.js';
 import { detectType, getDiagramLoader } from './diagram-api/detectType.js';
 import { extractFrontMatter } from './diagram-api/frontmatter.js';
 import { UnknownDiagramError } from './errors.js';
+import { DetailedError } from './utils.js';
 import { cleanupComments } from './diagram-api/comments.js';
-import type { DetailedError } from './utils.js';
-import type { DiagramDefinition } from './diagram-api/types.js';

 export type ParseErrorFunction = (err: string | DetailedError | unknown, hash?: any) => void;

@@ -16,11 +15,9 @@ export type ParseErrorFunction = (err: string | DetailedError | unknown, hash?:
 */
 export class Diagram {
  type = 'graph';
-  parser: DiagramDefinition['parser'];
-  renderer: DiagramDefinition['renderer'];
-  db: DiagramDefinition['db'];
-  private init?: DiagramDefinition['init'];
-
+  parser;
+  renderer;
+  db;
  private detectError?: UnknownDiagramError;
  constructor(public text: string) {
    this.text += '\n';
@@ -35,6 +32,7 @@ export class Diagram {
    log.debug('Type ' + this.type);
    // Setup diagram
    this.db = diagram.db;
+    this.db.clear?.();
    this.renderer = diagram.renderer;
    this.parser = diagram.parser;
    const originalParse = this.parser.parse.bind(this.parser);
@@ -51,7 +49,10 @@ export class Diagram {
      originalParse(cleanupComments(extractFrontMatter(text, this.db)));

    this.parser.parser.yy = this.db;
-    this.init = diagram.init;
+    if (diagram.init) {
+      diagram.init(cnf);
+      log.info('Initialized diagram ' + this.type, cnf);
+    }
    this.parse();
  }

@@ -60,7 +61,6 @@ export class Diagram {
      throw this.detectError;
    }
    this.db.clear?.();
-    this.init?.(configApi.getConfig());
    this.parser.parse(this.text);
  }

--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -8,7 +8,7 @@
 /**
 * Configuration options to pass to the `dompurify` library.
 */
-export type DOMPurifyConfiguration = import('dompurify').Config;
+export type DOMPurifyConfiguration = import("dompurify").Config;
 /**
 * JavaScript function that returns a `FontConfig`.
 *
@@ -39,7 +39,7 @@ export type FontCalculator = () => Partial<FontConfig>;
 * This interface was referenced by `MermaidConfig`'s JSON-Schema
 * via the `definition` "SankeyLinkColor".
 */
-export type SankeyLinkColor = 'source' | 'target' | 'gradient';
+export type SankeyLinkColor = "source" | "target" | "gradient";
 /**
 * Controls the alignment of the Sankey diagrams.
 *
@@ -49,7 +49,7 @@ export type SankeyLinkColor = 'source' | 'target' | 'gradient';
 * This interface was referenced by `MermaidConfig`'s JSON-Schema
 * via the `definition` "SankeyNodeAlignment".
 */
-export type SankeyNodeAlignment = 'left' | 'right' | 'center' | 'justify';
+export type SankeyNodeAlignment = "left" | "right" | "center" | "justify";
 /**
 * The font size to use
 */
@@ -61,7 +61,7 @@ export interface MermaidConfig {
   * You may also use `themeCSS` to override this value.
   *
   */
-  theme?: string | 'default' | 'forest' | 'dark' | 'neutral' | 'null';
+  theme?: string | "default" | "forest" | "dark" | "neutral" | "null";
  themeVariables?: any;
  themeCSS?: string;
  /**
@@ -88,12 +88,12 @@ export interface MermaidConfig {
    | 0
    | 2
    | 1
-    | 'trace'
-    | 'debug'
-    | 'info'
-    | 'warn'
-    | 'error'
-    | 'fatal'
+    | "trace"
+    | "debug"
+    | "info"
+    | "warn"
+    | "error"
+    | "fatal"
    | 3
    | 4
    | 5
@@ -101,7 +101,7 @@ export interface MermaidConfig {
  /**
   * Level of trust for parsed diagram
   */
-  securityLevel?: string | 'strict' | 'loose' | 'antiscript' | 'sandbox' | undefined;
+  securityLevel?: string | "strict" | "loose" | "antiscript" | "sandbox" | undefined;
  /**
   * Dictates whether mermaid starts on Page load
   */
@@ -689,11 +689,11 @@ export interface QuadrantChartConfig extends BaseDiagramConfig {
  /**
   * position of x-axis labels
   */
-  xAxisPosition?: 'top' | 'bottom';
+  xAxisPosition?: "top" | "bottom";
  /**
   * position of y-axis labels
   */
-  yAxisPosition?: 'left' | 'right';
+  yAxisPosition?: "left" | "right";
  /**
   * stroke width of edges of the box that are inside the quadrant
   */
@@ -723,7 +723,7 @@ export interface ErDiagramConfig extends BaseDiagramConfig {
  /**
   * Directional bias for layout of entities
   */
-  layoutDirection?: string | 'TB' | 'BT' | 'LR' | 'RL';
+  layoutDirection?: string | "TB" | "BT" | "LR" | "RL";
  /**
   * The minimum width of an entity box. Expressed in pixels.
   */
@@ -788,7 +788,7 @@ export interface StateDiagramConfig extends BaseDiagramConfig {
   * Decides which rendering engine that is to be used for the rendering.
   *
   */
-  defaultRenderer?: string | 'dagre-d3' | 'dagre-wrapper' | 'elk';
+  defaultRenderer?: string | "dagre-d3" | "dagre-wrapper" | "elk";
 }
 /**
 * This interface was referenced by `MermaidConfig`'s JSON-Schema
@@ -812,7 +812,7 @@ export interface ClassDiagramConfig extends BaseDiagramConfig {
   * Decides which rendering engine that is to be used for the rendering.
   *
   */
-  defaultRenderer?: string | 'dagre-d3' | 'dagre-wrapper' | 'elk';
+  defaultRenderer?: string | "dagre-d3" | "dagre-wrapper" | "elk";
  nodeSpacing?: number;
  rankSpacing?: number;
  /**
@@ -872,7 +872,7 @@ export interface JourneyDiagramConfig extends BaseDiagramConfig {
  /**
   * Multiline message alignment
   */
-  messageAlign?: string | 'left' | 'center' | 'right';
+  messageAlign?: string | "left" | "center" | "right";
  /**
   * Prolongs the edge of the diagram downwards.
   *
@@ -951,7 +951,7 @@ export interface TimelineDiagramConfig extends BaseDiagramConfig {
  /**
   * Multiline message alignment
   */
-  messageAlign?: string | 'left' | 'center' | 'right';
+  messageAlign?: string | "left" | "center" | "right";
  /**
   * Prolongs the edge of the diagram downwards.
   *
@@ -1062,12 +1062,12 @@ export interface GanttDiagramConfig extends BaseDiagramConfig {
   * Controls the display mode.
   *
   */
-  displayMode?: string | 'compact';
+  displayMode?: string | "compact";
  /**
   * On which day a week-based interval should start
   *
   */
-  weekday?: 'monday' | 'tuesday' | 'wednesday' | 'thursday' | 'friday' | 'saturday' | 'sunday';
+  weekday?: "monday" | "tuesday" | "wednesday" | "thursday" | "friday" | "saturday" | "sunday";
 }
 /**
 * The object containing configurations specific for sequence diagrams
@@ -1121,7 +1121,7 @@ export interface SequenceDiagramConfig extends BaseDiagramConfig {
  /**
   * Multiline message alignment
   */
-  messageAlign?: string | 'left' | 'center' | 'right';
+  messageAlign?: string | "left" | "center" | "right";
  /**
   * Mirror actors under diagram
   *
@@ -1178,7 +1178,7 @@ export interface SequenceDiagramConfig extends BaseDiagramConfig {
  /**
   * This sets the text alignment of actor-attached notes
   */
-  noteAlign?: string | 'left' | 'center' | 'right';
+  noteAlign?: string | "left" | "center" | "right";
  /**
   * This sets the font size of actor messages
   */
@@ -1254,7 +1254,7 @@ export interface FlowchartDiagramConfig extends BaseDiagramConfig {
   * Defines how mermaid renders curves for flowcharts.
   *
   */
-  curve?: string | 'basis' | 'linear' | 'cardinal';
+  curve?: string | "basis" | "linear" | "cardinal";
  /**
   * Represents the padding between the labels and the shape
   *
@@ -1266,7 +1266,7 @@ export interface FlowchartDiagramConfig extends BaseDiagramConfig {
   * Decides which rendering engine that is to be used for the rendering.
   *
   */
-  defaultRenderer?: string | 'dagre-d3' | 'dagre-wrapper' | 'elk';
+  defaultRenderer?: string | "dagre-d3" | "dagre-wrapper" | "elk";
  /**
   * Width of nodes where text is wrapped.
   *
@@ -1296,7 +1296,7 @@ export interface SankeyDiagramConfig extends BaseDiagramConfig {
   * See <https://github.com/d3/d3-sankey#alignments>.
   *
   */
-  nodeAlignment?: 'left' | 'right' | 'center' | 'justify';
+  nodeAlignment?: "left" | "right" | "center" | "justify";
  useMaxWidth?: boolean;
 }
 /**
--- a/packages/mermaid/src/dagre-wrapper/nodes.js
+++ b/packages/mermaid/src/dagre-wrapper/nodes.js
@@ -8,25 +8,8 @@ import note from './shapes/note.js';
 import { parseMember } from '../diagrams/class/svgDraw.js';
 import { evaluate } from '../diagrams/common/common.js';

-const formatClass = (str) => {
-  if (str) {
-    return ' ' + str;
-  }
-  return '';
-};
-const getClassesFromNode = (node, otherClasses) => {
-  return `${otherClasses ? otherClasses : 'node default'}${formatClass(node.classes)} ${formatClass(
-    node.class
-  )}`;
-};
-
 const question = async (parent, node) => {
-  const { shapeSvg, bbox } = await labelHelper(
-    parent,
-    node,
-    getClassesFromNode(node, undefined),
-    true
-  );
+  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);

  const w = bbox.width + node.padding;
  const h = bbox.height + node.padding;
@@ -87,12 +70,7 @@ const choice = (parent, node) => {
 };

 const hexagon = async (parent, node) => {
-  const { shapeSvg, bbox } = await labelHelper(
-    parent,
-    node,
-    getClassesFromNode(node, undefined),
-    true
-  );
+  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);

  const f = 4;
  const h = bbox.height + node.padding;
@@ -119,12 +97,7 @@ const hexagon = async (parent, node) => {
 };

 const rect_left_inv_arrow = async (parent, node) => {
-  const { shapeSvg, bbox } = await labelHelper(
-    parent,
-    node,
-    getClassesFromNode(node, undefined),
-    true
-  );
+  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);

  const w = bbox.width + node.padding;
  const h = bbox.height + node.padding;
@@ -150,7 +123,7 @@ const rect_left_inv_arrow = async (parent, node) => {
 };

 const lean_right = async (parent, node) => {
-  const { shapeSvg, bbox } = await labelHelper(parent, node, getClassesFromNode(node), true);
+  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);

  const w = bbox.width + node.padding;
  const h = bbox.height + node.padding;
@@ -173,12 +146,7 @@ const lean_right = async (parent, node) => {
 };

 const lean_left = async (parent, node) => {
-  const { shapeSvg, bbox } = await labelHelper(
-    parent,
-    node,
-    getClassesFromNode(node, undefined),
-    true
-  );
+  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);

  const w = bbox.width + node.padding;
  const h = bbox.height + node.padding;
@@ -201,12 +169,7 @@ const lean_left = async (parent, node) => {
 };

 const trapezoid = async (parent, node) => {
-  const { shapeSvg, bbox } = await labelHelper(
-    parent,
-    node,
-    getClassesFromNode(node, undefined),
-    true
-  );
+  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);

  const w = bbox.width + node.padding;
  const h = bbox.height + node.padding;
@@ -229,12 +192,7 @@ const trapezoid = async (parent, node) => {
 };

 const inv_trapezoid = async (parent, node) => {
-  const { shapeSvg, bbox } = await labelHelper(
-    parent,
-    node,
-    getClassesFromNode(node, undefined),
-    true
-  );
+  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);

  const w = bbox.width + node.padding;
  const h = bbox.height + node.padding;
@@ -257,12 +215,7 @@ const inv_trapezoid = async (parent, node) => {
 };

 const rect_right_inv_arrow = async (parent, node) => {
-  const { shapeSvg, bbox } = await labelHelper(
-    parent,
-    node,
-    getClassesFromNode(node, undefined),
-    true
-  );
+  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);

  const w = bbox.width + node.padding;
  const h = bbox.height + node.padding;
@@ -286,12 +239,7 @@ const rect_right_inv_arrow = async (parent, node) => {
 };

 const cylinder = async (parent, node) => {
-  const { shapeSvg, bbox } = await labelHelper(
-    parent,
-    node,
-    getClassesFromNode(node, undefined),
-    true
-  );
+  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);

  const w = bbox.width + node.padding;
  const rx = w / 2;
@@ -366,7 +314,7 @@ const rect = async (parent, node) => {
  const { shapeSvg, bbox, halfPadding } = await labelHelper(
    parent,
    node,
-    'node ' + node.classes + ' ' + node.class,
+    'node ' + node.classes,
    true
  );

@@ -412,7 +360,7 @@ const rect = async (parent, node) => {
 const labelRect = async (parent, node) => {
  const { shapeSvg } = await labelHelper(parent, node, 'label', true);

-  log.trace('Classes = ', node.class);
+  log.trace('Classes = ', node.classes);
  // add the rect
  const rect = shapeSvg.insert('rect', ':first-child');

@@ -597,12 +545,7 @@ const rectWithTitle = (parent, node) => {
 };

 const stadium = async (parent, node) => {
-  const { shapeSvg, bbox } = await labelHelper(
-    parent,
-    node,
-    getClassesFromNode(node, undefined),
-    true
-  );
+  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);

  const h = bbox.height + node.padding;
  const w = bbox.width + h / 4 + node.padding;
@@ -628,12 +571,7 @@ const stadium = async (parent, node) => {
 };

 const circle = async (parent, node) => {
-  const { shapeSvg, bbox, halfPadding } = await labelHelper(
-    parent,
-    node,
-    getClassesFromNode(node, undefined),
-    true
-  );
+  const { shapeSvg, bbox, halfPadding } = await labelHelper(parent, node, undefined, true);
  const circle = shapeSvg.insert('circle', ':first-child');

  // center the circle around its coordinate
@@ -658,12 +596,7 @@ const circle = async (parent, node) => {
 };

 const doublecircle = async (parent, node) => {
-  const { shapeSvg, bbox, halfPadding } = await labelHelper(
-    parent,
-    node,
-    getClassesFromNode(node, undefined),
-    true
-  );
+  const { shapeSvg, bbox, halfPadding } = await labelHelper(parent, node, undefined, true);
  const gap = 5;
  const circleGroup = shapeSvg.insert('g', ':first-child');
  const outerCircle = circleGroup.insert('circle');
@@ -701,12 +634,7 @@ const doublecircle = async (parent, node) => {
 };

 const subroutine = async (parent, node) => {
-  const { shapeSvg, bbox } = await labelHelper(
-    parent,
-    node,
-    getClassesFromNode(node, undefined),
-    true
-  );
+  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);

  const w = bbox.width + node.padding;
  const h = bbox.height + node.padding;
--- a/packages/mermaid/src/dagre-wrapper/shapes/util.js
+++ b/packages/mermaid/src/dagre-wrapper/shapes/util.js
@@ -13,7 +13,6 @@ export const labelHelper = async (parent, node, _classes, isNode) => {
  } else {
    classes = _classes;
  }
-
  // Add outer g element
  const shapeSvg = parent
    .insert('g')
@@ -50,6 +49,7 @@ export const labelHelper = async (parent, node, _classes, isNode) => {
      )
    );
  }
+
  // Get the size of the label
  let bbox = text.getBBox();
  const halfPadding = node.padding / 2;
--- a/packages/mermaid/src/diagram-api/diagram-orchestration.ts
+++ b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
@@ -21,6 +21,7 @@ import mindmap from '../diagrams/mindmap/detector.js';
 import sankey from '../diagrams/sankey/sankeyDetector.js';
 import { registerLazyLoadedDiagrams } from './detectType.js';
 import { registerDiagram } from './diagramAPI.js';
+import { railroad } from '../diagrams/railroad/railroadDetector.js';

 let hasLoadedDiagrams = false;
 export const addDiagrams = () => {
@@ -81,6 +82,7 @@ export const addDiagrams = () => {
    state,
    journey,
    quadrantChart,
-    sankey
+    sankey,
+    railroad
  );
 };
--- a/packages/mermaid/src/diagram-api/diagramAPI.spec.ts
+++ b/packages/mermaid/src/diagram-api/diagramAPI.spec.ts
@@ -35,12 +35,7 @@ describe('DiagramAPI', () => {
      'loki',
      {
        db: {},
-        parser: {
-          parse: (_text) => {
-            return;
-          },
-          parser: { yy: {} },
-        },
+        parser: {},
        renderer: {},
        styles: {},
      },
--- a/packages/mermaid/src/diagram-api/diagramAPI.ts
+++ b/packages/mermaid/src/diagram-api/diagramAPI.ts
@@ -69,11 +69,11 @@ export const getDiagram = (name: string): DiagramDefinition => {
  if (name in diagrams) {
    return diagrams[name];
  }
-  throw new DiagramNotFoundError(name);
+  throw new Error(`Diagram ${name} not found.`);
 };

 export class DiagramNotFoundError extends Error {
-  constructor(name: string) {
-    super(`Diagram ${name} not found.`);
+  constructor(message: string) {
+    super(`Diagram ${message} not found.`);
  }
 }
--- a/packages/mermaid/src/diagram-api/types.ts
+++ b/packages/mermaid/src/diagram-api/types.ts
@@ -1,5 +1,5 @@
 import { Diagram } from '../Diagram.js';
-import type { MermaidConfig } from '../config.type.js';
+import { MermaidConfig } from '../config.type.js';
 import type * as d3 from 'd3';

 export interface InjectUtils {
@@ -27,7 +27,7 @@ export interface DiagramDB {
 export interface DiagramDefinition {
  db: DiagramDB;
  renderer: any;
-  parser: ParserDefinition;
+  parser: any;
  styles?: any;
  init?: (config: MermaidConfig) => void;
  injectUtils?: (
@@ -70,11 +70,6 @@ export type DrawDefinition = (
  diagramObject: Diagram
 ) => void;

-export interface ParserDefinition {
-  parse: (text: string) => void;
-  parser: { yy: DiagramDB };
-}
-
 /**
 * Type for function parse directive from diagram code.
 *
@@ -84,10 +79,8 @@ export interface ParserDefinition {
 */
 export type ParseDirectiveDefinition = (statement: string, context: string, type: string) => void;

-export type HTML = d3.Selection<HTMLIFrameElement, unknown, Element | null, unknown>;
+export type HTML = d3.Selection<HTMLIFrameElement, unknown, Element, unknown>;

-export type SVG = d3.Selection<SVGSVGElement, unknown, Element | null, unknown>;
-
-export type Group = d3.Selection<SVGGElement, unknown, Element | null, unknown>;
+export type SVG = d3.Selection<SVGSVGElement, unknown, Element, unknown>;

 export type DiagramStylesProvider = (options?: any) => string;
--- a/packages/mermaid/src/diagram.spec.ts
+++ b/packages/mermaid/src/diagram.spec.ts
@@ -49,7 +49,7 @@ describe('diagram detection', () => {
      "Parse error on line 2:
      graph TD; A-->
      --------------^
-      Expecting 'AMP', 'COLON', 'PIPE', 'TESTSTR', 'DOWN', 'DEFAULT', 'NUM', 'COMMA', 'NODE_STRING', 'BRKT', 'MINUS', 'MULT', 'UNICODE_TEXT', got 'EOF'"
+      Expecting 'AMP', 'ALPHA', 'COLON', 'PIPE', 'TESTSTR', 'DOWN', 'DEFAULT', 'NUM', 'COMMA', 'MINUS', 'BRKT', 'DOT', 'PUNCTUATION', 'UNICODE_TEXT', 'PLUS', 'EQUALS', 'MULT', 'UNDERSCORE', got 'EOF'"
    `);
    await expect(getDiagramFromText('sequenceDiagram; A-->B')).rejects
      .toThrowErrorMatchingInlineSnapshot(`
--- a/packages/mermaid/src/diagrams/er/erRenderer.js
+++ b/packages/mermaid/src/diagrams/er/erRenderer.js
@@ -555,6 +555,7 @@ const drawRelationshipFromLayout = function (svg, rel, g, insert, diagObj) {
 export const draw = function (text, id, _version, diagObj) {
  conf = getConfig().er;
  log.info('Drawing ER diagram');
+  //  diag.db.clear();
  const securityLevel = getConfig().securityLevel;
  // Handle root and Document for when rendering in sandbox mode
  let sandboxElement;
--- a/packages/mermaid/src/diagrams/error/errorDiagram.ts
+++ b/packages/mermaid/src/diagrams/error/errorDiagram.ts
@@ -1,15 +1,23 @@
-import type { DiagramDefinition } from '../../diagram-api/types.js';
-import { renderer } from './errorRenderer.js';
-
-const diagram: DiagramDefinition = {
-  db: {},
+import { DiagramDefinition } from '../../diagram-api/types.js';
+import styles from './styles.js';
+import renderer from './errorRenderer.js';
+export const diagram: DiagramDefinition = {
+  db: {
+    clear: () => {
+      // Quite ok, clear needs to be there for error to work as a regular diagram
+    },
+  },
+  styles,
  renderer,
  parser: {
    parser: { yy: {} },
-    parse: (): void => {
-      return;
+    parse: () => {
+      // no op
    },
  },
+  init: () => {
+    // no op
+  },
 };

 export default diagram;
--- a/packages/mermaid/src/diagrams/error/errorRenderer.ts
+++ b/packages/mermaid/src/diagrams/error/errorRenderer.ts
@@ -1,81 +1,100 @@
+/** Created by knut on 14-12-11. */
+// @ts-ignore TODO: Investigate D3 issue
+import { select } from 'd3';
 import { log } from '../../logger.js';
-import type { Group, SVG } from '../../diagram-api/types.js';
-import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
-import { configureSvgSize } from '../../setupGraphViewbox.js';
+import { getErrorMessage } from '../../utils.js';
+
+/**
+ * Merges the value of `conf` with the passed `cnf`
+ *
+ * @param cnf - Config to merge
+ */
+export const setConf = function () {
+  // no-op
+};

 /**
 * Draws a an info picture in the tag with id: id based on the graph definition in text.
 *
 * @param _text - Mermaid graph definition.
 * @param id - The text for the error
- * @param version - The version
+ * @param mermaidVersion - The version
 */
-export const draw = (_text: string, id: string, version: string) => {
-  log.debug('renering svg for syntax error\n');
+export const draw = (_text: string, id: string, mermaidVersion: string) => {
+  try {
+    log.debug('Renering svg for syntax error\n');

-  const svg: SVG = selectSvgElement(id);
-  svg.attr('viewBox', '0 0 2412 512');
-  configureSvgSize(svg, 100, 512, true);
+    const svg = select('#' + id);

-  const g: Group = svg.append('g');
-  g.append('path')
-    .attr('class', 'error-icon')
-    .attr(
-      'd',
-      'm411.313,123.313c6.25-6.25 6.25-16.375 0-22.625s-16.375-6.25-22.625,0l-32,32-9.375,9.375-20.688-20.688c-12.484-12.5-32.766-12.5-45.25,0l-16,16c-1.261,1.261-2.304,2.648-3.31,4.051-21.739-8.561-45.324-13.426-70.065-13.426-105.867,0-192,86.133-192,192s86.133,192 192,192 192-86.133 192-192c0-24.741-4.864-48.327-13.426-70.065 1.402-1.007 2.79-2.049 4.051-3.31l16-16c12.5-12.492 12.5-32.758 0-45.25l-20.688-20.688 9.375-9.375 32.001-31.999zm-219.313,100.687c-52.938,0-96,43.063-96,96 0,8.836-7.164,16-16,16s-16-7.164-16-16c0-70.578 57.422-128 128-128 8.836,0 16,7.164 16,16s-7.164,16-16,16z'
-    );
+    const g = svg.append('g');

-  g.append('path')
-    .attr('class', 'error-icon')
-    .attr(
-      'd',
-      'm459.02,148.98c-6.25-6.25-16.375-6.25-22.625,0s-6.25,16.375 0,22.625l16,16c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688 6.25-6.25 6.25-16.375 0-22.625l-16.001-16z'
-    );
+    g.append('path')
+      .attr('class', 'error-icon')
+      .attr(
+        'd',
+        'm411.313,123.313c6.25-6.25 6.25-16.375 0-22.625s-16.375-6.25-22.625,0l-32,32-9.375,9.375-20.688-20.688c-12.484-12.5-32.766-12.5-45.25,0l-16,16c-1.261,1.261-2.304,2.648-3.31,4.051-21.739-8.561-45.324-13.426-70.065-13.426-105.867,0-192,86.133-192,192s86.133,192 192,192 192-86.133 192-192c0-24.741-4.864-48.327-13.426-70.065 1.402-1.007 2.79-2.049 4.051-3.31l16-16c12.5-12.492 12.5-32.758 0-45.25l-20.688-20.688 9.375-9.375 32.001-31.999zm-219.313,100.687c-52.938,0-96,43.063-96,96 0,8.836-7.164,16-16,16s-16-7.164-16-16c0-70.578 57.422-128 128-128 8.836,0 16,7.164 16,16s-7.164,16-16,16z'
+      );

-  g.append('path')
-    .attr('class', 'error-icon')
-    .attr(
-      'd',
-      'm340.395,75.605c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688 6.25-6.25 6.25-16.375 0-22.625l-16-16c-6.25-6.25-16.375-6.25-22.625,0s-6.25,16.375 0,22.625l15.999,16z'
-    );
+    g.append('path')
+      .attr('class', 'error-icon')
+      .attr(
+        'd',
+        'm459.02,148.98c-6.25-6.25-16.375-6.25-22.625,0s-6.25,16.375 0,22.625l16,16c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688 6.25-6.25 6.25-16.375 0-22.625l-16.001-16z'
+      );

-  g.append('path')
-    .attr('class', 'error-icon')
-    .attr(
-      'd',
-      'm400,64c8.844,0 16-7.164 16-16v-32c0-8.836-7.156-16-16-16-8.844,0-16,7.164-16,16v32c0,8.836 7.156,16 16,16z'
-    );
+    g.append('path')
+      .attr('class', 'error-icon')
+      .attr(
+        'd',
+        'm340.395,75.605c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688 6.25-6.25 6.25-16.375 0-22.625l-16-16c-6.25-6.25-16.375-6.25-22.625,0s-6.25,16.375 0,22.625l15.999,16z'
+      );

-  g.append('path')
-    .attr('class', 'error-icon')
-    .attr(
-      'd',
-      'm496,96.586h-32c-8.844,0-16,7.164-16,16 0,8.836 7.156,16 16,16h32c8.844,0 16-7.164 16-16 0-8.836-7.156-16-16-16z'
-    );
+    g.append('path')
+      .attr('class', 'error-icon')
+      .attr(
+        'd',
+        'm400,64c8.844,0 16-7.164 16-16v-32c0-8.836-7.156-16-16-16-8.844,0-16,7.164-16,16v32c0,8.836 7.156,16 16,16z'
+      );

-  g.append('path')
-    .attr('class', 'error-icon')
-    .attr(
-      'd',
-      'm436.98,75.605c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688l32-32c6.25-6.25 6.25-16.375 0-22.625s-16.375-6.25-22.625,0l-32,32c-6.251,6.25-6.251,16.375-0.001,22.625z'
-    );
+    g.append('path')
+      .attr('class', 'error-icon')
+      .attr(
+        'd',
+        'm496,96.586h-32c-8.844,0-16,7.164-16,16 0,8.836 7.156,16 16,16h32c8.844,0 16-7.164 16-16 0-8.836-7.156-16-16-16z'
+      );

-  g.append('text') // text label for the x axis
-    .attr('class', 'error-text')
-    .attr('x', 1440)
-    .attr('y', 250)
-    .attr('font-size', '150px')
-    .style('text-anchor', 'middle')
-    .text('Syntax error in text');
-  g.append('text') // text label for the x axis
-    .attr('class', 'error-text')
-    .attr('x', 1250)
-    .attr('y', 400)
-    .attr('font-size', '100px')
-    .style('text-anchor', 'middle')
-    .text(`mermaid version ${version}`);
+    g.append('path')
+      .attr('class', 'error-icon')
+      .attr(
+        'd',
+        'm436.98,75.605c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688l32-32c6.25-6.25 6.25-16.375 0-22.625s-16.375-6.25-22.625,0l-32,32c-6.251,6.25-6.251,16.375-0.001,22.625z'
+      );
+
+    g.append('text') // text label for the x axis
+      .attr('class', 'error-text')
+      .attr('x', 1440)
+      .attr('y', 250)
+      .attr('font-size', '150px')
+      .style('text-anchor', 'middle')
+      .text('Syntax error in text');
+    g.append('text') // text label for the x axis
+      .attr('class', 'error-text')
+      .attr('x', 1250)
+      .attr('y', 400)
+      .attr('font-size', '100px')
+      .style('text-anchor', 'middle')
+      .text('mermaid version ' + mermaidVersion);
+
+    svg.attr('height', 100);
+    svg.attr('width', 500);
+    svg.attr('viewBox', '768 0 912 512');
+  } catch (e) {
+    log.error('Error while rendering info diagram');
+    log.error(getErrorMessage(e));
+  }
 };

-export const renderer = { draw };
-
-export default renderer;
+export default {
+  setConf,
+  draw,
+};
--- a/packages/mermaid/src/diagrams/error/styles.js
+++ b/packages/mermaid/src/diagrams/error/styles.js
@@ -0,0 +1,3 @@
+const getStyles = () => ``;
+
+export default getStyles;
--- a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js
+++ b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js
@@ -655,7 +655,14 @@ const addMarkersToEdge = function (svgPath, edgeData, diagramType, arrowMarkerAb
 */
 export const getClasses = function (text, diagObj) {
  log.info('Extracting classes');
-  return diagObj.db.getClasses();
+  diagObj.db.clear('ver-2');
+  try {
+    // Parse the graph definition
+    diagObj.parse(text);
+    return diagObj.db.getClasses();
+  } catch (e) {
+    return {};
+  }
 };

 const addSubGraphs = function (db) {
@@ -759,8 +766,14 @@ const insertChildren = (nodeArray, parentLookupDb) => {
 */

 export const draw = async function (text, id, _version, diagObj) {
+  // Add temporary render element
+  diagObj.db.clear();
  nodeDb = {};
  portPos = {};
+  diagObj.db.setGen('gen-2');
+  // Parse the graph definition
+  diagObj.parser.parse(text);
+
  const renderEl = select('body').append('div').attr('style', 'height:400px').attr('id', 'cy');
  let graph = {
    id: 'root',
--- a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
@@ -1,7 +1,10 @@
 import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
 import { select, curveLinear, selectAll } from 'd3';
+
+import flowDb from './flowDb.js';
 import { getConfig } from '../../config.js';
 import utils from '../../utils.js';
+
 import { render } from '../../dagre-wrapper/index.js';
 import { addHtmlLabel } from 'dagre-d3-es/src/dagre-js/label/add-html-label.js';
 import { log } from '../../logger.js';
@@ -341,7 +344,15 @@ export const addEdges = function (edges, g, diagObj) {
 * @returns {object} ClassDef styles
 */
 export const getClasses = function (text, diagObj) {
-  return diagObj.db.getClasses();
+  log.info('Extracting classes');
+  diagObj.db.clear();
+  try {
+    // Parse the graph definition
+    diagObj.parse(text);
+    return diagObj.db.getClasses();
+  } catch (e) {
+    return;
+  }
 };

 /**
@@ -353,6 +364,10 @@ export const getClasses = function (text, diagObj) {

 export const draw = async function (text, id, _version, diagObj) {
  log.info('Drawing flowchart');
+  diagObj.db.clear();
+  flowDb.setGen('gen-2');
+  // Parse the graph definition
+  diagObj.parser.parse(text);

  // Fetch the default direction, use TD if none was found
  let dir = diagObj.db.getDirection();
--- a/packages/mermaid/src/diagrams/flowchart/flowRenderer.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer.js
@@ -273,7 +273,15 @@ export const addEdges = function (edges, g, diagObj) {
 */
 export const getClasses = function (text, diagObj) {
  log.info('Extracting classes');
-  return diagObj.db.getClasses();
+  diagObj.db.clear();
+  try {
+    // Parse the graph definition
+    diagObj.parse(text);
+    return diagObj.db.getClasses();
+  } catch (e) {
+    log.error(e);
+    return {};
+  }
 };

 /**
@@ -286,6 +294,7 @@ export const getClasses = function (text, diagObj) {
 */
 export const draw = function (text, id, _version, diagObj) {
  log.info('Drawing flowchart');
+  diagObj.db.clear();
  const { securityLevel, flowchart: conf } = getConfig();
  let sandboxElement;
  if (securityLevel === 'sandbox') {
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-edges.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-edges.spec.js
@@ -6,40 +6,6 @@ setConfig({
  securityLevel: 'strict',
 });

-const keywords = [
-  'graph',
-  'flowchart',
-  'flowchart-elk',
-  'style',
-  'default',
-  'linkStyle',
-  'interpolate',
-  'classDef',
-  'class',
-  'href',
-  'call',
-  'click',
-  '_self',
-  '_blank',
-  '_parent',
-  '_top',
-  'end',
-  'subgraph',
-  'kitty',
-];
-
-const doubleEndedEdges = [
-  { edgeStart: 'x--', edgeEnd: '--x', stroke: 'normal', type: 'double_arrow_cross' },
-  { edgeStart: 'x==', edgeEnd: '==x', stroke: 'thick', type: 'double_arrow_cross' },
-  { edgeStart: 'x-.', edgeEnd: '.-x', stroke: 'dotted', type: 'double_arrow_cross' },
-  { edgeStart: 'o--', edgeEnd: '--o', stroke: 'normal', type: 'double_arrow_circle' },
-  { edgeStart: 'o==', edgeEnd: '==o', stroke: 'thick', type: 'double_arrow_circle' },
-  { edgeStart: 'o-.', edgeEnd: '.-o', stroke: 'dotted', type: 'double_arrow_circle' },
-  { edgeStart: '<--', edgeEnd: '-->', stroke: 'normal', type: 'double_arrow_point' },
-  { edgeStart: '<==', edgeEnd: '==>', stroke: 'thick', type: 'double_arrow_point' },
-  { edgeStart: '<-.', edgeEnd: '.->', stroke: 'dotted', type: 'double_arrow_point' },
-];
-
 describe('[Edges] when parsing', () => {
  beforeEach(function () {
    flow.parser.yy = flowDb;
@@ -73,62 +39,211 @@ describe('[Edges] when parsing', () => {
    expect(edges[0].type).toBe('arrow_circle');
  });

-  describe('edges', function () {
-    doubleEndedEdges.forEach((edgeType) => {
-      it(`should handle ${edgeType.stroke} ${edgeType.type} with no text`, function () {
-        const res = flow.parser.parse(`graph TD;\nA ${edgeType.edgeStart}${edgeType.edgeEnd} B;`);
+  describe('cross', function () {
+    it('should handle double edged nodes and edges', function () {
+      const res = flow.parser.parse('graph TD;\nA x--x B;');

-        const vert = flow.parser.yy.getVertices();
-        const edges = flow.parser.yy.getEdges();
+      const vert = flow.parser.yy.getVertices();
+      const edges = flow.parser.yy.getEdges();

-        expect(vert['A'].id).toBe('A');
-        expect(vert['B'].id).toBe('B');
-        expect(edges.length).toBe(1);
-        expect(edges[0].start).toBe('A');
-        expect(edges[0].end).toBe('B');
-        expect(edges[0].type).toBe(`${edgeType.type}`);
-        expect(edges[0].text).toBe('');
-        expect(edges[0].stroke).toBe(`${edgeType.stroke}`);
-      });
+      expect(vert['A'].id).toBe('A');
+      expect(vert['B'].id).toBe('B');
+      expect(edges.length).toBe(1);
+      expect(edges[0].start).toBe('A');
+      expect(edges[0].end).toBe('B');
+      expect(edges[0].type).toBe('double_arrow_cross');
+      expect(edges[0].text).toBe('');
+      expect(edges[0].stroke).toBe('normal');
+      expect(edges[0].length).toBe(1);
+    });

-      it(`should handle ${edgeType.stroke} ${edgeType.type} with text`, function () {
-        const res = flow.parser.parse(
-          `graph TD;\nA ${edgeType.edgeStart} text ${edgeType.edgeEnd} B;`
-        );
+    it('should handle double edged nodes with text', function () {
+      const res = flow.parser.parse('graph TD;\nA x-- text --x B;');

-        const vert = flow.parser.yy.getVertices();
-        const edges = flow.parser.yy.getEdges();
+      const vert = flow.parser.yy.getVertices();
+      const edges = flow.parser.yy.getEdges();

-        expect(vert['A'].id).toBe('A');
-        expect(vert['B'].id).toBe('B');
-        expect(edges.length).toBe(1);
-        expect(edges[0].start).toBe('A');
-        expect(edges[0].end).toBe('B');
-        expect(edges[0].type).toBe(`${edgeType.type}`);
-        expect(edges[0].text).toBe('text');
-        expect(edges[0].stroke).toBe(`${edgeType.stroke}`);
-      });
+      expect(vert['A'].id).toBe('A');
+      expect(vert['B'].id).toBe('B');
+      expect(edges.length).toBe(1);
+      expect(edges[0].start).toBe('A');
+      expect(edges[0].end).toBe('B');
+      expect(edges[0].type).toBe('double_arrow_cross');
+      expect(edges[0].text).toBe('text');
+      expect(edges[0].stroke).toBe('normal');
+      expect(edges[0].length).toBe(1);
+    });

-      it.each(keywords)(
-        `should handle ${edgeType.stroke} ${edgeType.type} with %s text`,
-        function (keyword) {
-          const res = flow.parser.parse(
-            `graph TD;\nA ${edgeType.edgeStart} ${keyword} ${edgeType.edgeEnd} B;`
-          );
+    it('should handle double edged nodes and edges on thick arrows', function () {
+      const res = flow.parser.parse('graph TD;\nA x==x B;');

-          const vert = flow.parser.yy.getVertices();
-          const edges = flow.parser.yy.getEdges();
+      const vert = flow.parser.yy.getVertices();
+      const edges = flow.parser.yy.getEdges();

-          expect(vert['A'].id).toBe('A');
-          expect(vert['B'].id).toBe('B');
-          expect(edges.length).toBe(1);
-          expect(edges[0].start).toBe('A');
-          expect(edges[0].end).toBe('B');
-          expect(edges[0].type).toBe(`${edgeType.type}`);
-          expect(edges[0].text).toBe(`${keyword}`);
-          expect(edges[0].stroke).toBe(`${edgeType.stroke}`);
-        }
-      );
+      expect(vert['A'].id).toBe('A');
+      expect(vert['B'].id).toBe('B');
+      expect(edges.length).toBe(1);
+      expect(edges[0].start).toBe('A');
+      expect(edges[0].end).toBe('B');
+      expect(edges[0].type).toBe('double_arrow_cross');
+      expect(edges[0].text).toBe('');
+      expect(edges[0].stroke).toBe('thick');
+      expect(edges[0].length).toBe(1);
+    });
+
+    it('should handle double edged nodes with text on thick arrows', function () {
+      const res = flow.parser.parse('graph TD;\nA x== text ==x B;');
+
+      const vert = flow.parser.yy.getVertices();
+      const edges = flow.parser.yy.getEdges();
+
+      expect(vert['A'].id).toBe('A');
+      expect(vert['B'].id).toBe('B');
+      expect(edges.length).toBe(1);
+      expect(edges[0].start).toBe('A');
+      expect(edges[0].end).toBe('B');
+      expect(edges[0].type).toBe('double_arrow_cross');
+      expect(edges[0].text).toBe('text');
+      expect(edges[0].stroke).toBe('thick');
+      expect(edges[0].length).toBe(1);
+    });
+
+    it('should handle double edged nodes and edges on dotted arrows', function () {
+      const res = flow.parser.parse('graph TD;\nA x-.-x B;');
+
+      const vert = flow.parser.yy.getVertices();
+      const edges = flow.parser.yy.getEdges();
+
+      expect(vert['A'].id).toBe('A');
+      expect(vert['B'].id).toBe('B');
+      expect(edges.length).toBe(1);
+      expect(edges[0].start).toBe('A');
+      expect(edges[0].end).toBe('B');
+      expect(edges[0].type).toBe('double_arrow_cross');
+      expect(edges[0].text).toBe('');
+      expect(edges[0].stroke).toBe('dotted');
+      expect(edges[0].length).toBe(1);
+    });
+
+    it('should handle double edged nodes with text on dotted arrows', function () {
+      const res = flow.parser.parse('graph TD;\nA x-. text .-x B;');
+
+      const vert = flow.parser.yy.getVertices();
+      const edges = flow.parser.yy.getEdges();
+
+      expect(vert['A'].id).toBe('A');
+      expect(vert['B'].id).toBe('B');
+      expect(edges.length).toBe(1);
+      expect(edges[0].start).toBe('A');
+      expect(edges[0].end).toBe('B');
+      expect(edges[0].type).toBe('double_arrow_cross');
+      expect(edges[0].text).toBe('text');
+      expect(edges[0].stroke).toBe('dotted');
+      expect(edges[0].length).toBe(1);
+    });
+  });
+
+  describe('circle', function () {
+    it('should handle double edged nodes and edges', function () {
+      const res = flow.parser.parse('graph TD;\nA o--o B;');
+
+      const vert = flow.parser.yy.getVertices();
+      const edges = flow.parser.yy.getEdges();
+
+      expect(vert['A'].id).toBe('A');
+      expect(vert['B'].id).toBe('B');
+      expect(edges.length).toBe(1);
+      expect(edges[0].start).toBe('A');
+      expect(edges[0].end).toBe('B');
+      expect(edges[0].type).toBe('double_arrow_circle');
+      expect(edges[0].text).toBe('');
+      expect(edges[0].stroke).toBe('normal');
+      expect(edges[0].length).toBe(1);
+    });
+
+    it('should handle double edged nodes with text', function () {
+      const res = flow.parser.parse('graph TD;\nA o-- text --o B;');
+
+      const vert = flow.parser.yy.getVertices();
+      const edges = flow.parser.yy.getEdges();
+
+      expect(vert['A'].id).toBe('A');
+      expect(vert['B'].id).toBe('B');
+      expect(edges.length).toBe(1);
+      expect(edges[0].start).toBe('A');
+      expect(edges[0].end).toBe('B');
+      expect(edges[0].type).toBe('double_arrow_circle');
+      expect(edges[0].text).toBe('text');
+      expect(edges[0].stroke).toBe('normal');
+      expect(edges[0].length).toBe(1);
+    });
+
+    it('should handle double edged nodes and edges on thick arrows', function () {
+      const res = flow.parser.parse('graph TD;\nA o==o B;');
+
+      const vert = flow.parser.yy.getVertices();
+      const edges = flow.parser.yy.getEdges();
+
+      expect(vert['A'].id).toBe('A');
+      expect(vert['B'].id).toBe('B');
+      expect(edges.length).toBe(1);
+      expect(edges[0].start).toBe('A');
+      expect(edges[0].end).toBe('B');
+      expect(edges[0].type).toBe('double_arrow_circle');
+      expect(edges[0].text).toBe('');
+      expect(edges[0].stroke).toBe('thick');
+      expect(edges[0].length).toBe(1);
+    });
+
+    it('should handle double edged nodes with text on thick arrows', function () {
+      const res = flow.parser.parse('graph TD;\nA o== text ==o B;');
+
+      const vert = flow.parser.yy.getVertices();
+      const edges = flow.parser.yy.getEdges();
+
+      expect(vert['A'].id).toBe('A');
+      expect(vert['B'].id).toBe('B');
+      expect(edges.length).toBe(1);
+      expect(edges[0].start).toBe('A');
+      expect(edges[0].end).toBe('B');
+      expect(edges[0].type).toBe('double_arrow_circle');
+      expect(edges[0].text).toBe('text');
+      expect(edges[0].stroke).toBe('thick');
+      expect(edges[0].length).toBe(1);
+    });
+
+    it('should handle double edged nodes and edges on dotted arrows', function () {
+      const res = flow.parser.parse('graph TD;\nA o-.-o B;');
+
+      const vert = flow.parser.yy.getVertices();
+      const edges = flow.parser.yy.getEdges();
+
+      expect(vert['A'].id).toBe('A');
+      expect(vert['B'].id).toBe('B');
+      expect(edges.length).toBe(1);
+      expect(edges[0].start).toBe('A');
+      expect(edges[0].end).toBe('B');
+      expect(edges[0].type).toBe('double_arrow_circle');
+      expect(edges[0].text).toBe('');
+      expect(edges[0].stroke).toBe('dotted');
+      expect(edges[0].length).toBe(1);
+    });
+
+    it('should handle double edged nodes with text on dotted arrows', function () {
+      const res = flow.parser.parse('graph TD;\nA o-. text .-o B;');
+
+      const vert = flow.parser.yy.getVertices();
+      const edges = flow.parser.yy.getEdges();
+
+      expect(vert['A'].id).toBe('A');
+      expect(vert['B'].id).toBe('B');
+      expect(edges.length).toBe(1);
+      expect(edges[0].start).toBe('A');
+      expect(edges[0].end).toBe('B');
+      expect(edges[0].type).toBe('double_arrow_circle');
+      expect(edges[0].text).toBe('text');
+      expect(edges[0].stroke).toBe('dotted');
+      expect(edges[0].length).toBe(1);
    });
  });

--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-md-string.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-md-string.spec.js
@@ -24,7 +24,7 @@ A["\`The cat in **the** hat\`"]-- "\`The *bat* in the chat\`" -->B["The dog in t
    expect(vert['A'].labelType).toBe('markdown');
    expect(vert['B'].id).toBe('B');
    expect(vert['B'].text).toBe('The dog in the hog');
-    expect(vert['B'].labelType).toBe('string');
+    expect(vert['B'].labelType).toBe('text');
    expect(edges.length).toBe(2);
    expect(edges[0].start).toBe('A');
    expect(edges[0].end).toBe('B');
@@ -35,7 +35,7 @@ A["\`The cat in **the** hat\`"]-- "\`The *bat* in the chat\`" -->B["The dog in t
    expect(edges[1].end).toBe('C');
    expect(edges[1].type).toBe('arrow_point');
    expect(edges[1].text).toBe('The rat in the mat');
-    expect(edges[1].labelType).toBe('string');
+    expect(edges[1].labelType).toBe('text');
  });
  it('mardown formatting in subgraphs', function () {
    const res = flow.parser.parse(`flowchart LR
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-singlenode.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-singlenode.spec.js
@@ -6,29 +6,6 @@ setConfig({
  securityLevel: 'strict',
 });

-const keywords = [
-  'graph',
-  'flowchart',
-  'flowchart-elk',
-  'style',
-  'default',
-  'linkStyle',
-  'interpolate',
-  'classDef',
-  'class',
-  'href',
-  'call',
-  'click',
-  '_self',
-  '_blank',
-  '_parent',
-  '_top',
-  'end',
-  'subgraph',
-];
-
-const specialChars = ['#', ':', '0', '&', ',', '*', '.', '\\', 'v', '-', '/', '_'];
-
 describe('[Singlenodes] when parsing', () => {
  beforeEach(function () {
    flow.parser.yy = flowDb;
@@ -282,90 +259,4 @@ describe('[Singlenodes] when parsing', () => {
    expect(edges.length).toBe(0);
    expect(vert['i_d'].styles.length).toBe(0);
  });
-
-  it.each(keywords)('should handle keywords between dashes "-"', function (keyword) {
-    const res = flow.parser.parse(`graph TD;a-${keyword}-node;`);
-    const vert = flow.parser.yy.getVertices();
-    expect(vert[`a-${keyword}-node`].text).toBe(`a-${keyword}-node`);
-  });
-
-  it.each(keywords)('should handle keywords between periods "."', function (keyword) {
-    const res = flow.parser.parse(`graph TD;a.${keyword}.node;`);
-    const vert = flow.parser.yy.getVertices();
-    expect(vert[`a.${keyword}.node`].text).toBe(`a.${keyword}.node`);
-  });
-
-  it.each(keywords)('should handle keywords between underscores "_"', function (keyword) {
-    const res = flow.parser.parse(`graph TD;a_${keyword}_node;`);
-    const vert = flow.parser.yy.getVertices();
-    expect(vert[`a_${keyword}_node`].text).toBe(`a_${keyword}_node`);
-  });
-
-  it.each(keywords)('should handle nodes ending in %s', function (keyword) {
-    const res = flow.parser.parse(`graph TD;node_${keyword};node.${keyword};node-${keyword};`);
-    const vert = flow.parser.yy.getVertices();
-    expect(vert[`node_${keyword}`].text).toBe(`node_${keyword}`);
-    expect(vert[`node.${keyword}`].text).toBe(`node.${keyword}`);
-    expect(vert[`node-${keyword}`].text).toBe(`node-${keyword}`);
-  });
-
-  const errorKeywords = [
-    'graph',
-    'flowchart',
-    'flowchart-elk',
-    'style',
-    'linkStyle',
-    'interpolate',
-    'classDef',
-    'class',
-    '_self',
-    '_blank',
-    '_parent',
-    '_top',
-    'end',
-    'subgraph',
-  ];
-  it.each(errorKeywords)('should throw error at nodes beginning with %s', function (keyword) {
-    const str = `graph TD;${keyword}.node;${keyword}-node;${keyword}/node`;
-    const vert = flow.parser.yy.getVertices();
-
-    expect(() => flow.parser.parse(str)).toThrowError();
-  });
-
-  const workingKeywords = ['default', 'href', 'click', 'call'];
-
-  it.each(workingKeywords)('should parse node beginning with %s', function (keyword) {
-    flow.parser.parse(`graph TD; ${keyword}.node;${keyword}-node;${keyword}/node;`);
-    const vert = flow.parser.yy.getVertices();
-    expect(vert[`${keyword}.node`].text).toBe(`${keyword}.node`);
-    expect(vert[`${keyword}-node`].text).toBe(`${keyword}-node`);
-    expect(vert[`${keyword}/node`].text).toBe(`${keyword}/node`);
-  });
-
-  it.each(specialChars)(
-    'should allow node ids of single special characters',
-    function (specialChar) {
-      flow.parser.parse(`graph TD; ${specialChar} --> A`);
-      const vert = flow.parser.yy.getVertices();
-      expect(vert[`${specialChar}`].text).toBe(`${specialChar}`);
-    }
-  );
-
-  it.each(specialChars)(
-    'should allow node ids with special characters at start of id',
-    function (specialChar) {
-      flow.parser.parse(`graph TD; ${specialChar}node --> A`);
-      const vert = flow.parser.yy.getVertices();
-      expect(vert[`${specialChar}node`].text).toBe(`${specialChar}node`);
-    }
-  );
-
-  it.each(specialChars)(
-    'should allow node ids with special characters at end of id',
-    function (specialChar) {
-      flow.parser.parse(`graph TD; node${specialChar} --> A`);
-      const vert = flow.parser.yy.getVertices();
-      expect(vert[`node${specialChar}`].text).toBe(`node${specialChar}`);
-    }
-  );
 });
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js
@@ -26,6 +26,15 @@ describe('[Style] when parsing', () => {
    expect(vert['Q'].styles[0]).toBe('background:#fff');
  });

+  // log.debug(flow.parser.parse('graph TD;style Q background:#fff;'));
+  it('should handle styles for edges', function () {
+    const res = flow.parser.parse('graph TD;a-->b;\nstyle #0 stroke: #f66;');
+
+    const edges = flow.parser.yy.getEdges();
+
+    expect(edges.length).toBe(1);
+  });
+
  it('should handle multiple styles for a vortex', function () {
    const res = flow.parser.parse('graph TD;style R background:#fff,border:1px solid red;');

--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js
@@ -305,95 +305,6 @@ describe('[Text] when parsing', () => {
      expect(vert['C'].type).toBe('round');
      expect(vert['C'].text).toBe('Chimpansen hoppar');
    });
-
-    const keywords = [
-      'graph',
-      'flowchart',
-      'flowchart-elk',
-      'style',
-      'default',
-      'linkStyle',
-      'interpolate',
-      'classDef',
-      'class',
-      'href',
-      'call',
-      'click',
-      '_self',
-      '_blank',
-      '_parent',
-      '_top',
-      'end',
-      'subgraph',
-      'kitty',
-    ];
-
-    const shapes = [
-      { start: '[', end: ']', name: 'square' },
-      { start: '(', end: ')', name: 'round' },
-      { start: '{', end: '}', name: 'diamond' },
-      { start: '(-', end: '-)', name: 'ellipse' },
-      { start: '([', end: '])', name: 'stadium' },
-      { start: '>', end: ']', name: 'odd' },
-      { start: '[(', end: ')]', name: 'cylinder' },
-      { start: '(((', end: ')))', name: 'doublecircle' },
-      { start: '[/', end: '\\]', name: 'trapezoid' },
-      { start: '[\\', end: '/]', name: 'inv_trapezoid' },
-      { start: '[/', end: '/]', name: 'lean_right' },
-      { start: '[\\', end: '\\]', name: 'lean_left' },
-      { start: '[[', end: ']]', name: 'subroutine' },
-      { start: '{{', end: '}}', name: 'hexagon' },
-    ];
-
-    shapes.forEach((shape) => {
-      it.each(keywords)(`should handle %s keyword in ${shape.name} vertex`, function (keyword) {
-        const rest = flow.parser.parse(
-          `graph TD;A_${keyword}_node-->B${shape.start}This node has a ${keyword} as text${shape.end};`
-        );
-
-        const vert = flow.parser.yy.getVertices();
-        const edges = flow.parser.yy.getEdges();
-        expect(vert['B'].type).toBe(`${shape.name}`);
-        expect(vert['B'].text).toBe(`This node has a ${keyword} as text`);
-      });
-    });
-
-    it.each(keywords)('should handle %s keyword in rect vertex', function (keyword) {
-      const rest = flow.parser.parse(
-        `graph TD;A_${keyword}_node-->B[|borders:lt|This node has a ${keyword} as text];`
-      );
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-      expect(vert['B'].type).toBe('rect');
-      expect(vert['B'].text).toBe(`This node has a ${keyword} as text`);
-    });
-
-    it('should handle edge case for odd vertex with node id ending with minus', function () {
-      const res = flow.parser.parse('graph TD;A_node-->odd->Vertex Text];');
-      const vert = flow.parser.yy.getVertices();
-
-      expect(vert['odd-'].type).toBe('odd');
-      expect(vert['odd-'].text).toBe('Vertex Text');
-    });
-    it('should allow forward slashes in lean_right vertices', function () {
-      const rest = flow.parser.parse(`graph TD;A_node-->B[/This node has a / as text/];`);
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-      expect(vert['B'].type).toBe('lean_right');
-      expect(vert['B'].text).toBe(`This node has a / as text`);
-    });
-
-    it('should allow back slashes in lean_left vertices', function () {
-      const rest = flow.parser.parse(`graph TD;A_node-->B[\\This node has a \\ as text\\];`);
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-      expect(vert['B'].type).toBe('lean_left');
-      expect(vert['B'].text).toBe(`This node has a \\ as text`);
-    });
-
    it('should handle åäö and minus', function () {
      const res = flow.parser.parse('graph TD;A-->C{Chimpansen hoppar åäö-ÅÄÖ};');

@@ -573,33 +484,4 @@ describe('[Text] when parsing', () => {
    expect(vert['A'].text).toBe(',.?!+-*');
    expect(edges[0].text).toBe(',.?!+-*');
  });
-
-  it('should throw error at nested set of brackets', function () {
-    const str = 'graph TD; A[This is a () in text];';
-    expect(() => flow.parser.parse(str)).toThrowError("got 'PS'");
-  });
-
-  it('should throw error for strings and text at the same time', function () {
-    const str = 'graph TD;A(this node has "string" and text)-->|this link has "string" and text|C;';
-
-    expect(() => flow.parser.parse(str)).toThrowError("got 'STR'");
-  });
-
-  it('should throw error for escaping quotes in text state', function () {
-    //prettier-ignore
-    const str = 'graph TD; A[This is a \"()\" in text];'; //eslint-disable-line no-useless-escape
-
-    expect(() => flow.parser.parse(str)).toThrowError("got 'STR'");
-  });
-
-  it('should throw error for nested quoatation marks', function () {
-    const str = 'graph TD; A["This is a "()" in text"];';
-
-    expect(() => flow.parser.parse(str)).toThrowError("Expecting 'SQE'");
-  });
-
-  it('should throw error', function () {
-    const str = `graph TD; node[hello ) world] --> works`;
-    expect(() => flow.parser.parse(str)).toThrowError("got 'PE'");
-  });
 });
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
@@ -13,12 +13,6 @@
 %x acc_descr_multiline
 %x dir
 %x vertex
-%x text
-%x ellipseText
-%x trapText
-%x edgeText
-%x thickEdgeText
-%x dottedEdgeText
 %x click
 %x href
 %x callbackname
@@ -29,19 +23,41 @@
 %x close_directive

 %%
-\%\%\{                                          { this.begin('open_directive'); return 'open_directive'; }
-<open_directive>((?:(?!\}\%\%)[^:.])*)          { this.begin('type_directive'); return 'type_directive'; }
-<type_directive>":"                             { this.popState(); this.begin('arg_directive'); return ':'; }
-<type_directive,arg_directive>\}\%\%            { this.popState(); this.popState(); return 'close_directive'; }
-<arg_directive>((?:(?!\}\%\%).|\n)*)            return 'arg_directive';
-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");}
+\%\%\{                                                          { 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';
+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";
-// <acc_descr_multiline>.*[^\n]*                {  return "acc_descr_line"}
+// <acc_descr_multiline>.*[^\n]*                    {  return "acc_descr_line"}
+["][`]          { this.begin("md_string");}
+<md_string>[^`"]+        { return "MD_STR";}
+<md_string>[`]["]          { this.popState();}
+["]                     this.begin("string");
+<string>["]             this.popState();
+<string>[^"]*           return "STR";
+"style"               return 'STYLE';
+"default"             return 'DEFAULT';
+"linkStyle"           return 'LINKSTYLE';
+"interpolate"         return 'INTERPOLATE';
+"classDef"            return 'CLASSDEF';
+"class"               return 'CLASS';
+
+/*
+---interactivity command---
+'href' adds a link to the specified node. 'href' can only be specified when the
+line was introduced with 'click'.
+'href "<link>"' attaches the specified link to the node that was specified by 'click'.
+*/
+"href"[\s]+["]          this.begin("href");
+<href>["]               this.popState();
+<href>[^"]*             return 'HREF';

 /*
 ---interactivity command---
@@ -58,128 +74,88 @@ Function arguments are optional: 'call <callbackname>()' simply executes 'callba
 <callbackargs>\)        this.popState();
 <callbackargs>[^)]*     return 'CALLBACKARGS';

-<md_string>[^`"]+       { return "MD_STR";}
-<md_string>[`]["]       { this.popState();}
-<*>["][`]               { this.begin("md_string");}
-<string>[^"]+           return "STR";
-<string>["]             this.popState();
-<*>["]                  this.pushState("string");
-"style"                 return 'STYLE';
-"default"               return 'DEFAULT';
-"linkStyle"             return 'LINKSTYLE';
-"interpolate"           return 'INTERPOLATE';
-"classDef"              return 'CLASSDEF';
-"class"                 return 'CLASS';
-
-/*
---interactivity command---
-'href' adds a link to the specified node. 'href' can only be specified when the
-line was introduced with 'click'.
-'href "<link>"' attaches the specified link to the node that was specified by 'click'.
-*/
-"href"[\s]                  return 'HREF';
-
-
 /*
 'click' is the keyword to introduce a line that contains interactivity commands.
 'click' must be followed by an existing node-id. All commands are attached to
 that id.
 'click <id>' can be followed by href or call commands in any desired order
 */
-"click"[\s]+             this.begin("click");
-<click>[\s\n]            this.popState();
-<click>[^\s\n]*          return 'CLICK';
+"click"[\s]+            this.begin("click");
+<click>[\s\n]           this.popState();
+<click>[^\s\n]*         return 'CLICK';

-"flowchart-elk"          {if(yy.lex.firstGraph()){this.begin("dir");}  return 'GRAPH';}
-"graph"                  {if(yy.lex.firstGraph()){this.begin("dir");}  return 'GRAPH';}
-"flowchart"              {if(yy.lex.firstGraph()){this.begin("dir");}  return 'GRAPH';}
-"subgraph"               return 'subgraph';
-"end"\b\s*               return 'end';
+"flowchart-elk"        {if(yy.lex.firstGraph()){this.begin("dir");}  return 'GRAPH';}
+"graph"                {if(yy.lex.firstGraph()){this.begin("dir");}  return 'GRAPH';}
+"flowchart"            {if(yy.lex.firstGraph()){this.begin("dir");}  return 'GRAPH';}
+"subgraph"            return 'subgraph';
+"end"\b\s*            return 'end';

-"_self"                  return 'LINK_TARGET';
-"_blank"                 return 'LINK_TARGET';
-"_parent"                return 'LINK_TARGET';
-"_top"                   return 'LINK_TARGET';
+"_self"               return 'LINK_TARGET';
+"_blank"              return 'LINK_TARGET';
+"_parent"             return 'LINK_TARGET';
+"_top"                return 'LINK_TARGET';

-<dir>(\r?\n)*\s*\n       { this.popState();  return 'NODIR'; }
-<dir>\s*"LR"             { this.popState();  return 'DIR'; }
-<dir>\s*"RL"             { this.popState();  return 'DIR'; }
-<dir>\s*"TB"             { this.popState();  return 'DIR'; }
-<dir>\s*"BT"             { this.popState();  return 'DIR'; }
-<dir>\s*"TD"             { this.popState();  return 'DIR'; }
-<dir>\s*"BR"             { this.popState();  return 'DIR'; }
-<dir>\s*"<"              { this.popState();  return 'DIR'; }
-<dir>\s*">"              { this.popState();  return 'DIR'; }
-<dir>\s*"^"              { this.popState();  return 'DIR'; }
-<dir>\s*"v"              { this.popState();  return 'DIR'; }
-
-.*direction\s+TB[^\n]*       return 'direction_tb';
-.*direction\s+BT[^\n]*       return 'direction_bt';
-.*direction\s+RL[^\n]*       return 'direction_rl';
-.*direction\s+LR[^\n]*       return 'direction_lr';
-
-[0-9]+                       return 'NUM';
-\#                           return 'BRKT';
-":::"                        return 'STYLE_SEPARATOR';
-":"                          return 'COLON';
-"&"                          return 'AMP';
-";"                          return 'SEMI';
-","                          return 'COMMA';
-"*"                          return 'MULT';
-
-<INITIAL,edgeText>\s*[xo<]?\-\-+[-xo>]\s*          { this.popState(); return 'LINK'; }
-<INITIAL>\s*[xo<]?\-\-\s*                          { this.pushState("edgeText"); return 'START_LINK'; }
-<edgeText>[^-]|\-(?!\-)+                           return 'EDGE_TEXT';
-
-<INITIAL,thickEdgeText>\s*[xo<]?\=\=+[=xo>]\s*      { this.popState(); return 'LINK'; }
-<INITIAL>\s*[xo<]?\=\=\s*                           { this.pushState("thickEdgeText"); return 'START_LINK'; }
-<thickEdgeText>[^=]|\=(?!=)                         return 'EDGE_TEXT';
-
-<INITIAL,dottedEdgeText>\s*[xo<]?\-?\.+\-[xo>]?\s*   { this.popState(); return 'LINK'; }
-<INITIAL>\s*[xo<]?\-\.\s*                            { this.pushState("dottedEdgeText"); return 'START_LINK'; }
-<dottedEdgeText>[^\.]|\.(?!-)                        return 'EDGE_TEXT';
-
-
-<*>\s*\~\~[\~]+\s*              return 'LINK';
-
-<ellipseText>[-/\)][\)]         { this.popState(); return '-)'; }
-<ellipseText>[^\(\)\[\]\{\}]|-/!\)+       return "TEXT"
-<*>"(-"                         { this.pushState("ellipseText"); return '(-'; }
-
-<text>"])"                { this.popState(); return 'STADIUMEND'; }
-<*>"(["                   { this.pushState("text"); return 'STADIUMSTART'; }
-
-<text>"]]"                { this.popState(); return 'SUBROUTINEEND'; }
-<*>"[["                   { this.pushState("text"); return 'SUBROUTINESTART'; }
-
-"[|"                      { return 'VERTEX_WITH_PROPS_START'; }
-
-\>                    { this.pushState("text"); return 'TAGEND'; }
-
-<text>")]"                { this.popState(); return 'CYLINDEREND'; }
-<*>"[("                   { this.pushState("text") ;return 'CYLINDERSTART'; }
-
-<text>")))"               { this.popState(); return 'DOUBLECIRCLEEND'; }
-<*>"((("                  { this.pushState("text"); return 'DOUBLECIRCLESTART'; }
-
-<trapText>[\\(?=\])][\]]  { this.popState(); return 'TRAPEND'; }
-<trapText>\/(?=\])\]     { this.popState(); return 'INVTRAPEND'; }
-<trapText>\/(?!\])|\\(?!\])|[^\\\[\]\(\)\{\}\/]+        return 'TEXT';
-<*>"[/"                   { this.pushState("trapText"); return 'TRAPSTART'; }
-
-<*>"[\\"                 { this.pushState("trapText"); return 'INVTRAPSTART'; }
+<dir>(\r?\n)*\s*\n       {   this.popState();  return 'NODIR'; }
+<dir>\s*"LR"             {   this.popState();  return 'DIR'; }
+<dir>\s*"RL"             {   this.popState();  return 'DIR'; }
+<dir>\s*"TB"             {   this.popState();  return 'DIR'; }
+<dir>\s*"BT"             {   this.popState();  return 'DIR'; }
+<dir>\s*"TD"             {   this.popState();  return 'DIR'; }
+<dir>\s*"BR"             {   this.popState();  return 'DIR'; }
+<dir>\s*"<"              {   this.popState();  return 'DIR'; }
+<dir>\s*">"              {   this.popState();  return 'DIR'; }
+<dir>\s*"^"              {   this.popState();  return 'DIR'; }
+<dir>\s*"v"              {   this.popState();  return 'DIR'; }

+.*direction\s+TB[^\n]*                                      return 'direction_tb';
+.*direction\s+BT[^\n]*                                      return 'direction_bt';
+.*direction\s+RL[^\n]*                                      return 'direction_rl';
+.*direction\s+LR[^\n]*                                      return 'direction_lr';

+[0-9]+                { return 'NUM';}
+\#                    return 'BRKT';
+":::"                 return 'STYLE_SEPARATOR';
+":"                   return 'COLON';
+"&"                   return 'AMP';
+";"                   return 'SEMI';
+","                   return 'COMMA';
+"*"                   return 'MULT';
+\s*[xo<]?\-\-+[-xo>]\s*     return 'LINK';
+\s*[xo<]?\=\=+[=xo>]\s*     return 'LINK';
+\s*[xo<]?\-?\.+\-[xo>]?\s*  return 'LINK';
+\s*\~\~[\~]+\s*  return 'LINK';
+\s*[xo<]?\-\-\s*            return 'START_LINK';
+\s*[xo<]?\=\=\s*            return 'START_LINK';
+\s*[xo<]?\-\.\s*            return 'START_LINK';
+"(-"                  return '(-';
+"-)"                  return '-)';
+"(["                  return 'STADIUMSTART';
+"])"                  return 'STADIUMEND';
+"[["                  return 'SUBROUTINESTART';
+"]]"                  return 'SUBROUTINEEND';
+"[|"                  return 'VERTEX_WITH_PROPS_START';
+"[("                  return 'CYLINDERSTART';
+")]"                  return 'CYLINDEREND';
+"((("                 return 'DOUBLECIRCLESTART';
+")))"                 return 'DOUBLECIRCLEEND';
+\-                    return 'MINUS';
+"."                   return 'DOT';
+[\_]                  return 'UNDERSCORE';
+\+                    return 'PLUS';
+\%                    return 'PCT';
+"="                   return 'EQUALS';
+\=                    return 'EQUALS';
 "<"                   return 'TAGSTART';
 ">"                   return 'TAGEND';
 "^"                   return 'UP';
 "\|"                  return 'SEP';
 "v"                   return 'DOWN';
-"*"                   return 'MULT';
-"#"                   return 'BRKT';
-"&"                   return 'AMP';
-([A-Za-z0-9!"\#$%&'*+\.`?\\_\/]|\-(?=[^\>\-\.])|=(?!=))+  return 'NODE_STRING';
-"-"                   return 'MINUS'
+[A-Za-z]+             return 'ALPHA';
+"\\]"                 return 'TRAPEND';
+"[/"                  return 'TRAPSTART';
+"/]"                  return 'INVTRAPEND';
+"[\\"                 return 'INVTRAPSTART';
+[!"#$%&'*+,-.`?\\_/]  return 'PUNCTUATION';
 [\u00AA\u00B5\u00BA\u00C0-\u00D6\u00D8-\u00F6]|
 [\u00F8-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EC\u02EE\u0370-\u0374\u0376\u0377]|
 [\u037A-\u037D\u0386\u0388-\u038A\u038C\u038E-\u03A1\u03A3-\u03F5]|
@@ -242,20 +218,13 @@ that id.
 [\uFF21-\uFF3A\uFF41-\uFF5A\uFF66-\uFFBE\uFFC2-\uFFC7\uFFCA-\uFFCF]|
 [\uFFD2-\uFFD7\uFFDA-\uFFDC]
                      return 'UNICODE_TEXT';
-
-<text>"|"             { this.popState(); return 'PIPE'; }
-<*>"|"                { this.pushState("text"); return 'PIPE'; }
-
-<text>")"             { this.popState(); return 'PE'; }
-<*>"("                { this.pushState("text"); return 'PS'; }
-
-<text>"]"            { this.popState(); return 'SQE'; }
-<*>"["                { this.pushState("text"); return 'SQS'; }
-
-<text>(\})            { this.popState(); return 'DIAMOND_STOP' }
-<*>"{"                { this.pushState("text"); return 'DIAMOND_START' }
-<text>[^\[\]\(\)\{\}\|\"]+    return "TEXT";
-
+"|"                   return 'PIPE';
+"("                   return 'PS';
+")"                   return 'PE';
+"["                   return 'SQS';
+"]"                   return 'SQE';
+"{"                   return 'DIAMOND_START'
+"}"                   return 'DIAMOND_STOP'
 "\""                  return 'QUOTE';
 (\r?\n)+              return 'NEWLINE';
 \s                    return 'SPACE';
@@ -286,11 +255,11 @@ openDirective
  ;

 typeDirective
-  : type_directive { yy.parseDirective($type_directive, 'type_directive'); }
+  : type_directive { yy.parseDirective($1, 'type_directive'); }
  ;

 argDirective
-  : arg_directive { $arg_directive = $arg_directive.trim().replace(/'/g, '"'); yy.parseDirective($arg_directive, 'arg_directive'); }
+  : arg_directive { $1 = $1.trim().replace(/'/g, '"'); yy.parseDirective($1, 'arg_directive'); }
  ;

 closeDirective
@@ -306,15 +275,15 @@ document
 	{ $$ = [];}
 	| document line
 	{
-	    if(!Array.isArray($line) || $line.length > 0){
-	        $document.push($line);
+	    if(!Array.isArray($2) || $2.length > 0){
+	        $1.push($2);
 	    }
-	    $$=$document;}
+	    $$=$1;}
 	;

 line
 	: statement
-	{$$=$statement;}
+	{$$=$1;}
 	| SEMI
 	| NEWLINE
 	| SPACE
@@ -327,15 +296,15 @@ graphConfig
    | GRAPH NODIR
        { yy.setDirection('TB');$$ = 'TB';}
    | GRAPH DIR FirstStmtSeperator
-        { yy.setDirection($DIR);$$ = $DIR;}
+        { yy.setDirection($2);$$ = $2;}
    // | GRAPH SPACE TAGEND FirstStmtSeperator
-    //     { yy.setDirection("LR");$$ = $TAGEND;}
+    //     { yy.setDirection("LR");$$ = $3;}
    // | GRAPH SPACE TAGSTART FirstStmtSeperator
-    //     { yy.setDirection("RL");$$ = $TAGSTART;}
+    //     { yy.setDirection("RL");$$ = $3;}
    // | GRAPH SPACE UP FirstStmtSeperator
-    //     { yy.setDirection("BT");$$ = $UP;}
+    //     { yy.setDirection("BT");$$ = $3;}
    // | GRAPH SPACE DOWN FirstStmtSeperator
-    //     { yy.setDirection("TB");$$ = $DOWN;}
+    //     { yy.setDirection("TB");$$ = $3;}
    ;

 ending: endToken ending
@@ -363,7 +332,7 @@ spaceList

 statement
    : verticeStatement separator
-    { /* console.warn('finat vs', $verticeStatement.nodes); */ $$=$verticeStatement.nodes}
+    { /* console.warn('finat vs', $1.nodes); */ $$=$1.nodes}
    | styleStatement separator
    {$$=[];}
    | linkStyleStatement separator
@@ -374,121 +343,110 @@ statement
    {$$=[];}
    | clickStatement separator
    {$$=[];}
-    | subgraph SPACE textNoTags SQS text SQE separator document end
-    {$$=yy.addSubGraph($textNoTags,$document,$text);}
-    | subgraph SPACE textNoTags separator document end
-    {$$=yy.addSubGraph($textNoTags,$document,$textNoTags);}
-    // | subgraph SPACE textNoTags separator document end
-    // {$$=yy.addSubGraph($textNoTags,$document,$textNoTags);}
+    | subgraph SPACE text SQS text SQE separator document end
+    {$$=yy.addSubGraph($3,$8,$5);}
+    | subgraph SPACE text separator document end
+    {$$=yy.addSubGraph($3,$5,$3);}
+    // | subgraph SPACE text separator document end
+    // {$$=yy.addSubGraph($3,$5,$3);}
    | subgraph separator document end
-    {$$=yy.addSubGraph(undefined,$document,undefined);}
+    {$$=yy.addSubGraph(undefined,$3,undefined);}
    | direction
-    | acc_title acc_title_value  { $$=$acc_title_value.trim();yy.setAccTitle($$); }
-    | acc_descr acc_descr_value  { $$=$acc_descr_value.trim();yy.setAccDescription($$); }
-    | acc_descr_multiline_value { $$=$acc_descr_multiline_value.trim();yy.setAccDescription($$); }
+    | 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($$); }
    ;

 separator: NEWLINE | SEMI | EOF ;

-
+ 
 verticeStatement: verticeStatement link node
-        { /* console.warn('vs',$verticeStatement.stmt,$node); */ yy.addLink($verticeStatement.stmt,$node,$link); $$ = { stmt: $node, nodes: $node.concat($verticeStatement.nodes) } }
+        { /* console.warn('vs',$1.stmt,$3); */ yy.addLink($1.stmt,$3,$2); $$ = { stmt: $3, nodes: $3.concat($1.nodes) } }
    |  verticeStatement link node spaceList
-        { /* console.warn('vs',$verticeStatement.stmt,$node); */ yy.addLink($verticeStatement.stmt,$node,$link); $$ = { stmt: $node, nodes: $node.concat($verticeStatement.nodes) } }
-    |node spaceList {/*console.warn('noda', $node);*/ $$ = {stmt: $node, nodes:$node }}
-    |node { /*console.warn('noda', $node);*/ $$ = {stmt: $node, nodes:$node }}
+        { /* console.warn('vs',$1.stmt,$3); */ yy.addLink($1.stmt,$3,$2); $$ = { stmt: $3, nodes: $3.concat($1.nodes) } }
+    |node spaceList {/*console.warn('noda', $1);*/ $$ = {stmt: $1, nodes:$1 }}
+    |node { /*console.warn('noda', $1);*/ $$ = {stmt: $1, nodes:$1 }}
    ;

 node: styledVertex
-        { /* console.warn('nod', $styledVertex); */ $$ = [$styledVertex];}
+        { /* console.warn('nod', $1); */ $$ = [$1];}
    | node spaceList AMP spaceList styledVertex
-        { $$ = $node.concat($styledVertex); /* console.warn('pip', $node[0], $styledVertex, $$); */ }
+        { $$ = $1.concat($5); /* console.warn('pip', $1[0], $5, $$); */ }
    ;

 styledVertex: vertex
-        { /* console.warn('nod', $vertex); */ $$ = $vertex;}
+        { /* console.warn('nod', $1); */ $$ = $1;}
    | vertex STYLE_SEPARATOR idString
-        {$$ = $vertex;yy.setClass($vertex,$idString)}
+        {$$ = $1;yy.setClass($1,$3)}
    ;

 vertex:  idString SQS text SQE
-        {$$ = $idString;yy.addVertex($idString,$text,'square');}
+        {$$ = $1;yy.addVertex($1,$3,'square');}
    | idString DOUBLECIRCLESTART text DOUBLECIRCLEEND
-        {$$ = $idString;yy.addVertex($idString,$text,'doublecircle');}
+        {$$ = $1;yy.addVertex($1,$3,'doublecircle');}
    | idString PS PS text PE PE
-        {$$ = $idString;yy.addVertex($idString,$text,'circle');}
+        {$$ = $1;yy.addVertex($1,$4,'circle');}
    | idString '(-' text '-)'
-        {$$ = $idString;yy.addVertex($idString,$text,'ellipse');}
+        {$$ = $1;yy.addVertex($1,$3,'ellipse');}
    | idString STADIUMSTART text STADIUMEND
-        {$$ = $idString;yy.addVertex($idString,$text,'stadium');}
+        {$$ = $1;yy.addVertex($1,$3,'stadium');}
    | idString SUBROUTINESTART text SUBROUTINEEND
-        {$$ = $idString;yy.addVertex($idString,$text,'subroutine');}
-    | idString VERTEX_WITH_PROPS_START NODE_STRING\[field] COLON NODE_STRING\[value] PIPE text SQE
-        {$$ = $idString;yy.addVertex($idString,$text,'rect',undefined,undefined,undefined, Object.fromEntries([[$field, $value]]));}
+        {$$ = $1;yy.addVertex($1,$3,'subroutine');}
+    | idString VERTEX_WITH_PROPS_START ALPHA COLON ALPHA PIPE text SQE
+        {$$ = $1;yy.addVertex($1,$7,'rect',undefined,undefined,undefined, Object.fromEntries([[$3, $5]]));}
    | idString CYLINDERSTART text CYLINDEREND
-        {$$ = $idString;yy.addVertex($idString,$text,'cylinder');}
+        {$$ = $1;yy.addVertex($1,$3,'cylinder');}
    | idString PS text PE
-        {$$ = $idString;yy.addVertex($idString,$text,'round');}
+        {$$ = $1;yy.addVertex($1,$3,'round');}
    | idString DIAMOND_START text DIAMOND_STOP
-        {$$ = $idString;yy.addVertex($idString,$text,'diamond');}
+        {$$ = $1;yy.addVertex($1,$3,'diamond');}
    | idString DIAMOND_START DIAMOND_START text DIAMOND_STOP DIAMOND_STOP
-        {$$ = $idString;yy.addVertex($idString,$text,'hexagon');}
+        {$$ = $1;yy.addVertex($1,$4,'hexagon');}
    | idString TAGEND text SQE
-        {$$ = $idString;yy.addVertex($idString,$text,'odd');}
+        {$$ = $1;yy.addVertex($1,$3,'odd');}
    | idString TRAPSTART text TRAPEND
-        {$$ = $idString;yy.addVertex($idString,$text,'trapezoid');}
+        {$$ = $1;yy.addVertex($1,$3,'trapezoid');}
    | idString INVTRAPSTART text INVTRAPEND
-        {$$ = $idString;yy.addVertex($idString,$text,'inv_trapezoid');}
+        {$$ = $1;yy.addVertex($1,$3,'inv_trapezoid');}
    | idString TRAPSTART text INVTRAPEND
-        {$$ = $idString;yy.addVertex($idString,$text,'lean_right');}
+        {$$ = $1;yy.addVertex($1,$3,'lean_right');}
    | idString INVTRAPSTART text TRAPEND
-        {$$ = $idString;yy.addVertex($idString,$text,'lean_left');}
+        {$$ = $1;yy.addVertex($1,$3,'lean_left');}
    | idString
-        { /*console.warn('h: ', $idString);*/$$ = $idString;yy.addVertex($idString);}
+        { /*console.warn('h: ', $1);*/$$ = $1;yy.addVertex($1);}
    ;



 link: linkStatement arrowText
-    {$linkStatement.text = $arrowText;$$ = $linkStatement;}
+    {$1.text = $2;$$ = $1;}
    | linkStatement TESTSTR SPACE
-    {$linkStatement.text = $TESTSTR;$$ = $linkStatement;}
+    {$1.text = $2;$$ = $1;}
    | linkStatement arrowText SPACE
-    {$linkStatement.text = $arrowText;$$ = $linkStatement;}
+    {$1.text = $2;$$ = $1;}
    | linkStatement
-    {$$ = $linkStatement;}
-    | START_LINK edgeText LINK
-        {var inf = yy.destructLink($LINK, $START_LINK); $$ = {"type":inf.type,"stroke":inf.stroke,"length":inf.length,"text":$edgeText};}
+    {$$ = $1;}
+    | START_LINK text LINK
+        {var inf = yy.destructLink($3, $1); $$ = {"type":inf.type,"stroke":inf.stroke,"length":inf.length,"text":$2};}
    ;

-edgeText: edgeTextToken
-    {$$={text:$edgeTextToken, type:'text'};}
-    | edgeText edgeTextToken
-    {$$={text:$edgeText.text+''+$edgeTextToken, type:$edgeText.type};}
-    |STR
-    {$$={text: $STR, type: 'string'};}
-    | MD_STR
-    {$$={text:$MD_STR, type:'markdown'};}
-    ;
-
-
 linkStatement: LINK
-        {var inf = yy.destructLink($LINK);$$ = {"type":inf.type,"stroke":inf.stroke,"length":inf.length};}
+        {var inf = yy.destructLink($1);$$ = {"type":inf.type,"stroke":inf.stroke,"length":inf.length};}
        ;

 arrowText:
    PIPE text PIPE
-    {$$ = $text;}
+    {$$ = $2;}
    ;

 text: textToken
-    { $$={text:$textToken, type: 'text'};}
+    { $$={text:$1, type: 'text'};}
    | text textToken
-    { $$={text:$text.text+''+$textToken, type: $text.type};}
+    { $$={text:$1.text+''+$2, type: $1.type};}
    | STR
-    { $$ = {text: $STR, type: 'string'};}
+    { $$={text: $1, type: 'text'};}
    | MD_STR
-    { $$={text: $MD_STR, type: 'markdown'};}
+    { $$={text: $1, type: 'markdown'};}
    ;


@@ -498,104 +456,109 @@ keywords


 textNoTags: textNoTagsToken
-    {$$={text:$textNoTagsToken, type: 'text'};}
+    {$$=$1;}
    | textNoTags textNoTagsToken
-    {$$={text:$textNoTags.text+''+$textNoTagsToken, type: $textNoTags.type};}
-    | STR
-    { $$={text: $STR, type: 'text'};}
-    | MD_STR
-    { $$={text: $MD_STR, type: 'markdown'};}
+    {$$=$1+''+$2;}
    ;


-classDefStatement:CLASSDEF SPACE idString SPACE stylesOpt
-    {$$ = $CLASSDEF;yy.addClass($idString,$stylesOpt);}
+classDefStatement:CLASSDEF SPACE DEFAULT SPACE stylesOpt
+    {$$ = $1;yy.addClass($3,$5);}
+    | CLASSDEF SPACE alphaNum SPACE stylesOpt
+          {$$ = $1;yy.addClass($3,$5);}
    ;

-classStatement:CLASS SPACE idString\[vertex] SPACE idString\[class]
-    {$$ = $CLASS;yy.setClass($vertex, $class);}
+classStatement:CLASS SPACE alphaNum SPACE alphaNum
+    {$$ = $1;yy.setClass($3, $5);}
    ;

 clickStatement
-    : CLICK CALLBACKNAME                                    {$$ = $CLICK;yy.setClickEvent($CLICK, $CALLBACKNAME);}
-    | CLICK CALLBACKNAME SPACE STR                          {$$ = $CLICK;yy.setClickEvent($CLICK, $CALLBACKNAME);yy.setTooltip($CLICK, $STR);}
-    | CLICK CALLBACKNAME CALLBACKARGS                       {$$ = $CLICK;yy.setClickEvent($CLICK, $CALLBACKNAME, $CALLBACKARGS);}
-    | CLICK CALLBACKNAME CALLBACKARGS SPACE STR             {$$ = $CLICK;yy.setClickEvent($CLICK, $CALLBACKNAME, $CALLBACKARGS);yy.setTooltip($CLICK, $STR);}
-    | CLICK HREF STR                                        {$$ = $CLICK;yy.setLink($CLICK, $STR);}
-    | CLICK HREF STR SPACE STR                              {$$ = $CLICK;yy.setLink($CLICK, $STR1);yy.setTooltip($CLICK, $STR2);}
-    | CLICK HREF STR SPACE LINK_TARGET                      {$$ = $CLICK;yy.setLink($CLICK, $STR, $LINK_TARGET);}
-    | CLICK HREF STR\[link] SPACE STR\[tooltip] SPACE LINK_TARGET      {$$ = $CLICK;yy.setLink($CLICK, $link, $LINK_TARGET);yy.setTooltip($CLICK, $tooltip);}
-    | CLICK alphaNum                                        {$$ = $CLICK;yy.setClickEvent($CLICK, $alphaNum);}
-    | CLICK alphaNum SPACE STR                              {$$ = $CLICK;yy.setClickEvent($CLICK, $alphaNum);yy.setTooltip($CLICK, $STR);}
-    | CLICK STR                                             {$$ = $CLICK;yy.setLink($CLICK, $STR);}
-    | CLICK STR\[link] SPACE STR\[tooltip]                  {$$ = $CLICK;yy.setLink($CLICK, $link);yy.setTooltip($CLICK, $tooltip);}
-    | CLICK STR SPACE LINK_TARGET                           {$$ = $CLICK;yy.setLink($CLICK, $STR, $LINK_TARGET);}
-    | CLICK STR\[link] SPACE STR\[tooltip] SPACE LINK_TARGET    {$$ = $CLICK;yy.setLink($CLICK, $link, $LINK_TARGET);yy.setTooltip($CLICK, $tooltip);}
+    : CLICK CALLBACKNAME                           {$$ = $1;yy.setClickEvent($1, $2);}
+    | CLICK CALLBACKNAME SPACE STR                 {$$ = $1;yy.setClickEvent($1, $2);yy.setTooltip($1, $4);}
+    | CLICK CALLBACKNAME CALLBACKARGS              {$$ = $1;yy.setClickEvent($1, $2, $3);}
+    | CLICK CALLBACKNAME CALLBACKARGS SPACE STR    {$$ = $1;yy.setClickEvent($1, $2, $3);yy.setTooltip($1, $5);}
+    | CLICK HREF                                   {$$ = $1;yy.setLink($1, $2);}
+    | CLICK HREF SPACE STR                         {$$ = $1;yy.setLink($1, $2);yy.setTooltip($1, $4);}
+    | CLICK HREF SPACE LINK_TARGET                 {$$ = $1;yy.setLink($1, $2, $4);}
+    | CLICK HREF SPACE STR SPACE LINK_TARGET       {$$ = $1;yy.setLink($1, $2, $6);yy.setTooltip($1, $4);}
+    | CLICK alphaNum                               {$$ = $1;yy.setClickEvent($1, $2);}
+    | CLICK alphaNum SPACE STR                     {$$ = $1;yy.setClickEvent($1, $2);yy.setTooltip($1, $4);}
+    | CLICK STR                                    {$$ = $1;yy.setLink($1, $2);}
+    | CLICK STR SPACE STR                          {$$ = $1;yy.setLink($1, $2);yy.setTooltip($1, $4);}
+    | CLICK STR SPACE LINK_TARGET                  {$$ = $1;yy.setLink($1, $2, $4);}
+    | CLICK STR SPACE STR SPACE LINK_TARGET        {$$ = $1;yy.setLink($1, $2, $6);yy.setTooltip($1, $4);}
    ;

-styleStatement:STYLE SPACE idString SPACE stylesOpt
-    {$$ = $STYLE;yy.addVertex($idString,undefined,undefined,$stylesOpt);}
+styleStatement:STYLE SPACE alphaNum SPACE stylesOpt
+    {$$ = $1;yy.addVertex($3,undefined,undefined,$5);}
+    | STYLE SPACE HEX SPACE stylesOpt
+          {$$ = $1;yy.updateLink($3,$5);}
    ;

 linkStyleStatement
    : LINKSTYLE SPACE DEFAULT SPACE stylesOpt
-          {$$ = $LINKSTYLE;yy.updateLink([$DEFAULT],$stylesOpt);}
+          {$$ = $1;yy.updateLink([$3],$5);}
    | LINKSTYLE SPACE numList SPACE stylesOpt
-          {$$ = $LINKSTYLE;yy.updateLink($numList,$stylesOpt);}
+          {$$ = $1;yy.updateLink($3,$5);}
    | LINKSTYLE SPACE DEFAULT SPACE INTERPOLATE SPACE alphaNum SPACE stylesOpt
-          {$$ = $LINKSTYLE;yy.updateLinkInterpolate([$DEFAULT],$alphaNum);yy.updateLink([$DEFAULT],$stylesOpt);}
+          {$$ = $1;yy.updateLinkInterpolate([$3],$7);yy.updateLink([$3],$9);}
    | LINKSTYLE SPACE numList SPACE INTERPOLATE SPACE alphaNum SPACE stylesOpt
-          {$$ = $LINKSTYLE;yy.updateLinkInterpolate($numList,$alphaNum);yy.updateLink($numList,$stylesOpt);}
+          {$$ = $1;yy.updateLinkInterpolate($3,$7);yy.updateLink($3,$9);}
    | LINKSTYLE SPACE DEFAULT SPACE INTERPOLATE SPACE alphaNum
-          {$$ = $LINKSTYLE;yy.updateLinkInterpolate([$DEFAULT],$alphaNum);}
+          {$$ = $1;yy.updateLinkInterpolate([$3],$7);}
    | LINKSTYLE SPACE numList SPACE INTERPOLATE SPACE alphaNum
-          {$$ = $LINKSTYLE;yy.updateLinkInterpolate($numList,$alphaNum);}
+          {$$ = $1;yy.updateLinkInterpolate($3,$7);}
    ;

 numList: NUM
-        {$$ = [$NUM]}
+        {$$ = [$1]}
    | numList COMMA NUM
-        {$numList.push($NUM);$$ = $numList;}
+        {$1.push($3);$$ = $1;}
    ;

 stylesOpt: style
-        {$$ = [$style]}
+        {$$ = [$1]}
    | stylesOpt COMMA style
-        {$stylesOpt.push($style);$$ = $stylesOpt;}
+        {$1.push($3);$$ = $1;}
    ;

 style: styleComponent
    |style styleComponent
-    {$$ = $style + $styleComponent;}
+    {$$ = $1 + $2;}
    ;

-styleComponent: NUM | NODE_STRING| COLON | UNIT | SPACE | BRKT | STYLE | PCT ;
+styleComponent: ALPHA | COLON | MINUS | NUM | UNIT | SPACE | HEX | BRKT | DOT | STYLE | PCT ;

 /* Token lists */
-idStringToken  :  NUM | NODE_STRING | DOWN | MINUS | DEFAULT | COMMA | COLON | AMP | BRKT | MULT | UNICODE_TEXT;

-textToken      :   TEXT | TAGSTART | TAGEND | UNICODE_TEXT;
+textToken      : textNoTagsToken | TAGSTART | TAGEND | START_LINK | PCT | DEFAULT;

-textNoTagsToken: NUM | NODE_STRING | SPACE | MINUS | AMP | UNICODE_TEXT | COLON | MULT | BRKT | keywords | START_LINK ;
-
-edgeTextToken  :  EDGE_TEXT | UNICODE_TEXT ;
-
-alphaNumToken  :  NUM | UNICODE_TEXT | NODE_STRING | DIR | DOWN | MINUS | COMMA | COLON | AMP | BRKT | MULT;
+textNoTagsToken: alphaNumToken | SPACE | MINUS | keywords ;

 idString
    :idStringToken
-    {$$=$idStringToken}
+    {$$=$1}
    | idString idStringToken
-    {$$=$idString+''+$idStringToken}
+    {$$=$1+''+$2}
    ;

 alphaNum
-    : alphaNumToken
-    {$$=$alphaNumToken;}
-    | alphaNum alphaNumToken
-    {$$=$alphaNum+''+$alphaNumToken;}
+    : alphaNumStatement
+    {$$=$1;}
+    | alphaNum alphaNumStatement
+    {$$=$1+''+$2;}
    ;

+alphaNumStatement
+    : DIR
+        {$$=$1;}
+    | alphaNumToken
+        {$$=$1;}
+    | DOWN
+        {$$='v';}
+    | MINUS
+        {$$='-';}
+    ;

 direction
    : direction_tb
@@ -608,4 +571,9 @@ direction
    { $$={stmt:'dir', value:'LR'};}
    ;

+alphaNumToken  : PUNCTUATION | AMP | UNICODE_TEXT | NUM| ALPHA | COLON | COMMA | PLUS | EQUALS | MULT | DOT | BRKT| UNDERSCORE ;
+
+idStringToken  : ALPHA|UNDERSCORE |UNICODE_TEXT | NUM|  COLON | COMMA | PLUS | MINUS | DOWN |EQUALS | MULT | BRKT | DOT | PUNCTUATION | AMP | DEFAULT;
+
+graphCodeTokens: STADIUMSTART | STADIUMEND | SUBROUTINESTART | SUBROUTINEEND | VERTEX_WITH_PROPS_START | CYLINDERSTART | CYLINDEREND | TRAPSTART | TRAPEND | INVTRAPSTART | INVTRAPEND | PIPE | PS | PE | SQS | SQE | DIAMOND_START | DIAMOND_STOP | TAGSTART | TAGEND | ARROW_CROSS | ARROW_POINT | ARROW_CIRCLE | ARROW_OPEN | QUOTE | SEMI;
 %%
--- a/packages/mermaid/src/diagrams/info/infoRenderer.ts
+++ b/packages/mermaid/src/diagrams/info/infoRenderer.ts
@@ -1,7 +1,7 @@
+import { select } from 'd3';
 import { log } from '../../logger.js';
-import { configureSvgSize } from '../../setupGraphViewbox.js';
-import type { DrawDefinition, Group, SVG } from '../../diagram-api/types.js';
-import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
+import { getConfig } from '../../config.js';
+import type { DrawDefinition, HTML, SVG } from '../../diagram-api/types.js';

 /**
 * Draws a an info picture in the tag with id: id based on the graph definition in text.
@@ -11,20 +11,40 @@ import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
 * @param version - MermaidJS version.
 */
 const draw: DrawDefinition = (text, id, version) => {
-  log.debug('rendering info diagram\n' + text);
+  try {
+    log.debug('rendering info diagram\n' + text);

-  const svg: SVG = selectSvgElement(id);
-  configureSvgSize(svg, 100, 400, true);
+    const { securityLevel } = getConfig();
+    // handle root and document for when rendering in sandbox mode
+    let sandboxElement: HTML | undefined;
+    let document: Document | null | undefined;
+    if (securityLevel === 'sandbox') {
+      sandboxElement = select('#i' + id);
+      document = sandboxElement.nodes()[0].contentDocument;
+    }

-  const group: Group = svg.append('g');
-  group
-    .append('text')
-    .attr('x', 100)
-    .attr('y', 40)
-    .attr('class', 'version')
-    .attr('font-size', 32)
-    .style('text-anchor', 'middle')
-    .text(`v${version}`);
+    // @ts-ignore - figure out how to assign HTML to document type
+    const root: HTML =
+      sandboxElement !== undefined && document !== undefined && document !== null
+        ? select(document)
+        : select('body');
+
+    const svg: SVG = root.select('#' + id);
+    svg.attr('height', 100);
+    svg.attr('width', 400);
+
+    const g = svg.append('g');
+
+    g.append('text') // text label for the x axis
+      .attr('x', 100)
+      .attr('y', 40)
+      .attr('class', 'version')
+      .attr('font-size', '32px')
+      .style('text-anchor', 'middle')
+      .text('v ' + version);
+  } catch (e) {
+    log.error('error while rendering info diagram', e);
+  }
 };

 export const renderer = { draw };
--- a/packages/mermaid/src/diagrams/railroad/railroadDB.ts
+++ b/packages/mermaid/src/diagrams/railroad/railroadDB.ts
@@ -0,0 +1,13 @@
+import type { RailroadDB } from './railroadTypes.js';
+
+import {
+  clear as commonClear,
+} from '../../commonDb.js';
+
+const clear = (): void => {
+  commonClear();
+};
+
+export const db: RailroadDB = {
+  clear,
+};
--- a/packages/mermaid/src/diagrams/railroad/railroadDetector.ts
+++ b/packages/mermaid/src/diagrams/railroad/railroadDetector.ts
@@ -0,0 +1,22 @@
+import type {
+  DiagramDetector,
+  DiagramLoader,
+  ExternalDiagramDefinition,
+} from '../../diagram-api/types.js';
+
+const id = 'railroad';
+
+const detector: DiagramDetector = (txt) => {
+  return /^\s*railroad-beta/.test(txt);
+};
+
+const loader: DiagramLoader = async () => {
+  const { diagram } = await import('./railroadDiagram.js');
+  return { id, diagram };
+};
+
+export const railroad: ExternalDiagramDefinition = {
+  id,
+  detector,
+  loader,
+};
--- a/packages/mermaid/src/diagrams/railroad/railroadDiagram.ts
+++ b/packages/mermaid/src/diagrams/railroad/railroadDiagram.ts
@@ -0,0 +1,15 @@
+import { DiagramDefinition } from '../../diagram-api/types.js';
+// @ts-ignore: jison doesn't export types
+import parser from './railroadParser.jison';
+import { db } from './railroadDB.js';
+import renderer from './railroadRenderer.js';
+// import { prepareTextForParsing } from './railroadUtils.js';
+
+// const originalParse = parser.parse.bind(parser);
+// parser.parse = (text: string) => originalParse(prepareTextForParsing(text));
+
+export const diagram: DiagramDefinition = {
+  parser,
+  db,
+  renderer,
+};
--- a/packages/mermaid/src/diagrams/railroad/railroadParser.jison
+++ b/packages/mermaid/src/diagrams/railroad/railroadParser.jison
@@ -0,0 +1,46 @@
+/*
+  Mermaid
+  https://mermaid.js.org/
+  MIT license.
+*/
+
+//------------------
+// Lexical analysis
+//------------------
+
+%lex
+
+// Pre lexer steps
+
+%{
+%}
+
+// Start conditions
+%x diagram
+
+// Definitions
+DIAGRAM_KEYWORD "railroad-beta"
+
+%%
+
+// Tokenization
+<INITIAL>DIAGRAM_KEYWORD       { this.pushState('diagram'); return 'DIAGRAM_KEYWORD'; }
+<INITIAL,diagram>\s+           {}
+<INITIAL,diagram><<EOF>>       { return 'EOF' } // match end of file
+
+/lex
+
+//-----------------
+// Syntax analysis
+//-----------------
+
+// Configuration
+
+%start start
+
+%%
+
+// Grammar
+
+start: DIAGRAM_KEYWORD EOF;
+
--- a/packages/mermaid/src/diagrams/railroad/railroadRenderer.ts
+++ b/packages/mermaid/src/diagrams/railroad/railroadRenderer.ts
@@ -0,0 +1,52 @@
+import { Diagram } from '../../Diagram.js';
+import * as configApi from '../../config.js';
+import type { DrawDefinition, HTML, SVG } from '../../diagram-api/types.js';
+import { select } from 'd3';
+// import { configureSvgSize } from '../../setupGraphViewbox.js';
+// import { Uid } from '../../rendering-util/uid.js';
+
+const fetchSVGElement = (id: string): SVG => {
+  // Get config
+  const { securityLevel } = configApi.getConfig();
+
+  // Handle root and document for when rendering in sandbox mode
+  let sandboxElement: HTML | undefined;
+  let document: Document | null | undefined;
+  if (securityLevel === 'sandbox') {
+    sandboxElement = select('#i' + id);
+    document = sandboxElement.nodes()[0].contentDocument;
+  }
+
+  // @ts-ignore - figure out how to assign HTML to document type
+  const root: HTML = (sandboxElement && document) ? select(document) : select('body');
+  const svg: SVG = root.select('#' + id);
+  return svg;
+}
+
+/**
+ * Draws Railroad diagram.
+ *
+ * @param text - The text of the diagram
+ * @param id - The id of the diagram which will be used as a DOM element id¨
+ * @param _version - Mermaid version from package.json
+ * @param diagObj - A standard diagram containing the db and the text and type etc of the diagram
+ */
+export const draw: DrawDefinition = (text: string, id: string, _version: string, diagObj: Diagram): void => {
+  const svg: SVG = fetchSVGElement(id);
+  
+  // const defaultRailroadConfig = configApi!.defaultConfig!.railroad!;
+  // Establish svg dimensions and get width and height
+  //
+  // const width = conf?.width || defaultRailroadConfig.width!;
+  // const height = conf?.height || defaultRailroadConfig.width!;
+  // const useMaxWidth = conf?.useMaxWidth || defaultRailroadConfig.useMaxWidth!;
+
+  // configureSvgSize(svg, height, width, useMaxWidth);
+
+  // Compute layout
+  // 
+};
+
+export default {
+  draw,
+};
--- a/packages/mermaid/src/diagrams/railroad/railroadTests.spec.ts
+++ b/packages/mermaid/src/diagrams/railroad/railroadTests.spec.ts
@@ -0,0 +1,25 @@
+// @ts-ignore: jison doesn't export types
+import railroad from './railroad.jison';
+// import { prepareTextForParsing } from '../railroadUtils.js';
+import * as fs from 'fs';
+import * as path from 'path';
+import { cleanupComments } from '../../diagram-api/comments.js';
+import { db } from './railroadDB.js';
+
+describe('Railroad diagram', function () {
+  describe('when parsing an info graph it', function () {
+    beforeEach(function () {
+      railroad.parser.yy = db;
+      railroad.parser.yy.clear();
+    });
+
+    it('parses csv', async () => {
+      const csv = path.resolve(__dirname, './energy.csv');
+      const data = fs.readFileSync(csv, 'utf8');
+      // const graphDefinition = prepareTextForParsing(cleanupComments('railroad-beta\n\n ' + data));
+      const graphDefinition = cleanupComments('railroad-beta\n\n ' + data);
+
+      railroad.parser.parse(graphDefinition);
+    });
+  });
+});
--- a/packages/mermaid/src/diagrams/railroad/railroadTypes.ts
+++ b/packages/mermaid/src/diagrams/railroad/railroadTypes.ts
@@ -0,0 +1,5 @@
+import type { DiagramDB } from '../../diagram-api/types.js';
+
+export interface RailroadDB extends DiagramDB {
+  clear: () => void;
+}
--- a/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js
+++ b/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js
@@ -172,11 +172,14 @@ describe('more than one sequence diagram', () => {

 describe('when parsing a sequenceDiagram', function () {
  beforeEach(function () {
+    // diagram.db = sequenceDb;
+    // diagram.db.clear();
    diagram = new Diagram(`
 sequenceDiagram
 Alice->Bob:Hello Bob, how are you?
 Note right of Bob: Bob thinks
 Bob-->Alice: I am good thanks!`);
+    diagram.db.clear();
  });
  it('should handle a sequenceDiagram definition', async function () {
    const str = `
@@ -1479,6 +1482,8 @@ describe('when checking the bounds in a sequenceDiagram', function () {
  let conf;
  beforeEach(function () {
    mermaidAPI.reset();
+    // diagram.db = sequenceDb;
+    // diagram.db.clear();
    diagram.renderer.bounds.init();
    conf = diagram.db.getConfig();
  });
@@ -1630,6 +1635,7 @@ sequenceDiagram
 Alice->Bob:Hello Bob, how are you?
 Note right of Bob: Bob thinks
 Bob-->Alice: I am good thanks!`);
+    diagram.db.clear();
  });
  ['tspan', 'fo', 'old', undefined].forEach(function (textPlacement) {
    it(`
@@ -2003,6 +2009,8 @@ describe('when rendering a sequenceDiagram with actor mirror activated', () => {
  let conf;
  beforeEach(function () {
    mermaidAPI.reset();
+    // diagram.db = sequenceDb;
+    diagram.db.clear();
    conf = diagram.db.getConfig();
    diagram.renderer.bounds.init();
  });
@@ -2044,8 +2052,12 @@ describe('when rendering a sequenceDiagram with directives', () => {
    mermaidAPI.initialize({ sequence: conf });
  });

+  let conf;
  beforeEach(function () {
    mermaidAPI.reset();
+    // diagram.db = sequenceDb;
+    diagram.db.clear();
+    conf = diagram.db.getConfig();
    diagram.renderer.bounds.init();
  });

@@ -2057,7 +2069,10 @@ sequenceDiagram
 participant Alice
 `;
    diagram = new Diagram(str);
+
    diagram.renderer.bounds.init();
+    await mermaidAPI.parse(str);
+
    diagram.renderer.draw(str, 'tst', '1.2.3', diagram);

    const { bounds, models } = diagram.renderer.bounds.getBounds();
@@ -2078,7 +2093,7 @@ sequenceDiagram
 participant Alice
 `;

-    diagram = new Diagram(str);
+    diagram.parse(str);
    diagram.renderer.draw(str, 'tst', '1.2.3', diagram);

    const { bounds, models } = diagram.renderer.bounds.getBounds();
@@ -2099,7 +2114,7 @@ Alice->Bob:Hello Bob, how are you?
 Note right of Bob: Bob thinks
 Bob-->Alice: I am good thanks!`;

-    diagram = new Diagram(str1);
+    await mermaidAPI.parse(str1);
    diagram.renderer.draw(str1, 'tst', '1.2.3', diagram); // needs to be rendered for the correct value of visibility auto numbers
    expect(diagram.db.showSequenceNumbers()).toBe(true);

@@ -2109,7 +2124,7 @@ Alice->Bob:Hello Bob, how are you?
 Note right of Bob: Bob thinks
 Bob-->Alice: I am good thanks!`;

-    diagram = new Diagram(str2);
+    await mermaidAPI.parse(str2);
    diagram.renderer.draw(str2, 'tst', '1.2.3', diagram);
    expect(diagram.db.showSequenceNumbers()).toBe(false);
  });
--- a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
+++ b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
@@ -749,6 +749,9 @@ function adjustCreatedDestroyedData(
 export const draw = function (_text: string, id: string, _version: string, diagObj: Diagram) {
  const { securityLevel, sequence } = configApi.getConfig();
  conf = sequence;
+  diagObj.db.clear();
+  // Parse the graph definition
+  diagObj.parser.parse(_text);
  // Handle root and Document for when rendering in sandbox mode
  let sandboxElement;
  if (securityLevel === 'sandbox') {
--- a/packages/mermaid/src/diagrams/state/stateRenderer-v2.js
+++ b/packages/mermaid/src/diagrams/state/stateRenderer-v2.js
@@ -84,8 +84,17 @@ export const setConf = function (cnf) {
 * @returns {object} ClassDef styles (a Map with keys = strings, values = )
 */
 export const getClasses = function (text, diagramObj) {
-  diagramObj.db.extract(diagramObj.db.getRootDocV2());
-  return diagramObj.db.getClasses();
+  log.trace('Extracting classes');
+  diagramObj.db.clear();
+  try {
+    // Parse the graph definition
+    diagramObj.parser.parse(text);
+    // must run extract() to turn the parsed statements into states, relationships, classes, etc.
+    diagramObj.db.extract(diagramObj.db.getRootDocV2());
+    return diagramObj.db.getClasses();
+  } catch (e) {
+    return e;
+  }
 };

 /**
@@ -375,6 +384,7 @@ const getDir = (parsedItem, defaultDir = DEFAULT_NESTED_DOC_DIR) => {
 */
 export const draw = async function (text, id, _version, diag) {
  log.info('Drawing state diagram (v2)', id);
+  // diag.sb.clear();
  nodeDb = {};
  // Fetch the default direction, use TD if none was found
  let dir = diag.db.getDirection();
--- a/packages/mermaid/src/docs/.vitepress/config.ts
+++ b/packages/mermaid/src/docs/.vitepress/config.ts
@@ -144,6 +144,7 @@ function sidebarSyntax() {
        { text: 'Timeline 🔥', link: '/syntax/timeline' },
        { text: 'Zenuml 🔥', link: '/syntax/zenuml' },
        { text: 'Sankey 🔥', link: '/syntax/sankey' },
+        { text: 'Railroad 🔥', link: '/syntax/railroad' },
        { text: 'Other Examples', link: '/syntax/examples' },
      ],
    },
--- a/packages/mermaid/src/docs/.vitepress/theme/redirect.ts
+++ b/packages/mermaid/src/docs/.vitepress/theme/redirect.ts
@@ -50,7 +50,7 @@ const idRedirectMap: Record<string, string> = {
  'n00b-advanced': 'config/n00b-advanced',
  'n00b-gettingstarted': 'intro/n00b-gettingStarted',
  'n00b-overview': 'community/n00b-overview',
-  'n00b-syntaxreference': 'intro/n00b-syntaxReference',
+  'n00b-syntaxreference': '',
  newdiagram: 'community/newDiagram',
  pie: 'syntax/pie',
  plugins: '',
--- a/packages/mermaid/src/docs/community/newDiagram.md
+++ b/packages/mermaid/src/docs/community/newDiagram.md
@@ -4,7 +4,7 @@

 #### Grammar

-This would be to define a JISON grammar for the new diagram type. That should start with a way to identify that the text in the mermaid tag is a diagram of that type. Create a new folder under diagrams for your new diagram type and a parser folder in it. This leads us to step 2.
+This would be to define a jison grammar for the new diagram type. That should start with a way to identify that the text in the mermaid tag is a diagram of that type. Create a new folder under diagrams for your new diagram type and a parser folder in it. This leads us to step 2.

 For instance:

@@ -55,7 +55,7 @@ Place the renderer in the diagram folder.

 ### Step 3: Detection of the new diagram type

-The second thing to do is to add the capability to detect the new diagram to type to the detectType in `diagram-api/detectType.ts`. The detection should return a key for the new diagram type.
+The second thing to do is to add the capability to detect the new diagram to type to the detectType in utils.js. The detection should return a key for the new diagram type.
 [This key will be used to as the aria roledescription](#aria-roledescription), so it should be a word that clearly describes the diagram type.
 For example, if your new diagram use a UML deployment diagram, a good key would be "UMLDeploymentDiagram" because assistive technologies such as a screen reader
 would voice that as "U-M-L Deployment diagram." Another good key would be "deploymentDiagram" because that would be voiced as "Deployment Diagram." A bad key would be "deployment" because that would not sufficiently describe the diagram.
--- a/packages/mermaid/src/docs/intro/index.md
+++ b/packages/mermaid/src/docs/intro/index.md
@@ -164,9 +164,7 @@ The above command generates files into the `dist` folder and publishes them to <
 - [Live Editor](https://github.com/mermaid-js/mermaid-live-editor)
 - [HTTP Server](https://github.com/TomWright/mermaid-server)

-## Contributors
-
-[![Good first issue](https://img.shields.io/github/labels/mermaid-js/mermaid/Good%20first%20issue%21)](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Good+first+issue%21%22) [![Contributors](https://img.shields.io/github/contributors/mermaid-js/mermaid)](https://github.com/mermaid-js/mermaid/graphs/contributors) [![Commits](https://img.shields.io/github/commit-activity/m/mermaid-js/mermaid)](https://github.com/mermaid-js/mermaid/graphs/contributors)
+## Contributors [![Good first issue](https://img.shields.io/github/labels/mermaid-js/mermaid/Good%20first%20issue%21)](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Good+first+issue%21%22) [![Contributors](https://img.shields.io/github/contributors/mermaid-js/mermaid)](https://github.com/mermaid-js/mermaid/graphs/contributors) [![Commits](https://img.shields.io/github/commit-activity/m/mermaid-js/mermaid)](https://github.com/mermaid-js/mermaid/graphs/contributors)

 Mermaid is a growing community and is always accepting new contributors. There's a lot of different ways to help out and we're always looking for extra hands! Look at [this issue](https://github.com/mermaid-js/mermaid/issues/866) if you want to know where to start helping out.

--- a/packages/mermaid/src/docs/news/announcements.md
+++ b/packages/mermaid/src/docs/news/announcements.md
@@ -1,7 +1,7 @@
 # Announcements

-## [From Chaos to Clarity: Exploring Mind Maps with MermaidJS](https://www.mermaidchart.com/blog/posts/from-chaos-to-clarity-exploring-mind-maps-with-mermaidjs)
+## [Mermaid Chart Announces Visual Studio Code Plugin to Simplify Development Workflows](https://www.mermaidchart.com/blog/posts/mermaid-chart-announces-visual-studio-code-plugin)

-24 July 2023 · 4 mins
+17 July 2023 · 3 mins

-Introducing the concept of mind mapping as a tool for organizing complex information, and highlights Mermaid as a user-friendly software that simplifies the creation and editing of mind maps for applications in IT solution design, business decision-making, and knowledge organization.
+New Integration Enhances Workflows By Enabling Developers To Reference And Edit Diagrams Within Visual Studio Code.
--- a/packages/mermaid/src/docs/news/blog.md
+++ b/packages/mermaid/src/docs/news/blog.md
@@ -1,11 +1,5 @@
 # Blog

-## [From Chaos to Clarity: Exploring Mind Maps with MermaidJS](https://www.mermaidchart.com/blog/posts/from-chaos-to-clarity-exploring-mind-maps-with-mermaidjs)
-
-24 July 2023 · 4 mins
-
-Introducing the concept of mind mapping as a tool for organizing complex information, and highlights Mermaid as a user-friendly software that simplifies the creation and editing of mind maps for applications in IT solution design, business decision-making, and knowledge organization.
-
 ## [Mermaid Chart Announces Visual Studio Code Plugin to Simplify Development Workflows](https://www.mermaidchart.com/blog/posts/mermaid-chart-announces-visual-studio-code-plugin)

 17 July 2023 · 3 mins
--- a/packages/mermaid/src/docs/syntax/flowchart.md
+++ b/packages/mermaid/src/docs/syntax/flowchart.md
@@ -390,7 +390,7 @@ It is possible to escape characters using the syntax exemplified here.

 ```mermaid-example
    flowchart LR
-        A["A double quote:#quot;"] --> B["A dec char:#9829;"]
+        A["A double quote:#quot;"] -->B["A dec char:#9829;"]
 ```

 Numbers given are base 10, so `#` can be encoded as `#35;`. It is also supported to use HTML character names.
--- a/packages/mermaid/src/docs/syntax/railroad.md
+++ b/packages/mermaid/src/docs/syntax/railroad.md
--- a/packages/mermaid/src/mermaid.spec.ts
+++ b/packages/mermaid/src/mermaid.spec.ts
@@ -3,7 +3,6 @@ import { mermaidAPI } from './mermaidAPI.js';
 import './diagram-api/diagram-orchestration.js';
 import { addDiagrams } from './diagram-api/diagram-orchestration.js';
 import { beforeAll, describe, it, expect, vi } from 'vitest';
-import type { DiagramDefinition } from './diagram-api/types.js';

 beforeAll(async () => {
  addDiagrams();
@@ -93,16 +92,13 @@ describe('when using mermaid and ', () => {

    it('should defer diagram load based on parameter', async () => {
      let loaded = false;
-      const dummyDiagram: DiagramDefinition = {
+      const dummyDiagram = {
        db: {},
        renderer: () => {
          // do nothing
        },
-        parser: {
-          parse: (_text) => {
-            return;
-          },
-          parser: { yy: {} },
+        parser: () => {
+          // do nothing
        },
        styles: () => {
          // do nothing
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -108,7 +108,8 @@ export interface RenderResult {
 async function parse(text: string, parseOptions?: ParseOptions): Promise<boolean> {
  addDiagrams();
  try {
-    await getDiagramFromText(text);
+    const diagram = await getDiagramFromText(text);
+    diagram.parse();
  } catch (error) {
    if (parseOptions?.suppressErrors) {
      return false;
@@ -284,9 +285,7 @@ export const cleanUpSvgCode = (
 * TODO replace btoa(). Replace with  buf.toString('base64')?
 */
 export const putIntoIFrame = (svgCode = '', svgElement?: D3Element): string => {
-  const height = svgElement?.viewBox?.baseVal?.height
-    ? svgElement.viewBox.baseVal.height + 'px'
-    : IFRAME_HEIGHT;
+  const height = svgElement ? svgElement.viewBox.baseVal.height + 'px' : IFRAME_HEIGHT;
  const base64encodedSrc = btoa('<body style="' + IFRAME_BODY_STYLE + '">' + svgCode + '</body>');
  return `<iframe style="width:${IFRAME_WIDTH};height:${height};${IFRAME_STYLES}" src="data:text/html;base64,${base64encodedSrc}" sandbox="${IFRAME_SANDBOX_OPTS}">
  ${IFRAME_NOT_SUPPORTED_MSG}
--- a/packages/mermaid/src/rendering-util/selectSvgElement.ts
+++ b/packages/mermaid/src/rendering-util/selectSvgElement.ts
@@ -1,22 +0,0 @@
-import { select } from 'd3';
-import { getConfig } from '../config.js';
-import type { HTML, SVG } from '../diagram-api/types.js';
-
-/**
- * Selects the SVG element using {@link id}.
- *
- * @param id - The diagram ID.
- * @returns The selected {@link SVG} element using {@link id}.
- */
-export const selectSvgElement = (id: string): SVG => {
-  const { securityLevel } = getConfig();
-  // handle root and document for when rendering in sandbox mode
-  let root: HTML = select('body');
-  if (securityLevel === 'sandbox') {
-    const sandboxElement: HTML = select(`#i${id}`);
-    const doc: Document = sandboxElement.node()?.contentDocument ?? document;
-    root = select(doc.body as HTMLIFrameElement);
-  }
-  const svg: SVG = root.select(`#${id}`);
-  return svg;
-};
--- a/packages/mermaid/src/setupGraphViewbox.js
+++ b/packages/mermaid/src/setupGraphViewbox.js
@@ -1,5 +1,4 @@
 import { log } from './logger.js';
-import { SVG } from './diagram-api/types.js';

 /**
 * Applies d3 attributes
@@ -36,7 +35,7 @@ export const calculateSvgSizeAttrs = function (height, width, useMaxWidth) {
 /**
 * Applies attributes from `calculateSvgSizeAttrs`
 *
- * @param {SVG} svgElem The SVG Element to configure
+ * @param {SVGSVGElement} svgElem The SVG Element to configure
 * @param {number} height The height of the SVG
 * @param {number} width The width of the SVG
 * @param {boolean} useMaxWidth Whether or not to use max-width and set width to 100%
--- a/packages/mermaid/src/styles.spec.ts
+++ b/packages/mermaid/src/styles.spec.ts
@@ -19,6 +19,7 @@ import classDiagram from './diagrams/class/styles.js';
 import flowchart from './diagrams/flowchart/styles.js';
 import flowchartElk from './diagrams/flowchart/elk/styles.js';
 import er from './diagrams/er/styles.js';
+import error from './diagrams/error/styles.js';
 import git from './diagrams/git/styles.js';
 import gantt from './diagrams/gantt/styles.js';
 import pie from './diagrams/pie/styles.js';
@@ -85,6 +86,7 @@ describe('styles', () => {
        c4,
        classDiagram,
        er,
+        error,
        flowchart,
        flowchartElk,
        gantt,
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -413,8 +413,8 @@ importers:
  packages/mermaid-zenuml:
    dependencies:
      '@zenuml/core':
-        specifier: ^3.0.6
-        version: 3.0.6(ts-node@10.9.1)
+        specifier: ^3.0.3
+        version: 3.0.3(ts-node@10.9.1)
    devDependencies:
      mermaid:
        specifier: workspace:^
@@ -5738,14 +5738,14 @@ packages:
    resolution: {integrity: sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==}
    dev: true

-  /@zenuml/core@3.0.6(ts-node@10.9.1):
-    resolution: {integrity: sha512-azEBVrl+ClCPhII92TbzBUFcWhIjlOPdEHVzF6eZXs5Oy4JlrfldS5pAZBHCFL4riOBsjZ5sHHmQLQg9V07T4Q==}
+  /@zenuml/core@3.0.3(ts-node@10.9.1):
+    resolution: {integrity: sha512-Wp6yF5iERvGXrR3z/mNhQYP2uI54Bd7RQ2ZwA26Lca+tufj4X8pfqGVSORLqbUl4wjjdcwHc2RNT8AU+cz2NCg==}
    engines: {node: '>=12.0.0'}
    dependencies:
      '@types/assert': 1.5.6
      '@types/ramda': 0.28.25
      '@vue/compat': 3.3.4(vue@3.3.4)
-      antlr4: 4.11.0
+      antlr4: 4.13.0
      color-string: 1.9.1
      dom-to-image-more: 2.16.0
      file-saver: 2.0.5
@@ -6026,9 +6026,9 @@ packages:
    engines: {node: '>=12'}
    dev: true

-  /antlr4@4.11.0:
-    resolution: {integrity: sha512-GUGlpE2JUjAN+G8G5vY+nOoeyNhHsXoIJwP1XF1oRw89vifA1K46T6SEkwLwr7drihN7I/lf0DIjKc4OZvBX8w==}
-    engines: {node: '>=14'}
+  /antlr4@4.13.0:
+    resolution: {integrity: sha512-zooUbt+UscjnWyOrsuY/tVFL4rwrAGwOivpQmvmUDE22hy/lUA467Rc1rcixyRwcRUIXFYBwv7+dClDSHdmmew==}
+    engines: {node: '>=16'}
    dev: false

  /any-promise@1.3.0: