#2050 Updating tests and adding docs

cypress/integration/rendering/flowchart-v2.spec.js

@@ -610,4 +610,27 @@ flowchart RL
       {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
     );
   });
+
+    it('2050: handling of different rendering direction in subgraphs', () => {
+    imgSnapshotTest(
+      `
+    flowchart LR
+
+      subgraph TOP
+        direction TB
+        subgraph B1
+            direction RL
+            i1 -->f1
+        end
+        subgraph B2
+            direction BT
+            i2 -->f2
+        end
+      end
+      A --> TOP --> B
+      B1 --> B2
+      `,
+      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+    );
+  });
 });

cypress/integration/rendering/flowchart.spec.js

@@ -893,26 +893,4 @@ graph TD
       {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
     );
   });
-  it('2050: handling of different rendering direction in subgraphs', () => {
-    imgSnapshotTest(
-      `
-    flowchart LR
-
-      subgraph TOP
-        direction TB
-        subgraph B1
-            direction RL
-            i1 -->f1
-        end
-        subgraph B2
-            direction BT
-            i2 -->f2
-        end
-      end
-      A --> TOP --> B
-      B1 --> B2
-      `,
-      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
-    );
-  });
 });

docs/flowchart.md

@@ -2,12 +2,12 @@
 
 **Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/flowchart.md)
 
-All Flowcharts are composed of **nodes**, the geometric shapes and **edges**, the arrows or lines. The mermaid code defines the way that these **nodes** and **edges** are made and interact. 
+All Flowcharts are composed of **nodes**, the geometric shapes and **edges**, the arrows or lines. The mermaid code defines the way that these **nodes** and **edges** are made and interact.
 
 It can also accomodate different arrow types, multi directional arrows, and linking to and from subgraphs.
 
 > **Important note**: Do not type the word "end" as a Flowchart node. Capitalize all or any one the letters to keep the flowchart from breaking, i.e, "End" or "END". Or you can apply this [workaround](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897).**
-Node 
+Node
 ### A node (default)
 
 ```
@@ -585,6 +585,45 @@ flowchart TB
     two --> c2
  ```
 
+ ## Direction in subgraphs
+
+With the graphtype flowcharts you can use the direction state4ment to set the direction which the subgraph will render like in this example.
+
+```
+flowchart LR
+  subgraph TOP
+    direction TB
+    subgraph B1
+        direction RL
+        i1 -->f1
+    end
+    subgraph B2
+        direction BT
+        i2 -->f2
+    end
+  end
+  A --> TOP --> B
+  B1 --> B2
+ ```
+
+```mermaid
+flowchart LR
+
+      subgraph TOP
+        direction TB
+        subgraph B1
+            direction RL
+            i1 -->f1
+        end
+        subgraph B2
+            direction BT
+            i2 -->f2
+        end
+      end
+      A --> TOP --> B
+      B1 --> B2
+ ```
+
 ## 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'`.

src/diagrams/flowchart/parser/flow-direction.spec.js

@@ -15,7 +15,7 @@ describe('when parsing directions', function() {
   });
 
 
-  fit('should use default direction from top level', function() {
+  it('should use default direction from top level', function() {
     const res = flow.parser.parse(`flowchart TB
     subgraph A
       a --> b
@@ -28,9 +28,9 @@ describe('when parsing directions', function() {
     expect(subgraph.nodes[0]).toBe('b');
     expect(subgraph.nodes[1]).toBe('a');
     expect(subgraph.id).toBe('A');
-    expect(subgraph.dir).toBe('TB');
+    expect(subgraph.dir).toBe(undefined);
   });
-  fit('should handle a subgraph with a direction', function() {
+  it('should handle a subgraph with a direction', function() {
     const res = flow.parser.parse(`flowchart TB
     subgraph A
       direction BT
@@ -46,7 +46,7 @@ describe('when parsing directions', function() {
     expect(subgraph.id).toBe('A');
     expect(subgraph.dir).toBe('BT');
   });
-  fit('should use the last defined direction', function() {
+  it('should use the last defined direction', function() {
     const res = flow.parser.parse(`flowchart TB
     subgraph A
       direction BT
@@ -64,7 +64,7 @@ describe('when parsing directions', function() {
     expect(subgraph.dir).toBe('RL');
   });
 
-  fit('should handle nested subgraphs 1', function() {
+  it('should handle nested subgraphs 1', function() {
     const res = flow.parser.parse(`flowchart TB
     subgraph A
       direction RL