日本語English

Mermaid Studio

Write Mermaid code on the left and the diagram appears on the right. Start from a flowchart, sequence, class or ER template and save SVG or PNG with the scale and background you choose. Rendering happens in your browser; your code is never sent.

On-device・No uploadMobile friendlyWorks offlineBeta

Your files and input are processed only inside your browser on this device and are never uploaded to our servers.

Mermaid code0 / 50,000 characters
Preview

Type code or pick a template and the diagram appears here.

Theme
Export

How to use

  1. flowchart TD …

    Write Mermaid code

  2. PreviewDrawn as you type

    Drawn on the spot

  3. diagram.svg
    diagram.png

    Save as SVG or PNG

Write Mermaid code and it becomes a diagram on the spot, saved as SVG or PNG

  1. Press “Try the sample” or pick a diagram type from Templates to fill the code box.

  2. Edit the code on the left. The preview on the right updates about 0.4 seconds after you stop typing.

  3. On a syntax error, the preview area shows the line number, that line and Mermaid’s message. Fix it and the diagram returns.

  4. Choose a theme: default, neutral, dark or forest.

  5. In Export, save SVG or PNG (scale ×1 to ×4; transparent, white or dark background). You can also copy the code, or copy it as a Markdown code block.

What it does

11 diagram templates

Examples for flowchart, sequence, class, state, ER, Gantt, pie, mind map, timeline, user journey and Git graph.

Syntax errors with the line

The line number Mermaid reports and that line of your code are shown with its message. When you fix the code, the diagram redraws on its own.

SVG and PNG export

SVG as drawn, PNG at ×1 to ×4 with a transparent, white or dark background. PNG is limited to 8,192 px on the longest side and 32 million pixels; beyond that you get an error that points to SVG.

Hostile code does not run

Mermaid runs in strict mode (HTML labels and click directives disabled), and the result goes through an allow-list DOMPurify before it is shown as an <img>. Scripts in the code do not execute.

Paste straight into Markdown

“Copy as Markdown” builds a ```mermaid code block, and lengthens the fence if the code itself contains ```.

Use cases

  • Draw flowcharts and sequence diagrams for a design doc or README from plain text
  • Write ER or class diagrams and see which line breaks the syntax
  • Check how Mermaid code renders before pasting it into GitHub or Notion
  • Turn a Gantt chart or mind map into SVG or PNG for slides
  • Make internal diagrams without sending them to an outside service

Supported formats

Input

Mermaid code (text, up to 50,000 characters)

Output

SVGPNGCode (text copy)Markdown code block

Capability matrix

FeatureSupportNotes
Rendering the diagrams Mermaid 12.2.0 supports, and theme switchingSupported—
Syntax error lines, SVG/PNG export, copying the codeSupported—
Keeping your code in this browserPartialOptional. Stored in localStorage only when switched on, and you can delete it any time. Share links with the code in the URL are not available
click directives, links and HTML labelsNot supportedDisabled for safety. Links inside the diagram do not work
Editing the diagram with the mouse (dragging nodes)Not supportedYou edit the code only
Loading external icon packs or imagesNot supportedNo network requests. Only Mermaid’s built-in shapes are drawn

Limits & notes

  • The code is limited to 50,000 characters and 2,000 characters per line. Mermaid refuses diagrams with more than 500 edges.
  • Code over 8,000 characters is not drawn automatically; press “Draw it”. A diagram with many nodes can take tens of seconds, and the page may stop responding meanwhile.
  • Image loading (@{ img: … }) and theme CSS (themeCSS), fonts and HTML labels set through %%{init}%% or front matter are disabled, because the tool makes no outside requests.
  • PNG is limited to 8,192 px on the longest side and 32 million pixels. For a big diagram, lower the scale or save SVG.
  • Text uses the fonts on your device, so text widths in SVG and PNG can differ slightly between environments.
  • HTML labels are off, so use Mermaid’s own syntax for line breaks rather than <br>. HTML tags may show up as text.
  • Rendering is pinned to Mermaid 12.2.0. It can look different from the version GitHub or other services use.

Privacy & safety

Rendering and PNG conversion happen entirely in your browser; your code is not sent or stored on a server. Only if you switch on “Keep the code in this browser” is the code saved in your browser’s localStorage.

FAQ

Can I just write Mermaid code and get a diagram?
Yes. Type code on the left and the preview appears on the right. Start with the diagram type, such as flowchart TD or sequenceDiagram. Templates fill in an example.
Can I export a Mermaid diagram as PNG?
Yes. In Export, pick a scale (×1 to ×4) and a background (transparent, white or dark), then press “Save PNG”. Sizes beyond 8,192 px on the longest side are refused.
Does it show where the syntax error is?
When Mermaid reports a line number, the page shows that number and that line. For errors without a line, only Mermaid’s message is shown.
Can I use click directives or links?
No. The editor runs Mermaid in strict mode, so click directives and HTML labels are disabled and scripts in the code do not run.
Is my code uploaded?
No. Rendering and export happen in your browser. Only if you switch on keeping the code is it stored in your browser’s localStorage; untick it or press “Delete the saved code” to remove it.
How do I put it in a GitHub README?
Press “Copy as Markdown” to copy the code wrapped in a ```mermaid block. GitHub renders with its own Mermaid version, so the look can differ slightly from this page.

Markdown Studio — Live Editor & Preview

A split-view Markdown editor with instant GFM preview, a table formatter that aligns pipes, an automatic table of contents and HTML export. Output is always sanitized and external images load only when you allow them.

No upload

Code Formatter — Format & Minify

Paste code to format it with the language auto-detected. Choose indent, line width, semicolons, quotes and trailing commas; JavaScript, CSS and HTML can also be minified with before/after size and reduction. Your code never leaves the browser.

No uploadBeta

JSON Studio — Formatter & Validator

Paste JSON to format, minify or validate it instantly. Errors are shown with the exact line, column and cause, and comments or trailing commas can be auto-repaired. Your data never leaves your device.

No upload

Docker Compose Studio

Convert docker run commands to compose.yaml, or compose.yaml back to docker run. A compose file is checked for syntax, the Compose Specification and common mistakes, and security points worth confirming are listed. Nothing is started or pulled, and your input never leaves your device.

No uploadBeta

DDL to ER Diagram & DB Docs

Paste CREATE TABLE statements or load files to get an ER diagram with the relations drawn as lines, and table definitions listing each column with its type, NULL, default, key and comment. It reads the common syntax of MySQL, PostgreSQL, SQLite, SQL Server and Oracle, and SQLite .db files too.

No uploadBeta

Diff Tool — Text & Code Compare

Paste or drop two versions and see added and removed lines, plus the exact words that changed inside each line. Copy or save the result as a unified patch. Nothing leaves your browser.

No upload

Last updated: