marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-15 13:29:40 +02:00
Code Issues Packages Projects Releases Wiki Activity

Browse Source
This commit is contained in:
Knut Sveidqvist
2020-10-15 17:37:16 +02:00
parent 35deb4a512
commit 4812437519
4 changed files with 28 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
cypress/platform/knsv.html
View File

@@ -22,29 +22,33 @@
<body> <body>
<h1>info below</h1> <h1>info below</h1>
<div class="flex"> <div class="flex">
<div class="mermaid2" style="width: 50%; height: 400px;"> <div class="mermaid" style="width: 50%; height: 400px;">
flowchart TD graph TD
subgraph main A[Christmas] -->|Get money| B(Go shopping)
subgraph subcontainer subgraph T ["Test"]
subcontainer-child A
end B
subcontainer-child--> subcontainer-sibling
end end
classDef Test fill:#F84E68,stroke:#333,color:white;
class A,T Test
classDef TestSub fill:green;
class T TestSub
linkStyle 0 color:orange, stroke: orange;
</div> </div>
<div class="mermaid" style="width: 50%; height: 400px;"> <div class="mermaid" style="width: 50%; height: 400px;">
flowchart TB flowchart TD
b-->B A[Christmas] -->|Get money| B(Go shopping)
a-->c subgraph T ["Test"]
subgraph B A
c B
end end
subgraph A classDef Test fill:#F84E68,stroke:#333,color:white;
a class A,T Test
b classDef TestSub fill:green;
B class T TestSub
end linkStyle 0 color:orange, stroke: orange;
</div> </div>
<div class="mermaid" style="width: 50%; height: 20%;"> <div class="mermaid2" style="width: 50%; height: 20%;">
flowchart TB flowchart TB
subgraph A subgraph A
a -->b a -->b

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

@@ -10,7 +10,7 @@ const rect = (parent, node) => {
// Add outer g element // Add outer g element
const shapeSvg = parent const shapeSvg = parent
.insert('g') .insert('g')
.attr('class', 'cluster') .attr('class', 'cluster' + (node.class ? ' ' + node.class : ''))
.attr('id', node.id); .attr('id', node.id);
// add the rect // add the rect

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

@@ -86,7 +86,8 @@ const createLabel = (_vertexText, style, isTitle, isNode) => {
label: vertexText.replace( label: vertexText.replace(
/fa[lrsb]?:fa-[\w-]+/g, /fa[lrsb]?:fa-[\w-]+/g,
s => `<i class='${s.replace(':', ' ')}'></i>` s => `<i class='${s.replace(':', ' ')}'></i>`
) ),
labelStyle: style.replace('fill:', 'color:')
}; };
let vertexNode = addHtmlLabel(node); let vertexNode = addHtmlLabel(node);
// vertexNode.parentNode.removeChild(vertexNode); // vertexNode.parentNode.removeChild(vertexNode);

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

@@ -387,7 +387,8 @@ export const insertEdge = function(elem, e, edge, clusterDb, diagramType, graph)
.append('path') .append('path')
.attr('d', lineFunction(lineData)) .attr('d', lineFunction(lineData))
.attr('id', edge.id) .attr('id', edge.id)
.attr('class', ' ' + strokeClasses + (edge.classes ? ' ' + edge.classes : '')); .attr('class', ' ' + strokeClasses + (edge.classes ? ' ' + edge.classes : ''))
.attr('style', edge.style);
// DEBUG code, adds a red circle at each edge coordinate // DEBUG code, adds a red circle at each edge coordinate
// edge.points.forEach(point => { // edge.points.forEach(point => {