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>
<body>
<h1>info below</h1>
<div class="mermaid" style="width: 100%; height: 20%;">
flowchart LR
user1[fa:fa-user User 1] -- edit -> folder
</div>
<div class="mermaid2" style="width: 50%; height: 20%;">
flowchart LR
A{{A}}-- apa -->B{{B}};
click A callback "Tooltip"
click B "http://www.github.com" "This is a link"
</div>
<div class="mermaid2" style="width: 50%; height: 20%;">
graph LR
A{{A}}--apa-->B{{B}};
</div>
<div class="mermaid2" style="width: 50%; height: 20%;">
stateDiagram-v2
[*]-->TV
state TV {
state fork_state &lt;&lt;fork&gt;&gt;
[*] --> fork_state
fork_state --> State2
fork_state --> State3
state join_state &lt;&lt;join&gt;&gt;
State2 --> join_state
State3 --> join_state
join_state --> State4
State4 --> [*]
}
</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 class="mermaid" style="width: 50%; height: 20%;">
flowchart TB
subgraph 1
A --> B;
A -.-> C;
A ==> D;
A ==> E;
B <--> F
C <--> F
D <--> F
E <--> F
end
subgraph 2
A2 --x B2;
A2 -.-x C2;
A2 ==x D2;
A2 ==x E2;
B2 x--x F2
C2 x--x F2
D2 x--x F2
E2 x--x F2
end
subgraph 3
A3 --o B3;
A3 -.-o C3;
A3 ==o D3;
A3 ==o E3;
B3 o--o F3
C3 o--o F3
D3 o--o F3
E3 o--o F3
end
</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>
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? |
| labelPos | |
| 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

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

@ -191,11 +191,35 @@ export const insertEdge = function(elem, e, edge, clusterDb, diagramType, graph)
})
.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
.append('path')
.attr('d', lineFunction(lineData))
.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
// edge.points.forEach(point => {

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

