VoriTools

Mermaid Diagram Editor & SVG Export

Start from an example or paste a Mermaid definition. Render the text, check the preview and export a diagram for your documentation.

Runs locally in your browser
View category: Code & Debugging (34)
LOCAL RENDERERMermaid 11.17.1Flowchart · Sequence · ERStrict SVG rendering
The Mermaid source and rendered SVG remain in this browser. No diagram content is uploaded, shared, or fetched from another service.
Mermaid definition

Use Mermaid syntax only. HTML labels are sanitized: scripts and event handlers are removed.

Local SVG preview
Render a Mermaid definition to preview it here.

Diagram as code, without a hosted workspace

Keep a Mermaid definition beside your code, render it here for review, and download the output when you need a portable image. The tool deliberately avoids remote themes, cloud storage, and generated tracking links.

How to render a Mermaid diagram in the browser

Paste a Mermaid definition and the page draws it with a bundled Mermaid 11.17.1 renderer, then lets you copy the SVG markup or download it as kivtools-diagram.svg. The three built-in examples — flowchart, sequence diagram and ER model — are starting points: the renderer also accepted state diagrams, class diagrams and Gantt charts in testing, because it parses the full Mermaid grammar.

Parsing, layout and styling run in this browser tab. The diagram text is never uploaded, rendering works offline once the page has loaded, and the exported SVG carries its own styles instead of referencing external files.

  1. Paste a Mermaid definition into the left editor, or choose Flowchart, Sequence diagram or ER diagram under Example and press Load example to start from a working document.
  2. Press Render diagram. The definition is parsed and drawn in the right pane; the status line reports success or names the line that failed.
  3. Fix the reported syntax error — the caret in the message points at the unexpected token — and render again. The previous preview stays visible until a new diagram replaces it.
  4. Press Copy SVG to put the SVG markup on the clipboard, or Download SVG to save kivtools-diagram.svg next to your project files.
  5. Press Clear to empty the editor, remove the preview and disable both export buttons before the next diagram.

What the tool does with your diagram

Which diagram types render

The first line selects the grammar: flowchart LR, sequenceDiagram, erDiagram, stateDiagram-v2, classDiagram, gantt and the other Mermaid 11 types all rendered in testing. An unknown first keyword stops the parser immediately, and a definition copied from a different tool may use syntax this version no longer accepts.

The editor is plain text: there is no autocomplete and no live preview, so render after each change and use the status line as the only feedback channel. Reloading the example selector is the quickest way back to a document that is known to parse.

Strict rendering and HTML labels

The renderer runs in Mermaid strict mode. In testing, a label containing <img src=x onerror=...> came back with the event handler stripped, script tags did not execute, javascript: links were dropped, and click directives produced no external links. Labels may contain safe HTML such as bold text and line breaks.

Treat that as a sanitation guarantee, not a ban on HTML: the tool removes executable content from labels but does not reject the definition. Keep diagram text free of anything sensitive anyway — the page is local, but the exported SVG is a file you may share.

How the export behaves

Copy SVG places the live SVG markup on the clipboard; Download SVG saves the same markup as kivtools-diagram.svg. Both stay disabled until a diagram has been rendered, and Clear disables them again. The exported file opens standalone and can be embedded in Markdown, an HTML page or a pull request.

A syntax error does not empty the stage: the last successful preview remains visible while the status line shows the parser message with its line number. Check that line before copying an SVG, especially when the diagram was edited in a hurry.

Recent tools: