diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html index 08a4c0e68..95f3c15bc 100644 --- a/cypress/platform/knsv2.html +++ b/cypress/platform/knsv2.html @@ -60,9 +60,9 @@
%%{init: {"flowchart": {"htmlLabels": false}} }%% flowchart-elk LR -b(`The dog in **the** hog(2)... a a a a *very long text* about it +b("`The dog in **the** hog(2)... a a a a *very long text* about it Word! -Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. `) +Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. `")
@@ -89,10 +89,12 @@ mindmap
mindmap - id1["`**Start** with - a second line 😎`"] - id2["`The dog in **the** hog... a *very long text* about it -Word!`"] + id1["`**Root** with +a second line +Unicode works too: 🤓`"] + id2["`The dog in **the** hog... a *very long text* that wraps to a new line`"] + id3[Regular labels still works] +
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%% diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md index c79f12b23..6f5b973e8 100644 --- a/docs/syntax/flowchart.md +++ b/docs/syntax/flowchart.md @@ -710,6 +710,44 @@ flowchart LR B1 --> B2 ``` +## Markdown Strings + +The "Markdown Strings" feature enhances flowcharts and mind maps by offering a more versatile string type, which supports text formatting options such as bold and italics, and automatically wraps text within labels. + +```mermaid-example +%%{init: {"flowchart": {"htmlLabels": false}} }%% +flowchart LR +subgraph "One" + a("`The **cat** + in the hat`") -- "edge label" --> b{{"`The **dog** in the hog`"}} +end +subgraph "`**Two**`" + c("`The **cat** + in the hat`") -- "`Bold **edge label**`" --> d("The dog in the hog") +end +``` + +```mermaid +%%{init: {"flowchart": {"htmlLabels": false}} }%% +flowchart LR +subgraph "One" + a("`The **cat** + in the hat`") -- "edge label" --> b{{"`The **dog** in the hog`"}} +end +subgraph "`**Two**`" + c("`The **cat** + in the hat`") -- "`Bold **edge label**`" --> d("The dog in the hog") +end +``` + +Formatting: + +- For bold text, use double asterisks \*\* before and after the text. +- For italics, use single asterisks \* before and after the text. +- With traditional strings, you needed to add
tags for text to wrap in nodes. However, markdown strings automatically wrap text when it becomes too long and allows you to start a new line by simply using a newline character instead of a
tag. + +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'`. diff --git a/docs/syntax/mindmap.md b/docs/syntax/mindmap.md index babe47756..9687bbef7 100644 --- a/docs/syntax/mindmap.md +++ b/docs/syntax/mindmap.md @@ -254,6 +254,34 @@ Root C ``` +## Markdown Strings + +The "Markdown Strings" feature enhances mind maps by offering a more versatile string type, which supports text formatting options such as bold and italics, and automatically wraps text within labels. + +```mermaid-example +mindmap + id1["`**Root** with +a second line +Unicode works too: 🤓`"] + id2["`The dog in **the** hog... a *very long text* that wraps to a new line`"] + id3[Regular labels still works] +``` + +```mermaid +mindmap + id1["`**Root** with +a second line +Unicode works too: 🤓`"] + id2["`The dog in **the** hog... a *very long text* that wraps to a new line`"] + id3[Regular labels still works] +``` + +Formatting: + +- For bold text, use double asterisks \*\* before and after the text. +- For italics, use single asterisks \* before and after the text. +- With traditional strings, you needed to add
tags for text to wrap in nodes. However, markdown strings automatically wrap text when it becomes too long and allows you to start a new line by simply using a newline character instead of a
tag. + ## Integrating with your library/website. Mindmap uses the experimental lazy loading & async rendering features which could change in the future. From version 9.4.0 this diagram is included in mermaid but use lazy loading in order to keep the size of mermaid down. This is important in order to be able to add additional diagrams going forward. diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md index 8e73f597b..936607cbd 100644 --- a/packages/mermaid/src/docs/syntax/flowchart.md +++ b/packages/mermaid/src/docs/syntax/flowchart.md @@ -446,6 +446,31 @@ flowchart LR B1 --> B2 ``` +## Markdown Strings + +The "Markdown Strings" feature enhances flowcharts and mind maps by offering a more versatile string type, which supports text formatting options such as bold and italics, and automatically wraps text within labels. + +```mermaid-example +%%{init: {"flowchart": {"htmlLabels": false}} }%% +flowchart LR +subgraph "One" + a("`The **cat** + in the hat`") -- "edge label" --> b{{"`The **dog** in the hog`"}} +end +subgraph "`**Two**`" + c("`The **cat** + in the hat`") -- "`Bold **edge label**`" --> d("The dog in the hog") +end +``` + +Formatting: + +- For bold text, use double asterisks \*\* before and after the text. +- For italics, use single asterisks \* before and after the text. +- With traditional strings, you needed to add
tags for text to wrap in nodes. However, markdown strings automatically wrap text when it becomes too long and allows you to start a new line by simply using a newline character instead of a
tag. + +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'`. diff --git a/packages/mermaid/src/docs/syntax/mindmap.md b/packages/mermaid/src/docs/syntax/mindmap.md index 1cb1f68d4..64a25821a 100644 --- a/packages/mermaid/src/docs/syntax/mindmap.md +++ b/packages/mermaid/src/docs/syntax/mindmap.md @@ -162,6 +162,25 @@ Root C ``` +## Markdown Strings + +The "Markdown Strings" feature enhances mind maps by offering a more versatile string type, which supports text formatting options such as bold and italics, and automatically wraps text within labels. + +```mermaid-example +mindmap + id1["`**Root** with +a second line +Unicode works too: 🤓`"] + id2["`The dog in **the** hog... a *very long text* that wraps to a new line`"] + id3[Regular labels still works] +``` + +Formatting: + +- For bold text, use double asterisks \*\* before and after the text. +- For italics, use single asterisks \* before and after the text. +- With traditional strings, you needed to add
tags for text to wrap in nodes. However, markdown strings automatically wrap text when it becomes too long and allows you to start a new line by simply using a newline character instead of a
tag. + ## Integrating with your library/website. Mindmap uses the experimental lazy loading & async rendering features which could change in the future. From version 9.4.0 this diagram is included in mermaid but use lazy loading in order to keep the size of mermaid down. This is important in order to be able to add additional diagrams going forward.