diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md index d9ddf0cbe4..23fa7c8e32 100644 --- a/docs/syntax/flowchart.md +++ b/docs/syntax/flowchart.md @@ -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. diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md index 23306acdd7..e4be8d81a2 100644 --- a/packages/mermaid/src/docs/syntax/flowchart.md +++ b/packages/mermaid/src/docs/syntax/flowchart.md @@ -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: -There are new types of arrows supported as per below: +- 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.