Merge pull request #5711 from NicolasNewman/multi-line-er-label

feat(er): allow multi-line relationship labels

packages/mermaid/src/diagrams/er/erRenderer.js

@@ -519,6 +519,8 @@ const drawRelationshipFromLayout = function (svg, rel, g, insert, diagObj) {
   // Append a text node containing the label
   const labelId = 'rel' + relCnt;
 
+  const labelText = rel.roleA.split(/<br ?\/>/g);
+
   const labelNode = svg
     .append('text')
     .classed('er relationshipLabel', true)
@@ -528,8 +530,20 @@ const drawRelationshipFromLayout = function (svg, rel, g, insert, diagObj) {
     .style('text-anchor', 'middle')
     .style('dominant-baseline', 'middle')
     .style('font-family', getConfig().fontFamily)
-    .style('font-size', conf.fontSize + 'px')
-    .text(rel.roleA);
+    .style('font-size', conf.fontSize + 'px');
+
+  if (labelText.length == 1) {
+    labelNode.text(rel.roleA);
+  } else {
+    const firstShift = -(labelText.length - 1) * 0.5;
+    labelText.forEach((txt, i) => {
+      labelNode
+        .append('tspan')
+        .attr('x', labelPoint.x)
+        .attr('dy', `${i === 0 ? firstShift : 1}em`)
+        .text(txt);
+    });
+  }
 
   // Figure out how big the opaque 'container' rectangle needs to be
   const labelBBox = labelNode.node().getBBox();

packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md

@@ -192,6 +192,7 @@ erDiagram
 
 - If you want the relationship label to be more than one word, you must use double quotes around the phrase
 - If you don't want a label at all on a relationship, you must use an empty double-quoted string
+- (v<MERMAID_RELEASE_VERSION>+) If you want a multi-line label on a relationship, use `<br />` between the two lines (`"first line<br />second line"`)
 
 ## Styling