Mermaid Diagrams
Create interactive diagrams and visualizations using Mermaid syntax.
What is Mermaid?
Mermaid is a JavaScript-based diagramming tool that renders text definitions into diagrams. MD Editor fully supports Mermaid, allowing you to create complex diagrams using simple text syntax.
Basic Usage
Create Mermaid diagrams using code blocks with the mermaid language identifier:
Flowcharts
Basic Flowchart
Try creating a flowchart →Flowchart Directions
TDorTB- Top to bottomBT- Bottom to topLR- Left to rightRL- Right to left
Node Shapes
Sequence Diagrams
Visualize interactions between different actors or systems:
Message Types
Try creating a sequence diagram →Class Diagrams
Model object-oriented systems:
State Diagrams
Represent state machines:
Entity Relationship Diagrams
Model database relationships:
Gantt Charts
Create project timelines:
Try creating a Gantt chart →Mermaid timeline in Markdown
Timeline diagrams are great for release notes, project plans, and documentation history. Start your diagram with timeline:
Pie Charts
Display proportional data:
Export Mermaid diagrams
If you need to export a Mermaid diagram as an image (for docs, slides, or PDFs), use the free MD Editor tools:
- Mermaid to PNG (opens in a new tab)
- Mermaid to SVG (opens in a new tab)
- Mermaid to WebP (opens in a new tab)
Next steps
- Read: Use Mermaid.js in Markdown Editor (opens in a new tab)
- Read: Complete guide to diagrams in Markdown (opens in a new tab)
Git Graph
Visualize git branching:
User Journey
Map user experiences:
Mindmap
Create hierarchical mind maps:
Flowchart with Styling
Quadrant Charts
Timeline
C4 Diagrams
Model software architecture:
Tips for Mermaid Diagrams
- Keep it simple - Start with basic diagrams and add complexity as needed
- Use meaningful labels - Clear labels make diagrams easier to understand
- Choose the right diagram type - Each type serves a specific purpose
- Test as you build - Preview diagrams frequently to catch syntax errors
- Add comments - Use
%%for comments in your diagram code
Common Syntax
Adding Comments
Line Breaks in Text
Use <br/> for line breaks in node text:
Error Handling
MD Editor includes:
- Syntax validation - Catches common Mermaid syntax errors
- Auto-fixing - Automatically fixes certain syntax issues
- Error messages - Clear error messages when diagrams fail to render
- Graceful fallback - Shows code if diagram cannot be rendered
Advanced Features
Subgraphs
Links
Interactions
Mermaid diagrams in MD Editor are interactive:
- Zoom and pan capabilities
- Click handlers for links
- Tooltip support
Limitations
- Very large diagrams may impact performance
- Some advanced Mermaid features may not be supported in all export formats
- Complex diagrams may need simplification for PDF export
Learn More
For complete Mermaid syntax documentation, visit Mermaid's official documentation (opens in a new tab).