From code to a picture
Mermaid Code to Diagram
Paste Mermaid code, render the diagram in this tab, and download SVG or PNG. Templates cover a flowchart, sequence, class, state, and ER diagram.
Paste Mermaid code or load a template to render a diagram.
No upload. The current source stays in this tab.
Render the code in the browser
The editor passes the current text to the Mermaid renderer on this device. Valid code replaces the preview with a diagram. Invalid code keeps the parser message next to the source.
Save SVG or PNG
SVG keeps lines and text sharp when the file is resized. PNG is a bitmap of that same render. Both files are created locally. If the code fails before a picture appears, check Mermaid Syntax and correct the line the parser names.
Mermaid code to diagram FAQ
How do I turn Mermaid code into a diagram?
Paste the code or load a template. When the syntax parses, the diagram appears in the preview. Use the SVG or PNG button to download it.
What is the difference between this page and the diagram viewer?
The viewer is for opening diagram text and reading it beside your notes. This page starts from code or a template and treats SVG or PNG export as the result.
Does rendering upload the code?
No. The diagram is rendered in the browser. Markdown Viewer does not send the source to a server.