Merge pull request #6857 from mermaid-js/elk-exposing-considerModelOrder-to-config

Exposing elk configuration forceNodeModelOrder and considerMode…
updated lock file
2025-08-15 06:19:24 +02:00 · 2025-08-14 11:18:58 +00:00 · 2025-08-14 13:05:40 +02:00 · 2025-08-14 11:01:58 +00:00 · 2025-08-14 12:56:20 +02:00 · 2025-08-14 16:18:45 +05:30
16 changed files with 221 additions and 97 deletions
--- a/.changeset/busy-clocks-melt.md
+++ b/.changeset/busy-clocks-melt.md
@@ -0,0 +1,6 @@
+---
+'@mermaid-js/layout-elk': patch
+'mermaid': patch
+---
+
+feat: Exposing elk configuration forceNodeModelOrder and considerModelOrder to the mermaid configuration
--- a/.changeset/spicy-ties-see.md
+++ b/.changeset/spicy-ties-see.md
@@ -0,0 +1,5 @@
+---
+'@mermaid-js/layout-elk': patch
+---
+
+Make elk not force node model order, but strongly consider it instead
--- a/.changeset/strong-laws-confess.md
+++ b/.changeset/strong-laws-confess.md
@@ -0,0 +1,9 @@
+---
+'mermaid': patch
+---
+
+fix: fallback to raw text instead of rendering _Unsupported markdown_ or empty blocks
+
+Instead of printing **Unsupported markdown: XXX**, or empty blocks when using a markdown feature
+that Mermaid does not yet support when `htmlLabels: true`(default) or `htmlLabels: false`,
+fallback to the raw markdown text.
--- a/.lintstagedrc.mjs
+++ b/.lintstagedrc.mjs
@@ -7,5 +7,6 @@ export default {
    'prettier --write',
  ],
  '.cspell/*.txt': ['tsx scripts/fixCSpell.ts'],
+  '**/*.md': ['pnpm cspell'],
  '**/*.jison': ['pnpm -w run lint:jison'],
 };
--- a/cypress/integration/rendering/flowchart-elk.spec.js
+++ b/cypress/integration/rendering/flowchart-elk.spec.js
@@ -1053,6 +1053,21 @@ flowchart LR
      });
    });
  });
