Mermaid Editor

Diagrams as Code

Mermaid.js is a Javascript library that renders text definitions into complex diagrams. This editor gives you a live preview of your diagrams as you type.

Supported Diagram Types

• Flowchart: graph TD; A-->B;
• Sequence Diagram: sequenceDiagram; Alice->>Bob: Hello;
• Gantt Chart: Project planning and timelines.
• Class Diagram: OOP structure visualization.

Editor Features

• Live Preview: Changes render instantly.
• Examples: Use the sidebar or dropdown to load templates.
• Download: Export your diagram as an SVG file.

Easily integrate diagrams into your own websites or applications.

Simple HTML Integration

Add the script and use the mermaid class:

<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
                    <script>mermaid.initialize({startOnLoad:true});</script>
                    
                    <div class="mermaid">
                        graph TD
                        A[Client] --> B[Server]
                        B --> C[Database]
                    </div>

React / NPM

Install via NPM:

npm install mermaid

Inside a component:

import mermaid from 'mermaid';
                    import { useEffect } from 'react';
                    
                    mermaid.initialize({ startOnLoad: true });
                    
                    export default function Diagram({ code }) {
                      useEffect(() => {
                        mermaid.contentLoaded();
                      }, [code]);
                    
                      return <div class="mermaid">{code}</div>;
                    }