GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-02-04 07:13:25 +08:00
Code Issues Projects Releases Wiki Activity

Merge pull request #4096 from koppor/patch-1

Browse Source 
Add hint on "flowchart" and "graph"
This commit is contained in:
Sidharth Vinod 2023-06-12 13:59:43 +05:30 committed by GitHub
commit 190d79613d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
docs/syntax/flowchart.md
View File

@ -32,6 +32,9 @@ flowchart LR
> **Note** > **Note**
> 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
@ -785,7 +788,10 @@ 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.
> **Note**
> This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
click nodeId callback click nodeId callback
click nodeId call callback() click nodeId call callback()
@ -1077,7 +1083,8 @@ You can change the renderer to elk by adding this directive:
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%% %%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
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**
> 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

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

@ -25,6 +25,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
@ -494,7 +498,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.
```note
This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
```
``` ```
click nodeId callback click nodeId callback
@ -737,7 +745,9 @@ You can change the renderer to elk by adding this directive:
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%% %%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
``` ```
```note
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