mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-21 08:19:43 +02:00
Adding documentation for markdown strings
This commit is contained in:
@@ -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 <br> 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 <br> 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'`.
|
||||
|
Reference in New Issue
Block a user