Skip to content

Commit 4887e97

Browse files
sjackson0109sjackson0109
committed
chore: add changeset, regression test, and Cypress tests for subgraph direction (issue #4648)
1 parent ade3045 commit 4887e97

3 files changed

Lines changed: 148 additions & 0 deletions

File tree

‎.changeset/fix-4648-subgraph-direction.md‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
---
2+
'mermaid': patch
3+
---
4+
5+
fix(flowchart): respect per-subgraph direction keyword in Dagre layout
6+
7+
Subgraphs with an explicit `direction` keyword (e.g. `direction LR`) now
8+
trigger a separate cluster sub-layout, restoring the intended visual direction
9+
for that group. Previously the cluster-extraction predicate used
10+
`!externalConnections`, which caused subgraphs with external edges to silently
11+
inherit the top-level `rankdir` even when the user had specified a different
12+
direction.
13+
14+
**Behavior change:**
15+
16+
- **Old:** A separate cluster graph was created for any subgraph that had
17+
children and no external connections (`!externalConnections && hasChildren`).
18+
Subgraphs with external edges always inherited the parent direction.
19+
- **New:** A separate cluster graph is created only when the user has
20+
explicitly set a `direction` keyword on the subgraph
21+
(`clusterData?.dir && hasChildren`). Subgraphs without an explicit
22+
`direction` now inherit the parent `rankdir` (previously they defaulted to
23+
the opposite of the parent direction).
24+
25+
Also normalises `direction TD` to `direction TB` inside `addSubGraph` to match
26+
the existing top-level normalisation in `setDirection`, fixing the
27+
"`direction TD` doesn't work inside subgraphs" complaint in #4648.
28+
29+
Fixes #4648
30+
See also #6785

‎cypress/integration/rendering/flowchart/flowchart-v2.spec.js‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -351,6 +351,55 @@ end
351351
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
352352
);
353353
});
354+
it('issue-4648: sibling subgraphs with different directions and external connections', () => {
355+
imgSnapshotTest(
356+
`flowchart TD
357+
358+
subgraph Group1
359+
direction TB
360+
A1 --> A2
361+
A2 --> A3
362+
end
363+
364+
subgraph Group2
365+
direction LR
366+
B1 --> B2
367+
B2 --> B3
368+
end
369+
370+
subgraph Group3
371+
direction LR
372+
C1 --> C2
373+
C2 --> C3
374+
end
375+
376+
%% External connections between subgraphs
377+
A3 --- B1
378+
B3 --- C1
379+
`,
380+
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
381+
);
382+
});
383+
384+
it('issue-4648: nested subgraph with external connection', () => {
385+
imgSnapshotTest(
386+
`flowchart TD
387+
388+
subgraph Wrapper
389+
direction LR
390+
subgraph Inner
391+
D1 --> D2
392+
D2 --> D3
393+
end
394+
end
395+
396+
%% External connection to nested subgraph
397+
D3 --- E1
398+
`,
399+
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
400+
);
401+
});
402+
354403
it('57.x: handle nested subgraphs with outgoing links 5', () => {
355404
imgSnapshotTest(
356405
`%% this does not produce the desired result

‎cypress/platform/regression/issue-4648.html‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Mermaid Subgraph Direction Test (Issue #4648)</title>
6+
<script type="module" src="/demos/render-mermaid.js"></script>
7+
<style>
8+
body {
9+
font-family: sans-serif;
10+
margin: 2em;
11+
}
12+
.mermaid {
13+
background: #fff;
14+
border: 1px solid #ccc;
15+
margin: 2em 0;
16+
padding: 1em;
17+
}
18+
</style>
19+
</head>
20+
<body>
21+
<h1>Mermaid Subgraph Direction Test (Issue #4648)</h1>
22+
<p>This page demonstrates various subgraph direction scenarios for regression testing.</p>
23+
24+
<h2>Sibling Subgraphs with Different Directions</h2>
25+
<pre class="mermaid">
26+
flowchart TD
27+
28+
subgraph Group1
29+
direction TB
30+
A1 --> A2
31+
A2 --> A3
32+
end
33+
34+
subgraph Group2
35+
direction LR
36+
B1 --> B2
37+
B2 --> B3
38+
end
39+
40+
subgraph Group3
41+
direction LR
42+
C1 --> C2
43+
C2 --> C3
44+
end
45+
46+
%% External connections between subgraphs
47+
A3 --- B1
48+
B3 --- C1
49+
</pre
50+
>
51+
52+
<h2>Nested Subgraph with External Connections</h2>
53+
<pre class="mermaid">
54+
flowchart TD
55+
56+
subgraph Wrapper
57+
direction LR
58+
subgraph Inner
59+
D1 --> D2
60+
D2 --> D3
61+
end
62+
end
63+
64+
%% External connection to nested subgraph
65+
D3 --- E1
66+
</pre
67+
>
68+
</body>
69+
</html>

0 commit comments

Comments
 (0)