+
+  it('6647-elk: should keep node order when using elk layout unless it would add crossings', () => {
+    imgSnapshotTest(
+      `---
+config:
+  layout: elk
+---
+      flowchart TB
+        a --> a1 & a2 & a3 & a4
+        b --> b1 & b2
+        b2 --> b3
+        b1 --> b4
+      `
+    );
+  });
 });

 describe('Title and arrow styling #4813', () => {
--- a/cypress/integration/rendering/flowchart-v2.spec.js
+++ b/cypress/integration/rendering/flowchart-v2.spec.js
@@ -1164,4 +1164,26 @@ end
      `
    );
  });
+
+  describe('when rendering unsuported markdown', () => {
+    const graph = `flowchart TB
+    mermaid{"What is\nyourmermaid version?"} --> v10["<11"] --"\`<**1**1\`"--> fine["No bug"]
+    mermaid --> v11[">= v11"] -- ">= v11" --> broken["Affected by https://github.com/mermaid-js/mermaid/issues/5824"]
+    subgraph subgraph1["\`How to fix **fix**\`"]
+        broken --> B["B"]
+    end
+    githost["Github, Gitlab, BitBucket, etc."]
+    githost2["\`Github, Gitlab, BitBucket, etc.\`"]
+    a["1."]
+    b["- x"]
+      `;
+
+    it('should render raw strings', () => {
+      imgSnapshotTest(graph);
+    });
+
+    it('should render raw strings with htmlLabels: false', () => {
+      imgSnapshotTest(graph, { htmlLabels: false });
+    });
+  });
 });
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -131,6 +131,22 @@

  <body>
    <pre id="diagram4" class="mermaid">
+---
+config:
+  layout: elk
+  elk:
+    mergeEdges: false
+    forceNodeModelOrder: false
+    considerModelOrder: NONE
+
+---
+            flowchart TB
+              a --> a1 & a2 & a3 & a4
+              b --> b1 & b2
+              b2 --> b3
+              b1 --> b4</pre
+    >
+    <pre id="diagram4" class="mermaid">
 treemap
 "Section 1"
    "Leaf 1.1": 12
--- a/cypress/timings.json
+++ b/cypress/timings.json
@@ -2,219 +2,219 @@
  "durations": [
    {
      "spec": "cypress/integration/other/configuration.spec.js",
-      "duration": 5672
+      "duration": 5815
    },
    {
      "spec": "cypress/integration/other/external-diagrams.spec.js",
-      "duration": 1990
+      "duration": 2035
    },
    {
      "spec": "cypress/integration/other/ghsa.spec.js",
-      "duration": 3186
+      "duration": 3386
    },
    {
      "spec": "cypress/integration/other/iife.spec.js",
-      "duration": 1948
+      "duration": 2089
    },
    {
      "spec": "cypress/integration/other/interaction.spec.js",
-      "duration": 11938
+      "duration": 11578
    },
    {
      "spec": "cypress/integration/other/rerender.spec.js",
-      "duration": 1932
+      "duration": 2119
    },
    {
      "spec": "cypress/integration/other/xss.spec.js",
-      "duration": 27237
+      "duration": 27282
    },
    {
      "spec": "cypress/integration/rendering/appli.spec.js",
-      "duration": 3170
+      "duration": 3377
    },
    {
      "spec": "cypress/integration/rendering/architecture.spec.ts",
-      "duration": 104
+      "duration": 97
    },
    {
      "spec": "cypress/integration/rendering/block.spec.js",
-      "duration": 17390
+      "duration": 18137
    },
    {
      "spec": "cypress/integration/rendering/c4.spec.js",
-      "duration": 5296
+      "duration": 5455
    },
    {
      "spec": "cypress/integration/rendering/classDiagram-elk-v3.spec.js",
-      "duration": 39004
+      "duration": 40850
    },
    {
      "spec": "cypress/integration/rendering/classDiagram-handDrawn-v3.spec.js",
-      "duration": 37653
+      "duration": 37964
    },
    {
      "spec": "cypress/integration/rendering/classDiagram-v2.spec.js",
-      "duration": 23278
+      "duration": 23446
    },
    {
      "spec": "cypress/integration/rendering/classDiagram-v3.spec.js",
-      "duration": 36645
+      "duration": 37207
    },
    {
      "spec": "cypress/integration/rendering/classDiagram.spec.js",
-      "duration": 15418
+      "duration": 16531
    },
    {
      "spec": "cypress/integration/rendering/conf-and-directives.spec.js",
-      "duration": 9684
+      "duration": 9385
    },
    {
      "spec": "cypress/integration/rendering/current.spec.js",
-      "duration": 2570
+      "duration": 2697
    },
    {
      "spec": "cypress/integration/rendering/erDiagram-unified.spec.js",
-      "duration": 84687
+      "duration": 88648
    },
    {
      "spec": "cypress/integration/rendering/erDiagram.spec.js",
-      "duration": 14819
+      "duration": 15094
    },
    {
      "spec": "cypress/integration/rendering/errorDiagram.spec.js",
-      "duration": 3371
+      "duration": 3548
    },
    {
      "spec": "cypress/integration/rendering/flowchart-elk.spec.js",
-      "duration": 39925
+      "duration": 44889
    },
    {
      "spec": "cypress/integration/rendering/flowchart-handDrawn.spec.js",
-      "duration": 34694
+      "duration": 30487
    },
    {
      "spec": "cypress/integration/rendering/flowchart-icon.spec.js",
-      "duration": 7137
+      "duration": 7375
    },
    {
      "spec": "cypress/integration/rendering/flowchart-shape-alias.spec.ts",
-      "duration": 24740
+      "duration": 24913
    },
    {
      "spec": "cypress/integration/rendering/flowchart-v2.spec.js",
-      "duration": 42077
+      "duration": 51927
    },
    {
      "spec": "cypress/integration/rendering/flowchart.spec.js",
-      "duration": 30642
+      "duration": 31676
    },
    {
      "spec": "cypress/integration/rendering/gantt.spec.js",
-      "duration": 18085
+      "duration": 19897
    },
    {
      "spec": "cypress/integration/rendering/gitGraph.spec.js",
-      "duration": 50107
+      "duration": 53450
    },
    {
      "spec": "cypress/integration/rendering/iconShape.spec.ts",
-      "duration": 276279
+      "duration": 287035
    },
    {
      "spec": "cypress/integration/rendering/imageShape.spec.ts",
-      "duration": 56505
+      "duration": 58555
    },
    {
      "spec": "cypress/integration/rendering/info.spec.ts",
-      "duration": 3036
+      "duration": 3179
    },
    {
      "spec": "cypress/integration/rendering/journey.spec.js",
-      "duration": 6889
+      "duration": 7099
    },
    {
      "spec": "cypress/integration/rendering/kanban.spec.ts",
-      "duration": 7353
+      "duration": 7628
    },
    {
      "spec": "cypress/integration/rendering/katex.spec.js",
-      "duration": 3580
+      "duration": 3764
    },
    {
      "spec": "cypress/integration/rendering/marker_unique_id.spec.js",
-      "duration": 2508
+      "duration": 2573
    },
    {
      "spec": "cypress/integration/rendering/mindmap.spec.ts",
-      "duration": 10939
+      "duration": 11269
    },
    {
      "spec": "cypress/integration/rendering/newShapes.spec.ts",
-      "duration": 149102
+      "duration": 148389
    },
    {
      "spec": "cypress/integration/rendering/oldShapes.spec.ts",
-      "duration": 113987
+      "duration": 113395
    },
    {
      "spec": "cypress/integration/rendering/packet.spec.ts",
-      "duration": 4060
+      "duration": 4714
    },
    {
      "spec": "cypress/integration/rendering/pie.spec.ts",
-      "duration": 5715
+      "duration": 6446
    },
    {
      "spec": "cypress/integration/rendering/quadrantChart.spec.js",
-      "duration": 8945
+      "duration": 9133
    },
    {
      "spec": "cypress/integration/rendering/radar.spec.js",
-      "duration": 5337
+      "duration": 5544
    },
    {
      "spec": "cypress/integration/rendering/requirement.spec.js",
-      "duration": 2643
+      "duration": 2709
    },
    {
      "spec": "cypress/integration/rendering/requirementDiagram-unified.spec.js",
-      "duration": 52072
+      "duration": 55647
    },
    {
      "spec": "cypress/integration/rendering/sankey.spec.ts",
-      "duration": 6692
+      "duration": 6751
    },
    {
      "spec": "cypress/integration/rendering/sequencediagram.spec.js",
-      "duration": 35721
+      "duration": 36618
    },
    {
      "spec": "cypress/integration/rendering/stateDiagram-v2.spec.js",
-      "duration": 26030
+      "duration": 29642
    },
    {
      "spec": "cypress/integration/rendering/stateDiagram.spec.js",
-      "duration": 16333
+      "duration": 16037
    },
    {
      "spec": "cypress/integration/rendering/theme.spec.js",
-      "duration": 29287
+      "duration": 30006
    },
    {
      "spec": "cypress/integration/rendering/timeline.spec.ts",
-      "duration": 8491
+      "duration": 8451
    },
    {
      "spec": "cypress/integration/rendering/treemap.spec.ts",
-      "duration": 12291
+      "duration": 11996
    },
    {
      "spec": "cypress/integration/rendering/xyChart.spec.js",
-      "duration": 20651
+      "duration": 20627
    },
    {
      "spec": "cypress/integration/rendering/zenuml.spec.js",
-      "duration": 3218
+      "duration": 3472
    }
  ]
 }
--- a/docs/config/setup/defaultConfig/variables/configKeys.md
+++ b/docs/config/setup/defaultConfig/variables/configKeys.md
@@ -12,4 +12,4 @@

 > `const` **configKeys**: `Set`<`string`>

-Defined in: [packages/mermaid/src/defaultConfig.ts:290](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L290)
+Defined in: [packages/mermaid/src/defaultConfig.ts:292](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L292)
--- a/docs/config/setup/mermaid/interfaces/MermaidConfig.md
+++ b/docs/config/setup/mermaid/interfaces/MermaidConfig.md
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/config.type.ts:58](https://github.com/mermaid-

 > `optional` **altFontFamily**: `string`

-Defined in: [packages/mermaid/src/config.type.ts:122](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L122)
+Defined in: [packages/mermaid/src/config.type.ts:132](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L132)

 ---

@@ -26,7 +26,7 @@ Defined in: [packages/mermaid/src/config.type.ts:122](https://github.com/mermaid

 > `optional` **architecture**: `ArchitectureDiagramConfig`

-Defined in: [packages/mermaid/src/config.type.ts:194](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L194)
+Defined in: [packages/mermaid/src/config.type.ts:204](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L204)

 ---

@@ -34,7 +34,7 @@ Defined in: [packages/mermaid/src/config.type.ts:194](https://github.com/mermaid

 > `optional` **arrowMarkerAbsolute**: `boolean`

-Defined in: [packages/mermaid/src/config.type.ts:141](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L141)
+Defined in: [packages/mermaid/src/config.type.ts:151](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L151)

 Controls whether or arrow markers in html code are absolute paths or anchors.
 This matters if you are using base tag settings.
@@ -45,7 +45,7 @@ This matters if you are using base tag settings.

 > `optional` **block**: `BlockDiagramConfig`

-Defined in: [packages/mermaid/src/config.type.ts:201](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L201)
+Defined in: [packages/mermaid/src/config.type.ts:211](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L211)

 ---

@@ -53,7 +53,7 @@ Defined in: [packages/mermaid/src/config.type.ts:201](https://github.com/mermaid

 > `optional` **c4**: `C4DiagramConfig`

-Defined in: [packages/mermaid/src/config.type.ts:198](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L198)
+Defined in: [packages/mermaid/src/config.type.ts:208](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L208)

 ---

@@ -61,7 +61,7 @@ Defined in: [packages/mermaid/src/config.type.ts:198](https://github.com/mermaid

 > `optional` **class**: `ClassDiagramConfig`

-Defined in: [packages/mermaid/src/config.type.ts:187](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L187)
+Defined in: [packages/mermaid/src/config.type.ts:197](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L197)

 ---

@@ -69,7 +69,7 @@ Defined in: [packages/mermaid/src/config.type.ts:187](https://github.com/mermaid

 > `optional` **darkMode**: `boolean`

-Defined in: [packages/mermaid/src/config.type.ts:113](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L113)
+Defined in: [packages/mermaid/src/config.type.ts:123](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L123)

 ---

@@ -77,7 +77,7 @@ Defined in: [packages/mermaid/src/config.type.ts:113](https://github.com/mermaid

 > `optional` **deterministicIds**: `boolean`

-Defined in: [packages/mermaid/src/config.type.ts:174](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L174)
+Defined in: [packages/mermaid/src/config.type.ts:184](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L184)

 This option controls if the generated ids of nodes in the SVG are
 generated randomly or based on a seed.
@@ -93,7 +93,7 @@ should not change unless content is changed.

 > `optional` **deterministicIDSeed**: `string`

-Defined in: [packages/mermaid/src/config.type.ts:181](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L181)
+Defined in: [packages/mermaid/src/config.type.ts:191](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L191)

 This option is the optional seed for deterministic ids.
 If set to `undefined` but deterministicIds is `true`, a simple number iterator is used.
@@ -105,7 +105,7 @@ You can set this attribute to base the seed on a static string.

 > `optional` **dompurifyConfig**: `Config`

-Defined in: [packages/mermaid/src/config.type.ts:203](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L203)
+Defined in: [packages/mermaid/src/config.type.ts:213](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L213)

 ---

@@ -115,12 +115,24 @@ Defined in: [packages/mermaid/src/config.type.ts:203](https://github.com/mermaid

 Defined in: [packages/mermaid/src/config.type.ts:91](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L91)

+#### considerModelOrder?
+
+> `optional` **considerModelOrder**: `"NONE"` | `"NODES_AND_EDGES"` | `"PREFER_EDGES"` | `"PREFER_NODES"`
+
+Preserves the order of nodes and edges in the model file if this does not lead to additional edge crossings. Depending on the strategy this is not always possible since the node and edge order might be conflicting.
+
 #### cycleBreakingStrategy?

 > `optional` **cycleBreakingStrategy**: `"GREEDY"` | `"DEPTH_FIRST"` | `"INTERACTIVE"` | `"MODEL_ORDER"` | `"GREEDY_MODEL_ORDER"`

 This strategy decides how to find cycles in the graph and deciding which edges need adjustment to break loops.

+#### forceNodeModelOrder?
+
+> `optional` **forceNodeModelOrder**: `boolean`
+
+The node order given by the model does not change to produce a better layout. E.g. if node A is before node B in the model this is not changed during crossing minimization. This assumes that the node model order is already respected before crossing minimization. This can be achieved by setting considerModelOrder.strategy to NODES_AND_EDGES.
+
 #### mergeEdges?

 > `optional` **mergeEdges**: `boolean`
@@ -139,7 +151,7 @@ Elk specific option affecting how nodes are placed.

 > `optional` **er**: `ErDiagramConfig`

-Defined in: [packages/mermaid/src/config.type.ts:189](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L189)
+Defined in: [packages/mermaid/src/config.type.ts:199](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L199)

 ---

@@ -147,7 +159,7 @@ Defined in: [packages/mermaid/src/config.type.ts:189](https://github.com/mermaid

 > `optional` **flowchart**: `FlowchartDiagramConfig`

-Defined in: [packages/mermaid/src/config.type.ts:182](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L182)
+Defined in: [packages/mermaid/src/config.type.ts:192](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L192)

 ---

@@ -155,7 +167,7 @@ Defined in: [packages/mermaid/src/config.type.ts:182](https://github.com/mermaid

 > `optional` **fontFamily**: `string`

-Defined in: [packages/mermaid/src/config.type.ts:121](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L121)
+Defined in: [packages/mermaid/src/config.type.ts:131](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L131)

 Specifies the font to be used in the rendered diagrams.
 Can be any possible CSS `font-family`.
@@ -167,7 +179,7 @@ See <https://developer.mozilla.org/en-US/docs/Web/CSS/font-family>

 > `optional` **fontSize**: `number`

-Defined in: [packages/mermaid/src/config.type.ts:205](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L205)
+Defined in: [packages/mermaid/src/config.type.ts:215](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L215)

 ---

@@ -175,7 +187,7 @@ Defined in: [packages/mermaid/src/config.type.ts:205](https://github.com/mermaid

 > `optional` **forceLegacyMathML**: `boolean`

-Defined in: [packages/mermaid/src/config.type.ts:163](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L163)
+Defined in: [packages/mermaid/src/config.type.ts:173](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L173)

 This option forces Mermaid to rely on KaTeX's own stylesheet for rendering MathML. Due to differences between OS
 fonts and browser's MathML implementation, this option is recommended if consistent rendering is important.
@@ -187,7 +199,7 @@ If set to true, ignores legacyMathML.

 > `optional` **gantt**: `GanttDiagramConfig`

-Defined in: [packages/mermaid/src/config.type.ts:184](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L184)
+Defined in: [packages/mermaid/src/config.type.ts:194](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L194)

 ---

@@ -195,7 +207,7 @@ Defined in: [packages/mermaid/src/config.type.ts:184](https://github.com/mermaid

 > `optional` **gitGraph**: `GitGraphDiagramConfig`

-Defined in: [packages/mermaid/src/config.type.ts:197](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L197)
+Defined in: [packages/mermaid/src/config.type.ts:207](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L207)

 ---

@@ -213,7 +225,7 @@ Defines the seed to be used when using handDrawn look. This is important for the

 > `optional` **htmlLabels**: `boolean`

-Defined in: [packages/mermaid/src/config.type.ts:114](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L114)
+Defined in: [packages/mermaid/src/config.type.ts:124](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L124)

 ---

@@ -221,7 +233,7 @@ Defined in: [packages/mermaid/src/config.type.ts:114](https://github.com/mermaid

 > `optional` **journey**: `JourneyDiagramConfig`

-Defined in: [packages/mermaid/src/config.type.ts:185](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L185)
+Defined in: [packages/mermaid/src/config.type.ts:195](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L195)

 ---

@@ -229,7 +241,7 @@ Defined in: [packages/mermaid/src/config.type.ts:185](https://github.com/mermaid

 > `optional` **kanban**: `KanbanDiagramConfig`

-Defined in: [packages/mermaid/src/config.type.ts:196](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L196)
+Defined in: [packages/mermaid/src/config.type.ts:206](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L206)

 ---

@@ -247,7 +259,7 @@ Defines which layout algorithm to use for rendering the diagram.

 > `optional` **legacyMathML**: `boolean`

-Defined in: [packages/mermaid/src/config.type.ts:156](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L156)
+Defined in: [packages/mermaid/src/config.type.ts:166](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L166)

 This option specifies if Mermaid can expect the dependent to include KaTeX stylesheets for browsers
 without their own MathML implementation. If this option is disabled and MathML is not supported, the math
@@ -260,7 +272,7 @@ fall back to legacy rendering for KaTeX.

 > `optional` **logLevel**: `0` | `2` | `1` | `"trace"` | `"debug"` | `"info"` | `"warn"` | `"error"` | `"fatal"` | `3` | `4` | `5`

-Defined in: [packages/mermaid/src/config.type.ts:127](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L127)
+Defined in: [packages/mermaid/src/config.type.ts:137](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L137)

 This option decides the amount of logging to be used by mermaid.

@@ -280,7 +292,7 @@ Defines which main look to use for the diagram.

 > `optional` **markdownAutoWrap**: `boolean`

-Defined in: [packages/mermaid/src/config.type.ts:206](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L206)
+Defined in: [packages/mermaid/src/config.type.ts:216](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L216)

 ---

@@ -308,7 +320,7 @@ The maximum allowed size of the users text diagram

 > `optional` **mindmap**: `MindmapDiagramConfig`

-Defined in: [packages/mermaid/src/config.type.ts:195](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L195)
+Defined in: [packages/mermaid/src/config.type.ts:205](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L205)

 ---

@@ -316,7 +328,7 @@ Defined in: [packages/mermaid/src/config.type.ts:195](https://github.com/mermaid

 > `optional` **packet**: `PacketDiagramConfig`

-Defined in: [packages/mermaid/src/config.type.ts:200](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L200)
+Defined in: [packages/mermaid/src/config.type.ts:210](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L210)

 ---

@@ -324,7 +336,7 @@ Defined in: [packages/mermaid/src/config.type.ts:200](https://github.com/mermaid

 > `optional` **pie**: `PieDiagramConfig`

-Defined in: [packages/mermaid/src/config.type.ts:190](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L190)
+Defined in: [packages/mermaid/src/config.type.ts:200](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L200)

 ---

@@ -332,7 +344,7 @@ Defined in: [packages/mermaid/src/config.type.ts:190](https://github.com/mermaid

 > `optional` **quadrantChart**: `QuadrantChartConfig`

-Defined in: [packages/mermaid/src/config.type.ts:191](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L191)
+Defined in: [packages/mermaid/src/config.type.ts:201](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L201)

 ---

@@ -340,7 +352,7 @@ Defined in: [packages/mermaid/src/config.type.ts:191](https://github.com/mermaid

 > `optional` **radar**: `RadarDiagramConfig`

-Defined in: [packages/mermaid/src/config.type.ts:202](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L202)
+Defined in: [packages/mermaid/src/config.type.ts:212](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L212)

 ---

@@ -348,7 +360,7 @@ Defined in: [packages/mermaid/src/config.type.ts:202](https://github.com/mermaid

 > `optional` **requirement**: `RequirementDiagramConfig`

-Defined in: [packages/mermaid/src/config.type.ts:193](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L193)
+Defined in: [packages/mermaid/src/config.type.ts:203](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L203)

 ---

@@ -356,7 +368,7 @@ Defined in: [packages/mermaid/src/config.type.ts:193](https://github.com/mermaid

 > `optional` **sankey**: `SankeyDiagramConfig`

-Defined in: [packages/mermaid/src/config.type.ts:199](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L199)
+Defined in: [packages/mermaid/src/config.type.ts:209](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L209)

 ---

@@ -364,7 +376,7 @@ Defined in: [packages/mermaid/src/config.type.ts:199](https://github.com/mermaid

 > `optional` **secure**: `string`\[]

-Defined in: [packages/mermaid/src/config.type.ts:148](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L148)
+Defined in: [packages/mermaid/src/config.type.ts:158](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L158)

 This option controls which `currentConfig` keys are considered secure and
 can only be changed via call to `mermaid.initialize`.
@@ -376,7 +388,7 @@ This prevents malicious graph directives from overriding a site's default securi

 > `optional` **securityLevel**: `"strict"` | `"loose"` | `"antiscript"` | `"sandbox"`

-Defined in: [packages/mermaid/src/config.type.ts:131](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L131)
+Defined in: [packages/mermaid/src/config.type.ts:141](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L141)

 Level of trust for parsed diagram

@@ -386,7 +398,7 @@ Level of trust for parsed diagram

 > `optional` **sequence**: `SequenceDiagramConfig`

-Defined in: [packages/mermaid/src/config.type.ts:183](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L183)
+Defined in: [packages/mermaid/src/config.type.ts:193](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L193)

 ---

@@ -394,7 +406,7 @@ Defined in: [packages/mermaid/src/config.type.ts:183](https://github.com/mermaid

 > `optional` **startOnLoad**: `boolean`

-Defined in: [packages/mermaid/src/config.type.ts:135](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L135)
+Defined in: [packages/mermaid/src/config.type.ts:145](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L145)

 Dictates whether mermaid starts on Page load

@@ -404,7 +416,7 @@ Dictates whether mermaid starts on Page load

 > `optional` **state**: `StateDiagramConfig`

-Defined in: [packages/mermaid/src/config.type.ts:188](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L188)
+Defined in: [packages/mermaid/src/config.type.ts:198](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L198)

 ---

@@ -412,7 +424,7 @@ Defined in: [packages/mermaid/src/config.type.ts:188](https://github.com/mermaid

 > `optional` **suppressErrorRendering**: `boolean`

-Defined in: [packages/mermaid/src/config.type.ts:212](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L212)
+Defined in: [packages/mermaid/src/config.type.ts:222](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L222)

 Suppresses inserting 'Syntax error' diagram in the DOM.
 This is useful when you want to control how to handle syntax errors in your application.
@@ -450,7 +462,7 @@ Defined in: [packages/mermaid/src/config.type.ts:65](https://github.com/mermaid-

 > `optional` **timeline**: `TimelineDiagramConfig`

-Defined in: [packages/mermaid/src/config.type.ts:186](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L186)
+Defined in: [packages/mermaid/src/config.type.ts:196](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L196)

 ---

@@ -458,7 +470,7 @@ Defined in: [packages/mermaid/src/config.type.ts:186](https://github.com/mermaid

 > `optional` **wrap**: `boolean`

-Defined in: [packages/mermaid/src/config.type.ts:204](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L204)
+Defined in: [packages/mermaid/src/config.type.ts:214](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L214)

 ---

@@ -466,4 +478,4 @@ Defined in: [packages/mermaid/src/config.type.ts:204](https://github.com/mermaid

 > `optional` **xyChart**: `XYChartConfig`

-Defined in: [packages/mermaid/src/config.type.ts:192](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L192)
+Defined in: [packages/mermaid/src/config.type.ts:202](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L202)
--- a/packages/mermaid-layout-elk/src/render.ts
+++ b/packages/mermaid-layout-elk/src/render.ts
@@ -766,7 +766,10 @@ export const render = async (
    id: 'root',
    layoutOptions: {
      'elk.hierarchyHandling': 'INCLUDE_CHILDREN',
-      'elk.layered.crossingMinimization.forceNodeModelOrder': true,
+      'elk.layered.crossingMinimization.forceNodeModelOrder':
+        data4Layout.config.elk?.forceNodeModelOrder,
+      'elk.layered.considerModelOrder.strategy': data4Layout.config.elk?.considerModelOrder,
+
      'elk.algorithm': algorithm,
      'nodePlacement.strategy': data4Layout.config.elk?.nodePlacementStrategy,
      'elk.layered.mergeEdges': data4Layout.config.elk?.mergeEdges,
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -109,6 +109,16 @@ export interface MermaidConfig {
      | 'INTERACTIVE'
      | 'MODEL_ORDER'
      | 'GREEDY_MODEL_ORDER';
+    /**
+     * The node order given by the model does not change to produce a better layout. E.g. if node A is before node B in the model this is not changed during crossing minimization. This assumes that the node model order is already respected before crossing minimization. This can be achieved by setting considerModelOrder.strategy to NODES_AND_EDGES.
+     *
+     */
+    forceNodeModelOrder?: boolean;
+    /**
+     * Preserves the order of nodes and edges in the model file if this does not lead to additional edge crossings. Depending on the strategy this is not always possible since the node and edge order might be conflicting.
+     *
+     */
+    considerModelOrder?: 'NONE' | 'NODES_AND_EDGES' | 'PREFER_EDGES' | 'PREFER_NODES';
  };
  darkMode?: boolean;
  htmlLabels?: boolean;
--- a/packages/mermaid/src/defaultConfig.ts
+++ b/packages/mermaid/src/defaultConfig.ts
@@ -24,6 +24,8 @@ const config: RequiredDeep<MermaidConfig> = {
    // mergeEdges is needed here to be considered
    mergeEdges: false,
    nodePlacementStrategy: 'BRANDES_KOEPF',
+    forceNodeModelOrder: false,
+    considerModelOrder: 'NODES_AND_EDGES',
  },
  themeCSS: undefined,

--- a/packages/mermaid/src/rendering-util/handle-markdown-text.spec.ts
+++ b/packages/mermaid/src/rendering-util/handle-markdown-text.spec.ts
@@ -285,7 +285,11 @@ test('markdownToHTML - Unsupported formatting', () => {
  - l1
  - l2
  - l3`)
-  ).toMatchInlineSnapshot('"<p>Hello</p>Unsupported markdown: list"');
+  ).toMatchInlineSnapshot(`
+    "<p>Hello</p>  - l1
+      - l2
+      - l3"
+  `);
 });

 test('markdownToHTML - no auto wrapping', () => {
--- a/packages/mermaid/src/rendering-util/handle-markdown-text.ts
+++ b/packages/mermaid/src/rendering-util/handle-markdown-text.ts
@@ -3,6 +3,7 @@ import { marked } from 'marked';
 import { dedent } from 'ts-dedent';
 import type { MarkdownLine, MarkdownWordType } from './types.js';
 import type { MermaidConfig } from '../config.type.js';
+import { log } from '../logger.js';

 /**
 * @param markdown - markdown to process
@@ -61,6 +62,8 @@ export function markdownToLines(markdown: string, config: MermaidConfig = {}): M
      });
    } else if (treeNode.type === 'html') {
      lines[currentLine].push({ content: treeNode.text, type: 'normal' });
+    } else {
+      lines[currentLine].push({ content: treeNode.raw, type: 'normal' });
    }
  });

@@ -89,7 +92,8 @@ export function markdownToHTML(markdown: string, { markdownAutoWrap }: MermaidCo
    } else if (node.type === 'escape') {
      return node.text;
    }
-    return `Unsupported markdown: ${node.type}`;
+    log.warn(`Unsupported markdown: ${node.type}`);
+    return node.raw;
  }

  return nodes.map(output).join('');
--- a/packages/mermaid/src/schemas/config.schema.yaml
+++ b/packages/mermaid/src/schemas/config.schema.yaml
@@ -133,6 +133,21 @@ properties:
          - MODEL_ORDER
          - GREEDY_MODEL_ORDER
        default: GREEDY_MODEL_ORDER
+      forceNodeModelOrder:
+        description: |
+          The node order given by the model does not change to produce a better layout. E.g. if node A is before node B in the model this is not changed during crossing minimization. This assumes that the node model order is already respected before crossing minimization. This can be achieved by setting considerModelOrder.strategy to NODES_AND_EDGES.
+        type: boolean
+        default: false
+      considerModelOrder:
+        description: |
+          Preserves the order of nodes and edges in the model file if this does not lead to additional edge crossings. Depending on the strategy this is not always possible since the node and edge order might be conflicting.
+        type: string
+        enum:
+          - NONE
+          - NODES_AND_EDGES
+          - PREFER_EDGES
+          - PREFER_NODES
+        default: 'NODES_AND_EDGES'
  darkMode:
    type: boolean
    default: false
Author	SHA1	Message	Date
Sidharth Vinod	e6ee145edf	Merge pull request #6857 from mermaid-js/elk-exposing-considerModelOrder-to-config Exposing elk configuration forceNodeModelOrder and considerMode…	2025-08-14 11:18:58 +00:00
Knut Sveidqvist	5cc264feb7	updated lock file	2025-08-14 13:05:40 +02:00
Alois Klink	690cc73259	Merge pull request #6855 from mermaid-js/sidv/showRawData fix: fallback to raw text instead of rendering Unsupported markdown	2025-08-14 11:01:58 +00:00
Knut Sveidqvist	b9ef683fb6	#6856 Exposing elk configuration forceNodeModelOrder and considerModelOrder to the mermaid configuration	2025-08-14 12:56:20 +02:00
Sidharth Vinod	6a6289f2aa	chore: Modify changeset	2025-08-14 16:18:45 +05:30
Sidharth Vinod	accb4c6369	Update .changeset/strong-laws-confess.md Co-authored-by: Alois Klink <alois@aloisklink.com>	2025-08-14 03:47:30 -07:00
Sidharth Vinod	52be254ad3	fix: fallback to raw text instead of rendering empty boxes when `htmlLabels: false`	2025-08-14 16:17:04 +05:30
Sidharth Vinod	9c071a9064	chore: Modify changeset Co-authored-by: Alois Klink <alois@mermaidchart.com>	2025-08-14 15:47:29 +05:30
Knut Sveidqvist	91d7229f1b	Merge pull request #6849 from anderium/bug/6647_fix-crossing-regression-while-keeping-preferred-node-order Make elk not force node model order, but strongly consider it instead	2025-08-14 10:17:25 +00:00
autofix-ci[bot]	60feec465b	[autofix.ci] apply automated fixes	2025-08-14 09:26:22 +00:00
Sidharth Vinod	d1ae687d1e	Merge branch 'sidv/showRawData' of https://github.com/mermaid-js/mermaid into sidv/showRawData * 'sidv/showRawData' of https://github.com/mermaid-js/mermaid: Create strong-laws-confess.md	2025-08-14 14:48:46 +05:30
Sidharth Vinod	7af6723ac0	test: Add E2E test for unsupported markdown	2025-08-14 14:48:37 +05:30
Sidharth Vinod	da90f6760b	Create strong-laws-confess.md	2025-08-14 02:16:38 -07:00
Sidharth Vinod	d74013c642	fix: Remove data loss when unsupported markdown is encountered	2025-08-14 13:05:44 +05:30
Sidharth Vinod	ce996346f8	Merge pull request #6821 from kriss-u/chore/4119_cspell_issue_eslint chore: run cspell on lint staged for markdown files	2025-08-14 11:46:13 +05:30
Sidharth Vinod	29edfa7f56	Apply suggestion from @sidharthv96	2025-08-13 10:03:26 -07:00
Sidharth Vinod	14a4ab81c9	Merge pull request #6850 from mermaid-js/update-timings Update E2E Timings	2025-08-13 22:15:22 +05:30
anderium	2260948b7b	Add changeset and integration test	2025-08-13 14:39:09 +02:00
github-actions[bot]	657a9ef785	chore: update E2E timings	2025-08-13 04:15:39 +00:00
anderium	4f24489d81	Make elk not force model order, but strongly consider it instead This improves the ordering in models with crossings that can be resolved by reordering nodes. It keeps the node order to still avoid #6647 which cause this regression to be introduced. [See this example on the ELK Editor.](https://rtsys.informatik.uni-kiel.de/elklive/elkgraph.html?compressedContent=IYGw5g9gTglgLgCwLYC4AEJgE8CmUcAmAUAPQloDGUEAzjTAHZgCyjMSMAXsHDBAwDoAZtAo4AchAI5mUnCADyUaVHRwoAVxxEK-eitnTFyvAJrqeOMFnTiFAEQCiAZQD6AQXH3Xj+wHEXIlJyABUEGBo0CLQAI2ACNAB3BBwGNA16JjQRKDFJaUN5JRU1TRwBIIY5NAYABjQAbwxgGPk0ACJa9rQAXyIq6Rr3RubWkA7gbr6BnBqARhHMMY65qf7qhgAmRZa29s21mZqADR3l9uPDjYAhM72Yq8GGa+GmpfuBVd71p+vbt9243aMQEB2+R2epwB5wAWmsiIQwLM6mgALQAPiGaARBCRNXqGPmQURyIWhK2xNxyOG5OulLxzzRmOe7hxDNutLpbORLyZNWux25-I5zMFQq2fIYYuCaGuGjgaEQ0RoCAgGhACVaaAA1jgAA4KxCzGjAJDlGUASQV+GgKkicAgaAAzAAaNAAFjdczd2xgQkoehgBjkxhUZgscCsNjQdnEjjQAAppEJgOq4ABKSrVABu9Whe1zj1m2YW+aBJaLaGz2zLHWrlezTru5adDfdzbr7vhJKrBMxJaFub51cHfarTtHw-dRCAA)	2025-08-13 01:47:25 +02:00
Krishna Upadhyay	17142ef8d7	chore: run cspell on lint staged for markdown files [skip ci]	2025-08-04 20:53:19 -05:00