Common Render pipeline 2: DAGRE - phase 1

.changeset/class-default-unified-renderer.md

@@ -0,0 +1,12 @@
+---
+'mermaid': minor
+---
+
+feat: route `classDiagram` to the unified (v2) renderer by default
+
+`class.defaultRenderer` now defaults to `dagre-wrapper`, so plain `classDiagram`
+documents (without the `-v2` suffix) render through the unified renderer and the
+shared dagre layout/paint pipeline instead of the legacy class renderer. Set
+`class: { defaultRenderer: 'dagre-d3' }` in the config to restore the legacy
+renderer. Self-referential edges in class and ER diagrams now render as compact
+merged self-loops.

.fallowrc.json

@@ -2,7 +2,11 @@
   "$schema": "https://raw.githubusercontent.com/fallow-rs/fallow/main/schema.json",
   "entry": [
     "packages/mermaid/src/rendering-util/layout-algorithms/**/*.ts",
-    "packages/mermaid/src/rendering-util/layout-algorithms/**/*.js"
+    "packages/mermaid/src/rendering-util/layout-algorithms/**/*.js",
+    "packages/mermaid/src/diagrams/block/**/*.ts",
+    "packages/mermaid/src/diagrams/block/**/*.js",
+    "packages/mermaid/src/rendering-util/rendering-elements/**/*.ts",
+    "packages/mermaid/src/rendering-util/rendering-elements/**/*.js"
   ],
   "ignorePatterns": [
     "packages/parser/**",
@@ -27,7 +31,39 @@
     "scripts/**",
     "packages/mermaid/scripts/**",
     "packages/mermaid/src/dagre-wrapper/**",
-    "packages/mermaid/src/diagrams/**",
+    "packages/mermaid/src/diagrams/architecture/**",
+    "packages/mermaid/src/diagrams/c4/**",
+    "packages/mermaid/src/diagrams/class/**",
+    "packages/mermaid/src/diagrams/common/**",
+    "packages/mermaid/src/diagrams/cynefin/**",
+    "packages/mermaid/src/diagrams/er/**",
+    "packages/mermaid/src/diagrams/error/**",
+    "packages/mermaid/src/diagrams/eventmodeling/**",
+    "packages/mermaid/src/diagrams/flowchart/**",
+    "packages/mermaid/src/diagrams/gantt/**",
+    "packages/mermaid/src/diagrams/git/**",
+    "packages/mermaid/src/diagrams/globalStyles.ts",
+    "packages/mermaid/src/diagrams/info/**",
+    "packages/mermaid/src/diagrams/ishikawa/**",
+    "packages/mermaid/src/diagrams/kanban/**",
+    "packages/mermaid/src/diagrams/mindmap/**",
+    "packages/mermaid/src/diagrams/packet/**",
+    "packages/mermaid/src/diagrams/pie/**",
+    "packages/mermaid/src/diagrams/quadrant-chart/**",
+    "packages/mermaid/src/diagrams/radar/**",
+    "packages/mermaid/src/diagrams/railroad/**",
+    "packages/mermaid/src/diagrams/requirement/**",
+    "packages/mermaid/src/diagrams/sankey/**",
+    "packages/mermaid/src/diagrams/sequence/**",
+    "packages/mermaid/src/diagrams/state/**",
+    "packages/mermaid/src/diagrams/swimlanes/**",
+    "packages/mermaid/src/diagrams/timeline/**",
+    "packages/mermaid/src/diagrams/treeView/**",
+    "packages/mermaid/src/diagrams/treemap/**",
+    "packages/mermaid/src/diagrams/user-journey/**",
+    "packages/mermaid/src/diagrams/venn/**",
+    "packages/mermaid/src/diagrams/wardley/**",
+    "packages/mermaid/src/diagrams/xychart/**",
     "packages/mermaid/src/diagram-api/**",
     "packages/mermaid/src/docs/**",
     "packages/mermaid/src/schemas/**",
@@ -36,7 +72,6 @@
     "packages/mermaid/src/types/**",
     "packages/mermaid/src/utils/**",
     "packages/mermaid/src/__mocks__/**",
-    "packages/mermaid/src/rendering-util/rendering-elements/**",
     ".lintstagedrc.mjs",
     "cypress.config.ts",
     "eslint.config.js",

cypress/helpers/util.ts

@@ -103,7 +103,7 @@ export const openURLAndVerifyRendering = (
   const name: string = (options.name ?? cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
 
   cy.visit(url);
-  cy.window().should('have.property', 'rendered', true);
+  cy.window({ timeout: 15000 }).should('have.property', 'rendered', true);
 
   // Handle sandbox mode where SVG is inside an iframe
   if (options.securityLevel === 'sandbox') {

cypress/integration/rendering/class/classDiagram-handDrawn-v3.spec.js

@@ -1137,4 +1137,19 @@ class C13["With Città foreign language"]
       { class: { hierarchicalNamespaces: false } }
     );
   });
+
+  it('HD: should render a self-referential class diagram with multiplicity labels', () => {
+    imgSnapshotTest(
+      `
+      classDiagram
+      class SelfReferential{
+          +int id
+          +int self_referential_id
+          +SelfReferential referenced
+      }
+      SelfReferential "1" --> "0..1" SelfReferential : referenced
+      `,
+      { logLevel: 1, htmlLabels: true, look: 'handDrawn' }
+    );
+  });
 });

