š What is Mermaid.js?
Mermaid.js is an open-source JavaScript library that lets you create diagrams and visualizations using simple markdown-like syntax. It is especially useful for developers, technical writers, DevOps engineers, and data modelers who want to include flowcharts, sequence diagrams, class diagrams, and more directly in documentation or webpages.
- Official Site: https://mermaid.js.org
- License: MIT
ā Why Use Mermaid.js?
ā Benefits:
- Simple syntax: Easy to learn and write.
- Embeddable: Works with HTML, Markdown, GitHub, GitLab, VS Code, Notion, Obsidian, and more.
- No external diagram tools needed: Write once, render anywhere.
- Customizable: Themes, configs, and rendering options.
- Open-source and client-side: No need for server processing.
āļø Core Features
| Diagram Type | Syntax Keyword | Use Case |
|---|---|---|
| Flowchart | graph | Process maps, logic trees |
| Sequence Diagram | sequenceDiagram | API calls, user interactions |
| Class Diagram | classDiagram | Object-oriented design |
| Gantt Chart | gantt | Project timelines |
| State Diagram | stateDiagram | State machines |
| Entity Relationship | erDiagram | Database schema visualization |
| Pie Chart | pie | Proportion data |
| Journey Diagram | journey | Customer/user journey mapping |
| Git Graph | gitGraph | Git commit history and branching |
| Mindmap (experimental) | mindmap | Brainstorming and ideation |
| Requirement Diagram | requirementDiagram | System/software requirement modeling |
š§ How to Use Mermaid.js
Option 1: Using CDN (Recommended for Beginners)
<!DOCTYPE html>
<html>
<head>
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
</script>
</head>
<body>
<pre class="mermaid">
graph TD
A[Start] --> B{Is it working?}
B -- Yes --> C[Great]
B -- No --> D[Fix it]
D --> B
</pre>
</body>
</html>
Code language: HTML, XML (xml)Option 2: Install with NPM (Advanced)
npm install mermaid
Then in your JS:
import mermaid from 'mermaid';
mermaid.initialize({ startOnLoad: true });
Code language: JavaScript (javascript)š Examples
Flowchart
graph LR
A[Start] --> B[Next Step]
B --> C{Decision?}
C -- Yes --> D[Do A]
C -- No --> E[Do B]
Code language: PHP (php)Sequence Diagram
sequenceDiagram
Alice->>Bob: Hello Bob
Bob-->>Alice: Hi Alice
Gantt Chart
gantt
title Project Timeline
dateFormat YYYY-MM-DD
section Development
Planning :done, des1, 2025-01-01, 2025-01-05
Development :active, des2, 2025-01-06, 10d
Code language: CSS (css)āļø Configuration
You can configure Mermaid using:
mermaid.initialize({
startOnLoad: true,
theme: 'default', // or 'dark', 'forest', 'neutral'
securityLevel: 'strict',
flowchart: { curve: 'basis' },
});
Code language: CSS (css)š Supported Platforms
| Platform | Mermaid Support |
|---|---|
| GitHub (Markdown) | ā Yes |
| GitLab | ā Yes |
| Obsidian | ā Plugin |
| Notion | ā Embed workaround |
| VS Code | ā With extension |
| HTML websites | ā Native |
| Docusaurus/MkDocs | ā With plugins |
ā Tips
- Wrap Mermaid code in
<pre class="mermaid">for HTML rendering. - Use the Live Editor: https://mermaid.live/
- Use
flowchart TDorgraph LRto control flow direction. - Prefer
sequenceDiagramfor time-based flows.
š Roadmap
- Improvements to
mindmap - Export to PDF/SVG
- Accessibility enhancements
š Conclusion
Mermaid.js is a flexible and lightweight diagramming solution perfect for developers, engineers, and technical writers. Whether you’re documenting infrastructure, user journeys, or system design, Mermaid makes it easy to visualize and maintain your diagrams directly in code or markdown.
Iām a DevOps/SRE/DevSecOps/Cloud Expert passionate about sharing knowledge and experiences. I have worked at Cotocus. I share tech blog at DevOps School, travel stories at Holiday Landmark, stock market tips at Stocks Mantra, health and fitness guidance at My Medic Plus, product reviews at TrueReviewNow , and SEO strategies at Wizbrand.
Do you want to learn Quantum Computing?
Please find my social handles as below;
Rajesh Kumar Personal Website
Rajesh Kumar at YOUTUBE
Rajesh Kumar at INSTAGRAM
Rajesh Kumar at X
Rajesh Kumar at FACEBOOK
Rajesh Kumar at LINKEDIN
Rajesh Kumar at WIZBRAND
