Mermaid.js Diagram Generator
Write simple text descriptions and generate beautiful diagrams in real-time.
What is Mermaid.js?
Mermaid.js is a popular JavaScript-based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically. By using text instead of manual drag-and-drop tools, developers and writers can easily manage complex charts alongside their code, version control systems, and Markdown documentation.
Common Diagram Types
1. Flowcharts
Represent workflows and logical decisions. Nodes can be styled as rectangles, circles, or cylinders, linked by directional arrows or dotted lines.
2. Sequence Diagrams
Visualize communication between different objects or systems over time. Ideal for describing API calls, client-server handshake processes, or microservice calls.
3. Gantt Charts
Track project management timelines, highlighting start dates, durations, and tasks dependency relationships.
Frequently Asked Questions
How do I download the generated diagram?
Once your diagram renders successfully, click the "Download SVG" button above the preview pane. It will save the drawing as a high-quality vector graphic (.svg) that can be resized without losing crispness.
Is my diagram source code saved?
Yes, your code is automatically saved in your browser's local workspace (localStorage). If you refresh the page or return to the site later on the same device, your work will be automatically restored. No data is sent to our servers.
Why is my diagram not rendering?
If you see a "Syntax Error" badge, check the error details pane at the bottom. Mermaid is strict about syntax spacing and syntax keywords (e.g. arrows and indentation). Make sure you follow standard syntax rules.