SuperAPI AI Directory
Partner with us中文AI newsFavorites
All toolsAI designMermaidViewer

MermaidViewer

MermaidViewer is a free online Mermaid diagram viewer and real-time editor. Users can directly paste or type Mermaid code, diagrams render instantly, and PNG export is supported. The website provides an AI assistant that can generate diagrams from natural language descriptions, edit existing diagrams, or fix syntax errors with one click. It supports all 22+ Mermaid diagram types (Mermaid v12), with features including autocomplete, syntax highlighting, find and replace, share links, and iframe embedding. The free version can be used without registration, diagrams are rendered locally in the browser by default and automatically saved, with a focus on privacy. The free version can export watermarked 1× PNG and provides 3 saved diagrams and 5 AI usage credits; the Starter and Pro plans offer higher export resolution, no watermark, more AI conversation turns, and advanced features such as JPG, SVG, and PDF export.

Open website

About this tool

Purpose

MermaidViewer is an online tool for users who "draw diagrams with code," suitable for those who prefer typing text rather than dragging shape boxes to create diagrams. It integrates real-time rendering of Mermaid syntax, editing, AI-assisted generation and repair, export, and sharing into a single interface, with no software installation required—just open a browser and use it.

Main Capabilities

  • Real-time preview: Type or paste Mermaid code in the editor, and the diagram re-renders in real time as you type; error messages indicate the specific line number.
  • AI diagram assistant: Describe diagram requirements in natural language (for example, "sequence diagram for OAuth login with refresh tokens"), and the AI generates valid Mermaid code and streams it into the editor. You can also ask in natural language to modify diagrams (such as "add a cache layer" or "make error paths red"), get a plain-language explanation of a diagram, or fix parser syntax errors with one click.
  • Supported diagram types: Covers all 22+ Mermaid diagram types, based on Mermaid v12, including Flowchart, Sequence Diagram, Class Diagram, State Diagram, ER Diagram, Gantt Chart, Pie Chart, Mindmap, Timeline, Git Graph, User Journey, Quadrant Chart, Sankey Diagram, XY Chart (bar and line charts), Requirement Diagram, C4 Diagram, Block Diagram, Packet Diagram, Kanban, Architecture Diagram, Radar Chart, Treemap, etc., and supports types added in the latest Mermaid versions.
  • Export capabilities: All plans can export PNG and copy images to the clipboard. The free version is 1× and comes with a watermark; the Starter version provides 2×, 3×, 4× watermark-free PNGs; the Pro version provides 6×, 8× (up to 8×) PNG or JPG, and adds JPG, vector SVG, and vector PDF.
  • Sharing and embedding: No account is needed to generate an editable share link, or publish a read-only page and embed it via iframe. Embedded iframes always show the latest saved version, and all embedded locations automatically sync after updates. The Free and Starter versions have a small badge in embeds, while the Pro version has no badge.
  • Keyboard-friendly: Provides autocomplete, syntax highlighting, find and replace, and shortcuts for saving, exporting, and AI features.
  • Multi-device support: A responsive editor that supports panning, pinch-to-zoom, and full-screen preview on phones and tablets.
  • Privacy by default: Diagrams are rendered in the browser and automatically saved locally. Nothing is stored unless the user actively saves it. When using AI features, the diagram text is sent to the AI provider.
  • Template library: Provides more than 30 directly editable Mermaid templates, covering software, product, and business scenarios, such as user login flowcharts, OAuth 2.0 authorization code flow, microservice architecture, e-commerce database ER diagrams, project roadmap Gantt charts, CI/CD pipelines, and more.

How to use

  1. Write or paste code: Open the editor, enter Mermaid syntax, paste code from a README, or start from a template.
  2. Preview and adjust: Diagrams update in real time; you can pan, zoom, switch themes, or let the AI assistant help you edit.
  3. Export or share: Download PNG (Free version 1× with watermark, Starter up to 4×, Pro up to 8×; JPG, SVG, and PDF are Pro features), or copy Markdown or a share link.

The Free version requires no registration; just open the editor and start typing, and your work is automatically saved in the browser. If you need to save diagrams to the cloud, organize them in folders, and access them across devices, you need to register an account.

Use cases

  • Quickly generate and preview Mermaid diagrams in READMEs, documentation, or web pages.
  • Development and product scenarios such as software architecture, database design, project planning, flowcharts, sequence diagrams, and more.
  • Users who need AI assistance to generate diagrams from natural language or fix syntax.
  • Those who want to embed diagrams in websites or documents and keep automatic upnew scenarios.
  • Users who do not want to install software or draw diagrams by dragging and dropping.

Limitations

  • The Free version can save only 3 diagrams, has a total of 5 AI uses (a lifetime quota, not refreshed daily), PNG export is 1× with a watermark, supports only 1 public share link, and has no version history.
  • The Starter plan ($6.99/month or $69.90/year, about 17% savings) includes 30 saved diagrams, 500 AI conversations per month, watermark-free high-resolution PNG (up to 4×), unlimited sharing, and 30 version history entries.
  • The Pro plan ($11.99/month or $119.90/year, about 17% savings) includes unlimited diagrams, all formats (PNG, JPG, PDF, SVG), advanced sharing and view statistics, 100 version history entries, personal notes and annotations, and priority support.
  • JPG, SVG, and PDF export are available only in the Pro plan.
  • Higher resolutions (6×, 8×) are available only in the Pro plan in the full editor; the converter page provides only 1×–4×.
  • When not registered, data is stored only in the browser's local storage; after registration, saved diagrams are private by default unless the user explicitly makes them public.
  • When using AI features, the diagram text is sent to the AI provider.

Related tools

Browse category