cypress/platform/dev-diagrams/layout-tests/block-diagrams/test1.mmd

@@ -0,0 +1,4 @@
+block-beta
+    columns 5
+    PA["Paid proceeds (actual) $613"]:1 DEF["Deficit $5,155"]:4
+    CA["Cash back (actual) $128"]:1 SPO["Spoilage (35 unsold) $5,640"]:4

cypress/platform/dev-diagrams/layout-tests/block-diagrams/test2.mmd

@@ -0,0 +1,4 @@
+block
+    A>"rect_left_inv_arrow"]
+    B{"diamond"}
+    C{{"hexagon"}}

cypress/platform/dev-diagrams/layout-tests/block-diagrams/test3.mmd

@@ -0,0 +1,6 @@
+block
+    A
+    B
+    classDef blue fill:#66f,stroke:#333,stroke-width:2px;
+    class A blue
+    style B fill:#f9F,stroke:#333,stroke-width:4px

cypress/platform/dev-diagrams/layout-tests/block-diagrams/test4.mmd

@@ -0,0 +1,6 @@
+%% BL21
+block
+    A[/"lean right"/]
+    B[\"lean left"\]
+    C[/"trapezoid"\]
+    D[\"trapezoid alt"/]

cypress/platform/dev-diagrams/layout-tests/elk-edge-cases/4813-title-and-arrow-styling.mmd

@@ -0,0 +1,6 @@
+---
+title: My title
+---
+flowchart LR
+ A-->B
+ A-->C

cypress/platform/dev-diagrams/layout-tests/elk-edge-cases/Render-stadium-shape.mmd

@@ -0,0 +1,20 @@
+---
+config:
+  flowchart:
+    htmlLabels: false
+    fontFamily: 'courier'
+  elk:
+    nodePlacementAlignment: NONE
+---
+flowchart-elk TD
+      A([stadium shape test])
+      A -->|Get money| B([Go shopping])
+      B --> C([Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?])
+      C -->|One| D([Laptop])
+      C -->|Two| E([iPhone])
+      C -->|Three| F([Car<br/>wroom wroom])
+      click A "index.html#link-clicked" "link test"
+      click B testClick "click test"
+      classDef someclass fill:#f96;
+      class A someclass;
+      class C someclass;

cypress/platform/dev-diagrams/layout-tests/elk-edge-cases/diamond-intersections.mmd

@@ -0,0 +1,38 @@
+---
+config:
+  layout: elk
+  elk:
+    nodePlacementAlignment: NONE
+---
+flowchart LR
+ subgraph s1["Untitled subgraph"]
+        n1["Evaluate"]
+        n2["Option 1"]
+        n3["Option 2"]
+        n4["fa:fa-car Option 3"]
+  end
+ subgraph s2["Untitled subgraph"]
+        n5["Evaluate"]
+        n6["Option 1"]
+        n7["Option 2"]
+        n8["fa:fa-car Option 3"]
+  end
+    A["Start"] -- Some text --> B("Continue")
+    B --> C{"Evaluate"}
+    C -- One --> D["Option 1"]
+    C -- Two --> E["Option 2"]
+    C -- Three --> F["fa:fa-car Option 3"]
+    n1 -- One --> n2
+    n1 -- Two --> n3
+    n1 -- Three --> n4
+    n5 -- One --> n6
+    n5 -- Two --> n7
+    n5 -- Three --> n8
+    n1@{ shape: diam}
+    n2@{ shape: rect}
+    n3@{ shape: rect}
+    n4@{ shape: rect}
+    n5@{ shape: diam}
+    n6@{ shape: rect}
+    n7@{ shape: rect}
+    n8@{ shape: rect}

