#2050 Updating tests and adding docs
This commit is contained in:
parent
0bbefdc48f
commit
4c92592aa1
|
@ -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'}
|
||||
);
|
||||
});
|
||||
});
|
||||
|
|
|
@ -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'}
|
||||
);
|
||||
});
|
||||
});
|
||||
|
|
|
@ -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'`.
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue