From 4c92592aa18e5c58e3ccb58d75704a441ca9201a Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Tue, 18 May 2021 22:34:24 +0200 Subject: [PATCH] #2050 Updating tests and adding docs --- .../rendering/flowchart-v2.spec.js | 23 ++++++++++ .../integration/rendering/flowchart.spec.js | 22 ---------- docs/flowchart.md | 43 ++++++++++++++++++- .../flowchart/parser/flow-direction.spec.js | 10 ++--- 4 files changed, 69 insertions(+), 29 deletions(-) diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js index 1a378ca9a..00d0d4a77 100644 --- a/cypress/integration/rendering/flowchart-v2.spec.js +++ b/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'} + ); + }); }); diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js index 32115cd2d..4c9056711 100644 --- a/cypress/integration/rendering/flowchart.spec.js +++ b/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'} - ); - }); }); diff --git a/docs/flowchart.md b/docs/flowchart.md index 004af40ca..aacf6a024 100644 --- a/docs/flowchart.md +++ b/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'`. diff --git a/src/diagrams/flowchart/parser/flow-direction.spec.js b/src/diagrams/flowchart/parser/flow-direction.spec.js index d03ac74ad..284c5982b 100644 --- a/src/diagrams/flowchart/parser/flow-direction.spec.js +++ b/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