cypress/platform/dev-diagrams/layout-tests/elk-edge-cases/full-class-diagram.mmd

@@ -0,0 +1,32 @@
+---
+config:
+  elk:
+    nodePlacementAlignment: BALANCED
+---
+classDiagram
+      note "I love this diagram!\nDo you love it?"
+      Class01 <|-- AveryLongClass : Cool
+      <<interface>> Class01
+      Class03 "1" *-- "*" Class04
+      Class05 "1" o-- "many" Class06
+      Class07 "1" .. "*" Class08
+      Class09 "1" --> "*" C2 : Where am i?
+      Class09 "*" --* "*" C3
+      Class09 "1" --|> "1" Class07
+      Class12 <|.. Class08
+      Class11 ..>Class12
+      Class07 : equals()
+      Class07 : Object[] elementData
+      Class01 : size()
+      Class01 : int chimp
+      Class01 : int gorilla
+      Class01 : -int privateChimp
+      Class01 : +int publicGorilla
+      Class01 : #int protectedMarmoset
+      Class08 <--> C2: Cool label
+      class Class10 {
+        <<service>>
+        int id
+        test()
+      }
+      note for Class10 "Cool class\nI said it's very cool class!"

cypress/platform/dev-diagrams/layout-tests/elk-edge-cases/non-rect-intersections.mmd

@@ -1,4 +1,9 @@
-%% Validate ELK edge endpoints against non-rectangular node shapes.
+---
+config:
+  elk:
+    nodePlacementAlignment: BALANCED
+---
+
 flowchart TD
   Start([Start]) --> Split{Ready to Process?}
   Split -->|yes| T1[Task A]

cypress/platform/dev-diagrams/layout-tests/elk-edge-cases/right-angles-not-curves.mmd

@@ -0,0 +1,23 @@
+---
+config:
+  elk:
+    nodePlacementAlignment: NONE
+---
+flowchart LR
+    subgraph G1
+        N00
+        N11
+        N12
+        N13
+    end
+    subgraph G2
+        N21
+        N22
+    end
+    N00 --- N01 & N02 & N03 & N04 & N05
+    N00 --- N11 & N12 & N13 & N22
+    N11 --- N22
+    N11 --- N22
+    N11 --- N22
+    N11 --- N22
+    N11 --- N22

cypress/platform/dev-diagrams/layout-tests/elk-edge-cases/should-render-edge-labels-correctly-when-flowchart-htmlLabels-is-false.mmd

@@ -0,0 +1,35 @@
+---
+config:
+  flowchart:
+    htmlLabels: false
+    fontFamily: 'courier'
+---
+requirementDiagram
+        requirement test_req {
+        id: 1
+        text: the test text.
+        risk: high
+        verifymethod: test
+        }
+
+        functionalRequirement test_req2 {
+        id: 1.1
+        text: the second test text.
+        risk: low
+        verifymethod: inspection
+        }
+
+        element test_entity {
+        type: simulation
+        }
+
+        element test_entity2 {
+        type: word doc
+        docRef: reqs/test_entity
+        }
+
+        test_entity - satisfies -> test_req2
+        test_req - traces -> test_req2
+        test_req - contains -> test_req2
+        test_entity2 - verifies -> test_req
+        test_req <- copies - test_entity2

cypress/platform/dev-diagrams/layout-tests/elk-edge-cases/styled-edge-labels.mmd

@@ -0,0 +1,15 @@
+flowchart TD
+  A[Christmas] ==> D
+  A[Christmas] -->|Get money| B(Go shopping)
+  A[Christmas] ==> C
+  subgraph T ["Test"]
+    A
+    B
+    C
+  end
+
+  classDef Test fill:#F84E68,stroke:#333,color:white;
+  class A,T Test
+  classDef TestSub fill:green;
+  class T TestSub
+  linkStyle 0,1 color:orange, stroke: orange;

