From 59d6f04e4bd2fdcf2f98cf0d80abfed884493fe3 Mon Sep 17 00:00:00 2001 From: Nicholas Bollweg Date: Fri, 30 Aug 2024 08:38:41 -0500 Subject: [PATCH 01/12] make rendering-util/types a real ts file --- packages/mermaid-layout-elk/src/render.ts | 10 +++++----- .../src/rendering-util/{types.d.ts => types.ts} | 11 +++++------ 2 files changed, 10 insertions(+), 11 deletions(-) rename packages/mermaid/src/rendering-util/{types.d.ts => types.ts} (95%) diff --git a/packages/mermaid-layout-elk/src/render.ts b/packages/mermaid-layout-elk/src/render.ts index 117ca62763..96f919e4b7 100644 --- a/packages/mermaid-layout-elk/src/render.ts +++ b/packages/mermaid-layout-elk/src/render.ts @@ -224,7 +224,7 @@ export const render = async ( * Add edges to graph based on parsed graph definition */ const addEdges = async function ( - dataForLayout: { edges: any; direction: string }, + dataForLayout: { edges: any; direction?: string }, graph: { id?: string; layoutOptions?: { @@ -749,8 +749,8 @@ export const render = async ( layoutOptions: { 'elk.hierarchyHandling': 'INCLUDE_CHILDREN', 'elk.algorithm': algorithm, - 'nodePlacement.strategy': data4Layout.config.elk.nodePlacementStrategy, - 'elk.layered.mergeEdges': data4Layout.config.elk.mergeEdges, + 'nodePlacement.strategy': data4Layout.config.elk?.nodePlacementStrategy, + 'elk.layered.mergeEdges': data4Layout.config.elk?.mergeEdges, 'elk.direction': 'DOWN', 'spacing.baseValue': 30, // 'spacing.nodeNode': 40, @@ -817,8 +817,8 @@ export const render = async ( ...node.layoutOptions, 'elk.algorithm': algorithm, 'elk.direction': dir2ElkDirection(node.dir), - 'nodePlacement.strategy': data4Layout.config['elk.nodePlacement.strategy'], - 'elk.layered.mergeEdges': data4Layout.config['elk.mergeEdges'], + 'nodePlacement.strategy': data4Layout.config.elk?.nodePlacementStrategy, + 'elk.layered.mergeEdges': data4Layout.config.elk?.mergeEdges, 'elk.hierarchyHandling': 'SEPARATE_CHILDREN', }; } diff --git a/packages/mermaid/src/rendering-util/types.d.ts b/packages/mermaid/src/rendering-util/types.ts similarity index 95% rename from packages/mermaid/src/rendering-util/types.d.ts rename to packages/mermaid/src/rendering-util/types.ts index 67f8de40e8..ba6b2ae878 100644 --- a/packages/mermaid/src/rendering-util/types.d.ts +++ b/packages/mermaid/src/rendering-util/types.ts @@ -1,5 +1,5 @@ export type MarkdownWordType = 'normal' | 'strong' | 'em'; -import type { MermaidConfig } from '../../dist/config.type'; +import type { MermaidConfig } from '../../dist/config.type.js'; export interface MarkdownWord { content: string; type: MarkdownWordType; @@ -9,7 +9,7 @@ export type MarkdownLine = MarkdownWord[]; export type CheckFitFunction = (text: MarkdownLine) => boolean; // Common properties for any node in the system -interface Node { +export interface Node { id: string; label?: string; description?: string[]; @@ -38,7 +38,6 @@ interface Node { tooltip?: string; padding?: number; //REMOVE?, use from LayoutData.config - Keep, this could be shape specific shape?: string; - tooltip?: string; isGroup: boolean; width?: number; height?: number; @@ -68,7 +67,7 @@ interface Node { } // Common properties for any edge in the system -interface Edge { +export interface Edge { id: string; label?: string; classes?: string; @@ -98,7 +97,7 @@ interface Edge { look?: string; } -interface RectOptions { +export interface RectOptions { rx: number; ry: number; labelPaddingX: number; @@ -107,7 +106,7 @@ interface RectOptions { } // Extending the Node interface for specific types if needed -interface ClassDiagramNode extends Node { +export interface ClassDiagramNode extends Node { memberData: any; // Specific property for class diagram nodes } From a176d64389352b3f26b50f29060b1167dbcfedcd Mon Sep 17 00:00:00 2001 From: Nicholas Bollweg Date: Fri, 30 Aug 2024 08:51:40 -0500 Subject: [PATCH 02/12] fix import --- packages/mermaid/src/rendering-util/types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/rendering-util/types.ts b/packages/mermaid/src/rendering-util/types.ts index ba6b2ae878..8280f96761 100644 --- a/packages/mermaid/src/rendering-util/types.ts +++ b/packages/mermaid/src/rendering-util/types.ts @@ -1,5 +1,5 @@ export type MarkdownWordType = 'normal' | 'strong' | 'em'; -import type { MermaidConfig } from '../../dist/config.type.js'; +import type { MermaidConfig } from '../config.type.js'; export interface MarkdownWord { content: string; type: MarkdownWordType; From 3e922c83f0480b8a4fa7dd0a168def64d57ddefd Mon Sep 17 00:00:00 2001 From: Nicholas Bollweg Date: Fri, 30 Aug 2024 09:10:53 -0500 Subject: [PATCH 03/12] pass linter --- eslint.config.js | 1 + 1 file changed, 1 insertion(+) diff --git a/eslint.config.js b/eslint.config.js index 8b4807bc57..3278c7eb42 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -23,6 +23,7 @@ export default tseslint.config( '**/generated/', '**/coverage/', 'packages/mermaid/src/config.type.ts', + 'packages/mermaid/src/docs/.vitepress/components.d.ts', ], }, { From 6a97f80cc33d8e2f5a26eb9f973c28f7592f5621 Mon Sep 17 00:00:00 2001 From: Nicholas Bollweg Date: Fri, 30 Aug 2024 09:16:38 -0500 Subject: [PATCH 04/12] add another maybe-undefined operator elk --- packages/mermaid-layout-elk/src/render.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid-layout-elk/src/render.ts b/packages/mermaid-layout-elk/src/render.ts index 52cb8aa728..e647422ecc 100644 --- a/packages/mermaid-layout-elk/src/render.ts +++ b/packages/mermaid-layout-elk/src/render.ts @@ -754,7 +754,7 @@ export const render = async ( 'elk.direction': 'DOWN', 'spacing.baseValue': 35, 'elk.layered.unnecessaryBendpoints': true, - 'elk.layered.cycleBreaking.strategy': data4Layout.config.elk.cycleBreakingStrategy, + 'elk.layered.cycleBreaking.strategy': data4Layout.config.elk?.cycleBreakingStrategy, // 'spacing.nodeNode': 20, // 'spacing.nodeNodeBetweenLayers': 25, // 'spacing.edgeNode': 20, From 73f8d70b864bd2a8121508d52fc8f247d2250912 Mon Sep 17 00:00:00 2001 From: Nicholas Bollweg Date: Fri, 30 Aug 2024 09:21:11 -0500 Subject: [PATCH 05/12] rebuild docs --- docs/config/setup/interfaces/mermaid.LayoutData.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/config/setup/interfaces/mermaid.LayoutData.md b/docs/config/setup/interfaces/mermaid.LayoutData.md index 6f128f4a71..f45d5f0e70 100644 --- a/docs/config/setup/interfaces/mermaid.LayoutData.md +++ b/docs/config/setup/interfaces/mermaid.LayoutData.md @@ -16,11 +16,11 @@ ### config -• **config**: `MermaidConfig` +• **config**: [`MermaidConfig`](mermaid.MermaidConfig.md) #### Defined in -[packages/mermaid/src/rendering-util/types.d.ts:118](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.d.ts#L118) +[packages/mermaid/src/rendering-util/types.ts:117](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L117) --- @@ -30,7 +30,7 @@ #### Defined in -[packages/mermaid/src/rendering-util/types.d.ts:117](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.d.ts#L117) +[packages/mermaid/src/rendering-util/types.ts:116](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L116) --- @@ -40,4 +40,4 @@ #### Defined in -[packages/mermaid/src/rendering-util/types.d.ts:116](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.d.ts#L116) +[packages/mermaid/src/rendering-util/types.ts:115](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L115) From 0d7aaae0ff3be4ab31951c6ae9ce9723b72dcb76 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Thu, 5 Sep 2024 16:40:59 +0200 Subject: [PATCH 06/12] Fix for issues with self loops --- .../rendering/flowchart-v2.spec.js | 20 +++- cypress/platform/knsv2.html | 100 +++++++++++++++--- .../layout-algorithms/dagre/index.js | 6 +- 3 files changed, 107 insertions(+), 19 deletions(-) diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js index 452cdb5a00..4587bb07a9 100644 --- a/cypress/integration/rendering/flowchart-v2.spec.js +++ b/cypress/integration/rendering/flowchart-v2.spec.js @@ -786,7 +786,7 @@ A ~~~ B `--- title: Subgraph nodeSpacing and rankSpacing example config: - flowchart: + flowchart: nodeSpacing: 250 rankSpacing: 250 --- @@ -1052,5 +1052,23 @@ end } ); }); + it('Should render self-loops', () => { + imgSnapshotTest( + `flowchart + A --> A + subgraph B + B1 --> B1 + end + subgraph C + subgraph C1 + C2 --> C2 + end + end + `, + { + flowchart: { subGraphTitleMargin: { top: 10, bottom: 5 } }, + } + ); + }); }); }); diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html index a3cbf60bfc..fe587b8d23 100644 --- a/cypress/platform/knsv2.html +++ b/cypress/platform/knsv2.html @@ -84,7 +84,7 @@
- 
+      
 ---
   title: hello2
   config:
@@ -244,30 +244,98 @@
 
 
 

+
+      
+---
+config:
+  look: neo
+---
+flowchart RL
+    subgraph "   "
+        A5@{ shape: manual-file, label: "a label"}@
+        B5@{ shape: manual-input, label: "a label" }@
+        C5@{ shape: mul-doc, label: "a label" }@
+        D5@{ shape: mul-proc, label: "a label" }@
+        E5@{ shape: paper-tape, label: "a label" }@
+        B3@{ shape: das, label: "a label" }@
+        C3@{ shape: disk, label: "a label" }@
+        D4@{ shape: lin-doc, label: "a label" }@
+        E4@{ shape: loop-limit, label: "a label" }@
+    end
+    subgraph "   "
+        B6@{ shape: summary, label: "a label" }@
+        C6@{ shape: tag-we-rect, label: "a label" }@
+        D6@{ shape: tag-rect, label: "a label" }@
+        A2@{ shape: fork}@
+        B2@{ shape: hourglass }@
+        C2@{ shape: comment, label: "I am a comment" }@
+        D2@{ shape: bolt }@
+        D3@{ shape: disp, label: "a label" }@
+        C4@{ shape: junction, label: "a label" }@
+        A4@{ shape: extract, label: "a label"}@
+        B52[a fr]@{ shape: fr }@
+    end
+    subgraph " "
+        A1@{ shape: text, label: This is a textblock}@
+        B1@{ shape: card, label: "a label" }@
+        C1@{ shape: lined-proc, label: "a label" }@
+        D1@{ shape: start, label: "a label" }@
+        E1@{ shape: stop, label: "a label" }@
+        E2@{ shape: doc, label: "a label" }@
+        A6@{ shape: stored-data, label: "a label"}@
+        A3@{ shape: delay, label: "a label" }@
+        E3@{ shape: div-proc, label: "a label" }@
+        B4[a label]@{ shape: win-pane }@
+    end
+      

       
 ---
   title: hello2
   config:
     look: handDrawn
-    layout: dagre
     elk:
-        nodePlacementStrategy: BRANDES_KOEPF
+      
 ---
-stateDiagram-v2
-  A --> A
-  state A {
-    B --> D
-    state B {
-      C
-    }
-    state D {
-      E
-    }
-  }
+%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
+flowchart TD
+
+    A([Start]) -->|go to booking page| B("select
+    ISBS booking no")
+    A --> QQ{cancel booking}
+    A --> RR{no show}
+    A --> SS{change booking}
+    B -->C(wmpay_request_payment.request_type= 'partial',
+ wmpay_request_payment.status= 'paid',
+ pos_booking.booking_status= ‘partial’ and 'full_deposit')
+ style C text-align:left
+    C -->D{manage booking}
+
+    D -->|cancel|E[ระบบแสดงช่องให้กรอกเหตุผล]
+    E -->F{กดปุ่ม 'cancel' หรือไม่}
+    F -->|Yes|G[ระบบบันทึกค่าใหม่
+    และไม่สามารถแก้ไขข้อมูลได้]
+    F -->|No|H[กดปุ่ม 'close']
+    H -->|ระบบไม่เปลี่ยนแปลงข้อมูล|Z
+    G -->|ระบบส่งข้อมูล|I[(POS_database)]
+    I -->|pos_booking.booking_status='cancel'|Z([End])
+
+
+    D -->|no show|J[ระบบแสดงช่องให้กรอกเหตุผล]
+    J -->K{กดปุ่ม 'noshow' หรือไม่}
+    K -->|Yes|L[ระบบสร้างใบเสร็จอัตโนมัติ
+    Product_id: 439,
+    ItemName: no show]
+     style L text-align:left
+
+     K -->|No|O[กดปุ่ม 'close']
+     O -->|ระบบไม่เปลี่ยนแปลงข้อมูล|Z
+    L -->M[ระบบบันทึกค่าใหม่]
+    M -->|ระบบส่งข้อมูล|N[(POS_database)]
+    N -->|pos_booking.booking_status=‘noshow’|Z
 
 
-

+
+
 ---
   title: hello2
diff --git a/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js b/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js
index 307242675a..0d754f6614 100644
--- a/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js
+++ b/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js
@@ -349,8 +349,10 @@ export const render = async (data4Layout, svg) => {
       edgeMid.arrowTypeEnd = 'none';
       edgeMid.id = nodeId + '-cyclic-special-mid';
       edge2.label = '';
-      edge1.fromCluster = nodeId;
-      edge2.toCluster = nodeId;
+      if (node.isGroup) {
+        edge1.fromCluster = nodeId;
+        edge2.toCluster = nodeId;
+      }
       edge2.id = nodeId + '-cyclic-special-2';
       graph.setEdge(nodeId, specialId1, edge1, nodeId + '-cyclic-special-0');
       graph.setEdge(specialId1, specialId2, edgeMid, nodeId + '-cyclic-special-1');

From aa259e03f2949fa67efd4d044dc56e08de8d6962 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Thu, 5 Sep 2024 17:47:12 +0200
Subject: [PATCH 07/12] Updated cypress test for self-loops

---
 cypress/integration/rendering/flowchart-v2.spec.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js
index 4587bb07a9..66452f4b2f 100644
--- a/cypress/integration/rendering/flowchart-v2.spec.js
+++ b/cypress/integration/rendering/flowchart-v2.spec.js
@@ -1062,7 +1062,12 @@ end
           subgraph C
             subgraph C1
               C2 --> C2
+              subgraph D
+                D1 --> D1
+              end
+              D --> D
             end
+            C1 --> C1
           end
         `,
         {

From b4941aa4cea7ccc2e418eaca6511f44222b89e99 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Fri, 6 Sep 2024 18:43:22 +0200
Subject: [PATCH 08/12] Cleanup of test-file

---
 cypress/platform/knsv2.html | 179 +-----------------------------------
 1 file changed, 1 insertion(+), 178 deletions(-)

diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index fe587b8d23..80406b9391 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -83,8 +83,7 @@
   
 
   
-    

-      
+    
 ---
   title: hello2
   config:
@@ -243,183 +242,7 @@
 
 
 
-

-
-      
----
-config:
-  look: neo
----
-flowchart RL
-    subgraph "   "
-        A5@{ shape: manual-file, label: "a label"}@
-        B5@{ shape: manual-input, label: "a label" }@
-        C5@{ shape: mul-doc, label: "a label" }@
-        D5@{ shape: mul-proc, label: "a label" }@
-        E5@{ shape: paper-tape, label: "a label" }@
-        B3@{ shape: das, label: "a label" }@
-        C3@{ shape: disk, label: "a label" }@
-        D4@{ shape: lin-doc, label: "a label" }@
-        E4@{ shape: loop-limit, label: "a label" }@
-    end
-    subgraph "   "
-        B6@{ shape: summary, label: "a label" }@
-        C6@{ shape: tag-we-rect, label: "a label" }@
-        D6@{ shape: tag-rect, label: "a label" }@
-        A2@{ shape: fork}@
-        B2@{ shape: hourglass }@
-        C2@{ shape: comment, label: "I am a comment" }@
-        D2@{ shape: bolt }@
-        D3@{ shape: disp, label: "a label" }@
-        C4@{ shape: junction, label: "a label" }@
-        A4@{ shape: extract, label: "a label"}@
-        B52[a fr]@{ shape: fr }@
-    end
-    subgraph " "
-        A1@{ shape: text, label: This is a textblock}@
-        B1@{ shape: card, label: "a label" }@
-        C1@{ shape: lined-proc, label: "a label" }@
-        D1@{ shape: start, label: "a label" }@
-        E1@{ shape: stop, label: "a label" }@
-        E2@{ shape: doc, label: "a label" }@
-        A6@{ shape: stored-data, label: "a label"}@
-        A3@{ shape: delay, label: "a label" }@
-        E3@{ shape: div-proc, label: "a label" }@
-        B4[a label]@{ shape: win-pane }@
-    end
       

-      
----
-  title: hello2
-  config:
-    look: handDrawn
-    elk:
-      
----
-%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
-flowchart TD
-
-    A([Start]) -->|go to booking page| B("select
-    ISBS booking no")
-    A --> QQ{cancel booking}
-    A --> RR{no show}
-    A --> SS{change booking}
-    B -->C(wmpay_request_payment.request_type= 'partial',
- wmpay_request_payment.status= 'paid',
- pos_booking.booking_status= ‘partial’ and 'full_deposit')
- style C text-align:left
-    C -->D{manage booking}
-
-    D -->|cancel|E[ระบบแสดงช่องให้กรอกเหตุผล]
-    E -->F{กดปุ่ม 'cancel' หรือไม่}
-    F -->|Yes|G[ระบบบันทึกค่าใหม่
-    และไม่สามารถแก้ไขข้อมูลได้]
-    F -->|No|H[กดปุ่ม 'close']
-    H -->|ระบบไม่เปลี่ยนแปลงข้อมูล|Z
-    G -->|ระบบส่งข้อมูล|I[(POS_database)]
-    I -->|pos_booking.booking_status='cancel'|Z([End])
-
-
-    D -->|no show|J[ระบบแสดงช่องให้กรอกเหตุผล]
-    J -->K{กดปุ่ม 'noshow' หรือไม่}
-    K -->|Yes|L[ระบบสร้างใบเสร็จอัตโนมัติ
-    Product_id: 439,
-    ItemName: no show]
-     style L text-align:left
-
-     K -->|No|O[กดปุ่ม 'close']
-     O -->|ระบบไม่เปลี่ยนแปลงข้อมูล|Z
-    L -->M[ระบบบันทึกค่าใหม่]
-    M -->|ระบบส่งข้อมูล|N[(POS_database)]
-    N -->|pos_booking.booking_status=‘noshow’|Z
-
-
-
-

-      
----
-  title: hello2
-  config:
-    look: handDrawn
-    layout: dagre
-    elk:
-        nodePlacementStrategy: BRANDES_KOEPF
----
-flowchart
-  A --> A
-  subgraph A
-    B --> B
-    subgraph B
-      C
-    end
-  end
-
-
-

-      
----
-config:
-  look: handdrawn
-  flowchart:
-    htmlLabels: true
----
-flowchart
-      A[I am a long text, where do I go??? handdrawn - true]
-

-    

-    

-      
----
-config:
-  flowchart:
-    htmlLabels: false
----
-flowchart
-      A[I am a long text, where do I go??? classic - false]
-

-      
----
-config:
-  flowchart:
-    htmlLabels: true
----
-flowchart
-      A[I am a long text, where do I go??? classic - true]
-

-    

-    
-flowchart LR
-    id1(Start)-->id2(Stop)
-    style id1 fill:#f9f,stroke:#333,stroke-width:4px
-    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
-
-
-    

-
-    
-      flowchart LR
-    A:::foo & B:::bar --> C:::foobar
-    classDef foo stroke:#f00
-    classDef bar stroke:#0f0
-    classDef ash color:red
-    class C ash
-    style C stroke:#00f, fill:black
-
-    

-
-    
-      stateDiagram
-    A:::foo
-    B:::bar --> C:::foobar
-    classDef foo stroke:#f00
-    classDef bar stroke:#0f0
-    style C stroke:#00f, fill:black, color:white
-
-