Mermaid Diagram Generator
Write Mermaid diagram syntax and see a live SVG preview. Choose from flowchart, sequence, class, state, ER, Gantt, pie, and mindmap presets. Copy SVG source or download as SVG or PNG.
Diagrams are rendered client-side using the Mermaid library. PNG export text may render in a fallback font.
Mermaid Diagram Generator
Write Mermaid diagram syntax in the editor and see a live SVG preview. Choose from eight built-in diagram types - flowchart, sequence, class, state, ER, Gantt, pie chart, and mindmap - or start from a preset and modify it. Switch between four themes (Default, Dark, Forest, Neutral) and export your diagram as an SVG or PNG file. All rendering happens in your browser via the Mermaid JavaScript library.
Mermaid diagram types
Flowchart - model processes and decision trees. Sequence - show how actors communicate over time. Class - document object-oriented structures and relationships. State - represent state machines and lifecycle flows. ER - design database schemas with entity relationships. Gantt - plan project timelines and sprints. Pie - visualise proportions and market share. Mindmap - brainstorm and organise hierarchical ideas.
Frequently Asked Questions
How do I add Mermaid diagrams to a Laravel project?
Install via npm: npm install mermaid. In your JavaScript, import and initialize: import mermaid from 'mermaid'; mermaid.initialize({ startOnLoad: true });. Place diagram code inside <pre class="mermaid">...</pre> blocks in your Blade templates. Mermaid will render them automatically. For server-side rendering, use the @mermaid-js/mermaid-cli npm package.
What is the Mermaid flowchart syntax?
Start with flowchart LR (left-right) or flowchart TD (top-down). Define nodes: A[Rectangle], B(Rounded), C{Diamond}, D[(Database)], E([Stadium]). Connect with arrows: A --> B (solid), A -->|label| B (labelled), A --- B (no arrowhead), A -.-> B (dotted).
Can I use Mermaid in GitHub Markdown?
Yes - GitHub natively renders Mermaid in Markdown files and issue/PR comments. Wrap your diagram in a fenced code block with the mermaid language identifier:```mermaid
flowchart LR
A --> B
```
GitLab, Notion, and many other tools also support Mermaid natively.
How do I create a sequence diagram?
Start with sequenceDiagram. Declare participants: participant Alice or actor Bob. Add messages: Alice->>Bob: Hello (solid arrow), Bob-->>Alice: Hi (dashed reply). Use activate Alice / deactivate Alice to show lifeline activations, or the shorthand Alice->>+Bob: Call / Bob-->>-Alice: Return.