| 6dd74de | | | 1 | > **Warning** |
| 6dd74de | | | 2 | > |
| 6dd74de | | | 3 | > ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. |
| 6dd74de | | | 4 | > |
| 6dd74de | | | 5 | > ## Please edit the corresponding file in [/packages/mermaid/src/docs/intro/syntax-reference.md](../../packages/mermaid/src/docs/intro/syntax-reference.md). |
| 6dd74de | | | 6 | |
| 6dd74de | | | 7 | # Diagram Syntax |
| 6dd74de | | | 8 | |
| 6dd74de | | | 9 | Mermaid's syntax is used to create diagrams. You'll find that it is not too tricky and can be learned in a day. The next sections dive deep into the syntax of each diagram type. |
| 6dd74de | | | 10 | |
| 6dd74de | | | 11 | Syntax, together with Deployment and Configuration constitute the whole of Mermaid. |
| 6dd74de | | | 12 | |
| 6dd74de | | | 13 | Diagram Examples can be found in the [Mermaid Live Editor](https://mermaid.live), it is also a great practice area. |
| 6dd74de | | | 14 | |
| 6dd74de | | | 15 | ## Syntax Structure |
| 6dd74de | | | 16 | |
| 6dd74de | | | 17 | One would notice that all **Diagrams definitions begin** with a declaration of the **diagram type**, followed by the definitions of the diagram and its contents. This declaration notifies the parser which kind of diagram the code is supposed to generate. The only exception to this a [Frontmatter](#frontmatter-for-diagram-code) configuration. |
| 6dd74de | | | 18 | |
| 6dd74de | | | 19 | Line comments can ignore anything on the line after '%% '. |
| 6dd74de | | | 20 | |
| 6dd74de | | | 21 | Unknown words and misspellings will break a diagram, while parameters silently fail. |
| 6dd74de | | | 22 | |
| 6dd74de | | | 23 | **Example** : The code below is for an Entity Relationship Diagram, specified by the `erDiagram` declaration. What follows is the definition of the different `Entities` represented in it. |
| 6dd74de | | | 24 | |
| 6dd74de | | | 25 | ```mermaid-example |
| 6dd74de | | | 26 | erDiagram |
| 6dd74de | | | 27 | CUSTOMER }|..|{ DELIVERY-ADDRESS : has |
| 6dd74de | | | 28 | CUSTOMER ||--o{ ORDER : places |
| 6dd74de | | | 29 | CUSTOMER ||--o{ INVOICE : "liable for" |
| 6dd74de | | | 30 | DELIVERY-ADDRESS ||--o{ ORDER : receives |
| 6dd74de | | | 31 | INVOICE ||--|{ ORDER : covers |
| 6dd74de | | | 32 | ORDER ||--|{ ORDER-ITEM : includes |
| 6dd74de | | | 33 | PRODUCT-CATEGORY ||--|{ PRODUCT : contains |
| 6dd74de | | | 34 | PRODUCT ||--o{ ORDER-ITEM : "ordered in" |
| 6dd74de | | | 35 | ``` |
| 6dd74de | | | 36 | |
| 6dd74de | | | 37 | ```mermaid |
| 6dd74de | | | 38 | erDiagram |
| 6dd74de | | | 39 | CUSTOMER }|..|{ DELIVERY-ADDRESS : has |
| 6dd74de | | | 40 | CUSTOMER ||--o{ ORDER : places |
| 6dd74de | | | 41 | CUSTOMER ||--o{ INVOICE : "liable for" |
| 6dd74de | | | 42 | DELIVERY-ADDRESS ||--o{ ORDER : receives |
| 6dd74de | | | 43 | INVOICE ||--|{ ORDER : covers |
| 6dd74de | | | 44 | ORDER ||--|{ ORDER-ITEM : includes |
| 6dd74de | | | 45 | PRODUCT-CATEGORY ||--|{ PRODUCT : contains |
| 6dd74de | | | 46 | PRODUCT ||--o{ ORDER-ITEM : "ordered in" |
| 6dd74de | | | 47 | ``` |
| 6dd74de | | | 48 | |
| 6dd74de | | | 49 | The [Getting Started](./getting-started.md) section can also provide some practical examples of mermaid syntax. |
| 6dd74de | | | 50 | |
| 6dd74de | | | 51 | ## Diagram Breaking |
| 6dd74de | | | 52 | |
| 6dd74de | | | 53 | One should **beware the use of some words or symbols** that can break diagrams. These words or symbols are few and often only affect specific types of diagrams. The table below will continuously be updated. |
| 6dd74de | | | 54 | |
| 6dd74de | | | 55 | | Diagram Breakers | Reason | Solution | |
| 6dd74de | | | 56 | | ------------------------------------------------------------------------------------ | ----------------------------------------------------------------------- | ------------------------------------------------- | |
| 6dd74de | | | 57 | | **Comments** | | | |
| 6dd74de | | | 58 | | [`%%{``}%%`](https://github.com/mermaid-js/mermaid/issues/1968) | Similar to [Directives](../config/directives.md) confuses the renderer. | In comments using `%%`, avoid using "{}". | |
| 6dd74de | | | 59 | | **Flow-Charts** | | | |
| 6dd74de | | | 60 | | 'end' | The word "End" can cause Flowcharts and Sequence diagrams to break | Wrap them in quotation marks to prevent breakage. | |
| 6dd74de | | | 61 | | [Nodes inside Nodes](../syntax/flowchart.md?id=special-characters-that-break-syntax) | Mermaid gets confused with nested shapes | wrap them in quotation marks to prevent breaking | |
| 6dd74de | | | 62 | |
| 6dd74de | | | 63 | ## Mermaid Live Editor |
| 6dd74de | | | 64 | |
| 6dd74de | | | 65 | Now, that you've seen what you should not add to your diagrams, you can play around with them in the [Mermaid Live Editor](https://mermaid.live). |
| 6dd74de | | | 66 | |
| 6dd74de | | | 67 | ## Configuration |
| 6dd74de | | | 68 | |
| 6dd74de | | | 69 | Configuration is the third part of Mermaid, after deployment and syntax. It deals with the different ways that Mermaid can be customized across different deployments. |
| 6dd74de | | | 70 | |
| 6dd74de | | | 71 | If you are interested in altering and customizing your Mermaid Diagrams, you will find the methods and values available for [Configuration](../config/setup/README.md) here. It includes themes. |
| 6dd74de | | | 72 | This section will introduce the different methods of configuring the behaviors and appearances of Mermaid Diagrams. |
| 6dd74de | | | 73 | The following are the most commonly used methods, and they are all tied to Mermaid [Deployment](./getting-started.md) methods. |
| 6dd74de | | | 74 | |
| 6dd74de | | | 75 | ### Configuration Section in the [Live Editor](https://mermaid.live). |
| 6dd74de | | | 76 | |
| 6dd74de | | | 77 | Here you can edit certain values to change the behavior and appearance of the diagram. |
| 6dd74de | | | 78 | |
| 6dd74de | | | 79 | Each of these techniques are functionally equivalent, but better for different deployments. |
| 6dd74de | | | 80 | |
| 6dd74de | | | 81 | ### [The initialize() call](./getting-started.md#_3-calling-the-javascript-api) |
| 6dd74de | | | 82 | |
| 6dd74de | | | 83 | Used when Mermaid is called via an API, or through a `<script>` tag. |
| 6dd74de | | | 84 | |
| 6dd74de | | | 85 | ### Frontmatter for diagram code |
| 6dd74de | | | 86 | |
| 6dd74de | | | 87 | Frontmatter is the term for adding YAML metadata at the start of code. This allows for reconfiguration of a diagram before it is rendered. You can pass metadata Frontmatter with your definition by adding `---` to the lines before and after the definition. This 'triple dash' MUST be the only character on the first line. |
| 6dd74de | | | 88 | |
| 6dd74de | | | 89 | Frontmatter uses YAML syntax. It requires any indentation to be consistent and settings are case sensitive. Mermaid will silently ignore misspelling, but badly formed parameters will break the diagram. |
| 6dd74de | | | 90 | |
| 6dd74de | | | 91 | ```mermaid-example |
| 6dd74de | | | 92 | --- |
| 6dd74de | | | 93 | title: Frontmatter Example |
| 6dd74de | | | 94 | displayMode: compact |
| 6dd74de | | | 95 | config: |
| 6dd74de | | | 96 | theme: forest |
| 6dd74de | | | 97 | gantt: |
| 6dd74de | | | 98 | useWidth: 400 |
| 6dd74de | | | 99 | compact: true |
| 6dd74de | | | 100 | --- |
| 6dd74de | | | 101 | gantt |
| 6dd74de | | | 102 | section Waffle |
| 6dd74de | | | 103 | Iron : 1982, 3y |
| 6dd74de | | | 104 | House : 1986, 3y |
| 6dd74de | | | 105 | ``` |
| 6dd74de | | | 106 | |
| 6dd74de | | | 107 | ```mermaid |
| 6dd74de | | | 108 | --- |
| 6dd74de | | | 109 | title: Frontmatter Example |
| 6dd74de | | | 110 | displayMode: compact |
| 6dd74de | | | 111 | config: |
| 6dd74de | | | 112 | theme: forest |
| 6dd74de | | | 113 | gantt: |
| 6dd74de | | | 114 | useWidth: 400 |
| 6dd74de | | | 115 | compact: true |
| 6dd74de | | | 116 | --- |
| 6dd74de | | | 117 | gantt |
| 6dd74de | | | 118 | section Waffle |
| 6dd74de | | | 119 | Iron : 1982, 3y |
| 6dd74de | | | 120 | House : 1986, 3y |
| 6dd74de | | | 121 | ``` |
| 6dd74de | | | 122 | |
| 6dd74de | | | 123 | ### [Directives](../config/directives.md) |
| 6dd74de | | | 124 | |
| 6dd74de | | | 125 | Allows for the limited reconfiguration of a diagram just before it is rendered. It can alter the font style, color and other aesthetic aspects of the diagram. You can pass a directive alongside your definition inside `%%{ }%%`. It can be done either above or below your diagram definition. |
| 6dd74de | | | 126 | |
| 6dd74de | | | 127 | ### [Theme Manipulation](../config/theming.md) |
| 6dd74de | | | 128 | |
| 6dd74de | | | 129 | 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. |
| 6dd74de | | | 130 | |
| 6dd74de | | | 131 | ### Layout and look |
| 6dd74de | | | 132 | |
| 6dd74de | | | 133 | 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. |
| 6dd74de | | | 134 | |
| 6dd74de | | | 135 | ### Selecting Diagram Looks |
| 6dd74de | | | 136 | |
| 6dd74de | | | 137 | 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. |
| 6dd74de | | | 138 | |
| 6dd74de | | | 139 | **Available Looks:** |
| 6dd74de | | | 140 | |
| 6dd74de | | | 141 | - 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. |
| 6dd74de | | | 142 | - 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. |
| 6dd74de | | | 143 | |
| 6dd74de | | | 144 | **How to Select a Look:** |
| 6dd74de | | | 145 | |
| 6dd74de | | | 146 | You can select a look by adding the look parameter in the metadata section of your Mermaid diagram code. Here’s an example: |
| 6dd74de | | | 147 | |
| 6dd74de | | | 148 | ```mermaid-example |
| 6dd74de | | | 149 | --- |
| 6dd74de | | | 150 | config: |
| 6dd74de | | | 151 | look: handDrawn |
| 6dd74de | | | 152 | theme: neutral |
| 6dd74de | | | 153 | --- |
| 6dd74de | | | 154 | flowchart LR |
| 6dd74de | | | 155 | A[Start] --> B{Decision} |
| 6dd74de | | | 156 | B -->|Yes| C[Continue] |
| 6dd74de | | | 157 | B -->|No| D[Stop] |
| 6dd74de | | | 158 | ``` |
| 6dd74de | | | 159 | |
| 6dd74de | | | 160 | ```mermaid |
| 6dd74de | | | 161 | --- |
| 6dd74de | | | 162 | config: |
| 6dd74de | | | 163 | look: handDrawn |
| 6dd74de | | | 164 | theme: neutral |
| 6dd74de | | | 165 | --- |
| 6dd74de | | | 166 | flowchart LR |
| 6dd74de | | | 167 | A[Start] --> B{Decision} |
| 6dd74de | | | 168 | B -->|Yes| C[Continue] |
| 6dd74de | | | 169 | B -->|No| D[Stop] |
| 6dd74de | | | 170 | ``` |
| 6dd74de | | | 171 | |
| 6dd74de | | | 172 | #### Selecting Layout Algorithms |
| 6dd74de | | | 173 | |
| 6dd74de | | | 174 | 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. |
| 6dd74de | | | 175 | |
| 6dd74de | | | 176 | #### Supported Layout Algorithms: |
| 6dd74de | | | 177 | |
| 6dd74de | | | 178 | - 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. |
| 6dd74de | | | 179 | - 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/applications that want to have elk support. |
| 6dd74de | | | 180 | |
| 6dd74de | | | 181 | #### How to Select a Layout Algorithm: |
| 6dd74de | | | 182 | |
| 6dd74de | | | 183 | You can specify the layout algorithm directly in the metadata section of your Mermaid diagram code. Here’s an example: |
| 6dd74de | | | 184 | |
| 6dd74de | | | 185 | ```mermaid-example |
| 6dd74de | | | 186 | --- |
| 6dd74de | | | 187 | config: |
| 6dd74de | | | 188 | layout: elk |
| 6dd74de | | | 189 | look: handDrawn |
| 6dd74de | | | 190 | theme: dark |
| 6dd74de | | | 191 | --- |
| 6dd74de | | | 192 | flowchart TB |
| 6dd74de | | | 193 | A[Start] --> B{Decision} |
| 6dd74de | | | 194 | B -->|Yes| C[Continue] |
| 6dd74de | | | 195 | B -->|No| D[Stop] |
| 6dd74de | | | 196 | ``` |
| 6dd74de | | | 197 | |
| 6dd74de | | | 198 | ```mermaid |
| 6dd74de | | | 199 | --- |
| 6dd74de | | | 200 | config: |
| 6dd74de | | | 201 | layout: elk |
| 6dd74de | | | 202 | look: handDrawn |
| 6dd74de | | | 203 | theme: dark |
| 6dd74de | | | 204 | --- |
| 6dd74de | | | 205 | flowchart TB |
| 6dd74de | | | 206 | A[Start] --> B{Decision} |
| 6dd74de | | | 207 | B -->|Yes| C[Continue] |
| 6dd74de | | | 208 | B -->|No| D[Stop] |
| 6dd74de | | | 209 | ``` |
| 6dd74de | | | 210 | |
| 6dd74de | | | 211 | In this example, the `layout: elk` line configures the diagram to use the ELK layout algorithm, along with the hand drawn look and forest theme. |
| 6dd74de | | | 212 | |
| 6dd74de | | | 213 | #### Customizing ELK Layout: |
| 6dd74de | | | 214 | |
| 6dd74de | | | 215 | 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: |
| 6dd74de | | | 216 | |
| 6dd74de | | | 217 | - To combine parallel edges, use mergeEdges: true | false. |
| 6dd74de | | | 218 | - To configure node placement, use nodePlacementStrategy with the following options: |
| 6dd74de | | | 219 | - SIMPLE |
| 6dd74de | | | 220 | - NETWORK_SIMPLEX |
| 6dd74de | | | 221 | - LINEAR_SEGMENTS |
| 6dd74de | | | 222 | - BRANDES_KOEPF (default) |
| 6dd74de | | | 223 | |
| 6dd74de | | | 224 | **Example configuration:** |
| 6dd74de | | | 225 | |
| 6dd74de | | | 226 | ``` |
| 6dd74de | | | 227 | --- |
| 6dd74de | | | 228 | config: |
| 6dd74de | | | 229 | layout: elk |
| 6dd74de | | | 230 | elk: |
| 6dd74de | | | 231 | mergeEdges: true |
| 6dd74de | | | 232 | nodePlacementStrategy: LINEAR_SEGMENTS |
| 6dd74de | | | 233 | --- |
| 6dd74de | | | 234 | flowchart LR |
| 6dd74de | | | 235 | A[Start] --> B{Choose Path} |
| 6dd74de | | | 236 | B -->|Option 1| C[Path 1] |
| 6dd74de | | | 237 | B -->|Option 2| D[Path 2] |
| 6dd74de | | | 238 | |
| 6dd74de | | | 239 | ``` |
| 6dd74de | | | 240 | |
| 6dd74de | | | 241 | #### Using Dagre Layout with Classic Look: |
| 6dd74de | | | 242 | |
| 6dd74de | | | 243 | Another example: |
| 6dd74de | | | 244 | |
| 6dd74de | | | 245 | ``` |
| 6dd74de | | | 246 | --- |
| 6dd74de | | | 247 | config: |
| 6dd74de | | | 248 | layout: dagre |
| 6dd74de | | | 249 | look: classic |
| 6dd74de | | | 250 | theme: default |
| 6dd74de | | | 251 | --- |
| 6dd74de | | | 252 | |
| 6dd74de | | | 253 | flowchart LR |
| 6dd74de | | | 254 | A[Start] --> B{Choose Path} |
| 6dd74de | | | 255 | B -->|Option 1| C[Path 1] |
| 6dd74de | | | 256 | B -->|Option 2| D[Path 2] |
| 6dd74de | | | 257 | |
| 6dd74de | | | 258 | ``` |
| 6dd74de | | | 259 | |
| 6dd74de | | | 260 | 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. |
| 6dd74de | | | 261 | |
| 6dd74de | | | 262 | When integrating Mermaid, you can include look and layout configuration with the initialize call. This is also where you add the loading of elk. |