Merge branch 'develop' of https://github.com/mermaid-js/mermaid into saurabh/image-shape

2025-08-15 06:19:24 +02:00 · 2024-09-09 11:24:28 +05:30
parent 95bd5dfdab cc61629a8c
commit ec29f749af
17 changed files with 126 additions and 147 deletions
--- a/.github/workflows/release-preview.yml
+++ b/.github/workflows/release-preview.yml
@@ -0,0 +1,42 @@
+name: Preview release
+
+on:
+  pull_request:
+    branches: [develop]
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.number }}
+  cancel-in-progress: true
+
+permissions:
+  contents: read
+  actions: write
+
+jobs:
+  preview:
+    if: ${{ github.repository_owner == 'mermaid-js' }}
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      id-token: write
+      issues: write
+      pull-requests: write
+    name: Publish preview release
+    timeout-minutes: 5
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@f43a0e5ff2bd294095638e18286ca9a3d1956744 # v3.6.0
+
+      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
+        with:
+          cache: pnpm
+          node-version-file: '.node-version'
+
+      - name: Install Packages
+        run: pnpm install --frozen-lockfile
+
+      - name: Publish packages
+        run: pnpx pkg-pr-new publish --pnpm './packages/*'
--- a/3
+++ b/3
@@ -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
--- 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 } },
+        }
+      );
+    });
  });
 });
--- 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 @@ stateDiagram-v2



