Mermaid Diagrams Guide
Mermaid allows you to create complex diagrams and visualizations using text and code. xyzEditor has built-in support for Mermaid, automatically rendering your code blocks into beautiful SVG diagrams.Feel free to edit the code blocks below to see the diagrams update live!
1. How to use Mermaid
Create a Markdown code block and specify mermaid as the language. The contents will be instantly processed by the Mermaid engine.
2. Flowcharts
Flowcharts use nodes (geometric shapes) and edges (arrows or lines). You define the direction using TD (top-down) or LR (left-right).
3. Sequence Diagrams
Sequence diagrams show interactions between multiple participants over time.
4. Class Diagrams
Used to describe the structure of a system by showing its classes, attributes, operations, and relationships.
5. State Diagrams
Useful to describe the behavior of a system through its various states.
6. Gantt Charts
A Gantt chart is useful for tracking the amount of time it takes before a project is finished.
7. Entity Relationship Diagrams
Entity Relationship Diagrams (ERD) represent the structure of a database.
8. Git Graphs
Show a visual representation of Git branches and commits.
9. User Journey
Describe at a high level of detail exactly what steps different users take to complete a specific task within a system.
10. Pie Charts
Easily render data as a pie chart.
Want to keep this guide offline?
xyzEditor excels at local-first, privacy-focused PDF generation. You can instantly save this entire guide as a beautifully formatted PDF document.