GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-02-04 07:13:25 +08:00
Code Issues Projects Releases Wiki Activity

Merge pull request #5828 from mermaid-js/hotfix/5827-self-loops

Browse Source 
Hotfix/5827 self loops
This commit is contained in:
Ashish Jain 2024-09-06 19:16:08 +02:00 committed by GitHub
commit 145acd0ee4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 35 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/four-baboons-rescue.md Normal file
View File

@ -0,0 +1,5 @@
---
'mermaid': patch
---
fix: Fix for issue where self-loops in the root of diagrams break the rendering

25
cypress/integration/rendering/flowchart-v2.spec.js
View File

@ -786,7 +786,7 @@ A ~~~ B
`--- `---
title: Subgraph nodeSpacing and rankSpacing example title: Subgraph nodeSpacing and rankSpacing example
config: config:
flowchart: flowchart:
nodeSpacing: 250 nodeSpacing: 250
rankSpacing: 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 } },
}
);
});
}); });
}); });

113
cypress/platform/knsv2.html
View File

@ -83,8 +83,7 @@
</head> </head>
<body> <body>
<div class="flex"> <pre id="diagram" class="mermaid">
<pre id="diagram" class="mermaid">
--- ---
title: hello2 title: hello2
config: config:
@ -243,115 +242,7 @@ stateDiagram-v2
</pre> </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>
<script type="module"> <script type="module">
import mermaid from './mermaid.esm.mjs'; import mermaid from './mermaid.esm.mjs';

6
packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js
View File

@ -349,8 +349,10 @@ export const render = async (data4Layout, svg) => {
edgeMid.arrowTypeEnd = 'none'; edgeMid.arrowTypeEnd = 'none';
edgeMid.id = nodeId + '-cyclic-special-mid'; edgeMid.id = nodeId + '-cyclic-special-mid';
edge2.label = ''; edge2.label = '';
edge1.fromCluster = nodeId; if (node.isGroup) {
edge2.toCluster = nodeId; edge1.fromCluster = nodeId;
edge2.toCluster = nodeId;
}
edge2.id = nodeId + '-cyclic-special-2'; edge2.id = nodeId + '-cyclic-special-2';
graph.setEdge(nodeId, specialId1, edge1, nodeId + '-cyclic-special-0'); graph.setEdge(nodeId, specialId1, edge1, nodeId + '-cyclic-special-0');
graph.setEdge(specialId1, specialId2, edgeMid, nodeId + '-cyclic-special-1'); graph.setEdge(specialId1, specialId2, edgeMid, nodeId + '-cyclic-special-1');