mermaid-js · nirname · Jul 6, 2023 · Sep 10, 2023 · Sep 11, 2023 · Sep 11, 2023
diff --git 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,
+};
diff --git a/cypress/integration/rendering/railroad.spec.ts b/cypress/integration/rendering/railroad.spec.ts
diff --git a/demos/dev/example.html b/demos/dev/example.html
@@ -21,6 +21,8 @@
     </style>
   </head>
   <body>
+    <h1>Mermaid development page</h1>
+    <h2>Static diagram example</h2>
     <pre id="diagram" class="mermaid">
 graph TB
       a --> b
@@ -30,20 +32,26 @@
     </pre>
 
     <hr />
+    <h2>Dynamic diagram example</h2>
     Type code to view diagram:
     <div class="container">
       <textarea name="code" id="code" cols="30" rows="10"></textarea>
       <div id="dynamicDiagram"></div>
     </div>
+    <button id="render" type="button">Render</button>
     <pre class="mermaid">info</pre>
 
     <script type="module">
       import mermaid from '/mermaid.esm.mjs';
       import flowchartELK from '/mermaid-flowchart-elk.esm.mjs';
       await mermaid.registerExternalDiagrams([flowchartELK]);
       async function render(str) {
-        const { svg } = await mermaid.render('dynamic', str);
-        document.getElementById('dynamicDiagram').innerHTML = svg;
+        try {
+          const { svg } = await mermaid.render('dynamic', str);
+          document.getElementById('dynamicDiagram').innerHTML = svg;
+        } catch (error) {
+          console.error(error);
+        }
       }
       const storeKey = window.location.pathname;
       const code = localStorage.getItem(storeKey);
@@ -58,8 +66,14 @@
       document.getElementById('code').addEventListener('input', async (e) => {
         const value = e.target.value;
         localStorage.setItem(storeKey, value);
-        await render(value);
+        render(value);
       });
+
+      document.getElementById('render').addEventListener('click', async (e) => {
+        const value = document.getElementById('code').target.value;
+        localStorage.setItem(storeKey, value);
+        await render(value);
+      })
     </script>
 
     <script src="/dev/reload.js"></script>

diff --git 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>
@@ -88,6 +87,9 @@ <h2><a href="./packet.html">Packet</a></h2>
       <li>
         <h2><a href="./block.html">Layered Blocks</a></h2>
       </li>
+      <li>
+        <h2><a href="./railroad.html">Railroad</a></h2>
+      </li>
     </ul>
   </body>
 </html>
diff --git a/demos/railroad.html b/demos/railroad.html
@@ -0,0 +1,60 @@
+<!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
+
+      commandline ::= list
+      |  list ";"
+      |  list "&"
+      ;
+
+      list     ::=  conditional
+      |   list ";" conditional
+      |   list "&" conditional
+      ;
+
+      conditional ::=  pipeline
+      |   conditional "&&" pipeline
+      |   conditional "||" pipeline
+      ;
+
+      pipeline ::=  command
+      |   pipeline "|" command
+      ;
+
+      command  ::=  word
+      |   redirection
+      |   command word
+      |   command redirection
+      ;
+
+      redirection  ::=  redirectionop filename;
+      redirectionop  ::=  "<"  |  ">"  |  "2>";
+    </pre>
+
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
+      mermaid.initialize({
+        theme: 'default',
+        logLevel: 3,
+        securityLevel: 'loose',
+        railroad: {},
+      });
+    </script>
+  </body>
+</html>
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -1,4 +1,3 @@
-version: '3.9'
 services:
   mermaid:
     build:
@@ -8,7 +7,7 @@ services:
     tty: true
     working_dir: /mermaid
     mem_limit: '8G'
-    entrypoint: docker-entrypoint.sh
+    entrypoint: ./docker-entrypoint.sh
     environment:
       - NODE_OPTIONS=--max_old_space_size=8192
     volumes:

