marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-20 15:59:51 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add hint on "flowchart" and "graph" (and some more styling)

Browse Source
This commit is contained in:
Oliver Kopp
2023-04-30 20:16:24 +02:00
parent c79be5d829
commit df1095166e
1 changed files with 14 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,7 +9,9 @@ All Flowcharts are composed of **nodes**, the geometric shapes and **edges**, th
It can also accommodate different arrow types, multi directional arrows, and linking to and from subgraphs. It can also accommodate 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). ```warning
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).
```
### A node (default) ### A node (default)
@@ -25,6 +27,10 @@ flowchart LR
The id is what is displayed in the box. The id is what is displayed in the box.
``` ```
```tip
Instead of `flowchart` one can also use `graph`.
```
### A node with text ### A node with text
It is also possible to set text in the box that differs from the id. If this is done several times, it is the last text It is also possible to set text in the box that differs from the id. If this is done several times, it is the last text
@@ -473,7 +479,11 @@ This feature is applicable to node labels, edge labels, and subgraph labels.
## Interaction ## 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'`. 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.
```info
This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
```
``` ```
click nodeId callback click nodeId callback
@@ -716,7 +726,9 @@ You can change the renderer to elk by adding this directive:
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%% %%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
``` ```
```info
Note that the site needs to use mermaid version 9.4+ for this to work and have this featured enabled in the lazy-loading configuration. Note that the site needs to use mermaid version 9.4+ for this to work and have this featured enabled in the lazy-loading configuration.
```
### Width ### Width