Mermaid.js – Make graph & charts using code: What, Why, and How

📄 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

🔧 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, 2026-01-01, 2026-01-05
  Development    :active,  des2, 2026-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

❓ Tips

• Wrap Mermaid code in <pre class="mermaid"> for HTML rendering.
• Use the Live Editor: https://mermaid.live/
• Use flowchart TD or graph LR to control flow direction.
• Prefer sequenceDiagram for 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.

Rajesh Kumar

I’m Rajesh Kumar, a DevOps, SRE, DevSecOps, Cloud, and Platform Engineering expert passionate about sharing practical knowledge, real-world experiences, and industry best practices. I have worked at Cotocus and regularly write about technology, travel, investing, health, product reviews, and digital marketing through my various platforms.

I publish technical articles at DevOps School, travel stories at Holiday Landmark, stock market insights at Stocks Mantra, health and fitness guidance at My Medic Plus, product reviews at TrueReviewNow, and SEO and digital marketing strategies at Wizbrand.