diff --git a/packages/mermaid/scripts/create-types-from-json-schema.mts b/packages/mermaid/scripts/create-types-from-json-schema.mts
@@ -127,7 +127,6 @@ async function generateTypescript(mermaidConfigSchema: JSONSchemaType<MermaidCon
   assert.ok(mermaidConfigSchema.$defs);
   const modifiedSchema = {
     ...removeRequired(mermaidConfigSchema),
-
     $defs: Object.fromEntries(
       Object.entries(mermaidConfigSchema.$defs).map(([key, subSchema]) => {
         return [key, removeRequired(replaceAllOfWithExtends(subSchema))];

diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
@@ -46,6 +46,15 @@ export type SankeyLinkColor = 'source' | 'target' | 'gradient';
  * via the `definition` "SankeyNodeAlignment".
  */
 export type SankeyNodeAlignment = 'left' | 'right' | 'center' | 'justify';
+export type RailroadDiagramFormat = RailroadDiagramFormat;
+/**
+ * Shapes of the first and the last state in the diagram
+ *
+ *
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "RailroadDiagramBoundaryShape".
+ */
+export type RailroadDiagramBoundaryShape = 'dot' | 'circle' | 'forward' | 'backward';
 /**
  * Configuration options to pass to the `dompurify` library.
  */
@@ -161,6 +170,7 @@ export interface MermaidConfig {
   gitGraph?: GitGraphDiagramConfig;
   c4?: C4DiagramConfig;
   sankey?: SankeyDiagramConfig;
+  railroad?: RailroadDiagramConfig;
   packet?: PacketDiagramConfig;
   block?: BlockDiagramConfig;
   dompurifyConfig?: DOMPurifyConfiguration;
@@ -1422,6 +1432,62 @@ export interface SankeyDiagramConfig extends BaseDiagramConfig {
    */
   suffix?: string;
 }
+/**
+ * The object containing configurations specific for railroad diagrams.
+ *
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "RailroadDiagramConfig".
+ */
+export interface RailroadDiagramConfig extends BaseDiagramConfig {
+  alignment?: 'left' | 'right' | 'center' | 'justify';
+  verticalAlignment?: 'top' | 'bottom' | 'center' | 'justify';
+  /**
+   * Wrap long grammars similarly to wrapping long lines
+   *
+   */
+  wrapDiagram?: boolean;
+  /**
+   * Specify which standart would be applied
+   *
+   */
+  syntax?: 'mermaid' | 'w3c' | 'iso';
+  /**
+   * Compress rules to get the smallest possible diagram
+   *
+   */
+  compress?: boolean;
+  /**
+   * List of things to render
+   *
+   */
+  render?: ('railroad' | 'ebnf' | 'bnf' | 'dfa' | 'nfa')[];
+  format?: RailroadDiagramFormat;
+  drawArrows?: boolean;
+  inline?: boolean;
+  inlineItems?: string[];
+  /**
+   * Name of the initial rule in grammar
+   * First rule will be initial if it is null
+   *
+   */
+  start?: string | null;
+  shapes?: {
+    terminal?: string;
+    non_terminal?: string;
+    /**
+     * Shape or list of shapes for the start element
+     * They will be applied in the order of occurrence
+     *
+     */
+    start?: RailroadDiagramBoundaryShape[] | RailroadDiagramBoundaryShape;
+    /**
+     * Shape or list of shapes for the end element
+     * They will be applied in the order of occurrence
+     *
+     */
+    end?: RailroadDiagramBoundaryShape[] | RailroadDiagramBoundaryShape;
+  };
+}
 /**
  * The object containing configurations specific for packet diagrams.
  *
@@ -1463,6 +1529,22 @@ export interface PacketDiagramConfig extends BaseDiagramConfig {
 export interface BlockDiagramConfig extends BaseDiagramConfig {
   padding?: number;
 }
+/**
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "RailroadDiagramFormat".
+ */
+export interface RailroadDiagramFormat1 {
+  /**
+   * Force angular brackets around non-terminal symbols
+   *
+   */
+  forceAngleBrackets?: boolean;
+  /**
+   * Force comma as a concatenation symbol in the rule definition
+   *
+   */
+  forceComma?: boolean;
+}
 /**
  * This interface was referenced by `MermaidConfig`'s JSON-Schema
  * via the `definition` "FontConfig".

diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts
@@ -260,6 +260,10 @@ const config: RequiredDeep<MermaidConfig> = {
   packet: {
     ...defaultConfigJson.packet,
   },
+  railroad: {
+    ...defaultConfigJson.railroad,
+    useMaxWidth: true,
+  },
 };
 
 const keyify = (obj: any, prefix = ''): string[] =>

diff --git a/packages/mermaid/src/diagram-api/diagram-orchestration.ts b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
@@ -24,6 +24,7 @@ import { packet } from '../diagrams/packet/detector.js';
 import block from '../diagrams/block/blockDetector.js';
 import { registerLazyLoadedDiagrams } from './detectType.js';
 import { registerDiagram } from './diagramAPI.js';
+import { railroad } from '../diagrams/railroad/railroadDetector.js';
 
 let hasLoadedDiagrams = false;
 export const addDiagrams = () => {
@@ -88,6 +89,7 @@ export const addDiagrams = () => {
     journey,
     quadrantChart,
     sankey,
+    railroad,
     packet,
     xychart,
     block