GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-28 07:03:17 +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: config:
layout: elk layout: elk
look: handdrawn look: handdrawn
theme: forest theme: dark
--- ---
flowchart TB flowchart TB
A[Start] --> B{Decision} A[Start] --> B{Decision}
@ -160,7 +160,7 @@ flowchart TB
config: config:
layout: elk layout: elk
look: handdrawn look: handdrawn
theme: forest theme: dark
--- ---
flowchart TB flowchart TB
A[Start] --> B{Decision} 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 combine parallel edges, use mergeEdges: true | false.
- To configure node placement, use nodePlacementStrategy with the following options: - To configure node placement, use nodePlacementStrategy with the following options:
o SIMPLE - SIMPLE
o NETWORK_SIMPLEX - NETWORK_SIMPLEX
o LINEAR_SEGMENTS - LINEAR_SEGMENTS
o BRANDES_KOEPF (default) - BRANDES_KOEPF (default)
**Example configuration:** **Example configuration:**
```mermaid-example ```
--- ---
config: config:
layout: elk layout: elk
@ -199,40 +199,23 @@ flowchart LR
#### Using Dagre Layout with Classic Look: #### Using Dagre Layout with Classic Look:
``` ```
```mermaid Another example:
---
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]
#### Using Dagre Layout with Classic Look:
``` ```
--- ---
config: config:
layout: dagre layout: dagre
look: classic look: classic
theme: default theme: default
--- ---
flowchart LR flowchart LR
A\[Start] --> B{Choose Path} A[Start] --> B{Choose Path}
B -->|Option 1| C\[Path 1] B -->|Option 1| C[Path 1]
B -->|Option 2| D\[Path 2] 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. 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. 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: config:
layout: elk layout: elk
look: handdrawn look: handdrawn
theme: forest theme: dark
--- ---
flowchart TB flowchart TB
A[Start] --> B{Decision} 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 combine parallel edges, use mergeEdges: true | false.
- To configure node placement, use nodePlacementStrategy with the following options: - To configure node placement, use nodePlacementStrategy with the following options:
o SIMPLE - SIMPLE
o NETWORK_SIMPLEX - NETWORK_SIMPLEX
o LINEAR_SEGMENTS - LINEAR_SEGMENTS
o BRANDES_KOEPF (default) - BRANDES_KOEPF (default)
**Example configuration:** **Example configuration:**
```mermaid ```
--- ---
config: config:
layout: elk layout: elk
@ -152,13 +152,14 @@ flowchart LR
#### Using Dagre Layout with Classic Look: #### Using Dagre Layout with Classic Look:
``` ```
Another example:
```
--- ---
config: config:
layout: dagre layout: dagre
look: classic look: classic
theme: default theme: default
--- ---
flowchart LR 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. 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. When integrating Mermaid, you can include look and layout configuration with the initialize call. This is also where you add the loading of elk.
```