cypress/platform/viewer.js

@@ -15,6 +15,13 @@ function markRendered() {
   }
 }
 
+function usesLegacyFontAwesomeSyntax(code) {
+  const legacyFontAwesomePattern = /fa[bklrs]?:fa-[\w-]+|::icon\(\s*fa\b/;
+  return Array.isArray(code)
+    ? code.some((diagramCode) => usesLegacyFontAwesomeSyntax(diagramCode))
+    : legacyFontAwesomePattern.test(code);
+}
+
 function loadFontAwesomeCSS() {
   const link = document.createElement('link');
   link.rel = 'stylesheet';
@@ -34,14 +41,16 @@ function loadFontAwesomeCSS() {
  * page.
  */
 const contentLoaded = async function () {
-  await loadFontAwesomeCSS();
-  await Promise.all(Array.from(document.fonts, (font) => font.load()));
-
   let pos = document.location.href.indexOf('?graph=');
   if (pos > 0) {
     pos = pos + 7;
     const graphBase64 = document.location.href.substr(pos);
     const graphObj = JSON.parse(b64ToUtf8(graphBase64));
+    if (usesLegacyFontAwesomeSyntax(graphObj.code)) {
+      await loadFontAwesomeCSS();
+    }
+    await Promise.all(Array.from(document.fonts, (font) => font.load()));
+
     const darkThemes = ['dark', 'neo-dark', 'redux-dark', 'redux-dark-color'];
     if (graphObj.mermaid && darkThemes.includes(graphObj.mermaid.theme)) {
       document.body.style.background = '#3f3f3f';

docs/config/setup/defaultConfig/variables/configKeys.md

@@ -12,4 +12,4 @@
 
 > `const` **configKeys**: `Set`<`string`>
 
-Defined in: [packages/mermaid/src/defaultConfig.ts:336](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L336)
+Defined in: [packages/mermaid/src/defaultConfig.ts:340](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L340)

docs/config/setup/mermaid/functions/clearLayoutRenderState.md

@@ -12,7 +12,7 @@
 
 > **clearLayoutRenderState**(): `void`
 
-Defined in: [packages/mermaid/src/rendering-util/layout-algorithms/common/index.ts:164](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/layout-algorithms/common/index.ts#L164)
+Defined in: [packages/mermaid/src/rendering-util/layout-algorithms/common/index.ts:183](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/layout-algorithms/common/index.ts#L183)
 
 ## Returns
 

docs/config/setup/mermaid/functions/createCommonLayoutRenderer.md

@@ -12,7 +12,7 @@
 
 > **createCommonLayoutRenderer**<`CoreResult`, `PreparedLayout`, `MeasureResult`>(`__namedParameters`): (`data4Layout`, `svg`, `helpers?`, `options?`) => `Promise`<`void`>
 
-Defined in: [packages/mermaid/src/rendering-util/layout-algorithms/common/index.ts:87](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/layout-algorithms/common/index.ts#L87)
+Defined in: [packages/mermaid/src/rendering-util/layout-algorithms/common/index.ts:106](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/layout-algorithms/common/index.ts#L106)
 
 ## Type Parameters
 

docs/config/setup/mermaid/functions/defaultMeasureLayout.md

@@ -12,7 +12,7 @@
 
 > **defaultMeasureLayout**(`data4Layout`, `__namedParameters`): `Promise`<{ `graph`: `Graph`; `groups`: { `clusters`: `D3Selection`<`SVGGElement`>; `edgeLabels`: `D3Selection`<`SVGGElement`>; `edgePaths`: `D3Selection`<`SVGGElement`>; `nodes`: `D3Selection`<`SVGGElement`>; `rootGroups`: `D3Selection`<`SVGGElement`>; }; `nodeElements`: `Map`<`string`, `D3Selection`<`SVGElement` | `SVGGElement`>>; }>
 
-Defined in: [packages/mermaid/src/rendering-util/layout-algorithms/common/index.ts:171](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/layout-algorithms/common/index.ts#L171)
+Defined in: [packages/mermaid/src/rendering-util/layout-algorithms/common/index.ts:190](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/layout-algorithms/common/index.ts#L190)
 
 ## Parameters