mermaid-js · ashishjain0512 · Jan 11, 2023 · Dec 2, 2022 · Dec 3, 2022 · Dec 7, 2022
diff --git a/.vite/build.ts b/.vite/build.ts
@@ -41,6 +41,11 @@ const packageOptions = {
     packageName: 'mermaid-mindmap',
     file: 'detector.ts',
   },
+  'mermaid-flowchart-v3': {
+    name: 'mermaid-flowchart-v3',
+    packageName: 'mermaid-flowchart-v3',
+    file: 'detector.ts',
+  },
   // 'mermaid-example-diagram-detector': {
   //   name: 'mermaid-example-diagram-detector',
   //   packageName: 'mermaid-example-diagram',
@@ -120,6 +125,7 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
   if (watch && config.build) {
     config.build.watch = {
       include: [
+        'packages/mermaid-flowchart-v3/src/**',
         'packages/mermaid-mindmap/src/**',
         'packages/mermaid/src/**',
         // 'packages/mermaid-example-diagram/src/**',
@@ -148,6 +154,7 @@ const main = async () => {
 if (watch) {
   build(getBuildConfig({ minify: false, watch, core: false, entryName: 'mermaid' }));
   if (!mermaidOnly) {
+    build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-flowchart-v3' }));
     build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-mindmap' }));
     // build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' }));
   }

diff --git a/cSpell.json b/cSpell.json
@@ -31,6 +31,7 @@
     "doku",
     "dompurify",
     "edgechromium",
+    "elkjs",
     "faber",
     "flatmap",
     "ftplugin",
@@ -39,6 +40,7 @@
     "gitgraph",
     "globby",
     "graphlib",
+    "graphviz",
     "grav",
     "greywolf",
     "inkdrop",
@@ -69,6 +71,7 @@
     "pnpm",
     "podlite",
     "quence",
+    "radious",
     "ranksep",
     "rect",
     "rects",
@@ -90,6 +93,7 @@
     "treemap",
     "ts-nocheck",
     "tuleap",
+    "ugge",
     "unist",
     "verdana",
     "viewports",

diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
@@ -56,29 +56,163 @@
   <body>
     <div>Security check</div>
     <pre id="diagram" class="mermaid">
-flowchart LR
-    %% Actors
-    A
-    subgraph Sub
-        B --> C
+%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
+flowchart TB
+  %% I could not figure out how to use double quotes in labels in Mermaid
+  subgraph ibm[IBM Espresso CPU]
+    core0[IBM PowerPC Broadway Core 0]
+    core1[IBM PowerPC Broadway Core 1]
+    core2[IBM PowerPC Broadway Core 2]
+
+    rom[16 KB ROM]
+
+    core0 --- core2
+
+    rom --> core2
+  end
+
+  subgraph amd[AMD Latte GPU]
+    mem[Memory & I/O Bridge]
+    dram[DRAM Controller]
+    edram[32 MB EDRAM MEM1]
+    rom[512 B SEEPROM]
+
+    sata[SATA IF]
+    exi[EXI]
+
+    subgraph gx[GX]
+      sram[3 MB 1T-SRAM]
     end
 
-    %% Accusations
-    A --L --> Sub
+    radeon[AMD Radeon R7xx GX2]
 
-    %% Offense
-    B --> A
+    mem --- gx
+    mem --- radeon
 
-    </pre>
+    rom --- mem
+
+    mem --- sata
+    mem --- exi
+
+    dram --- sata
+    dram --- exi
+  end
+
+  ddr3[2 GB DDR3 RAM MEM2]
+
+  mem --- ddr3
+  dram --- ddr3
+  edram --- ddr3
+
+  core1 --- mem
+
+  exi --- rtc
+  rtc{{rtc}}
+</pre
+    >
+    <br />
     <pre id="diagram" class="mermaid">
-      stateDiagram-v2
+flowchart TB
+  %% I could not figure out how to use double quotes in labels in Mermaid
+  subgraph ibm[IBM Espresso CPU]
+    core0[IBM PowerPC Broadway Core 0]
+    core1[IBM PowerPC Broadway Core 1]
+    core2[IBM PowerPC Broadway Core 2]
 
-      [*] --> S1
-      S1 --> S2: long line using<br/>should work
-      S1 --> S3: long line using <br>should work
-      S1 --> S4: long line using \\nshould work
+    rom[16 KB ROM]
 
-    </pre>
+    core0 --- core2
+
+    rom --> core2
+  end
+
+  subgraph amd[AMD Latte GPU]
+    mem[Memory & I/O Bridge]
+    dram[DRAM Controller]
+    edram[32 MB EDRAM MEM1]
+    rom[512 B SEEPROM]
+
+    sata[SATA IF]
+    exi[EXI]
+
+    subgraph gx[GX]
+      sram[3 MB 1T-SRAM]
+    end
+
+    radeon[AMD Radeon R7xx GX2]
+
+    mem --- gx
+    mem --- radeon
+
+    rom --- mem
+
+    mem --- sata
+    mem --- exi
+
+    dram --- sata
+    dram --- exi
+  end
+
+  ddr3[2 GB DDR3 RAM MEM2]
+
+  mem --- ddr3
+  dram --- ddr3
+  edram --- ddr3
+
+  core1 --- mem
+
+  exi --- rtc
+  rtc{{rtc}}
+</pre
+    >
+    <br />
+    &nbsp;
+    <pre id="diagram" class="mermaid2">
+      flowchart LR
+  B1 --be be--x B2
+  B1 --bo bo--o B3
+  subgraph Ugge
+      B2
+      B3
+      subgraph inner
+          B4
+          B5
+      end
+      subgraph inner2
+        subgraph deeper
+          C4
+          C5
+        end
+        C6
+      end
+
+      B4 --> C4
+
+      B3 -- X --> B4
+      B2 --> inner
+
+      C4 --> C5
+  end
+
+  subgraph outer
+      B6
+  end
+  B6 --> B5
+  </pre
+    >
+    <pre id="diagram" class="mermaid2">
+sequenceDiagram
+    Customer->>+Stripe: Makes a payment request
+    Stripe->>+Bank: Forwards the payment request to the bank
+    Bank->>+Customer: Asks for authorization
+    Customer->>+Bank: Provides authorization
+    Bank->>+Stripe: Sends a response with payment details
+    Stripe->>+Merchant: Sends a notification of payment receipt
+    Merchant->>+Stripe: Confirms the payment
+    Stripe->>+Customer: Sends a confirmation of payment
+    Customer->>+Merchant: Receives goods or services
+        </pre
+    >
     <pre id="diagram" class="mermaid2">
       gantt
         title Style today marker (vertical line should be 5px wide and half-transparent blue)
@@ -97,17 +231,19 @@
 
     <script type="module">
       import mindmap from '../../packages/mermaid-mindmap/src/detector';
+      import flowV3 from '../../packages/mermaid-flowchart-v3/src/detector';
       // import example from '../../packages/mermaid-example-diagram/src/detector';
       import mermaid from '../../packages/mermaid/src/mermaid';
-      await mermaid.registerExternalDiagrams([mindmap]);
+      await mermaid.registerExternalDiagrams([mindmap, flowV3]);
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };
       mermaid.initialize({
-        theme: 'default',
+        // theme: 'forest',
         startOnLoad: true,
         logLevel: 0,
         flowchart: {
+          // defaultRenderer: 'elk',
           useMaxWidth: false,
           htmlLabels: true,
         },

diff --git a/docs/config/setup/modules/defaultConfig.md b/docs/config/setup/modules/defaultConfig.md
@@ -14,7 +14,7 @@
 
 #### Defined in
 
-[defaultConfig.ts:1933](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L1933)
+[defaultConfig.ts:1934](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L1934)
 
 ---
 

diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md
@@ -990,7 +990,22 @@ flowchart LR
     C -->|Two| E[Result two]
 ```
 
-## Configuration...
+## Configuration
+
+### Renderer
+
+The layout of the diagram is done with the renderer. The default renderer is dagre.
+
+Starting with Mermaid version 9.4, you can use an alternate renderer named elk. The elk renderer is better for larger and/or more complex diagrams.
+
+The _elk_ renderer is an experimenal feature.
+You can change the renderer to elk by adding this directive:
+
+    %%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
+
+Note that the site needs to use mermaid version 9.4+ for this to work and have this featured enabled in the lazy-loading configuration.
+
+### Width
 
 It is possible to adjust the width of the rendered flowchart.
 

diff --git a/packages/mermaid-flowchart-v3/package.json b/packages/mermaid-flowchart-v3/package.json
@@ -0,0 +1,68 @@
+{
+  "name": "@mermaid-js/mermaid-mindmap",
+  "version": "9.2.2",
+  "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
+  "module": "dist/mermaid-mindmap.core.mjs",
+  "types": "dist/detector.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/mermaid-mindmap.core.mjs",
+      "types": "./dist/detector.d.ts"
+    },
+    "./*": "./*"
+  },
+  "keywords": [
+    "diagram",
+    "markdown",
+    "mindmap",
+    "mermaid"
+  ],
+  "scripts": {
+    "prepublishOnly": "pnpm -w run build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mermaid-js/mermaid"
+  },
+  "author": "Knut Sveidqvist",
+  "license": "MIT",
+  "standard": {
+    "ignore": [
+      "**/parser/*.js",
+      "dist/**/*.js",
+      "cypress/**/*.js"
+    ],
+    "globals": [
+      "page"
+    ]
+  },
+  "dependencies": {
+    "@braintree/sanitize-url": "^6.0.0",
+    "cytoscape": "^3.23.0",
+    "cytoscape-cose-bilkent": "^4.1.0",
+    "cytoscape-fcose": "^2.1.0",
+    "graphlib": "^2.1.0",
+    "dagre-d3-es": "7.0.4",
+    "cytoscape-dagre": "^2.1.0",
+    "elkjs": "^0.8.2",
+    "d3": "^7.0.0",
+    "khroma": "^2.0.0",
+    "non-layered-tidy-tree-layout": "^2.0.2"
+  },
+  "devDependencies": {
+    "concurrently": "^7.5.0",
+    "mermaid": "workspace:*",
+    "rimraf": "^3.0.2"
+  },
+  "resolutions": {
+    "d3": "^7.0.0"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ]
+}
diff --git a/packages/mermaid-flowchart-v3/src/detector.ts b/packages/mermaid-flowchart-v3/src/detector.ts
@@ -0,0 +1,31 @@
+import type { ExternalDiagramDefinition } from 'mermaid';
+
+const id = 'flowchart-v3';
+
+const detector = (txt: string, config) => {
+  if (config?.flowchart?.defaultRenderer === 'dagre-d3') {
+    return false;
+  }
+  if (config?.flowchart?.defaultRenderer === 'dagre-wrapper') {
+    return false;
+  }
+
+  // If we have configured to use dagre-wrapper then we should return true in this function for graph code thus making it use the new flowchart diagram
+  if (txt.match(/^\s*graph/) !== null) {
+    return true;
+  }
+  return txt.match(/^\s*flowchart/) !== null;
+};
+
+const loader = async () => {
+  const { diagram } = await import('./diagram-definition');
+  return { id, diagram };
+};
+
+const plugin: ExternalDiagramDefinition = {
+  id,
+  detector,
+  loader,
+};
+
+export default plugin;