From 0658a363cb5ca830df6a8450b087c4b85d0c5c1a Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knut.sveidqvist@inkclub.com>
Date: Thu, 26 Aug 2021 17:05:10 +0200
Subject: [PATCH 1/2] #2270 Add support for direction statements for
 classDiagrams

---
 .../rendering/classDiagram-v2.spec.js         | 96 +++++++++++++++++++
 cypress/platform/knsv.html                    | 33 ++++---
 src/diagrams/class/classDb.js                 |  8 ++
 src/diagrams/class/classRenderer-v2.js        |  2 +-
 src/diagrams/class/parser/classDiagram.jison  | 17 ++++
 5 files changed, 141 insertions(+), 15 deletions(-)

diff --git a/cypress/integration/rendering/classDiagram-v2.spec.js b/cypress/integration/rendering/classDiagram-v2.spec.js
index 05f7545e8..66fd1c51f 100644
--- a/cypress/integration/rendering/classDiagram-v2.spec.js
+++ b/cypress/integration/rendering/classDiagram-v2.spec.js
@@ -370,4 +370,100 @@ describe('Class diagram V2', () => {
     );
     cy.get('svg');
   });
+  it('16: should handle the direction statemment with TB', () => {
+    imgSnapshotTest(
+      `
+      classDiagram
+        direction TB
+        class Student {
+          -idCard : IdCard
+        }
+        class IdCard{
+          -id : int
+          -name : string
+        }
+        class Bike{
+          -id : int
+          -name : string
+        }
+        Student "1" --o "1" IdCard : carries
+        Student "1" --o "1" Bike : rides
+
+      `,
+       {logLevel : 1, flowchart: { "htmlLabels": false },}
+    );
+    cy.get('svg');
+  });
+  it('17: should handle the direction statemment with BT', () => {
+    imgSnapshotTest(
+      `
+      classDiagram
+        direction BT
+        class Student {
+          -idCard : IdCard
+        }
+        class IdCard{
+          -id : int
+          -name : string
+        }
+        class Bike{
+          -id : int
+          -name : string
+        }
+        Student "1" --o "1" IdCard : carries
+        Student "1" --o "1" Bike : rides
+
+      `,
+       {logLevel : 1, flowchart: { "htmlLabels": false },}
+    );
+    cy.get('svg');
+  });
+  it('17: should handle the direction statemment with RL', () => {
+    imgSnapshotTest(
+      `
+      classDiagram
+        direction RL
+        class Student {
+          -idCard : IdCard
+        }
+        class IdCard{
+          -id : int
+          -name : string
+        }
+        class Bike{
+          -id : int
+          -name : string
+        }
+        Student "1" --o "1" IdCard : carries
+        Student "1" --o "1" Bike : rides
+
+      `,
+       {logLevel : 1, flowchart: { "htmlLabels": false },}
+    );
+    cy.get('svg');
+  });
+  it('18: should handle the direction statemment with LR', () => {
+    imgSnapshotTest(
+      `
+      classDiagram
+        direction LR
+        class Student {
+          -idCard : IdCard
+        }
+        class IdCard{
+          -id : int
+          -name : string
+        }
+        class Bike{
+          -id : int
+          -name : string
+        }
+        Student "1" --o "1" IdCard : carries
+        Student "1" --o "1" Bike : rides
+
+      `,
+       {logLevel : 1, flowchart: { "htmlLabels": false },}
+    );
+    cy.get('svg');
+  });
 });
diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html
index 474132392..3968e0055 100644
--- a/cypress/platform/knsv.html
+++ b/cypress/platform/knsv.html
@@ -10,7 +10,7 @@
     <style>
       body {
         /* background: rgb(221, 208, 208); */
-        /* background:#333; */
+        background:#333;
         font-family: 'Arial';
         /* font-size: 18px !important; */
         }
@@ -27,17 +27,22 @@
     <div>info below</div>
     <div class="flex">
 