-</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';
--- 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)
--- a/docs/ecosystem/integrations-community.md
+++ b/docs/ecosystem/integrations-community.md
@@ -145,7 +145,7 @@ Communication tools and platforms
  - [Mermaid Extension](https://www.mediawiki.org/wiki/Extension:Mermaid)
 - [PmWiki](https://www.pmwiki.org)
  - [MermaidJs Cookbook recipe](https://www.pmwiki.org/wiki/Cookbook/MermaidJs)
- [Semantic Media Wiki](https://semantic-mediawiki.org)
+- [Semantic Media Wiki](https://www.semantic-mediawiki.org)
  - [Mermaid Plugin](https://github.com/SemanticMediaWiki/Mermaid)
 - [TiddlyWiki](https://tiddlywiki.com/)
  - [mermaid-tw5: wrapper for Mermaid Live](https://github.com/efurlanm/mermaid-tw5)
--- a/docs/news/blog.md
+++ b/docs/news/blog.md
@@ -6,6 +6,12 @@

 # Blog

+## [Introducing Architecture Diagrams in Mermaid](https://www.mermaidchart.com/blog/posts/mermaid-supports-architecture-diagrams/)
+
+2 September 2024 · 2 mins
+
+Discover the fresh new and unique Neo and Hand-Drawn looks for Mermaid Diagrams, while still offering the classic look you love.
+
 ## [Mermaid v11 is out!](https://www.mermaidchart.com/blog/posts/mermaid-v11/)

 23 August 2024 · 2 mins
--- 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',
    ],
  },
  {
--- 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",
--- 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',
        };
      }
--- 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
--- 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",
--- a/packages/mermaid/src/docs/ecosystem/integrations-community.md
+++ b/packages/mermaid/src/docs/ecosystem/integrations-community.md
@@ -140,7 +140,7 @@ Communication tools and platforms
  - [Mermaid Extension](https://www.mediawiki.org/wiki/Extension:Mermaid)
 - [PmWiki](https://www.pmwiki.org)
  - [MermaidJs Cookbook recipe](https://www.pmwiki.org/wiki/Cookbook/MermaidJs)
- [Semantic Media Wiki](https://semantic-mediawiki.org)
+- [Semantic Media Wiki](https://www.semantic-mediawiki.org)
  - [Mermaid Plugin](https://github.com/SemanticMediaWiki/Mermaid)
 - [TiddlyWiki](https://tiddlywiki.com/)
  - [mermaid-tw5: wrapper for Mermaid Live](https://github.com/efurlanm/mermaid-tw5)
--- a/packages/mermaid/src/docs/news/blog.md
+++ b/packages/mermaid/src/docs/news/blog.md
@@ -1,5 +1,11 @@
 # Blog

+## [Introducing Architecture Diagrams in Mermaid](https://www.mermaidchart.com/blog/posts/mermaid-supports-architecture-diagrams/)
+
+2 September 2024 · 2 mins
+
+Discover the fresh new and unique Neo and Hand-Drawn looks for Mermaid Diagrams, while still offering the classic look you love.
+
 ## [Mermaid v11 is out!](https://www.mermaidchart.com/blog/posts/mermaid-v11/)

 23 August 2024 · 2 mins
--- 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');
--- a/packages/mermaid/src/rendering-util/types.d.ts
+++ b/packages/mermaid/src/rendering-util/types.d.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;
@@ -71,7 +70,7 @@ interface Node {
 }

 // Common properties for any edge in the system
-interface Edge {
+export interface Edge {
  id: string;
  label?: string;
  classes?: string;
@@ -101,7 +100,7 @@ interface Edge {
  look?: string;
 }

-interface RectOptions {
+export interface RectOptions {
  rx: number;
  ry: number;
  labelPaddingX: number;
@@ -110,7 +109,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
 }

--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -111,8 +111,8 @@ importers:
        specifier: ^28.6.0
        version: 28.7.0(@typescript-eslint/eslint-plugin@8.0.1(@typescript-eslint/parser@8.0.1(eslint@9.8.0)(typescript@5.4.5))(eslint@9.8.0)(typescript@5.4.5))(eslint@9.8.0)(jest@29.7.0(@types/node@20.16.2))(typescript@5.4.5)
      eslint-plugin-jsdoc:
-        specifier: ^48.2.9
-        version: 48.11.0(eslint@9.8.0)
+        specifier: ^50.0.0
+        version: 50.2.2(eslint@9.8.0)
      eslint-plugin-json:
        specifier: ^4.0.0
        version: 4.0.1
@@ -1810,8 +1810,8 @@ packages:
  '@emnapi/runtime@1.2.0':
    resolution: {integrity: sha512-bV21/9LQmcQeCPEg3BDFtvwL6cwiTMksYNWQQ4KOxCZikEGalWtenoZ0wCiukJINlGCIi2KXx01g4FoH/LxpzQ==}

-  '@es-joy/jsdoccomment@0.46.0':
-    resolution: {integrity: sha512-C3Axuq1xd/9VqFZpW4YAzOx5O9q/LP46uIQy/iNDpHG3fmPa6TBtvfglMCs3RBiBxAIi0Go97r8+jvTt55XMyQ==}
+  '@es-joy/jsdoccomment@0.48.0':
+    resolution: {integrity: sha512-G6QUWIcC+KvSwXNsJyDTHvqUdNoAVJPPgkc3+Uk4WBKqZvoXhlvazOgm9aL0HwihJLQf0l+tOE2UFzXBqCqgDw==}
    engines: {node: '>=16'}

  '@esbuild/aix-ppc64@0.21.5':
@@ -4952,8 +4952,8 @@ packages:
      jest:
        optional: true

-  eslint-plugin-jsdoc@48.11.0:
-    resolution: {integrity: sha512-d12JHJDPNo7IFwTOAItCeJY1hcqoIxE0lHA8infQByLilQ9xkqrRa6laWCnsuCrf+8rUnvxXY1XuTbibRBNylA==}
+  eslint-plugin-jsdoc@50.2.2:
+    resolution: {integrity: sha512-i0ZMWA199DG7sjxlzXn5AeYZxpRfMJjDPUl7lL9eJJX8TPRoIaxJU4ys/joP5faM5AXE1eqW/dslCj3uj4Nqpg==}
    engines: {node: '>=18'}
    peerDependencies:
      eslint: ^7.0.0 || ^8.0.0 || ^9.0.0
@@ -6268,8 +6268,8 @@ packages:
  jsbn@0.1.1:
    resolution: {integrity: sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg==}

-  jsdoc-type-pratt-parser@4.0.0:
-    resolution: {integrity: sha512-YtOli5Cmzy3q4dP26GraSOeAhqecewG04hoO8DY56CH4KJ9Fvv5qKWUCCo3HZob7esJQHCv6/+bnTy72xZZaVQ==}
+  jsdoc-type-pratt-parser@4.1.0:
+    resolution: {integrity: sha512-Hicd6JK5Njt2QB6XYFS7ok9e37O8AYk3jTcppG4YVQnYjOemymvTcmc7OWsmq/Qqj5TdRFO5/x/tIPmBeRtGHg==}
    engines: {node: '>=12.0.0'}

  jsdom@24.1.3:
@@ -11011,11 +11011,11 @@ snapshots:
      tslib: 2.7.0
    optional: true

-  '@es-joy/jsdoccomment@0.46.0':
+  '@es-joy/jsdoccomment@0.48.0':
    dependencies:
      comment-parser: 1.4.1
      esquery: 1.6.0
-      jsdoc-type-pratt-parser: 4.0.0
+      jsdoc-type-pratt-parser: 4.1.0

  '@esbuild/aix-ppc64@0.21.5':
    optional: true
@@ -14589,9 +14589,9 @@ snapshots:
      - supports-color
      - typescript

-  eslint-plugin-jsdoc@48.11.0(eslint@9.8.0):
+  eslint-plugin-jsdoc@50.2.2(eslint@9.8.0):
    dependencies:
-      '@es-joy/jsdoccomment': 0.46.0
+      '@es-joy/jsdoccomment': 0.48.0
      are-docs-informative: 0.0.2
      comment-parser: 1.4.1
      debug: 4.3.6(supports-color@8.1.1)
@@ -16242,7 +16242,7 @@ snapshots:

  jsbn@0.1.1: {}

-  jsdoc-type-pratt-parser@4.0.0: {}
+  jsdoc-type-pratt-parser@4.1.0: {}

  jsdom@24.1.3:
    dependencies: