feat: change direction of erDiagram

Resolves mermaid-js#3851
demonsgalore · Jun 2, 2024 · c6191b1 · c6191b1
1 parent d6ccd93
commit c6191b1
Show file tree

Hide file tree

Showing 7 changed files with 116 additions and 7 deletions.
diff --git a/cypress/integration/rendering/erDiagram.spec.js b/cypress/integration/rendering/erDiagram.spec.js
@@ -322,4 +322,52 @@ ORDER ||--|{ LINE-ITEM : contains
       { logLevel: 1 }
     );
   });
+
+  it('should handle the direction statement with TB', () => {
+    imgSnapshotTest(
+      `
+      erDiagram
+        direction TB
+        CUSTOMER ||--o{ ORDER : places
+        ORDER ||--|{ LINE-ITEM : contains
+      `,
+      { logLevel: 1 }
+    );
+  });
+
+  it('should handle the direction statement with BT', () => {
+    imgSnapshotTest(
+      `
+      erDiagram
+        direction BT
+        CUSTOMER ||--o{ ORDER : places
+        ORDER ||--|{ LINE-ITEM : contains
+      `,
+      { logLevel: 1 }
+    );
+  });
+
+  it('should handle the direction statement with LR', () => {
+    imgSnapshotTest(
+      `
+      erDiagram
+        direction LR
+        CUSTOMER ||--o{ ORDER : places
+        ORDER ||--|{ LINE-ITEM : contains
+      `,
+      { logLevel: 1 }
+    );
+  });
+
+  it('should handle the direction statement with RL', () => {
+    imgSnapshotTest(
+      `
+      erDiagram
+        direction RL
+        CUSTOMER ||--o{ ORDER : places
+        ORDER ||--|{ LINE-ITEM : contains
+      `,
+      { logLevel: 1 }
+    );
+  });
 });
diff --git a/demos/er.html b/demos/er.html
@@ -114,6 +114,7 @@
 
     <pre class="mermaid">
     erDiagram
+      direction LR
       p[Person] {
           string firstName
           string lastName
@@ -130,12 +131,12 @@
       _customer_order {
           bigint id PK
           bigint customer_id FK
-          text shipping_address 
-          text delivery_method 
-          timestamp_with_time_zone ordered_at 
-          numeric total_tax_amount 
-          numeric total_price 
-          text payment_method 
+          text shipping_address
+          text delivery_method
+          timestamp_with_time_zone ordered_at
+          numeric total_tax_amount
+          numeric total_price
+          text payment_method
       }
     </pre>
     <hr />

diff --git a/packages/mermaid/src/diagrams/er/erDb.js b/packages/mermaid/src/diagrams/er/erDb.js
@@ -80,6 +80,12 @@ const clear = function () {
   commonClear();
 };
 
+let direction = 'TB';
+const getDirection = () => direction;
+const setDirection = (dir) => {
+  direction = dir;
+};
+
 export default {
   Cardinality,
   Identification,
@@ -96,4 +102,6 @@ export default {
   getAccDescription,
   setDiagramTitle,
   getDiagramTitle,
+  setDirection,
+  getDirection
 };
diff --git a/packages/mermaid/src/diagrams/er/erRenderer.js b/packages/mermaid/src/diagrams/er/erRenderer.js
@@ -601,7 +601,7 @@ export const draw = function (text, id, _version, diagObj) {
     compound: false,
   })
     .setGraph({
-      rankdir: conf.layoutDirection,
+      rankdir: diagObj.db.getDirection(),
       marginx: 20,
       marginy: 20,
       nodesep: 100,

diff --git a/packages/mermaid/src/diagrams/er/parser/erDiagram.jison b/packages/mermaid/src/diagrams/er/parser/erDiagram.jison
@@ -7,6 +7,12 @@
 %x acc_descr_multiline
 
 %%
+.*direction\s+TB[^\n]*                       return 'direction_tb';
+.*direction\s+BT[^\n]*                       return 'direction_bt';
+.*direction\s+RL[^\n]*                       return 'direction_rl';
+.*direction\s+LR[^\n]*                       return 'direction_lr';
+\%\%(?!\{)*[^\n]*(\r?\n?)+                   /* skip comments */
+\%\%[^\n]*(\r?\n)*                           /* skip comments */
 accTitle\s*":"\s*                                               { this.begin("acc_title");return 'acc_title'; }
 <acc_title>(?!\n|;|#)*[^\n]*                                    { this.popState(); return "acc_title_value"; }
 accDescr\s*":"\s*                                               { this.begin("acc_descr");return 'acc_descr'; }
@@ -109,6 +115,7 @@ statement
     | entityName SQS entityName SQE BLOCK_START BLOCK_STOP { yy.addEntity($1, $3); }
     | entityName SQS entityName SQE { yy.addEntity($1, $3); }
     | title title_value  { $$=$2.trim();yy.setAccTitle($$); }
+    | direction
     | acc_title acc_title_value  { $$=$2.trim();yy.setAccTitle($$); }
     | acc_descr acc_descr_value  { $$=$2.trim();yy.setAccDescription($$); }
     | acc_descr_multiline_value { $$=$1.trim();yy.setAccDescription($$); }
@@ -180,4 +187,15 @@ role
     | 'ALPHANUM'  { $$ = $1; }
     ;
 
+direction
+    : direction_tb
+    { yy.setDirection('TB');}
+    | direction_bt
+    { yy.setDirection('BT');}
+    | direction_rl
+    { yy.setDirection('RL');}
+    | direction_lr
+    { yy.setDirection('LR');}
+    ;
+
 %%
diff --git a/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js b/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js
@@ -803,4 +803,13 @@ describe('when parsing ER diagram it...', function () {
       }
     );
   });
+
+  it('should have the default direction TB', function () {
+    erDiagram.parser.parse('erDiagram\nA ||--|{ B : has');
+    expect(erDb.getDirection()).toBe('TB');
+  });
+
+  it('should handle the direction statement', function () {
+    erDiagram.parser.parse('erDiagram\ndirection LR\nA ||--|{ B : has');
+  });
 });
diff --git a/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md b/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md
@@ -188,6 +188,31 @@ erDiagram
     MANUFACTURER only one to zero or more CAR : makes
 ```
 
+## Setting the direction of the diagram
+
+With entity relationship diagrams you can use the direction statement to set the direction in which the diagram will render:
+
+```mermaid-example
+erDiagram
+    direction LR
+    CUSTOMER ||--o{ ORDER : places
+    CUSTOMER {
+        string name
+        string custNumber
+        string sector
+    }
+    ORDER ||--|{ LINE-ITEM : contains
+    ORDER {
+        int orderNumber
+        string deliveryAddress
+    }
+    LINE-ITEM {
+        string productCode
+        int quantity
+        float pricePerUnit
+    }
+```
+
 ### Other Things
 
 - If you want the relationship label to be more than one word, you must use double quotes around the phrase