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] 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