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

feat(er): allow multi-line relationship labels

.changeset/khaki-items-leave.md

@@ -0,0 +1,5 @@
+---
+'mermaid': minor
+---
+
+feat(er): allow multi-line relationship labels

cypress/integration/rendering/erDiagram.spec.js

@@ -321,4 +321,37 @@ ORDER ||--|{ LINE-ITEM : contains
       { logLevel: 1 }
     );
   });
+
+  it('should render relationship labels with line breaks', () => {
+    imgSnapshotTest(
+      `
+    erDiagram
+      p[Person] {
+          string firstName
+          string lastName
+      }
+      a["Customer Account"] {
+          string email
+      }
+
+      b["Customer Account Secondary"] {
+        string email
+      }
+      
+      c["Customer Account Tertiary"] {
+        string email
+      }
+      
+      d["Customer Account Nth"] {
+        string email
+      }
+
+      p ||--o| a : "has<br />one"
+      p ||--o| b : "has<br />one<br />two"
+      p ||--o| c : "has<br />one<br/>two<br />three"
+      p ||--o| d : "has<br />one<br />two<br/>three<br />...<br/>Nth"
+      `,
+      { logLevel: 1 }
+    );
+  });
 });

demos/er.html

@@ -125,6 +125,35 @@
     </pre>
     <hr />
 
+    <pre class="mermaid">
+    erDiagram
+      p[Person] {
+          string firstName
+          string lastName
+      }
+      a["Customer Account"] {
+          string email
+      }
+
+      b["Customer Account Secondary"] {
+        string email
+      }
+
+      c["Customer Account Tertiary"] {
+        string email
+      }
+
+      d["Customer Account Nth"] {
+        string email
+      }
+
+      p ||--o| a : "has<br />one"
+      p ||--o| b : "has<br />one<br />two"
+      p ||--o| c : "has<br />one<br />two<br />three"
+      p ||--o| d : "has<br />one<br />two<br />three<br />...<br />Nth"
+    </pre>
+    <hr />
+
     <pre class="mermaid">
     erDiagram
       _customer_order {

docs/syntax/entityRelationshipDiagram.md

@@ -286,6 +286,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
 

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