GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-28 07:03:17 +08:00
Code Issues Projects Releases Wiki Activity

Fix for issues with self loops

Browse Source
This commit is contained in:
Knut Sveidqvist 2024-09-05 16:40:59 +02:00
parent 1d5f7ce08f
commit 6507624232
3 changed files with 107 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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 } },
}
);
});
});
});

100
cypress/platform/knsv2.html
View File

@ -84,7 +84,7 @@
<body>
<div class="flex">
<pre id="diagram" class="mermaid">
<pre id="diagram" class="mermaid2">
---
title: hello2
config:
@ -244,30 +244,98 @@ stateDiagram-v2
</pre>
<pre id="diagram" class="mermaid2">
---
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
</pre>
<pre id="diagram" class="mermaid2">
---
title: hello2
config:
look: handDrawn
layout: dagre
elk:
nodePlacementStrategy: BRANDES_KOEPF
<!-- nodePlacementStrategy: SIMPLE -->
---
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])
</pre
>
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
</pre>
<pre id="diagram" class="mermaid2">
---
title: hello2

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.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');