From 44dcac750155fa1d8d5ab52a8c54811141669411 Mon Sep 17 00:00:00 2001 From: Steph <35910788+huynhicode@users.noreply.github.com> Date: Thu, 28 Dec 2023 11:34:46 -0800 Subject: [PATCH 1/2] update verbiage --- docs/syntax/flowchart.md | 28 +++++++++++++++---- packages/mermaid/src/docs/syntax/flowchart.md | 23 ++++++++++++--- 2 files changed, 42 insertions(+), 9 deletions(-) diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md index d9ddf0cbe4..9639ec58de 100644 --- a/docs/syntax/flowchart.md +++ b/docs/syntax/flowchart.md @@ -11,6 +11,9 @@ 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" as the first letter in a connecting Flowchart node, add a space before the letter or capitalize the letter "o" (e.g., "dev--- ops", "dev---Ops"). Typing "dev---ops" will create a [circle edge](#circle-edge-example). [Live Editor example](https://mermaid.live/edit#pako:eNpFjrEOwjAMRH-l8tz8QGbYYIENZbESh0ZK4ih1qFDVfycUEDf57p6lW8GyI9DgIy92wirD6WLy0OXooZTiMsMIiWrC4Dq3vksDMlEiA7qfjjy2KAZM3jqKTfj6zBa01EYjtOJQ6BDwXjGB9hjnnhbMN-a_JxeE6_mzZZ_0-zzuzRfcXhKpO50). + ### A node (default) ```mermaid-example @@ -488,23 +491,38 @@ flowchart TB B --> D ``` -### New arrow types +## New arrow types + +There are new types of arrows supported: + +- circle edge +- cross edge -There are new types of arrows supported as per below: +### 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..17f261b33e 100644 --- a/packages/mermaid/src/docs/syntax/flowchart.md +++ b/packages/mermaid/src/docs/syntax/flowchart.md @@ -11,6 +11,10 @@ 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" as the first letter in a connecting Flowchart node, add a space before the letter or capitalize the letter "o" (e.g., "dev--- ops", "dev---Ops"). Typing "dev---ops" will create a [circle edge](#circle-edge-example). [Live Editor example](https://mermaid.live/edit#pako:eNpFjrEOwjAMRH-l8tz8QGbYYIENZbESh0ZK4ih1qFDVfycUEDf57p6lW8GyI9DgIy92wirD6WLy0OXooZTiMsMIiWrC4Dq3vksDMlEiA7qfjjy2KAZM3jqKTfj6zBa01EYjtOJQ6BDwXjGB9hjnnhbMN-a_JxeE6_mzZZ_0-zzuzRfcXhKpO50). +``` + ### A node (default) ```mermaid-example @@ -306,17 +310,28 @@ flowchart TB B --> D ``` -### New arrow types +## New arrow types + +There are new types of arrows supported: + +- circle edge +- cross edge -There are new types of arrows supported as per below: +### 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. From 5cec92ceb303e7f57c139e0742e90be20eace387 Mon Sep 17 00:00:00 2001 From: Steph <35910788+huynhicode@users.noreply.github.com> Date: Thu, 28 Dec 2023 11:53:04 -0800 Subject: [PATCH 2/2] update verbiage --- docs/syntax/flowchart.md | 6 +++++- packages/mermaid/src/docs/syntax/flowchart.md | 6 +++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md index 9639ec58de..23fa7c8e32 100644 --- a/docs/syntax/flowchart.md +++ b/docs/syntax/flowchart.md @@ -12,7 +12,11 @@ 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" as the first letter in a connecting Flowchart node, add a space before the letter or capitalize the letter "o" (e.g., "dev--- ops", "dev---Ops"). Typing "dev---ops" will create a [circle edge](#circle-edge-example). [Live Editor example](https://mermaid.live/edit#pako:eNpFjrEOwjAMRH-l8tz8QGbYYIENZbESh0ZK4ih1qFDVfycUEDf57p6lW8GyI9DgIy92wirD6WLy0OXooZTiMsMIiWrC4Dq3vksDMlEiA7qfjjy2KAZM3jqKTfj6zBa01EYjtOJQ6BDwXjGB9hjnnhbMN-a_JxeE6_mzZZ_0-zzuzRfcXhKpO50). +> 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) diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md index 17f261b33e..e4be8d81a2 100644 --- a/packages/mermaid/src/docs/syntax/flowchart.md +++ b/packages/mermaid/src/docs/syntax/flowchart.md @@ -12,7 +12,11 @@ If you are using the word "end" in a Flowchart node, capitalize the entire word ``` ```warning -If you are using the letter "o" as the first letter in a connecting Flowchart node, add a space before the letter or capitalize the letter "o" (e.g., "dev--- ops", "dev---Ops"). Typing "dev---ops" will create a [circle edge](#circle-edge-example). [Live Editor example](https://mermaid.live/edit#pako:eNpFjrEOwjAMRH-l8tz8QGbYYIENZbESh0ZK4ih1qFDVfycUEDf57p6lW8GyI9DgIy92wirD6WLy0OXooZTiMsMIiWrC4Dq3vksDMlEiA7qfjjy2KAZM3jqKTfj6zBa01EYjtOJQ6BDwXjGB9hjnnhbMN-a_JxeE6_mzZZ_0-zzuzRfcXhKpO50). +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)