Show HN: Free Mermaid Diagram Editor

Hacker News Top Tools

Summary

A free, no-signup Mermaid diagram editor with live preview, instant SVG/PNG export, and shareable links that run entirely in the browser. Optionally connects to GitHub to auto-generate architecture diagrams from source code.

I've been slowly adding some new free tools to Moxie Docs (partly for SEO, partly to illustrate some of our feature sets before any commitment) for some reason this mermaid editor one blew up on Google rankings so I figured I'd share in case people find it useful! We also have ADR, AGENTS.md, LLMs, and a few other free tools.
Original Article
View Cached Full Text

Cached at: 07/08/26, 02:16 AM

# Free Mermaid Live Editor & Diagram Maker Source: [https://moxiedocs.com/mermaid-diagram-editor](https://moxiedocs.com/mermaid-diagram-editor) FREE TOOL Draw diagrams here \- connect GitHub when you want Moxie to generate them from your repo\. Live preview, instant SVG/PNG export, and shareable links in your browser\. When you connect a repository, Moxie generates architecture diagrams from source and refreshes them on every merge\. Tip: Edit the left side and the preview updates live\. Use the snippet buttons or load an example\. Share the URL to collaborate\. Live preview See every change rendered instantly\. No save button, no reloads\. Export anywhere Download clean SVG or high\-resolution PNG with one click\. Perfect for docs, slides, and wikis\. Shareable links Your diagram lives in the URL\. Send the link and others see exactly what you built\. Private by design Everything runs in your browser\. Diagrams never leave your device\. ## Common Mermaid use cases Architecture & system design Flowcharts and C4\-style diagrams that explain how services connect\. API & data flows Sequence diagrams for request lifecycles and integration points\. Data models & schemas ER diagrams and class diagrams for your domain model and database\. Roadmaps & timelines Gantt charts and mindmaps for planning and onboarding\. ## Frequently asked questions Is this Mermaid editor completely free? Yes\. Use it as much as you want\. No sign up, no limits, no watermarks\. Do I need an account or to install anything? No\. Open the page and start editing\. It works on desktop and modern mobile browsers\. Which Mermaid diagram types are supported? All core types: flowchart, sequenceDiagram, classDiagram, erDiagram, gantt, mindmap, pie, state, gitGraph, and more\. The editor uses the latest Mermaid renderer\. Can I use diagrams I make here in my own documentation? Absolutely\. Export SVG or PNG and drop them into READMEs, Notion, Confluence, Google Docs, or any Markdown file\. How do shareable links work? The entire diagram is encoded in the URL query parameter\. Bookmark it, email it, or paste it anywhere\. No server storage involved\. How is this different from mermaid\.live? This editor is lightweight, focused, and built by the Moxie Docs team\. It emphasizes fast exports, clean URLs, and privacy with zero tracking on the tool itself\. Great when you want something simple and embeddable in a dev workflow\. For teams that document code ## Tired of manually maintaining diagrams for your codebase? Draw and export diagrams here\. Connect GitHub when you want Moxie to generate architecture diagrams and searchable docs from your repository and refresh them on every merge\. [See how Moxie keeps docs current](https://moxiedocs.com/workflow)[Start 14\-day trial](https://moxiedocs.com/auth/github?next=/dashboard) Export free above · connect a repo when you want Moxie to keep it accurate

Similar Articles

Mermaid to ASCII art (mermaid-ascii)

Simon Willison's Blog

A web tool that converts Mermaid diagram syntax into ASCII and Unicode box-drawing art, rendered entirely in the browser using a Go library compiled to WebAssembly. Supports flowcharts, sequence diagrams, colors, and customizable output.

@wsl8297: Mermaid makes drawing flowcharts and sequence diagrams really easy, but the default rendering is far from beautiful, let alone usable in the terminal. I found a new open-source project on GitHub: beautiful-mermaid, which is specifically designed to make Mermaid rendering both beautiful and practical — it can export exquisite…

X AI KOLs Timeline

beautiful-mermaid is an open-source tool implemented in pure TypeScript that renders Mermaid diagrams as beautiful SVGs or terminal-friendly ASCII art. It supports 15 built-in themes and has zero DOM dependencies, making it suitable for use in AI-assisted programming.

Mermaid to Unicode box art (grok-mermaid)

Simon Willison's Blog

Simon Willison built a browser-based tool using WebAssembly to convert Mermaid diagrams into Unicode box art, inspired by an open-sourced Rust component from the Grok CLI coding agent.