Skip to content

Commit dd57030

Browse files
[autofix.ci] apply automated fixes
1 parent efba4c1 commit dd57030

File tree

1 file changed

+0
-100
lines changed

1 file changed

+0
-100
lines changed

docs/intro/syntax-reference.md

-100
Original file line numberDiff line numberDiff line change
@@ -83,103 +83,3 @@ Allows for the limited reconfiguration of a diagram just before it is rendered.
8383
### [Theme Manipulation](../config/theming.md)
8484

8585
An application of using Directives to change [Themes](../config/theming.md). `Theme` is a value within Mermaid's configuration that dictates the color scheme for diagrams.
86-
87-
### Layout and look
88-
89-
We've restructured how Mermaid renders diagrams, enabling new features like selecting layout and look. **Currently, this is supported for flowcharts and state diagrams**, with plans to extend support to all diagram types.
90-
91-
### Selecting Diagram Looks
92-
93-
Mermaid offers a variety of styles or “looks” for your diagrams, allowing you to tailor the visual appearance to match your specific needs or preferences. Whether you prefer a hand-drawn or classic style, you can easily customize your diagrams.
94-
95-
**Available Looks:**
96-
97-
• Hand-Drawn Look: For a more personal, creative touch, the hand-drawn look brings a sketch-like quality to your diagrams. This style is perfect for informal settings or when you want to add a bit of personality to your diagrams.
98-
• Classic Look: If you prefer the traditional Mermaid style, the classic look maintains the original appearance that many users are familiar with. It’s great for consistency across projects or when you want to keep the familiar aesthetic.
99-
100-
**How to Select a Look:**
101-
102-
You can select a look by adding the look parameter in the metadata section of your Mermaid diagram code. Here’s an example:
103-
```mermaid
104-
---
105-
config:
106-
look: handDrawn
107-
theme: neutral
108-
---
109-
flowchart LR
110-
A[Start] --> B{Decision}
111-
B -->|Yes| C[Continue]
112-
B -->|No| D[Stop]
113-
```
114-
115-
#### Selecting Layout Algorithms
116-
117-
In addition to customizing the look of your diagrams, Mermaid Chart now allows you to choose different layout algorithms to better organize and present your diagrams, especially when dealing with more complex structures. The layout algorithm dictates how nodes and edges are arranged on the page.
118-
119-
#### Supported Layout Algorithms:
120-
121-
• Dagre (default): This is the classic layout algorithm that has been used in Mermaid for a long time. It provides a good balance of simplicity and visual clarity, making it ideal for most diagrams.
122-
• ELK: For those who need more sophisticated layout capabilities, especially when working with large or intricate diagrams, the ELK (Eclipse Layout Kernel) layout offers advanced options. It provides a more optimized arrangement, potentially reducing overlapping and improving readability. This is not included out the box but needs to be added when integrating mermaid for sites/appliocations that want to have elk support.
123-
124-
#### How to Select a Layout Algorithm:
125-
126-
You can specify the layout algorithm directly in the metadata section of your Mermaid diagram code. Here’s an example:
127-
```mermaid
128-
---
129-
config:
130-
layout: elk
131-
look: handdrawn
132-
theme: forest
133-
---
134-
flowchart TB
135-
A[Start] --> B{Decision}
136-
B -->|Yes| C[Continue]
137-
B -->|No| D[Stop]
138-
```
139-
In this example, the `layout: elk` line configures the diagram to use the ELK layout algorithm, along with the handdrawn look and forest theme.
140-
141-
#### Customizing ELK Layout:
142-
143-
When using the ELK layout, you can further refine the diagram’s configuration, such as how nodes are placed and whether parallel edges should be combined:
144-
145-
- To combine parallel edges, use mergeEdges: true | false.
146-
- To configure node placement, use nodePlacementStrategy with the following options:
147-
o SIMPLE
148-
o NETWORK_SIMPLEX
149-
o LINEAR_SEGMENTS
150-
o BRANDES_KOEPF (default)
151-
152-
153-
**Example configuration:**
154-
155-
```mermaid
156-
---
157-
config:
158-
layout: elk
159-
elk:
160-
mergeEdges: true
161-
nodePlacementStrategy: LINEAR_SEGMENTS
162-
---
163-
flowchart LR
164-
A[Start] --> B{Choose Path}
165-
B -->|Option 1| C[Path 1]
166-
B -->|Option 2| D[Path 2]
167-
168-
#### Using Dagre Layout with Classic Look:
169-
```
170-
---
171-
config:
172-
layout: dagre
173-
look: classic
174-
theme: default
175-
---
176-
flowchart LR
177-
A[Start] --> B{Choose Path}
178-
B -->|Option 1| C[Path 1]
179-
B -->|Option 2| D[Path 2]
180-
```
181-
182-
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.
183-
184-
When integrating Mermaid, you can include look and layout configuration with the initialize call. This is also where you add the loading of elk.
185-

0 commit comments

Comments
 (0)