@ -17,7 +17,7 @@ const extension = (elem, type, id) => {
.append('defs')
.append('marker')
.attr('id', type + '-extensionStart')
.attr('class', 'extension ' + type)
.attr('class', 'marker extension ' + type)
.attr('refX', 0)
.attr('refY', 7)
.attr('markerWidth', 190)
@ -30,7 +30,7 @@ const extension = (elem, type, id) => {
.append('defs')
.append('marker')
.attr('id', type + '-extensionEnd ' + type)
.attr('class', 'extension ' + type)
.attr('class', 'marker extension ' + type)
.attr('refX', 19)
.attr('refY', 7)
.attr('markerWidth', 20)
@ -45,7 +45,7 @@ const composition = (elem, type) => {
.append('defs')
.append('marker')
.attr('id', type + '-compositionStart')
.attr('class', 'extension ' + type)
.attr('class', 'marker extension ' + type)
.attr('refX', 0)
.attr('refY', 7)
.attr('markerWidth', 190)
@ -58,7 +58,7 @@ const composition = (elem, type) => {
.append('defs')
.append('marker')
.attr('id', type + '-compositionEnd')
.attr('class', 'extension ' + type)
.attr('class', 'marker extension ' + type)
.attr('refX', 19)
.attr('refY', 7)
.attr('markerWidth', 20)
@ -72,7 +72,7 @@ const aggregation = (elem, type) => {
.append('defs')
.append('marker')
.attr('id', type + '-aggregationStart')
.attr('class', 'extension ' + type)
.attr('class', 'marker extension ' + type)
.attr('refX', 0)
.attr('refY', 7)
.attr('markerWidth', 190)
@ -85,7 +85,7 @@ const aggregation = (elem, type) => {
.append('defs')
.append('marker')
.attr('id', type + '-aggregationEnd')
.attr('class', type)
.attr('class', 'marker ' + type)
.attr('refX', 19)
.attr('refY', 7)
.attr('markerWidth', 20)
@ -99,7 +99,7 @@ const dependency = (elem, type) => {
.append('defs')
.append('marker')
.attr('id', type + '-dependencyStart')
.attr('class', 'extension ' + type)
.attr('class', 'marker extension ' + type)
.attr('refX', 0)
.attr('refY', 7)
.attr('markerWidth', 190)
@ -112,7 +112,7 @@ const dependency = (elem, type) => {
.append('defs')
.append('marker')
.attr('id', type + '-dependencyEnd')
.attr('class', type)
.attr('class', 'marker ' + type)
.attr('refX', 19)
.attr('refY', 7)
.attr('markerWidth', 20)
@ -125,13 +125,13 @@ const point = (elem, type) => {
elem
.append('marker')
.attr('id', type + '-pointEnd')
.attr('class', type)
.attr('class', 'marker ' + type)
.attr('viewBox', '0 0 10 10')
.attr('refX', 10)
.attr('refX', 9)
.attr('refY', 5)
.attr('markerUnits', 'strokeWidth')
.attr('markerWidth', 8)
.attr('markerHeight', 8)
.attr('markerUnits', 'userSpaceOnUse')
.attr('markerWidth', 12)
.attr('markerHeight', 12)
.attr('orient', 'auto')
.append('path')
.attr('d', 'M 0 0 L 10 5 L 0 10 z')
@ -141,13 +141,13 @@ const point = (elem, type) => {
elem
.append('marker')
.attr('id', type + '-pointStart')
.attr('class', type)
.attr('class', 'marker ' + type)
.attr('viewBox', '0 0 10 10')
.attr('refX', 0)
.attr('refY', 5)
.attr('markerUnits', 'strokeWidth')
.attr('markerWidth', 8)
.attr('markerHeight', 8)
.attr('markerUnits', 'userSpaceOnUse')
.attr('markerWidth', 12)
.attr('markerHeight', 12)
.attr('orient', 'auto')
.append('path')
.attr('d', 'M 0 5 L 10 10 L 10 0 z')
@ -159,13 +159,13 @@ const circle = (elem, type) => {
elem
.append('marker')
.attr('id', type + '-circleEnd')
.attr('class', type)
.attr('class', 'marker ' + type)
.attr('viewBox', '0 0 10 10')
.attr('refX', 11)
.attr('refY', 5)
.attr('markerUnits', 'strokeWidth')
.attr('markerWidth', 7)
.attr('markerHeight', 7)
.attr('markerUnits', 'userSpaceOnUse')
.attr('markerWidth', 11)
.attr('markerHeight', 11)
.attr('orient', 'auto')
.append('circle')
.attr('cx', '5')
@ -178,13 +178,13 @@ const circle = (elem, type) => {
elem
.append('marker')
.attr('id', type + '-circleStart')
.attr('class', type)
.attr('class', 'marker ' + type)
.attr('viewBox', '0 0 10 10')
.attr('refX', -1)
.attr('refY', 5)
.attr('markerUnits', 'strokeWidth')
.attr('markerWidth', 7)
.attr('markerHeight', 7)
.attr('markerUnits', 'userSpaceOnUse')
.attr('markerWidth', 11)
.attr('markerHeight', 11)
.attr('orient', 'auto')
.append('circle')
.attr('cx', '5')
@ -198,16 +198,16 @@ const cross = (elem, type) => {
elem
.append('marker')
.attr('id', type + '-crossEnd')
.attr('class', type)
.attr('class', 'marker cross ' + type)
.attr('viewBox', '0 0 11 11')
.attr('refX', 12)
.attr('refY', 5.2)
.attr('markerUnits', 'strokeWidth')
.attr('markerWidth', 7)
.attr('markerHeight', 7)
.attr('markerUnits', 'userSpaceOnUse')
.attr('markerWidth', 11)
.attr('markerHeight', 11)
.attr('orient', 'auto')
.append('path')
.attr('stroke', 'black')
// .attr('stroke', 'black')
.attr('d', 'M 1,1 l 9,9 M 10,1 l -9,9')
.attr('class', 'arrowMarkerPath')
.style('stroke-width', 2)
@ -216,16 +216,16 @@ const cross = (elem, type) => {
elem
.append('marker')
.attr('id', type + '-crossStart')
.attr('class', type)
.attr('class', 'marker cross ' + type)
.attr('viewBox', '0 0 11 11')
.attr('refX', -1)
.attr('refY', 5.2)
.attr('markerUnits', 'strokeWidth')
.attr('markerWidth', 7)
.attr('markerHeight', 7)
.attr('markerUnits', 'userSpaceOnUse')
.attr('markerWidth', 11)
.attr('markerHeight', 11)
.attr('orient', 'auto')
.append('path')
.attr('stroke', 'black')
// .attr('stroke', 'black')
.attr('d', 'M 1,1 l 9,9 M 10,1 l -9,9')
.attr('class', 'arrowMarkerPath')
.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') {
labelStyle = defaultLabelStyle;
}
edgeData.thickness = 'normal';
edgeData.pattern = 'solid';
break;
case 'dotted':
style = 'fill:none;stroke-width:2px;stroke-dasharray:3;';
edgeData.thickness = 'normal';
edgeData.pattern = 'dotted';
break;
case 'thick':
style = ' stroke-width: 3.5px;fill:none';
edgeData.thickness = 'thick';
edgeData.pattern = 'solid';
break;
}
}
@ -262,7 +266,7 @@ export const addEdges = function(edges, g) {
}
edgeData.id = linkId;
edgeData.class = linkNameStart + ' ' + linkNameEnd;
edgeData.classes = 'flowchart-link ' + linkNameStart + ' ' + linkNameEnd;
// Add the edge to the graph
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',
arrowheadStyle: 'fill: #333',
labelpos: 'c',
labelType: 'text'
labelType: 'text',
thickness: 'normal'
});
} else {
g.setNode(node.id, nodeData);
@ -184,7 +185,9 @@ const setupDoc = (g, parent, doc, altFlag) => {
label: item.description,
arrowheadStyle: 'fill: #333',
labelpos: 'c',
labelType: 'text'
labelType: 'text',
thickness: 'normal',
classes: 'transition'
};
let startId = item.state1.id;
let endId = item.state2.id;

5
src/themes/flowchart.scss
View File

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

30
src/themes/mermaid.scss
View File

@ -17,10 +17,38 @@
// --mermaid-alt-font-family: '"Lucida Console", Monaco, monospace';
}
/* Classes common for multiple diagrams */
.error-icon {
fill: $errorBkgColor;
}
.error-text {
fill: $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;
}