From df1095166ee3c4ee3d716c216e70d41b3d9854a6 Mon Sep 17 00:00:00 2001 From: Oliver Kopp Date: Sun, 30 Apr 2023 20:16:24 +0200 Subject: [PATCH 1/2] Add hint on "flowchart" and "graph" (and some more styling) --- packages/mermaid/src/docs/syntax/flowchart.md | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md index 97cbb4fe350..e3539b182a2 100644 --- a/packages/mermaid/src/docs/syntax/flowchart.md +++ b/packages/mermaid/src/docs/syntax/flowchart.md @@ -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. -> **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) @@ -25,6 +27,10 @@ flowchart LR The id is what is displayed in the box. ``` +```tip +Instead of `flowchart` one can also use `graph`. +``` + ### 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 @@ -473,7 +479,11 @@ This feature is applicable to node labels, edge labels, and subgraph labels. ## 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 @@ -716,7 +726,9 @@ You can change the renderer to elk by adding this directive: %%{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. +``` ### Width From 5c8b7390475da607d3973089c09e331ebb67b1cb Mon Sep 17 00:00:00 2001 From: koppor Date: Sun, 30 Apr 2023 18:19:56 +0000 Subject: [PATCH 2/2] Update docs --- docs/syntax/flowchart.md | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md index 31c8643be77..965dcb05141 100644 --- a/docs/syntax/flowchart.md +++ b/docs/syntax/flowchart.md @@ -10,7 +10,8 @@ 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. -> **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) @@ -33,6 +34,9 @@ flowchart LR > **Note** > The id is what is displayed in the box. +> **💡 Tip** +> Instead of `flowchart` one can also use `graph`. + ### 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 @@ -750,7 +754,11 @@ This feature is applicable to node labels, edge labels, and subgraph labels. ## 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 call callback() @@ -1042,7 +1050,9 @@ You can change the renderer to elk by adding this directive: %%{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. +``` ### Width