From df1095166ee3c4ee3d716c216e70d41b3d9854a6 Mon Sep 17 00:00:00 2001 From: Oliver Kopp Date: Sun, 30 Apr 2023 20:16:24 +0200 Subject: [PATCH 1/5] 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 97cbb4fe3..e3539b182 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/5] 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 31c8643be..965dcb051 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 From 26d0e5cb04f0d6286ddcff3a0b99f4430b6fa9c9 Mon Sep 17 00:00:00 2001 From: Oliver Kopp Date: Mon, 12 Jun 2023 09:48:02 +0200 Subject: [PATCH 3/5] Rename "info" to "note" --- docs/syntax/flowchart.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md index 33d663112..95eba3871 100644 --- a/docs/syntax/flowchart.md +++ b/docs/syntax/flowchart.md @@ -790,7 +790,7 @@ This feature is applicable to node labels, edge labels, and subgraph labels. 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 +```note This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`. ``` @@ -1084,7 +1084,7 @@ You can change the renderer to elk by adding this directive: %%{init: {"flowchart": {"defaultRenderer": "elk"}} }%% -```info +```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. ``` From ea138ef29f23a4398f5f92728d62cdcbb16b9a3f Mon Sep 17 00:00:00 2001 From: Oliver Kopp Date: Mon, 12 Jun 2023 09:48:28 +0200 Subject: [PATCH 4/5] Rename info to note --- packages/mermaid/src/docs/syntax/flowchart.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md index 01f23fc74..82b1cb945 100644 --- a/packages/mermaid/src/docs/syntax/flowchart.md +++ b/packages/mermaid/src/docs/syntax/flowchart.md @@ -500,7 +500,7 @@ This feature is applicable to node labels, edge labels, and subgraph labels. 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 +```note This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`. ``` @@ -745,7 +745,7 @@ You can change the renderer to elk by adding this directive: %%{init: {"flowchart": {"defaultRenderer": "elk"}} }%% ``` -```info +```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. ``` From bdd3ed41fc6392c3c155b2a0f0f90f38c05c91e5 Mon Sep 17 00:00:00 2001 From: koppor Date: Mon, 12 Jun 2023 07:51:59 +0000 Subject: [PATCH 5/5] Update docs --- docs/syntax/flowchart.md | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md index 95eba3871..0dbbc801b 100644 --- a/docs/syntax/flowchart.md +++ b/docs/syntax/flowchart.md @@ -790,9 +790,8 @@ This feature is applicable to node labels, edge labels, and subgraph labels. 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'`. -``` +> **Note** +> This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`. click nodeId callback click nodeId call callback() @@ -1084,9 +1083,8 @@ You can change the renderer to elk by adding this directive: %%{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** +> 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