2.9 KiB
Diagram syntax
Diagram Syntax is not too tricky and there are guides for each type of Diagram. However, it requires some precision to render them correctly. The Getting Started section can also provide some practical instances of using mermaid.
Mermaid's syntax is used mainly to create and modify diagrams.
to save diagrams, there are a couple of ways,we recommend saving the diagram's definition along with the diagram itself, to make the diagram easy to edit.
Diagram Breaking
One should beware the use of some words or symbols that can ruin diagrams, and using avoid them.
%%{ }%% These are
| Diagram Breakers | Reason | Solution |
|---|---|---|
| Comments | ||
%%{ |
Similar to Directives confuses the renderer. | |
}%% |
Similar to Directives confuses the renderer. | To comment, just use %% |
| Flow-Charts | ||
| 'end' | The word "End" can cause Flowcharts and Sequence diagrams to break | wrap them in quotation marks to prevent breakage |
| Nodes inside Nodes | Mermaid gets confused with nested shapes | wrap them in quotation marks to prevent breaking graph LR |
Mermaid Live Editor
Now, that you've seen what you should not add to your diagrams, you can play around with them in the Mermaid Live Editor.
Configuration
Configuration is the second half of Mermaid, after deployment. Together Deployment and Configuration constitute the whole of Mermaid.
If you are interested in altering and customizing your Mermaid Diagrams, you will find the methods and values available for Configuration here. It includes themes This section will introduce the different methods of configuring of the behaviors and apperances of Mermaid Diagrams. The Following are the most commonly used methods, and are all tied to Mermaid Deployment methods.
Configuration Section in the Live Editor.
Here you can edit certain values to change the behavior and appearance of the diagram.