Skip to main content
Jsonformatter

Mermaid Editor

Write Mermaid diagrams and export SVG or PNG.

Working…

Mermaid live editor in your browser: write diagram code, see the preview and any syntax errors, and export SVG or PNG without an account.

What is Mermaid Editor?

Mermaid Editor is a free online tool that lets you write Mermaid diagram code and see the diagram in your browser. It shows the preview and any syntax error, and exports the diagram as SVG or PNG, with no account and no remote rendering service.

What it supports

  • Mermaid diagram code, such as flowcharts, in the syntax of the bundled Mermaid library.
  • Export as SVG or as PNG.

Good to know

  • Mermaid has its own syntax. Invalid code shows an error instead of a diagram; a line number is shown when the parser supplies one.
  • The diagram is drawn by the open-source Mermaid library. This site is not affiliated with the Mermaid project.
  • Configuration directives (%%{...}%%), YAML frontmatter and unsafe SVG content are refused. Do not paste configuration with your diagram.

How do I use Mermaid Editor?

  1. Write or open Mermaid code, or choose a Sample: Flowchart, Sequence diagram, Class diagram, State diagram, Gantt chart, Pie chart or ER diagram. Inserting a sample replaces the source.
  2. Check the preview and fix any syntax error it shows.
  3. Export the diagram as SVG or PNG.

Example

A small flowchart.

Input
graph TD
  A[Write] --> B{Valid?}
  B -->|Yes| C[Export SVG]
  B -->|No| A
Result

The preview shows two steps and a decision. A typo in the first line, such as graf TD, shows an unknown diagram type error instead.

Limits and privacy

Limits

  • Diagram code: up to 20,000 bytes. Longer code is rejected.
  • Image: an exported picture is capped at 16,384 pixels on each side and 16,000,000 pixels in total, and its file at 40,000,000 bytes. A document that needs more is refused. A run longer than 20 seconds is stopped.

Is my content sent to a server?

No. Your content and files are processed in your browser and never uploaded. OCR and PDF reading download processing files, including OCR language data and the PDF worker, from this same site only when those tools run; no content goes to third parties. Markdown previews show external images as alt text instead of loading them.

Copying puts a result on your clipboard and downloading saves it as a file, but only when you press the button. The file is created in your browser, so nothing is uploaded.

For the full details, see the Privacy Policy

Related tools and pages

Convert to or from other formats, or work on the same content with these tools.

All tools

Format, validate and convert JSON, YAML, XML, CSV, HTML, CSS and Markdown, plus Base64, URL and JWT.

JSON

  • JSON Formatter

    Format JSON with one consistent layout: even indentation, one value per line, your values untouched. Runs the same formatter as JSON Beautifier.

  • JSON Validator

    Check whether your text is valid JSON. If it is not, see the first problem with its line and column, highlighted in your text.

  • JSON Diff

    Compare two JSON documents by structure, ignoring key order, and see every added, removed and changed path in one list.

  • JSON Schema Validator

    Validate JSON against a JSON Schema (draft 2020-12, or draft-07 through $schema) and see each error with the path where it occurs.

  • JSON Schema Generator

    Generate a JSON Schema (draft 2020-12) from a sample JSON document, ready to copy and refine.

  • JSON Beautifier

    Beautify minified or unevenly spaced JSON into readable, indented text, with your values untouched. Runs the same formatter as JSON Formatter.

Convert JSON

  • JSON to CSV

    Convert a JSON list of objects, or the first list of objects inside an object, to plain CSV text.

  • CSV to JSON

    Convert CSV to a JSON array of objects, using the header row as keys. Comma, semicolon and tab separators are detected, and values stay as text.

  • JSON to XML

    Convert JSON to plain, readable XML, with your numbers and text copied exactly as written.

  • XML to JSON

    Convert XML to JSON, with attributes as @name keys and repeated elements gathered into arrays so the structure carries over.

  • JSON to YAML

    Convert JSON to readable block YAML with 2 or 4 spaces of indentation, keeping every value and every number exactly as you wrote it.

  • YAML to JSON

    Convert YAML to JSON with anchors and aliases resolved. A file with several documents becomes a JSON array.

YAML

  • YAML Validator

    Check whether your YAML is valid under the YAML 1.2 Core rules, in one or several documents, and see the line and column of the first problem.

  • YAML Viewer

    Explore a YAML document as a tree you can open and close, with anchors, tags and aliases marked on the row where they appear.

  • YAML Formatter

    Format YAML with consistent indentation while keeping comments and values.

HTML, XML and CSS

  • HTML Formatter

    Format HTML into readable, indented markup. The result is plain text: scripts do not run and nothing in your HTML is loaded.

  • XML Formatter

    Format XML with clear indentation while preserving its content and meaning.

  • CSS Beautifier

    Beautify minified CSS into readable rules, one declaration per line, without changing what the CSS does. Runs the same formatter as CSS Formatter.

  • CSS Formatter

    Format CSS you maintain with one consistent style: the same indentation, spacing and spelling everywhere. Runs the same formatter as CSS Beautifier.

Encode & Decode

  • Base64 Encode/Decode

    Encode text to Base64 or decode Base64 back to text as UTF-8, with an option for the URL-safe Base64URL alphabet.

  • URL Encode/Decode

    Encode or decode text with %XX sequences, either as a URL component or as a full URL whose separators stay intact.

  • JWT Decoder

    Decode a JWT in your browser to read its header and payload, see the exp, iat and nbf dates and whether it has expired. The signature is not verified.

Markdown

New
  • Markdown Editor

    Free online Markdown editor and viewer: write or open an MD file, see a live GFM preview, then copy or download your Markdown.

  • Markdown to PDF

    Convert Markdown to PDF in your browser. Pick A4 or Letter paper and the margins, preview the document and download a real PDF file.

  • Markdown to Text

    Convert Markdown to plain text without losing code or punctuation. Choose how links appear, then copy the text or download a TXT file.

  • Markdown to Word

    Convert Markdown to Word: download an editable DOCX file that keeps headings, lists, tables and links. It runs in your browser.

  • Markdown to HTML

    Convert Markdown to HTML in your browser. Get an HTML fragment or a full document, check the preview, then copy or download it.

  • Markdown Table Generator

    Markdown table generator with an editable grid and column alignment. Import CSV or TSV, then copy or download the Markdown table.

  • Word to Markdown

    Convert Word to Markdown: open a DOCX file and get its headings, lists, links and tables as editable Markdown, all in your browser.

  • HTML to Markdown

    Convert HTML to Markdown from pasted markup or a local file. Scripts never run; headings, lists, links and simple tables carry over.

  • Markdown Formatter

    Markdown formatter that tidies your source and lists style suggestions for headings, spaces and the final newline. Review it before you copy.

  • Markdown to Image

    Convert Markdown to an image: choose the width and theme, preview your note or table and download a PNG or JPEG file.

  • Markdown to Rich Text

    Convert Markdown to rich text and copy it, formatted, into a document editor. Plain text is the fallback when rich copy is unavailable.

  • Markdown Table to JSON/CSV

    Convert a Markdown table to JSON or CSV. Review the headers and pick each column's type, so IDs and leading zeros stay as they are.

  • Excel to Markdown

    Convert Excel to Markdown: open an XLSX file, pick a sheet or a cell range and get a Markdown table without uploading the file.

  • Markdown to Excel

    Convert Markdown tables to Excel: download an XLSX file whose cells stay text, so leading zeros survive and nothing becomes a formula.

  • Paste to Markdown

    Paste to Markdown: turn copied rich text or HTML into Markdown. For plain text, apply heading and list actions yourself, then copy.

  • Markdown Compare

    Markdown compare: paste two versions or open two files and see which lines were added or removed in the source text.

  • Markdown to Mind Map

    Convert Markdown to a mind map: headings and lists become a map you can navigate and export. Built with Markmap, no account needed.

  • Mermaid Editor

    Mermaid live editor in your browser: write diagram code, see the preview and any syntax errors, and export SVG or PNG without an account.

  • Discord Markdown Preview

    Discord Markdown preview: check bold, code blocks and spoilers in an approximate local preview, then copy the message. No Discord account.

  • Obsidian Markdown Converter

    Obsidian Markdown converter: adapt [[wiki links]] and embeds to standard Markdown and list the files your note refers to.

  • GitHub README Viewer

    GitHub README viewer: paste or open a README, see a GFM preview and set a base URL for relative links. Nothing is fetched from GitHub.

  • PDF to Markdown

    Convert PDF to Markdown locally: extract its text layer or run OCR on selected pages without text. Review and edit before copying or downloading.

  • Image to Markdown

    Convert an image to Markdown with OCR in your browser: read text from a PNG or JPEG, correct it, then copy or download. Accuracy varies.