diff --git a/.changeset/khaki-items-leave.md b/.changeset/khaki-items-leave.md new file mode 100644 index 000000000..d84776eb2 --- /dev/null +++ b/.changeset/khaki-items-leave.md @@ -0,0 +1,5 @@ +--- +'mermaid': minor +--- + +feat(er): allow multi-line relationship labels diff --git a/cypress/integration/rendering/erDiagram.spec.js b/cypress/integration/rendering/erDiagram.spec.js index 1a2340906..aad9b1cf7 100644 --- a/cypress/integration/rendering/erDiagram.spec.js +++ b/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
one" + p ||--o| b : "has
one
two" + p ||--o| c : "has
one
two
three" + p ||--o| d : "has
one
two
three
...
Nth" + `, + { logLevel: 1 } + ); + }); }); 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..74b545abf 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
+- (v\+) 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..7fed4a527 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 +- (v+) If you want a multi-line label on a relationship, use `
` between the two lines (`"first line
second line"`) ## Styling