ENG
  • KOR
  • ENG
  • JPN

mermaid

Mermaid is a library that uses Markdown-like syntax to generate flowcharts, sequence diagrams, class diagrams, and gantt charts.

Latest Ver 11.5.0
Homepage
Github
1
78,711
Beyond Imagination in Graphics
Transcend the limits of design, visualize your data with powerful diagrams.
Mermaid facilitates the creation of complex diagrams with ease.

CDN Download

License: MIT
View All Versions
https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.5.0/mermaid.js
https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.5.0/mermaid.min.js
https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.5.0/Diagram.d.ts
https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.5.0/__mocks__/mermaidAPI.d.ts
https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.5.0/accessibility.d.ts
https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.5.0/accessibility.spec.d.ts
https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.5.0/assignWithDepth.d.ts
https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.5.0/chunks/mermaid.core/architectureDiagram-PQUH6ZAG.mjs
https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.5.0/chunks/mermaid.core/architectureDiagram-PQUH6ZAG.mjs.map
https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.5.0/chunks/mermaid.core/blockDiagram-5JUZGEFE.mjs

Sample Code

⚠️ Some code, including import statements, may not run properly on jsFiddle. If it fails to execute, please copy the code and try it in your own environment. 
📄 HTML
<div class="mermaid">
  graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
</div>

🧩 External JS
<script src="https://cdn.jsdelivr.net/npm/mermaid@8.13.5/dist/mermaid.min.js"></script>

⚙️ JavaScript
mermaid.initialize({startOnLoad:true});

Related Libraries

Library Icon
d3

D3 provides powerful visualization capabilities for manipulating data-driven documents.

⚡ Top Tools for Developers
Text Compare

Text Comparison

Easily spot the differences between two texts.

Favicon Generator

Favicon Generator

Quickly and easily generate favicons.

Lorem Ipsum Generator

Lorem Ipsum Generator

Generate placeholder text for your designs.

Character Counter

Character Counter

Check character and word count in real time.

SRT ↔ SMI

SRT ↔ SMI Converter

Easily convert between subtitle formats.

Text Extract(OCR)

Image Text Extractor

Automatically extract text from images.