Drop a Mermaid diagram. See it, then check it.
safe · secure · no server · works offline · fast
…or paste a file you copied in Finder, or just start typing at the cursor.
↓ scroll for about & FAQsafe · secure · no server · works offline · fast
…or paste a file you copied in Finder, or just start typing at the cursor.
↓ scroll for about & FAQ
OmniViewer opens a Mermaid diagram right in your browser. Drop an
.mmd or .mermaid file — or paste the source
straight onto the front page — and you get the
diagram drawn, ready to export as SVG or PNG, plus a
toolkit around it: a diagram linter, a source
formatter, the parsed JSON model, a
stats report and the raw and hex views. There is no upload
and no server, and — unusually — no
mermaid.js either: the parser, the
layout engine and the SVG writer are all built into this page, so nothing is
fetched from a CDN and the whole thing works offline.
classDefs defined but never applied (and classes applied but never defined), and click handlers naming nodes that do not exist.subgraph, loop, alt or state block, one space either side of every arrow, and long runs of blank lines collapsed. Nothing is dropped — a line the parser did not understand still comes out the other side.
All twenty-four of them. There is no Mermaid diagram this
viewer recognizes, parses and then declines to render —
flowchart (graph / flowchart,
all four directions, every node shape, subgraphs, classDef
styling), sequenceDiagram (lifelines, activations, notes,
loop/alt/opt/par
blocks, autonumber), classDiagram,
stateDiagram-v2, erDiagram,
pie, mindmap, timeline,
journey, gitGraph,
gantt (dateFormat, axisFormat,
tickInterval, durations, after and
until dependencies, excludes weekends,
crit/active/done and milestones),
quadrantChart, requirementDiagram,
sankey-beta, xychart-beta,
block-beta, C4 (Context, Container,
Component, Dynamic, Deployment), packet-beta,
kanban, architecture-beta,
radar-beta, treemap-beta,
zenuml and info.
Some of that is more than a renderer usually bothers with: a Sankey is laid
out from its own CSV with one scale across every column, a treemap is
squarified so the tiles stay near-square, a packet map splits a field that
crosses a row boundary rather than drawing it twice, and an
architecture-beta grid is solved from the :L /
:R / :T / :B sides the author wrote.
There is a
worked
example of every one of the twenty-four, drawn by this renderer, in the
deep dive.
A tiny example of Mermaid:
flowchart TD
A[Push to main] --> B{Tests pass?}
B -->|yes| C([Deploy])
B -->|no| D[(Open incident)]
Hand‑written diagrams are kilobytes. Generated ones — a dependency graph, a state machine emitted by a tool — are not, and a picture with fifty thousand boxes in it is not a picture. So the line is drawn explicitly: parsing is a single linear pass in a background Web Worker, layout runs there too, and past a node budget the Diagram and Image tabs say so and hand you back the tabs that still answer — Audit, JSON and Stats all read the whole parse, and Raw and Hex window the bytes at any size. A linter is exactly what you want on a file too big to draw. If you want the full story — the grammar, the four‑pass layered layout algorithm with real code, and where the ceiling is — read how Mermaid diagrams are drawn.
Mermaid was created by Knut Sveidqvist in
2014, from a simple idea: a diagram should be text, so it
can live in the same repository as the code it describes, be reviewed in a
pull request and change in the same commit. It caught on when the big
platforms started rendering it in place — GitHub
added native Mermaid rendering to Markdown in 2022, and
GitLab, Notion and Obsidian all support it — which turned
```mermaid into the default way developers draw.
| Aspect | Mermaid | Graphviz (DOT) | PlantUML | Drawing tool |
|---|---|---|---|---|
| Source | Text, in your repo | Text, in your repo | Text, in your repo | Binary or proprietary |
| Renders in GitHub Markdown | Yes, natively | No | No | As an image |
| Runtime | JavaScript, in the browser | C, usually a CLI | Java | An app |
| Diagram kinds | Many, one syntax each | Graphs | Many, UML-first | Anything |
| Reviewable in a diff | Yes | Yes | Yes | No |
OmniViewer opens every file format; Mermaid is one of the formats with dedicated tooling, powered by the same viewing engine as fastjsonviewer.com and hugecsv.com.
No. OmniViewer is a static page with no server-side processing: your .mmd file is read directly by your browser, and every tab — diagram, audit, formatted, JSON and stats — runs locally in a Web Worker. The file never leaves your computer, and neither does the diagram it draws.
No. The parser, the layout engine and the SVG writer are all written into this page — a fraction of the size of mermaid.js and its dependencies, with nothing fetched from a CDN. That means the viewer works with no network at all, and the coverage is our own: all twenty-four diagram types are drawn. Gantt included, where dates, durations and excluded weekends are about three hundred lines of calendar arithmetic here rather than dayjs and three plugins; and Sankey, treemap, radar, packet and architecture diagrams, which are each a small algorithm rather than a box and an arrow.
All of them — twenty-four: flowchart (and its graph alias), sequenceDiagram, classDiagram, stateDiagram and stateDiagram-v2, erDiagram, pie, mindmap, timeline, journey, gitGraph, gantt, quadrantChart, requirementDiagram, sankey-beta, xychart-beta, block-beta, C4 (Context, Container, Component, Dynamic and Deployment), packet-beta, kanban, architecture-beta, radar-beta, treemap-beta, zenuml and info. Nothing Mermaid has a grammar for is parsed and then left undrawn. A first line that is not a diagram type at all is a different matter: the diagram tab says so, and the audit names the line.
Yes, two ways. The diagram tab downloads an SVG — vector, small, and editable in any drawing tool — or a PNG rasterized at up to three times the diagram size. The image tab does the same on a themed card with a window frame, which is what you want when pasting into a README, a slide or a pull request.
Seventeen rules. Syntax errors are reported with a line and column. Beyond that it finds nodes nothing can reach, loops and the ids that form them, the same arrow written twice, nodes with no arrows at all, empty subgraphs, an id used for both a node and a subgraph, decision diamonds whose branches are unlabelled, classDefs that are defined but never applied, classes applied but never defined, click handlers naming nodes that do not exist, sequence participants nobody messages, state machines with no start or end, and pie charts with nothing to draw.
The raw and hex views are windowed — they read only the bytes needed to paint the screen — so they open a file of any size. Parsing, the audit, JSON and stats work on a bounded prefix and say so when they truncate. Drawing has its own limit: past a couple of thousand nodes the diagram tab stops and explains why, because a picture that large is not readable anyway, and points you at the tabs that still answer.
Yes. Paste or type Mermaid source onto the OmniViewer front page and it is recognized from the first meaningful line — flowchart, sequenceDiagram, classDiagram and the rest. A paste opens the Mermaid toolkit straight away; while you type, a “Continue in the mermaid editor” button beside the tabs waits until you are ready. You can also link one: /mermaid/diagram?url=… loads a diagram straight from a URL.