GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-14 06:43:25 +08:00
Code Issues Projects Releases Wiki Activity

Updates to information about the new syntax

Browse Source
This commit is contained in:
Knut Sveidqvist 2024-08-23 17:41:24 +02:00
parent d559fcc90b
commit e499f700ce
2 changed files with 26 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
docs/intro/syntax-reference.md
View File

@ -147,7 +147,7 @@ You can specify the layout algorithm directly in the metadata section of your Me
config:
layout: elk
look: handdrawn
theme: forest
theme: dark
---
flowchart TB
A[Start] --> B{Decision}
@ -160,7 +160,7 @@ flowchart TB
config:
layout: elk
look: handdrawn
theme: forest
theme: dark
---
flowchart TB
A[Start] --> B{Decision}
@ -176,14 +176,14 @@ When using the ELK layout, you can further refine the diagram’s configuration,
- To combine parallel edges, use mergeEdges: true | false.
- To configure node placement, use nodePlacementStrategy with the following options:
o SIMPLE
o NETWORK_SIMPLEX
o LINEAR_SEGMENTS
o BRANDES_KOEPF (default)
- SIMPLE
- NETWORK_SIMPLEX
- LINEAR_SEGMENTS
- BRANDES_KOEPF (default)
**Example configuration:**
```mermaid-example
```
---
config:
layout: elk
@ -199,40 +199,23 @@ flowchart LR
#### Using Dagre Layout with Classic Look:
```
```mermaid
---
config:
layout: elk
elk:
mergeEdges: true
nodePlacementStrategy: LINEAR_SEGMENTS
---
flowchart LR
A[Start] --> B{Choose Path}
B -->|Option 1| C[Path 1]
B -->|Option 2| D[Path 2]
Another example:
#### Using Dagre Layout with Classic Look:
```
---
config:
layout: dagre
look: classic
theme: default
layout: dagre
look: classic
theme: default
---
flowchart LR
A\[Start] --> B{Choose Path}
B -->|Option 1| C\[Path 1]
B -->|Option 2| D\[Path 2]
A[Start] --> B{Choose Path}
B -->|Option 1| C[Path 1]
B -->|Option 2| D[Path 2]
```
These options give you the flexibility to create diagrams that not only look great but are also arranged to best suit your data’s structure and flow.
When integrating Mermaid, you can include look and layout configuration with the initialize call. This is also where you add the loading of elk.
```

25
packages/mermaid/src/docs/intro/syntax-reference.md
View File

@ -113,7 +113,7 @@ You can specify the layout algorithm directly in the metadata section of your Me
config:
layout: elk
look: handdrawn
theme: forest
theme: dark
---
flowchart TB
A[Start] --> B{Decision}
@ -129,14 +129,14 @@ When using the ELK layout, you can further refine the diagram’s configuration,
- To combine parallel edges, use mergeEdges: true | false.
- To configure node placement, use nodePlacementStrategy with the following options:
o SIMPLE
o NETWORK_SIMPLEX
o LINEAR_SEGMENTS
o BRANDES_KOEPF (default)
- SIMPLE
- NETWORK_SIMPLEX
- LINEAR_SEGMENTS
- BRANDES_KOEPF (default)
**Example configuration:**
```mermaid
```
---
config:
layout: elk
@ -152,13 +152,14 @@ flowchart LR
#### Using Dagre Layout with Classic Look:
```
Another example:
```
---
config:
layout: dagre
look: classic
theme: default
layout: dagre
look: classic
theme: default
---
flowchart LR
@ -171,5 +172,3 @@ B -->|Option 2| D[Path 2]
These options give you the flexibility to create diagrams that not only look great but are also arranged to best suit your data’s structure and flow.
When integrating Mermaid, you can include look and layout configuration with the initialize call. This is also where you add the loading of elk.
```