Skip to content

Mermaid Diagram Viewer

Render Mermaid flowchart code as a diagram with live preview, subgraphs, light or dark theme, and SVG or PNG export.

Mermaid Diagram Viewer

Supports: graph TD/LR, nodes [rect] (rounded) {diamond} ((circle)), edges --> --- -.->, |labels|, subgraphs

Preview

YesNoStartDecisionProcess AProcess BEnd
5 nodes5 edges

Updated . Provided as is. Check the output before you rely on it in production.

How to use Mermaid Diagram Viewer

  1. 1

    Paste Mermaid flowchart syntax

    Enter a flowchart (graph TD or graph LR) with nodes, edges and labels, or load one of the sample diagrams.

  2. 2

    See the preview update

    The diagram renders as you type. Invalid syntax shows an error message; fix it and the preview comes back.

  3. 3

    Refine the diagram

    Add nodes, connections and labels and watch the preview. Switch between the dark and light theme to match where the diagram will be shown.

  4. 4

    Export as SVG or PNG

    Download SVG for documentation that needs crisp scaling, PNG for slides and chat, or copy the SVG markup.

  5. 5

    Reuse the source

    Copy the Mermaid code into a GitHub README or any platform that renders Mermaid natively.

Questions and answers

What diagram types are supported?
The viewer supports Mermaid flowchart/graph diagrams (graph TD, graph LR) with standard node shapes, edges, and labels. This covers the most common Mermaid use cases.
Can I export diagrams as images?
Yes, export as SVG (vector, scalable, copyable) for use in documentation, presentations, or web pages. The SVG can be opened in any browser or vector editor.
Can I use this for GitHub README diagrams?
Yes, write and preview your Mermaid code here, then copy it into your README's ```mermaid code block. GitHub natively renders Mermaid diagrams in markdown.
Does it show syntax errors?
Yes, invalid Mermaid syntax shows descriptive error messages to help you fix the diagram code. Common issues like missing brackets or invalid edge syntax are caught.
Is this tool free and private?
Yes. Free to use. All diagram rendering happens in your browser. Your diagram code is not sent to external servers.
For AI agents: how to call this tool

Machine-readable contract, endpoints and examples. Humans can ignore this section.

Best Path For Builders

Browser workflow

Runs instantly in the browser with private local processing and copy/export-ready output.

Browser Workflow

This tool is optimized for instant in-browser execution with local data handling. Run it here and copy/export the output directly.

/mermaid-viewer/

For automation planning, fetch the canonical contract at /api/tool/mermaid-viewer.json.