diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js
index e1912a307..2625d19c1 100644
--- a/cypress/integration/rendering/sequencediagram.spec.js
+++ b/cypress/integration/rendering/sequencediagram.spec.js
@@ -2,8 +2,8 @@
import { imgSnapshotTest } from '../../helpers/util';
-context('Aliasing', () => {
- it('should render a simple sequence diagrams', () => {
+context('Sequence diagram', () => {
+ it('should render a simple sequence diagram', () => {
imgSnapshotTest(
`
sequenceDiagram
@@ -32,6 +32,23 @@ context('Aliasing', () => {
{}
);
});
+ it('should handle different line breaks', () => {
+ imgSnapshotTest(
+ `
+ sequenceDiagram
+ participant 1 as multiline
using #lt;br#gt;
+ participant 2 as multiline
using #lt;br/#gt;
+ participant 3 as multiline
using #lt;br /#gt;
+ 1->>2: multiline
using #lt;br#gt;
+ note right of 2: multiline
using #lt;br#gt;
+ 2->>3: multiline
using #lt;br/#gt;
+ note right of 3: multiline
using #lt;br/#gt;
+ 3->>1: multiline
using #lt;br /#gt;
+ note right of 1: multiline
using #lt;br /#gt;
+ `,
+ {}
+ );
+ });
context('background rects', () => {
it('should render a single and nested rects', () => {
imgSnapshotTest(
diff --git a/dist/index.html b/dist/index.html
index 8355c23b6..0b3db789f 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -356,6 +356,18 @@ and
Alice -->> John: Parallel message 2
end
+
+ sequenceDiagram
+ participant 1 as multiline
using #lt;br#gt;
+ participant 2 as multiline
using #lt;br/#gt;
+ participant 3 as multiline
using #lt;br /#gt;
+ 1->>2: multiline
using #lt;br#gt;
+ note right of 2: multiline
using #lt;br#gt;
+ 2->>3: multiline
using #lt;br/#gt;
+ note right of 3: multiline
using #lt;br/#gt;
+ 3->>1: multiline
using #lt;br /#gt;
+ note right of 1: multiline
using #lt;br /#gt;
+
diff --git a/src/diagrams/sequence/sequenceDiagram.spec.js b/src/diagrams/sequence/sequenceDiagram.spec.js
index 398db8e6e..90875948b 100644
--- a/src/diagrams/sequence/sequenceDiagram.spec.js
+++ b/src/diagrams/sequence/sequenceDiagram.spec.js
@@ -333,6 +333,34 @@ describe('when parsing a sequenceDiagram', function() {
expect(messages[0].from).toBe('Alice');
expect(messages[2].from).toBe('John');
});
+ it('it should handle different line breaks', function() {
+ const str =
+ 'sequenceDiagram\n' +
+ 'participant 1 as multiline
text\n' +
+ 'participant 2 as multiline
text\n' +
+ 'participant 3 as multiline
text\n' +
+ '1->>2: multiline
text\n' +
+ 'note right of 2: multiline
text\n' +
+ '2->>3: multiline
text\n' +
+ 'note right of 3: multiline
text\n' +
+ '3->>1: multiline
text\n' +
+ 'note right of 1: multiline
text\n';
+
+ parser.parse(str);
+
+ const actors = parser.yy.getActors();
+ expect(actors['1'].description).toBe('multiline
text');
+ expect(actors['2'].description).toBe('multiline
text');
+ expect(actors['3'].description).toBe('multiline
text');
+
+ const messages = parser.yy.getMessages();
+ expect(messages[0].message).toBe('multiline
text');
+ expect(messages[1].message).toBe('multiline
text');
+ expect(messages[2].message).toBe('multiline
text');
+ expect(messages[3].message).toBe('multiline
text');
+ expect(messages[4].message).toBe('multiline
text');
+ expect(messages[5].message).toBe('multiline
text');
+ });
it('it should handle notes over a single actor', function() {
const str =
'sequenceDiagram\n' + 'Alice->Bob: Hello Bob, how are you?\n' + 'Note over Bob: Bob thinks\n';
diff --git a/src/diagrams/sequence/sequenceRenderer.js b/src/diagrams/sequence/sequenceRenderer.js
index 86bb6010c..b00ad38f0 100644
--- a/src/diagrams/sequence/sequenceRenderer.js
+++ b/src/diagrams/sequence/sequenceRenderer.js
@@ -168,7 +168,7 @@ export const bounds = {
const _drawLongText = (text, x, y, g, width) => {
let textHeight = 0;
- const lines = text.split(/
/gi);
+ const lines = text.split(/
/gi);
for (const line of lines) {
const textObj = svgDraw.getTextObj();
textObj.x = x;
@@ -233,7 +233,7 @@ const drawMessage = function(elem, startx, stopx, verticalPos, msg, sequenceInde
let textElem;
let counterBreaklines = 0;
let breaklineOffset = 17;
- const breaklines = msg.message.split(/
/gi);
+ const breaklines = msg.message.split(/
/gi);
for (const breakline of breaklines) {
textElem = g
.append('text') // text label for the x axis
diff --git a/src/diagrams/sequence/svgDraw.js b/src/diagrams/sequence/svgDraw.js
index b7c29bd80..523c6cafd 100644
--- a/src/diagrams/sequence/svgDraw.js
+++ b/src/diagrams/sequence/svgDraw.js
@@ -18,7 +18,7 @@ export const drawRect = function(elem, rectData) {
export const drawText = function(elem, textData) {
// Remove and ignore br:s
- const nText = textData.text.replace(/
/gi, ' ');
+ const nText = textData.text.replace(/
/gi, ' ');
const textElem = elem.append('text');
textElem.attr('x', textData.x);
@@ -321,7 +321,7 @@ const _drawTextCandidateFunc = (function() {
function byTspan(content, g, x, y, width, height, textAttrs, conf) {
const { actorFontSize, actorFontFamily } = conf;
- const lines = content.split(/
/gi);
+ const lines = content.split(/
/gi);
for (let i = 0; i < lines.length; i++) {
const dy = i * actorFontSize - (actorFontSize * (lines.length - 1)) / 2;
const text = g