How it works
The viewer scans your Markdown for fenced code blocks marked mermaid (and :::mermaid blocks used by Azure DevOps), renders each one, and shows the surrounding text so you can review the document as a whole.
Use cases
- Preview a README before pushing it to GitHub or GitLab.
- Review architecture decision records (ADRs) that contain diagrams.
- Check Obsidian or Notion exports that include Mermaid.
- Find and fix the one broken diagram in a long document.
Editing a diagram
Click Edit this diagram under any rendered block to open it in the full Mermaid live editor with AI fixing, themes and export. You can also import a Markdown file directly in the editor, which lets you pick which block to edit.
Learn how GitHub renders Mermaid in the Mermaid in GitHub Markdown guide.
Frequently asked questions
Which Markdown syntax is supported?
Fenced code blocks that start with ```mermaid or ~~~mermaid, plus :::mermaid blocks. Other Markdown is shown as simple formatted text.
Can I preview a README from a URL?
Yes — in the full editor use Import → From a URL and paste a GitHub file link. Multiple diagrams can be picked from a list.
Is my document uploaded?
No. Everything is rendered locally in your browser.
More free tools
- Mermaid to PNG — Convert Mermaid code to a high-resolution PNG image online.
- Mermaid to SVG — Convert Mermaid diagrams to clean, scalable SVG files online.
- Mermaid to PDF — Convert Mermaid diagrams to vector PDF files in your browser.
- AI diagram generator — create Mermaid diagrams from text.