diff --git a/demos/er.html b/demos/er.html index 0b4b82bac..b6c503c2e 100644 --- a/demos/er.html +++ b/demos/er.html @@ -125,6 +125,35 @@
+
+    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
one" + p ||--o| b : "has
one
two" + p ||--o| c : "has
one
two
three" + p ||--o| d : "has
one
two
three
...
Nth" +
+
+
     erDiagram
       _customer_order {
diff --git a/docs/syntax/entityRelationshipDiagram.md b/docs/syntax/entityRelationshipDiagram.md
index ae84d1e9e..def8c9f3a 100644
--- a/docs/syntax/entityRelationshipDiagram.md
+++ b/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
+- If you want a multi-line label on a relationship, use `
` between the two lines (`"first line
second line"`) ## Styling diff --git a/packages/mermaid/src/diagrams/er/erRenderer.js b/packages/mermaid/src/diagrams/er/erRenderer.js index 33fb5bd4a..0327bfc9d 100644 --- a/packages/mermaid/src/diagrams/er/erRenderer.js +++ b/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(/
/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(); diff --git a/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md b/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md index 3b874f689..e08b1930f 100644 --- a/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md +++ b/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 +- If you want a multi-line label on a relationship, use `
` between the two lines (`"first line
second line"`) ## Styling