diff --git a/dist/index.html b/dist/index.html
index eb27c6593..615c9a537 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -313,6 +313,18 @@ class A someclass;
classDef someclass fill:#f96;
class A someclass;
+
+ graph LR
+ A1[Multi
Line] -->|Multi
Line| B1(Multi
Line)
+ C1[Multi
Line] -->|Multi
Line| D1(Multi
Line)
+ E1[Multi
Line] -->|Multi
Line| F1(Multi
Line)
+ A2[Multi
Line] -->|Multi
Line| B2(Multi
Line)
+ C2[Multi
Line] -->|Multi
Line| D2(Multi
Line)
+ E2[Multi
Line] -->|Multi
Line| F2(Multi
Line)
+ linkStyle 0 stroke:DarkGray,stroke-width:2px
+ linkStyle 1 stroke:DarkGray,stroke-width:2px
+ linkStyle 2 stroke:DarkGray,stroke-width:2px
+
diff --git a/src/diagrams/flowchart/flowRenderer.js b/src/diagrams/flowchart/flowRenderer.js
index ee680532f..524742b39 100644
--- a/src/diagrams/flowchart/flowRenderer.js
+++ b/src/diagrams/flowchart/flowRenderer.js
@@ -239,18 +239,18 @@ export const addEdges = function(edges, g) {
}
} else {
edgeData.arrowheadStyle = 'fill: #333';
- if (typeof edge.style === 'undefined') {
- edgeData.labelpos = 'c';
- if (getConfig().flowchart.htmlLabels) {
- edgeData.labelType = 'html';
- edgeData.label = '' + edge.text + '';
- } else {
- edgeData.labelType = 'text';
- edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none';
- edgeData.label = edge.text.replace(/
/g, '\n');
- }
+ edgeData.labelpos = 'c';
+
+ if (getConfig().flowchart.htmlLabels) {
+ edgeData.labelType = 'html';
+ edgeData.label = '' + edge.text + '';
} else {
- edgeData.label = edge.text.replace(/
/g, '\n');
+ edgeData.labelType = 'text';
+ edgeData.label = edge.text.replace(/
/g, '\n');
+
+ if (typeof edge.style === 'undefined') {
+ edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none';
+ }
}
}
// Add the edge to the graph
diff --git a/src/diagrams/flowchart/flowRenderer.spec.js b/src/diagrams/flowchart/flowRenderer.spec.js
index 0e49dbf71..fe31292cc 100644
--- a/src/diagrams/flowchart/flowRenderer.spec.js
+++ b/src/diagrams/flowchart/flowRenderer.spec.js
@@ -1,4 +1,4 @@
-import { addVertices } from './flowRenderer';
+import { addVertices, addEdges } from './flowRenderer';
import { setConfig } from '../../config';
setConfig({
@@ -94,4 +94,32 @@ describe('the flowchart renderer', function() {
expect(addedNodes[0][1]).toHaveProperty('labelStyle', expectedLabelStyle);
});
});
+
+ describe('when adding edges to a graph', function() {
+ it('should handle multiline texts and set centered label position', function() {
+ const addedEdges = [];
+ const mockG = {
+ setEdge: function(s, e, data, c) {
+ addedEdges.push(data);
+ }
+ };
+ addEdges(
+ [
+ { text: 'Multi
Line' },
+ { text: 'Multi
Line' },
+ { text: 'Multi
Line' },
+ { style: ['stroke:DarkGray', 'stroke-width:2px'], text: 'Multi
Line' },
+ { style: ['stroke:DarkGray', 'stroke-width:2px'], text: 'Multi
Line' },
+ { style: ['stroke:DarkGray', 'stroke-width:2px'], text: 'Multi
Line' }
+ ],
+ mockG,
+ 'svg-id'
+ );
+
+ addedEdges.forEach(function(edge) {
+ expect(edge).toHaveProperty('label', 'Multi\nLine');
+ expect(edge).toHaveProperty('labelpos', 'c');
+ });
+ });
+ });
});