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

Merge branch 'develop' into fix_links

Browse Source
This commit is contained in:
Knut Sveidqvist
2020-10-15 19:43:49 +02:00
committed by GitHub
parent 439399b9f1 350732d8dd
commit 5e0f2e8572
7 changed files with 99 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -324,5 +324,27 @@ end
{htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'} {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
); );
}); });
it('59: handle styling of subgraphs and links', () => {
imgSnapshotTest(
`
flowchart TD
A[Christmas] ==> D
A[Christmas] -->|Get money| B(Go shopping)
A[Christmas] ==> C
subgraph T ["Test"]
A
B
C
end
classDef Test fill:#F84E68,stroke:#333,color:white;
class A,T Test
classDef TestSub fill:green;
class T TestSub
linkStyle 0,1 color:orange, stroke: orange;
`,
{htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
);
});
}); });

49
cypress/platform/knsv.html
View File

@@ -22,29 +22,40 @@
<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] ==> D
subgraph subcontainer A[Christmas] -->|Get money| B(Go shopping)
subcontainer-child A[Christmas] ==> C
end subgraph T ["Test"]
subcontainer-child--> subcontainer-sibling A
B
C
end end
classDef Test fill:#F84E68,stroke:#333,color:white;
class A,T Test
classDef TestSub fill:green;
class T TestSub
linkStyle 0,1 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] ==> D
a-->c A[Christmas] -->|Get money| B(Go shopping)
subgraph B A[Christmas] ==> C
c subgraph T ["Test"]
end A
subgraph A B
a C
b end
B
end classDef Test fill:#F84E68,stroke:#333,color:white;
class A,T Test
classDef TestSub fill:green;
class T TestSub
linkStyle 0,1 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

4
docs/diagrams-and-syntax-and-examples/pie.md
View File

@@ -30,8 +30,8 @@ Drawing a pie chart is really simple in mermaid.
- Followed by `title` keyword and its value in string to give a title to the pie-chart. This is ***OPTIONAL*** - Followed by `title` keyword and its value in string to give a title to the pie-chart. This is ***OPTIONAL***
- Followed by dataSet - Followed by dataSet
- `label` for a section in the pie diagram within `" "` quotes. - `label` for a section in the pie diagram within `" "` quotes.
- Followed by `:` semi-colon as separator - Followed by `:` colon as separator
- Followed by `positive numeric value` (supported up to two decimal places) - Followed by `positive numeric value` (supported upto two decimal places)
[pie] [pie]
[title] [titlevalue] (OPTIONAL) [title] [titlevalue] (OPTIONAL)

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 => {

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

@@ -193,7 +193,7 @@ export const addEdges = function(edges, g) {
var linkNameStart = 'LS-' + edge.start; var linkNameStart = 'LS-' + edge.start;
var linkNameEnd = 'LE-' + edge.end; var linkNameEnd = 'LE-' + edge.end;
const edgeData = {}; const edgeData = { style: '', labelStyle: '' };
edgeData.minlen = edge.length || 1; edgeData.minlen = edge.length || 1;
//edgeData.id = 'id' + cnt; //edgeData.id = 'id' + cnt;
@@ -227,45 +227,40 @@ export const addEdges = function(edges, g) {
break; break;
} }
// logger.info('apa', edgeData, edge);
// edgeData.arrowTypeStart = edge.arrowTypeStart;
// edgeData.arrowTypeStart = edge.arrowTypeStart;
// edgeData.arrowType = edgeData.arrowTypeEnd;
// logger.info('apa', edgeData, edge);
let style = ''; let style = '';
let labelStyle = ''; let labelStyle = '';
switch (edge.stroke) {
case 'normal':
style = 'fill:none;';
if (typeof defaultStyle !== 'undefined') {
style = defaultStyle;
}
if (typeof defaultLabelStyle !== 'undefined') {
labelStyle = defaultLabelStyle;
}
edgeData.thickness = 'normal';
edgeData.pattern = 'solid';
break;
case 'dotted':
edgeData.thickness = 'normal';
edgeData.pattern = 'dotted';
edgeData.style = 'fill:none;stroke-width:2px;stroke-dasharray:3;';
break;
case 'thick':
edgeData.thickness = 'thick';
edgeData.pattern = 'solid';
edgeData.style = 'stroke-width: 3.5px;fill:none;';
break;
}
if (typeof edge.style !== 'undefined') { if (typeof edge.style !== 'undefined') {
const styles = getStylesFromArray(edge.style); const styles = getStylesFromArray(edge.style);
style = styles.style; style = styles.style;
labelStyle = styles.labelStyle; labelStyle = styles.labelStyle;
} else {
switch (edge.stroke) {
case 'normal':
style = 'fill:none';
if (typeof defaultStyle !== 'undefined') {
style = defaultStyle;
}
if (typeof defaultLabelStyle !== 'undefined') {
labelStyle = defaultLabelStyle;
}
edgeData.thickness = 'normal';
edgeData.pattern = 'solid';
break;
case 'dotted':
edgeData.thickness = 'normal';
edgeData.pattern = 'dotted';
break;
case 'thick':
edgeData.thickness = 'thick';
edgeData.pattern = 'solid';
break;
}
} }
edgeData.style = style; edgeData.style = edgeData.style += style;
edgeData.labelStyle = labelStyle; edgeData.labelStyle = edgeData.labelStyle += labelStyle;
if (typeof edge.interpolate !== 'undefined') { if (typeof edge.interpolate !== 'undefined') {
edgeData.curve = interpolateToCurve(edge.interpolate, curveLinear); edgeData.curve = interpolateToCurve(edge.interpolate, curveLinear);
@@ -282,21 +277,21 @@ export const addEdges = function(edges, g) {
} else { } else {
edgeData.arrowheadStyle = 'fill: #333'; edgeData.arrowheadStyle = 'fill: #333';
edgeData.labelpos = 'c'; edgeData.labelpos = 'c';
if (getConfig().flowchart.htmlLabels && false) { // eslint-disable-line
edgeData.labelType = 'html';
edgeData.label = `<span id="L-${linkId}" class="edgeLabel L-${linkNameStart}' L-${linkNameEnd}">${edge.text}</span>`;
} else {
edgeData.labelType = 'text';
edgeData.label = edge.text.replace(common.lineBreakRegex, '\n');
if (typeof edge.style === 'undefined') {
edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none';
}
edgeData.labelStyle = edgeData.labelStyle.replace('color:', 'fill:');
}
} }
// if (getConfig().flowchart.htmlLabels && false) {
// // eslint-disable-line
// edgeData.labelType = 'html';
// edgeData.label = `<span id="L-${linkId}" class="edgeLabel L-${linkNameStart}' L-${linkNameEnd}">${edge.text}</span>`;
// } else {
edgeData.labelType = 'text';
edgeData.label = edge.text.replace(common.lineBreakRegex, '\n');
if (typeof edge.style === 'undefined') {
edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none;';
}
edgeData.labelStyle = edgeData.labelStyle.replace('color:', 'fill:');
// }
edgeData.id = linkId; edgeData.id = linkId;
edgeData.classes = 'flowchart-link ' + linkNameStart + ' ' + linkNameEnd; edgeData.classes = 'flowchart-link ' + linkNameStart + ' ' + linkNameEnd;