-<div class="mermaid3" style="width: 100%; height: 20%;">
-stateDiagram-v2
-  state S1 {
-    sub1 -->sub2
+<div class="mermaid" style="width: 100%; height: 20%;">
+classDiagram
+  direction TB
+  class Student {
+    -idCard : IdCard
   }
-
-  state S2 {
-    sub4
+  class IdCard{
+    -id : int
+    -name : string
   }
-  S1 --> S2
-  sub1 --> sub4
+  class Bike{
+    -id : int
+    -name : string
+  }
+  Student "1" --o "1" IdCard : carries
+  Student "1" --o "1" Bike : rides
 
 </div>
 <div class="mermaid3" style="width: 100%; height: 20%;">
@@ -56,7 +61,7 @@ subgraph CompositeState
 
 end
 </div>
-<div class="mermaid" style="width: 100%; height: 20%;">
+<div class="mermaid2" style="width: 100%; height: 20%;">
 %%{init: { "apa":"b", "theme":"forest"}}%%
 sequenceDiagram
 Alice->>Bob: Hi Bob
@@ -110,12 +115,12 @@ YourState
           // console.error('Mermaid error: ', err);
         };
       mermaid.initialize({
-        theme: 'base',
+        theme: 'dark',
+        // theme: 'forest',
         arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 2,
-        flowchart: { nodeSpacing: 10, curve: 'cardinal', htmlLabels: true },
-        htmlLabels: true,
+        flowchart: { nodeSpacing: 10, curve: 'cardinal', htmlLabels: false },
         // gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
diff --git a/src/diagrams/class/classDb.js b/src/diagrams/class/classDb.js
index 1ee90840c..e4a0cc1c3 100644
--- a/src/diagrams/class/classDb.js
+++ b/src/diagrams/class/classDb.js
@@ -317,6 +317,12 @@ const setupToolTips = function (element) {
 };
 funs.push(setupToolTips);
 
+let direction = 'TB';
+const getDirection = () => direction;
+const setDirection = (dir) => {
+  direction = dir;
+};
+
 export default {
   parseDirective,
   getConfig: () => configApi.getConfig().class,
@@ -328,6 +334,8 @@ export default {
   addAnnotation,
   getRelations,
   addRelation,
+  getDirection,
+  setDirection,
   addMember,
   addMembers,
   cleanupLabel,
diff --git a/src/diagrams/class/classRenderer-v2.js b/src/diagrams/class/classRenderer-v2.js
index c1bfd3591..3ba42c5f6 100644
--- a/src/diagrams/class/classRenderer-v2.js
+++ b/src/diagrams/class/classRenderer-v2.js
@@ -372,7 +372,7 @@ export const draw = function (text, id) {
     compound: true,
   })
     .setGraph({
-      rankdir: dir,
+      rankdir: classDb.getDirection(),
       nodesep: nodeSpacing,
       ranksep: rankSpacing,
       marginx: 8,
diff --git a/src/diagrams/class/parser/classDiagram.jison b/src/diagrams/class/parser/classDiagram.jison
index 59fc7aa1d..8b0ee4332 100644
--- a/src/diagrams/class/parser/classDiagram.jison
+++ b/src/diagrams/class/parser/classDiagram.jison
@@ -19,6 +19,10 @@
 
 %%
 \%\%\{                                                          { this.begin('open_directive'); return 'open_directive'; }
+.*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';
 <open_directive>((?:(?!\}\%\%)[^:.])*)                          { this.begin('type_directive'); return 'type_directive'; }
 <type_directive>":"                                             { this.popState(); this.begin('arg_directive'); return ':'; }
 <type_directive,arg_directive>\}\%\%                            { this.popState(); this.popState(); return 'close_directive'; }
@@ -180,9 +184,21 @@ Function arguments are optional: 'call <callback_name>()' simply executes 'callb
 
 start
     : mermaidDoc
+    | direction
     | directive start
     ;
 
+direction
+    : direction_tb
+    { yy.setDirection('TB');}
+    | direction_bt
+    { yy.setDirection('BT');}
+    | direction_rl
+    { yy.setDirection('RL');}
+    | direction_lr
+    { yy.setDirection('LR');}
+    ;
+
 mermaidDoc
     : graphConfig
     ;
@@ -235,6 +251,7 @@ statement
     | clickStatement
     | cssClassStatement
     | directive
+    | direction
     ;
 
 classStatement

From bc31125bc6de3eb310f32b72769dba712f07587c Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knut.sveidqvist@inkclub.com>
Date: Thu, 26 Aug 2021 17:27:34 +0200
Subject: [PATCH 2/2] Updating the docs with direction statements

---
 docs/classDiagram.md | 40 ++++++++++++++++++++++++++++++++++++++++
 docs/index.html      |  2 +-
 docs/stateDiagram.md | 31 +++++++++++++++++++++++++++++++
 3 files changed, 72 insertions(+), 1 deletion(-)

diff --git a/docs/classDiagram.md b/docs/classDiagram.md
index 2d7427739..21ea40856 100644
--- a/docs/classDiagram.md
+++ b/docs/classDiagram.md
@@ -443,6 +443,46 @@ class Shape{
 
 ```
 
+## Setting the direction of the diagram
+
+With class diagrams you can use the direction statement to set the direction which the diagram will render like in this example.
+
+```
+classDiagram
+  direction RL
+  class Student {
+    -idCard : IdCard
+  }
+  class IdCard{
+    -id : int
+    -name : string
+  }
+  class Bike{
+    -id : int
+    -name : string
+  }
+  Student "1" --o "1" IdCard : carries
+  Student "1" --o "1" Bike : rides
+ ```
+ This is how this renders
+```mermaid
+classDiagram
+  direction RL
+  class Student {
+    -idCard : IdCard
+  }
+  class IdCard{
+    -id : int
+    -name : string
+  }
+  class Bike{
+    -id : int
+    -name : string
+  }
+  Student "1" --o "1" IdCard : carries
+  Student "1" --o "1" Bike : rides
+ ```
+
 ## Interaction
 
 It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
diff --git a/docs/index.html b/docs/index.html
index 49cd3c1c8..ab425fca4 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -7,7 +7,7 @@
   <meta name="description" content="Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.">
   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <!-- <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css"> -->
-  <link rel="stylesheet" href="theme.css">  <script src="//cdn.jsdelivr.net/npm/mermaid@8.10.2/dist/mermaid.min.js"></script>
+  <link rel="stylesheet" href="theme.css">  <script src="//cdn.jsdelivr.net/npm/mermaid@8.11.4/dist/mermaid.min.js"></script>
   <!-- <script src="http://localhost:9000/mermaid.js"></script> -->
   <script>
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
diff --git a/docs/stateDiagram.md b/docs/stateDiagram.md
index 11cbe603c..57d080198 100644
--- a/docs/stateDiagram.md
+++ b/docs/stateDiagram.md
@@ -354,6 +354,37 @@ stateDiagram-v2
     }
 ```
 
+## Setting the direction of the diagram
+
+With state diagrams you can use the direction statement to set the direction which the diagram will render like in this example.
+
+```
+stateDiagram
+    direction LR
+    [*] --> A
+    A --> B
+    B --> C
+    state B {
+      direction LR
+      a --> b
+    }
+    B --> D
+ ```
+ This is how this renders
+```mermaid
+stateDiagram
+    direction LR
+    [*] --> A
+    A --> B
+    B --> C
+    state B {
+      direction LR
+      a --> b
+    }
+    B --> D
+ ```
+
+
 ## Comments
 
 Comments can be entered within a state diagram chart, which will be ignored by the parser.  Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax