GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-28 07:03:17 +08:00
Code Issues Projects Releases Wiki Activity

Merge pull request #5169 from mermaid-js/open-arrows

Browse Source 
DOCS: update Flowchart page
This commit is contained in:
Sidharth Vinod 2024-01-11 05:41:16 +00:00 committed by GitHub
commit 6ac8523f78
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 50 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
docs/syntax/flowchart.md
View File

@ -11,6 +11,13 @@ Flowcharts are composed of **nodes** (geometric shapes) and **edges** (arrows or
> **Warning**
> If you are using the word "end" in a Flowchart node, capitalize the entire word or any of the letters (e.g., "End" or "END"), or apply this [workaround](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897). Typing "end" in all lowercase letters will break the Flowchart.
> **Warning**
> If you are using the letter "o" or "x" as the first letter in a connecting Flowchart node, add a space before the letter or capitalize the letter (e.g., "dev--- ops", "dev---Ops").
>
> Typing "A---oB" will create a [circle edge](#circle-edge-example).
>
> Typing "A---xB" will create a [cross edge](#cross-edge-example).
### A node (default)
```mermaid-example
@ -488,23 +495,38 @@ flowchart TB
B --> D
```
### New arrow types
## New arrow types
There are new types of arrows supported as per below:
There are new types of arrows supported:
- circle edge
- cross edge
### Circle edge example
```mermaid-example
flowchart LR
A --o B
B --x C
```
```mermaid
flowchart LR
A --o B
B --x C
```
### Multi directional arrows
### Cross edge example
```mermaid-example
flowchart LR
A --x B
```
```mermaid
flowchart LR
A --x B
```
## Multi directional arrows
There is the possibility to use multidirectional arrows.

27
packages/mermaid/src/docs/syntax/flowchart.md
View File

@ -11,6 +11,14 @@ Flowcharts are composed of **nodes** (geometric shapes) and **edges** (arrows or
If you are using the word "end" in a Flowchart node, capitalize the entire word or any of the letters (e.g., "End" or "END"), or apply this [workaround](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897). Typing "end" in all lowercase letters will break the Flowchart.
```
```warning
If you are using the letter "o" or "x" as the first letter in a connecting Flowchart node, add a space before the letter or capitalize the letter (e.g., "dev--- ops", "dev---Ops").
Typing "A---oB" will create a [circle edge](#circle-edge-example).
Typing "A---xB" will create a [cross edge](#cross-edge-example).
```
### A node (default)
```mermaid-example
@ -306,17 +314,28 @@ flowchart TB
B --> D
```
### New arrow types
## New arrow types
There are new types of arrows supported as per below:
There are new types of arrows supported:
- circle edge
- cross edge
### Circle edge example
```mermaid-example
flowchart LR
A --o B
B --x C
```
### Multi directional arrows
### Cross edge example
```mermaid-example
flowchart LR
A --x B
```
## Multi directional arrows
There is the possibility to use multidirectional arrows.