diff --git a/.changeset/four-baboons-rescue.md b/.changeset/four-baboons-rescue.md
new file mode 100644
index 0000000000..a76cbadeb6
--- /dev/null
+++ b/.changeset/four-baboons-rescue.md
@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Fix for issue where self-loops in the root of diagrams break the rendering
diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js
index 452cdb5a00..66452f4b2f 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,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
index a3cbf60bfc..80406b9391 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -83,8 +83,7 @@
-
-
+
---
title: hello2
config:
@@ -243,115 +242,7 @@
-
-
----
- 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
- }
- }
-
-
-
-
----
- 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
-
-
+