// LIVE PREVIEW
100%
Diagram preview will appear here
Start typing Mermaid syntax on the left// write mermaid syntax → see live diagram instantly
Edit, preview, and export Mermaid diagrams online. Supports flowcharts, sequence diagrams, ER diagrams, Gantt charts, and more. Free and browser-based.
Diagram preview will appear here
Start typing Mermaid syntax on the leftClick any template button to load a starter diagram, or write Mermaid syntax from scratch in the editor.
Type or paste Mermaid diagram code. The live preview updates automatically as you type.
Download your diagram as an SVG or PNG file, or copy the SVG markup directly to your clipboard.
Mermaid is a JavaScript-based diagramming tool that uses a simple markdown-like syntax to generate diagrams and charts. It's widely used in documentation, README files, and wikis — including GitHub, GitLab, and Notion.
Mermaid is a markdown-inspired syntax for creating diagrams as code. You write plain text following specific rules (e.g., graph TD; A-->B) and Mermaid renders it as a visual diagram. It's popular because diagrams live alongside code and can be version-controlled.
This editor supports all major Mermaid diagram types: flowcharts, sequence diagrams, ER diagrams, Gantt charts, pie charts, class diagrams, state diagrams, and more. The supported types depend on the version of Mermaid loaded.
Yes. Click ↓ SVG to download a scalable vector file (perfect for print or scaling), or ↓ PNG to download a rasterized image. The PNG export uses a 2× resolution for crisp rendering.
The editor itself is browser-based, but it loads the Mermaid rendering library from a CDN. You need an internet connection for the initial load. After the library is cached by your browser, short-term offline use may work.
No. All rendering happens entirely in your browser using the Mermaid.js library. Your diagram code is never sent to our servers. It's completely private and client-side.
On GitHub, wrap your Mermaid code in a fenced code block with the mermaid language identifier. GitHub natively renders Mermaid diagrams in Markdown files, issues, and pull requests.
Common issues include syntax errors in your Mermaid code. Check the error message shown below the editor. Make sure you start your diagram with the correct type keyword (e.g., graph TD, sequenceDiagram, erDiagram). Use the template buttons to see valid examples.
Yes — the editor and preview area follow the JLV DevTools dark theme automatically. The diagram preview uses Mermaid's dark theme to match the interface.
A Mermaid diagram editor is a tool that lets you write diagram specifications as plain text and instantly renders them into professional visual diagrams. Instead of dragging boxes around in a GUI diagramming tool, you describe your diagram with a concise, markdown-like syntax — and the editor handles the layout, styling, and rendering automatically. This text-as-diagrams approach means your diagrams can live in code repositories, documentation files, wikis, and version control systems just like any other text file.
Mermaid is a JavaScript-based open-source library that defines this syntax. It was created by Knut Sveidqvist and has grown into one of the most widely adopted diagramming standards in the software industry. Today, Mermaid is supported natively by GitHub, GitLab, Notion, Obsidian, Confluence, and many other documentation platforms — making it an essential skill for developers and technical writers.
💡 Looking for premium HTML templates and themes? MonsterONE offers unlimited downloads of templates, UI kits, and web assets — worth checking out for your next project.
Traditional GUI diagram tools like Lucidchart, draw.io, or Visio are powerful but come with friction. Files are binary, they don't diff well in version control, they require exporting images manually, and keeping diagrams in sync with code changes is often a manual chore. Mermaid solves these problems by treating diagrams as code.
With Mermaid, your flowchart or sequence diagram is just a text file. When your codebase evolves, you update a few lines of text rather than manually repositioning boxes and arrows. Your documentation pipeline can render diagrams from source during build time, ensuring they're always up to date. For technical teams working in Git-based workflows, this is a significant productivity gain.
The Mermaid syntax supports a wide range of diagram types, each designed for a specific use case in software and systems documentation:
TD), left-right (LR), and other directions.Every Mermaid diagram starts with a diagram type declaration. Here are the basics for the most common types:
Flowchart: Start with graph TD (top-down) or graph LR (left-right). Define nodes and connect them with arrows: A[Start] --> B{Decision} --> C[End]. Use different node shapes: [] for rectangles, {} for diamonds, () for rounded, (( for circles.
Sequence Diagram: Start with sequenceDiagram. Define participants and messages: Alice->>Bob: Hello Bob for a synchronous call, or Alice-->>Bob: Reply for a return message. Add activate/deactivate blocks to show lifetimes.
ER Diagram: Start with erDiagram. Define entities and their relationships: CUSTOMER ||--o{ ORDER : places. Specify cardinality with crow's foot notation.
GitHub added native Mermaid rendering support in 2022, making it one of the most significant improvements to GitHub's documentation capabilities. To embed a diagram in any GitHub Markdown file — including README files, issues, pull request descriptions, and GitHub Wiki pages — wrap your Mermaid code in a fenced code block:
```mermaid
graph TD
A[Feature Request] --> B{Approved?}
B -- Yes --> C[Development]
B -- No --> D[Close Issue]
```GitHub, GitLab, Notion, and Obsidian will automatically render this as a diagram. This makes Mermaid ideal for living documentation — diagrams that stay accurate because they're easy to update alongside code.
This online editor lets you export your diagrams in two formats. SVG (Scalable Vector Graphics) is the recommended format for most use cases — SVG files are infinitely scalable, file sizes are small, and they can be embedded directly in HTML or opened in vector editing tools like Inkscape or Illustrator for further customization. PNG export is useful when you need a raster image for presentations, slide decks, or platforms that don't support SVG.
You can also copy the raw SVG markup using the "Copy SVG" button, which lets you paste the diagram directly into HTML files or documentation systems that accept inline SVG.
Beyond the web editor, Mermaid can be integrated into automated documentation pipelines. Tools like mmdc (the Mermaid CLI) let you render diagrams from CI/CD pipelines during your documentation build process. This is popular with static site generators like Docusaurus, MkDocs, and VitePress — allowing teams to write diagrams as code and have them rendered automatically at build time.
For teams using tools like Confluence or Jira, Mermaid plugins are available in the Atlassian Marketplace, bringing the same text-as-diagrams workflow to enterprise documentation. If your team hasn't adopted Mermaid yet, the low barrier to entry — just a text editor and this online previewer — makes it easy to start.
Keep diagrams focused on a single concept. Large diagrams with dozens of nodes become hard to read — split them into multiple smaller diagrams linked together in documentation. Use descriptive node labels rather than cryptic abbreviations. For flowcharts, consistent direction (always top-down or always left-right) improves readability. Add comments to your Mermaid source using %% to help future editors understand the intent. Use subgraphs (subgraph Name) to group related nodes visually.