GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-14 06:43:25 +08:00
Code Issues Projects Releases Wiki Activity

#1466 Handling line styles using the new rendering engine

Browse Source
This commit is contained in:
Knut Sveidqvist 2020-06-13 13:12:33 +02:00
parent 8492503d4f
commit 6559cfd0e1
8 changed files with 140 additions and 257 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

247
cypress/platform/current.html
View File

@ -20,223 +20,40 @@
</head> </head>
<body> <body>
<h1>info below</h1> <h1>info below</h1>
<div class="mermaid" style="width: 100%; height: 20%;"> <div class="mermaid" style="width: 50%; height: 20%;">
flowchart LR flowchart TB
user1[fa:fa-user User 1] -- edit -> folder subgraph 1
</div> A --> B;
<div class="mermaid2" style="width: 50%; height: 20%;"> A -.-> C;
flowchart LR A ==> D;
A{{A}}-- apa -->B{{B}}; A ==> E;
click A callback "Tooltip" B <--> F
click B "http://www.github.com" "This is a link" C <--> F
D <--> F
</div> E <--> F
<div class="mermaid2" style="width: 50%; height: 20%;"> end
graph LR subgraph 2
A{{A}}--apa-->B{{B}}; A2 --x B2;
A2 -.-x C2;
</div> A2 ==x D2;
<div class="mermaid2" style="width: 50%; height: 20%;"> A2 ==x E2;
stateDiagram-v2 B2 x--x F2
[*]-->TV C2 x--x F2
D2 x--x F2
state TV { E2 x--x F2
state fork_state &lt;&lt;fork&gt;&gt; end
[*] --> fork_state subgraph 3
fork_state --> State2 A3 --o B3;
fork_state --> State3 A3 -.-o C3;
A3 ==o D3;
state join_state &lt;&lt;join&gt;&gt; A3 ==o E3;
State2 --> join_state B3 o--o F3
State3 --> join_state C3 o--o F3
join_state --> State4 D3 o--o F3
State4 --> [*] E3 o--o F3
} end
</div>
<div class="mermaid2" style="width: 100%; height: 100%;">
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
</div>
<div class="mermaid2" style="width: 100%; height: 100%;">
stateDiagram-v2
[*] --> First
First --> Third
First --> sec
state First {
[*] --> fir
fir --> [*]
}
state Second {
[*] --> sec
sec --> [*]
}
state Third {
[*] --> thi
thi --> [*]
}
thi --> sec
</div>
<div class="mermaid2" style="width: 100%; height: 100%;">
flowchart TD
subgraph A
a
end
subgraph B
b
end
subgraph C
subgraph D
d
end
end
A -- oAo --o B
A --> C
</div>
<div class="mermaid2" style="width: 100%; height: 100%;">
flowchart TD
subgraph A
a
end
subgraph B
b
end
c-->A
c-->B
</div>
<div class="mermaid2" style="width: 100%; height: 100%;">
stateDiagram-v2
[*] --> First
First --> Second
First --> Third
state First {
[*] --> fir
fir --> [*]
}
state Second {
[*] --> sec
sec --> [*]
}
state Third {
[*] --> thi
thi --> [*]
}
</div>
<div class="mermaid2" style="width: 100%; height: 100%;">
stateDiagram-v2
[*]-->TV
state TV {
[*] --> Off: Off to start with
On --> Off : Turn off
Off --> On : Turn on
}
TV--> Console
state Console {
[*] --> Off2: Off to start with
On2--> Off2 : Turn off
Off2 --> On2 : Turn on
On2-->Playing
state Playing {
Alive --> Dead
Dead-->Alive
}
}
</div> </div>
<div style="display: flex;flex-direction:column;width: 100%; height: 100%">
<div class="mermaid2" style="width: 100%; height: 100%;">
stateDiagram-v2
state apa {
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
}
</div>
<div class="mermaid2" style="width: 100%; height: 100%">
flowchart TB
a --> b
subgraph id1 [Test]
a --apa--> c
b
c-->b
b-->H
end
G-->H
G-->id1
id1 --> I
I --> G
</div>
<div class="mermaid2" style="width: 100%; height: 100%">
flowchart RL
a --> b
subgraph id1 [Test]
a --apa--> c
b
c-->b
b-->H
end
G-->H
G-->id1
id1 --> I
I --> G
</div>
<div class="mermaid2" style="width: 100%; height: 100%">
flowchart RL
subgraph id1 [Test]
a
end
b-->id1
</div>
<div class="mermaid2" style="width: 100%; height: 100%">
flowchart RL
subgraph id1 [Test1]
a
end
subgraph id2 [Test2]
b
end
a --> id2
a --> b
b-->id1
id1 --> id2
</div>
new:
<div class="mermaid2" style="width: 100%; height: 100%">
flowchart LR
a <--> b
b o--o c
c x--x d
a21([In the box]) --> b2
b2((b2)) --o c2
c2(c2) --x d2 --> id1{{This is the text in the box}} --> A[(cylindrical<br />shape<br />test)]
</div>
old:
<div class="mermaid2" style="width: 100%; height: 100%">
graph LR
a((a)) --> b --> id1{{This is the text in the box}}
A[(cylindrical<br />shape<br />test)]
</div>
</div>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {

2
src/dagre-wrapper/GraphObjects.md
View File

@ -112,6 +112,8 @@ Required edgeData for proper rendering:
| label | overlap between label and labelText? | | label | overlap between label and labelText? |
| labelPos | | | labelPos | |
| labelType | overlap between label and labelText? | | labelType | overlap between label and labelText? |
| thickness | Sets the thinkess of the edge. Can be ['normal', 'thick'] |
| pattern | Sets the pattern of the edge. Can be ['solid', 'dotted', 'dashed'] |
# Markers # Markers

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

@ -191,11 +191,35 @@ export const insertEdge = function(elem, e, edge, clusterDb, diagramType, graph)
}) })
.curve(curveBasis); .curve(curveBasis);
// Contruct stroke classes based on properties
let strokeClasses;
switch (edge.thickness) {
case 'normal':
strokeClasses = 'edge-thickness-normal';
break;
case 'thick':
strokeClasses = 'edge-thickness-thick';
break;
default:
strokeClasses = '';
}
switch (edge.pattern) {
case 'solid':
strokeClasses += ' edge-pattern-solid';
break;
case 'dotted':
strokeClasses += ' edge-pattern-dotted';
break;
case 'dashed':
strokeClasses += ' edge-pattern-dashed';
break;
}
const svgPath = elem const svgPath = elem
.append('path') .append('path')
.attr('d', lineFunction(lineData)) .attr('d', lineFunction(lineData))
.attr('id', edge.id) .attr('id', edge.id)
.attr('class', 'transition' + (edge.classes ? ' ' + edge.classes : '')); .attr('class', ' ' + strokeClasses + (edge.classes ? ' ' + edge.classes : ''));
// 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 => {

