Started railroad diagrams

.github/lychee.toml

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

.github/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

.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/

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`_**
 

__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,
+};

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' }
-    );
-  });
 });

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

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>

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>

docs/config/setup/modules/mermaidAPI.md

@@ -96,7 +96,7 @@ mermaid.initialize(config);
 
 #### Defined in
 
-[mermaidAPI.ts:669](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L669)
+[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:310](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L310)
+[mermaidAPI.ts:308](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L308)
 
 ---
 
@@ -320,4 +320,4 @@ Remove any existing elements from the given document
 
 #### Defined in
 
-[mermaidAPI.ts:360](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L360)
+[mermaidAPI.ts:358](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L358)

docs/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.
 

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.

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

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.

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:^"

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;

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;

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

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

@@ -79,10 +79,8 @@ export type DrawDefinition = (
  */
 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;

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(`

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

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

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

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;');
 

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'");
-  });
 });

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;
 %%

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 };

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,
+};

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,
+};

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,
+};

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;
+

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,
+};

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);
+    });
+  });
+});

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;
+}

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' },
       ],
     },

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: '',

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.
 

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.

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

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.

packages/mermaid/src/mermaidAPI.ts

@@ -285,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}

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;
-};

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%

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: