marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-18 15:56:43 +02:00
Code Issues Packages Projects Releases Wiki Activity

#1751 apply style settings to subgraphs in "flowchart" diagrams

Browse Source
This commit is contained in:
Marc Faber
2020-11-17 23:18:11 +01:00
parent a0e5ec1d13
commit a16bbb8046
5 changed files with 42 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -371,6 +371,38 @@ flowchart TD
{htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'} {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
); );
}); });
it('62: should render styled subgraphs', () => {
imgSnapshotTest(
`
flowchart TB
A
B
subgraph foo[Foo SubGraph]
C
D
end
subgraph bar[Bar SubGraph]
E
F
end
G
A-->B
B-->C
C-->D
B-->D
D-->E
E-->A
E-->F
F-->D
F-->G
B-->G
G-->D
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
`,
{htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
);
});
}); });

4
cypress/integration/rendering/flowchart.spec.js
View File

@@ -234,8 +234,8 @@ describe('Flowchart', () => {
B-->G B-->G
G-->D G-->D
style foo fill:#F99,stroke-width:2px,stroke:#F0F style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
style bar fill:#999,stroke-width:10px,stroke:#0F0 style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
`, `,
{ fontFamily: 'courier' } { fontFamily: 'courier' }
); );

8
dist/flowchart.html vendored
View File

@@ -501,8 +501,8 @@
B-->G B-->G
G-->D G-->D
style foo fill:#F99,stroke-width:2px,stroke:#F0F style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
style bar fill:#999,stroke-width:10px,stroke:#0F0 style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
</div> </div>
<h3>flowchart</h3> <h3>flowchart</h3>
@@ -532,8 +532,8 @@
B-->G B-->G
G-->D G-->D
style foo fill:#F99,stroke-width:2px,stroke:#F0F style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
style bar fill:#999,stroke-width:10px,stroke:#0F0 style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
</div> </div>
<hr/> <hr/>

4
dist/index.html vendored
View File

@@ -293,8 +293,8 @@ graph TB
B-->G B-->G
G-->D G-->D
style foo fill:#F99,stroke-width:2px,stroke:#F0F style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
style bar fill:#999,stroke-width:10px,stroke:#0F0 style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
</div> </div>
<div class="mermaid"> <div class="mermaid">
graph LR graph LR

3
src/dagre-wrapper/clusters.js
View File

@@ -40,6 +40,7 @@ const rect = (parent, node) => {
log.trace('Data ', node, JSON.stringify(node)); log.trace('Data ', node, JSON.stringify(node));
// center the rect around its coordinate // center the rect around its coordinate
rect rect
.attr('style', node.style)
.attr('rx', node.rx) .attr('rx', node.rx)
.attr('ry', node.ry) .attr('ry', node.ry)
.attr('x', node.x - node.width / 2 - halfPadding) .attr('x', node.x - node.width / 2 - halfPadding)
@@ -53,7 +54,7 @@ const rect = (parent, node) => {
'translate(' + 'translate(' +
(node.x - bbox.width / 2) + (node.x - bbox.width / 2) +
', ' + ', ' +
(node.y - node.height / 2 - node.padding / 3 + 3) + (node.y - node.height / 2 + node.padding / 3) +
')' ')'
); );