70
src/dagre-wrapper/markers.js
View File

@ -17,7 +17,7 @@ const extension = (elem, type, id) => {
.append('defs') .append('defs')
.append('marker') .append('marker')
.attr('id', type + '-extensionStart') .attr('id', type + '-extensionStart')
.attr('class', 'extension ' + type) .attr('class', 'marker extension ' + type)
.attr('refX', 0) .attr('refX', 0)
.attr('refY', 7) .attr('refY', 7)
.attr('markerWidth', 190) .attr('markerWidth', 190)
@ -30,7 +30,7 @@ const extension = (elem, type, id) => {
.append('defs') .append('defs')
.append('marker') .append('marker')
.attr('id', type + '-extensionEnd ' + type) .attr('id', type + '-extensionEnd ' + type)
.attr('class', 'extension ' + type) .attr('class', 'marker extension ' + type)
.attr('refX', 19) .attr('refX', 19)
.attr('refY', 7) .attr('refY', 7)
.attr('markerWidth', 20) .attr('markerWidth', 20)
@ -45,7 +45,7 @@ const composition = (elem, type) => {
.append('defs') .append('defs')
.append('marker') .append('marker')
.attr('id', type + '-compositionStart') .attr('id', type + '-compositionStart')
.attr('class', 'extension ' + type) .attr('class', 'marker extension ' + type)
.attr('refX', 0) .attr('refX', 0)
.attr('refY', 7) .attr('refY', 7)
.attr('markerWidth', 190) .attr('markerWidth', 190)
@ -58,7 +58,7 @@ const composition = (elem, type) => {
.append('defs') .append('defs')
.append('marker') .append('marker')
.attr('id', type + '-compositionEnd') .attr('id', type + '-compositionEnd')
.attr('class', 'extension ' + type) .attr('class', 'marker extension ' + type)
.attr('refX', 19) .attr('refX', 19)
.attr('refY', 7) .attr('refY', 7)
.attr('markerWidth', 20) .attr('markerWidth', 20)
@ -72,7 +72,7 @@ const aggregation = (elem, type) => {
.append('defs') .append('defs')
.append('marker') .append('marker')
.attr('id', type + '-aggregationStart') .attr('id', type + '-aggregationStart')
.attr('class', 'extension ' + type) .attr('class', 'marker extension ' + type)
.attr('refX', 0) .attr('refX', 0)
.attr('refY', 7) .attr('refY', 7)
.attr('markerWidth', 190) .attr('markerWidth', 190)
@ -85,7 +85,7 @@ const aggregation = (elem, type) => {
.append('defs') .append('defs')
.append('marker') .append('marker')
.attr('id', type + '-aggregationEnd') .attr('id', type + '-aggregationEnd')
.attr('class', type) .attr('class', 'marker ' + type)
.attr('refX', 19) .attr('refX', 19)
.attr('refY', 7) .attr('refY', 7)
.attr('markerWidth', 20) .attr('markerWidth', 20)
@ -99,7 +99,7 @@ const dependency = (elem, type) => {
.append('defs') .append('defs')
.append('marker') .append('marker')
.attr('id', type + '-dependencyStart') .attr('id', type + '-dependencyStart')
.attr('class', 'extension ' + type) .attr('class', 'marker extension ' + type)
.attr('refX', 0) .attr('refX', 0)
.attr('refY', 7) .attr('refY', 7)
.attr('markerWidth', 190) .attr('markerWidth', 190)
@ -112,7 +112,7 @@ const dependency = (elem, type) => {
.append('defs') .append('defs')
.append('marker') .append('marker')
.attr('id', type + '-dependencyEnd') .attr('id', type + '-dependencyEnd')
.attr('class', type) .attr('class', 'marker ' + type)
.attr('refX', 19) .attr('refX', 19)
.attr('refY', 7) .attr('refY', 7)
.attr('markerWidth', 20) .attr('markerWidth', 20)
@ -125,13 +125,13 @@ const point = (elem, type) => {
elem elem
.append('marker') .append('marker')
.attr('id', type + '-pointEnd') .attr('id', type + '-pointEnd')
.attr('class', type) .attr('class', 'marker ' + type)
.attr('viewBox', '0 0 10 10') .attr('viewBox', '0 0 10 10')
.attr('refX', 10) .attr('refX', 9)
.attr('refY', 5) .attr('refY', 5)
.attr('markerUnits', 'strokeWidth') .attr('markerUnits', 'userSpaceOnUse')
.attr('markerWidth', 8) .attr('markerWidth', 12)
.attr('markerHeight', 8) .attr('markerHeight', 12)
.attr('orient', 'auto') .attr('orient', 'auto')
.append('path') .append('path')
.attr('d', 'M 0 0 L 10 5 L 0 10 z') .attr('d', 'M 0 0 L 10 5 L 0 10 z')
@ -141,13 +141,13 @@ const point = (elem, type) => {
elem elem
.append('marker') .append('marker')
.attr('id', type + '-pointStart') .attr('id', type + '-pointStart')
.attr('class', type) .attr('class', 'marker ' + type)
.attr('viewBox', '0 0 10 10') .attr('viewBox', '0 0 10 10')
.attr('refX', 0) .attr('refX', 0)
.attr('refY', 5) .attr('refY', 5)
.attr('markerUnits', 'strokeWidth') .attr('markerUnits', 'userSpaceOnUse')
.attr('markerWidth', 8) .attr('markerWidth', 12)
.attr('markerHeight', 8) .attr('markerHeight', 12)
.attr('orient', 'auto') .attr('orient', 'auto')
.append('path') .append('path')
.attr('d', 'M 0 5 L 10 10 L 10 0 z') .attr('d', 'M 0 5 L 10 10 L 10 0 z')
@ -159,13 +159,13 @@ const circle = (elem, type) => {
elem elem
.append('marker') .append('marker')
.attr('id', type + '-circleEnd') .attr('id', type + '-circleEnd')
.attr('class', type) .attr('class', 'marker ' + type)
.attr('viewBox', '0 0 10 10') .attr('viewBox', '0 0 10 10')
.attr('refX', 11) .attr('refX', 11)
.attr('refY', 5) .attr('refY', 5)
.attr('markerUnits', 'strokeWidth') .attr('markerUnits', 'userSpaceOnUse')
.attr('markerWidth', 7) .attr('markerWidth', 11)
.attr('markerHeight', 7) .attr('markerHeight', 11)
.attr('orient', 'auto') .attr('orient', 'auto')
.append('circle') .append('circle')
.attr('cx', '5') .attr('cx', '5')
@ -178,13 +178,13 @@ const circle = (elem, type) => {
elem elem
.append('marker') .append('marker')
.attr('id', type + '-circleStart') .attr('id', type + '-circleStart')
.attr('class', type) .attr('class', 'marker ' + type)
.attr('viewBox', '0 0 10 10') .attr('viewBox', '0 0 10 10')
.attr('refX', -1) .attr('refX', -1)
.attr('refY', 5) .attr('refY', 5)
.attr('markerUnits', 'strokeWidth') .attr('markerUnits', 'userSpaceOnUse')
.attr('markerWidth', 7) .attr('markerWidth', 11)
.attr('markerHeight', 7) .attr('markerHeight', 11)
.attr('orient', 'auto') .attr('orient', 'auto')
.append('circle') .append('circle')
.attr('cx', '5') .attr('cx', '5')
@ -198,16 +198,16 @@ const cross = (elem, type) => {
elem elem
.append('marker') .append('marker')
.attr('id', type + '-crossEnd') .attr('id', type + '-crossEnd')
.attr('class', type) .attr('class', 'marker cross ' + type)
.attr('viewBox', '0 0 11 11') .attr('viewBox', '0 0 11 11')
.attr('refX', 12) .attr('refX', 12)
.attr('refY', 5.2) .attr('refY', 5.2)
.attr('markerUnits', 'strokeWidth') .attr('markerUnits', 'userSpaceOnUse')
.attr('markerWidth', 7) .attr('markerWidth', 11)
.attr('markerHeight', 7) .attr('markerHeight', 11)
.attr('orient', 'auto') .attr('orient', 'auto')
.append('path') .append('path')
.attr('stroke', 'black') // .attr('stroke', 'black')
.attr('d', 'M 1,1 l 9,9 M 10,1 l -9,9') .attr('d', 'M 1,1 l 9,9 M 10,1 l -9,9')
.attr('class', 'arrowMarkerPath') .attr('class', 'arrowMarkerPath')
.style('stroke-width', 2) .style('stroke-width', 2)
@ -216,16 +216,16 @@ const cross = (elem, type) => {
elem elem
.append('marker') .append('marker')
.attr('id', type + '-crossStart') .attr('id', type + '-crossStart')
.attr('class', type) .attr('class', 'marker cross ' + type)
.attr('viewBox', '0 0 11 11') .attr('viewBox', '0 0 11 11')
.attr('refX', -1) .attr('refX', -1)
.attr('refY', 5.2) .attr('refY', 5.2)
.attr('markerUnits', 'strokeWidth') .attr('markerUnits', 'userSpaceOnUse')
.attr('markerWidth', 7) .attr('markerWidth', 11)
.attr('markerHeight', 7) .attr('markerHeight', 11)
.attr('orient', 'auto') .attr('orient', 'auto')
.append('path') .append('path')
.attr('stroke', 'black') // .attr('stroke', 'black')
.attr('d', 'M 1,1 l 9,9 M 10,1 l -9,9') .attr('d', 'M 1,1 l 9,9 M 10,1 l -9,9')
.attr('class', 'arrowMarkerPath') .attr('class', 'arrowMarkerPath')
.style('stroke-width', 2) .style('stroke-width', 2)

10
src/diagrams/flowchart/flowRenderer-v2.js
View File

@ -217,12 +217,16 @@ export const addEdges = function(edges, g) {
if (typeof defaultLabelStyle !== 'undefined') { if (typeof defaultLabelStyle !== 'undefined') {
labelStyle = defaultLabelStyle; labelStyle = defaultLabelStyle;
} }
edgeData.thickness = 'normal';
edgeData.pattern = 'solid';
break; break;
case 'dotted': case 'dotted':
style = 'fill:none;stroke-width:2px;stroke-dasharray:3;'; edgeData.thickness = 'normal';
edgeData.pattern = 'dotted';
break; break;
case 'thick': case 'thick':
style = ' stroke-width: 3.5px;fill:none'; edgeData.thickness = 'thick';
edgeData.pattern = 'solid';
break; break;
} }
} }
@ -262,7 +266,7 @@ export const addEdges = function(edges, g) {
} }
edgeData.id = linkId; edgeData.id = linkId;
edgeData.class = linkNameStart + ' ' + linkNameEnd; edgeData.classes = 'flowchart-link ' + linkNameStart + ' ' + linkNameEnd;
// Add the edge to the graph // Add the edge to the graph
g.setEdge(edge.start, edge.end, edgeData, cnt); g.setEdge(edge.start, edge.end, edgeData, cnt);

7
src/diagrams/state/stateRenderer-v2.js
View File

@ -148,7 +148,8 @@ const setupNode = (g, parent, node, altFlag) => {
classes: 'note-edge', classes: 'note-edge',
arrowheadStyle: 'fill: #333', arrowheadStyle: 'fill: #333',
labelpos: 'c', labelpos: 'c',
labelType: 'text' labelType: 'text',
thickness: 'normal'
}); });
} else { } else {
g.setNode(node.id, nodeData); g.setNode(node.id, nodeData);
@ -184,7 +185,9 @@ const setupDoc = (g, parent, doc, altFlag) => {
label: item.description, label: item.description,
arrowheadStyle: 'fill: #333', arrowheadStyle: 'fill: #333',
labelpos: 'c', labelpos: 'c',
labelType: 'text' labelType: 'text',
thickness: 'normal',
classes: 'transition'
}; };
let startId = item.state1.id; let startId = item.state1.id;
let endId = item.state2.id; let endId = item.state2.id;

5
src/themes/flowchart.scss
View File

@ -34,6 +34,11 @@
stroke-width: 1.5px; stroke-width: 1.5px;
} }
.flowchart-link {
stroke: $lineColor;
fill: none;
}
.edgeLabel { .edgeLabel {
background-color: $edgeLabelBackground; background-color: $edgeLabelBackground;
rect { rect {

30
src/themes/mermaid.scss
View File

@ -17,10 +17,38 @@
// --mermaid-alt-font-family: '"Lucida Console", Monaco, monospace'; // --mermaid-alt-font-family: '"Lucida Console", Monaco, monospace';
} }
/* Classes common for multiple diagrams */
.error-icon { .error-icon {
fill: $errorBkgColor; fill: $errorBkgColor;
} }
.error-text { .error-text {
fill: $errorTextColor; fill: $errorTextColor;
stroke: $errorTextColor; stroke: $errorTextColor;
} }
.edge-thickness-normal {
// stroke: $lineColor;
stroke-width: 2px;
}
.edge-thickness-thick {
// stroke: $lineColor;
stroke-width: 3.5px
}
.edge-pattern-solid {
stroke-dasharray: 0;
}
.edge-pattern-dashed{
stroke-dasharray: 3;
}
.edge-pattern-dotted {
stroke-dasharray: 2;
}
.marker {
fill: $lineColor;
}
.marker.cross {
stroke: $lineColor;
}