Type Mermaid syntax and see the diagram render as you go. When it looks right, publish it as a clean, shareable page in one click.
Edit on the left, preview on the right, then publish the diagram as a link.
Mermaid turns plain-text syntax into flowcharts, sequence diagrams, Gantt charts, and more — but you usually only see the result inside a specific editor, a GitHub README, or a docs build. When you just want to sketch a diagram and check that the syntax is right, opening a whole project is overkill.
This is a live Mermaid preview: type or paste your diagram source on the left and the rendered diagram updates on the right, in your browser. Syntax errors show inline so you can fix them on the spot. When the diagram is ready, publish it to a dochost link — the page shows the rendered diagram, so you can share it with people who do not have a Mermaid renderer of their own.
Type or paste your Mermaid syntax in the editor — the preview renders it live.
Fix any inline syntax errors until the diagram looks right.
Click Publish to get a shareable link that shows the rendered diagram.
Lin is a backend engineer writing an RFC for a new event-driven pipeline. The design is easier to follow as a sequence diagram than as prose, so Lin drafts it in Mermaid. The first attempt has a typo — a missing colon after a participant — and the diagram refuses to render. In the live preview the error appears inline with the offending line, so Lin fixes it in a few seconds instead of hunting through a failed CI docs build.
With the sequence diagram rendering cleanly, Lin clicks Publish and gets a dochost link. The RFC itself lives in a doc that not everyone can build locally, so Lin drops the diagram link directly into the review thread. Reviewers — including a PM with no developer tooling — open the link and see the rendered diagram immediately, comment on the flow, and Lin iterates on the syntax and republishes until the design is agreed.
The preview uses the standard Mermaid engine, so it supports the common diagram types — flowcharts, sequence diagrams, class diagrams, state diagrams, entity-relationship diagrams, Gantt charts, and pie charts — using the same syntax you would write in a GitHub README or a Mermaid-enabled docs site.
The preview shows the error inline, along with the source, instead of failing silently or rendering a blank box. That makes it fast to spot a missing arrow, a misnamed node, or an unclosed block and fix it without leaving the page.
Yes. Publishing wraps your Mermaid source in a Markdown document and hosts it; the published page shows the rendered diagram (as an image), so anyone you share the link with sees the picture — they do not need a Mermaid renderer or any extension installed.
The live editor on this page is for drafting; each publish creates a page from the current source. To change a published diagram, edit the syntax here and publish again. Free links last seven days (3 days if published as private); paid plans keep them permanent.
免費帳號的連結保留 7 天。升級付費方案後，你建立的每個頁面都會永久上線。
查看方案與價格