Merge branch 'develop' into sidv/returnConfig

* develop: chore(deps): update dependency eslint-plugin-jsdoc to v50 chore: add git command and set safe dir Version Packages Adding changeset Cleanup of test-file Updated cypress test for self-loops Fix for issues with self loops rebuild docs add another maybe-undefined operator elk pass linter fix import make rendering-util/types a real ts file
mermaid-js · Sep 9, 2024 · 303f1f4 · 303f1f4
2 parents f7be983 + cc61629
commit 303f1f4
Show file tree

Hide file tree

Showing 12 changed files with 70 additions and 298 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -5,6 +5,9 @@ USER 0:0
 RUN corepack enable \
     && corepack enable pnpm
 
+RUN apk add --no-cache git~=2.43.4 \
+    && git config --add --system safe.directory /mermaid
+
 ENV NODE_OPTIONS="--max_old_space_size=8192"
 
 EXPOSE 9000 3333
diff --git 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,28 @@ end
         }
       );
     });
+    it('Should render self-loops', () => {
+      imgSnapshotTest(
+        `flowchart
+          A --> A
+          subgraph B
+            B1 --> B1
+          end
+          subgraph C
+            subgraph C1
+              C2 --> C2
+              subgraph D
+                D1 --> D1
+              end
+              D --> D
+            end
+            C1 --> C1
+          end
+        `,
+        {
+          flowchart: { subGraphTitleMargin: { top: 10, bottom: 5 } },
+        }
+      );
+    });
   });
 });
diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
@@ -83,8 +83,7 @@
   </head>
 
   <body>
-    <div class="flex">
-      <pre id="diagram" class="mermaid">
+    <pre id="diagram" class="mermaid">
 ---
   title: hello2
   config:
@@ -243,115 +242,7 @@
 
 
 
-</pre>
-      <pre id="diagram" class="mermaid2">
----
-  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
-    }
-  }
-
-
-</pre
-      >
-      <pre id="diagram" class="mermaid2">
----
-  title: hello2
-  config:
-    look: handDrawn
-    layout: dagre
-    elk:
-        nodePlacementStrategy: BRANDES_KOEPF
----
-flowchart
-  A --> A
-  subgraph A
-    B --> B
-    subgraph B
-      C
-    end
-  end
-
-
-</pre
-      >
-      <pre id="diagram" class="mermaid2">
----
-config:
-  look: handdrawn
-  flowchart:
-    htmlLabels: true
----
-flowchart
-      A[I am a long text, where do I go??? handdrawn - true]
-</pre
-      >
-    </div>
-    <div class="flex">
-      <pre id="diagram" class="mermaid2">
----
-config:
-  flowchart:
-    htmlLabels: false
----
-flowchart
-      A[I am a long text, where do I go??? classic - false]
-</pre
-      >
-      <pre id="diagram" class="mermaid2">
----
-config:
-  flowchart:
-    htmlLabels: true
----
-flowchart
-      A[I am a long text, where do I go??? classic - true]
-</pre
-      >
-    </div>
-    <pre id="diagram2" class="mermaid2">
-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
-
-
-    </pre>
-
-    <pre id="diagram3" class="mermaid2">
-      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
-
-    </pre>
-
-    <pre id="diagram4" class="mermaid2">
-      stateDiagram
-    A:::foo
-    B:::bar --> C:::foobar
-    classDef foo stroke:#f00
-    classDef bar stroke:#0f0
-    style C stroke:#00f, fill:black, color:white
-
-    </pre>
+      </pre>
 
     <script type="module">
       import mermaid from './mermaid.esm.mjs';

diff --git 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)
diff --git 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',
     ],
   },
   {

diff --git a/package.json b/package.json
@@ -96,7 +96,7 @@
     "eslint-plugin-cypress": "^3.3.0",
     "eslint-plugin-html": "^8.1.1",
     "eslint-plugin-jest": "^28.6.0",
-    "eslint-plugin-jsdoc": "^48.2.9",
+    "eslint-plugin-jsdoc": "^50.0.0",
     "eslint-plugin-json": "^4.0.0",
     "eslint-plugin-lodash": "^8.0.0",
     "eslint-plugin-markdown": "^5.0.0",

diff --git 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,12 +749,12 @@ 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': 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,
@@ -837,8 +837,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/CHANGELOG.md b/packages/mermaid/CHANGELOG.md
@@ -1,5 +1,11 @@
 # mermaid
 
+## 11.1.1
+
+### Patch Changes
+
+- [#5828](https://github.com/mermaid-js/mermaid/pull/5828) [`4c43d21`](https://github.com/mermaid-js/mermaid/commit/4c43d21196f784b6f483ae635fc462329f3d176f) Thanks [@knsv](https://github.com/knsv)! - fix: Fix for issue where self-loops in the root of diagrams break the rendering
+
 ## 11.1.0
 
 ### Minor Changes

diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "11.1.0",
+  "version": "11.1.1",
   "description": "Markdown-ish syntax for generating flowcharts, mindmaps, sequence diagrams, class diagrams, gantt charts, git graphs and more.",
   "type": "module",
   "module": "./dist/mermaid.core.mjs",

diff --git 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');

diff --git a/...ges/mermaid/src/rendering-util/types.d.ts → packages/mermaid/src/rendering-util/types.ts b/...ges/mermaid/src/rendering-util/types.d.ts → 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 '../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
 }