Mermaid to ASCII art (mermaid-ascii)

Simon Willison's Blog Tools
mermaid ascii-art webassembly diagram open-source

Summary

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.

No content available
Original Article
View Cached Full Text

Cached at: 07/17/26, 01:46 AM

# Tool: Mermaid to ASCII art (mermaid-ascii) Source: [https://simonwillison.net/2026/Jul/16/mermaid-ascii/](https://simonwillison.net/2026/Jul/16/mermaid-ascii/) [Tool](https://simonwillison.net/elsewhere/tool/)[Mermaid to ASCII art \(mermaid\-ascii\)](https://tools.simonwillison.net/mermaid-ascii)— Convert Mermaid diagram syntax into ASCII and Unicode box\-drawing art rendered entirely in your browser using a Go library compiled to WebAssembly\. The tool supports flowcharts with labeled edges, subgraphs, and color definitions, as well as sequence diagrams with notes and control flow fragments, while offering customizable padding and output options\. After building the[Mermaid to ASCII tool based on Grok Build's Rust code](https://simonwillison.net/2026/Jul/16/grok-mermaid/)I learned that there's an older, more fully\-featured Go library called[AlexanderGrooff/mermaid\-ascii](https://github.com/AlexanderGrooff/mermaid-ascii)that implements a similar pattern, so I had Claude Fable 5 compile that one to WebAssembly as well so I could compare the two\. This one includes support for colors\! ![Screenshot of a Mermaid diagram editor web app. A row of tab buttons reads: Flowchart, Multiple links, Subgraphs, Multi-line labels, Colors (selected, highlighted blue), Sequence, Alt fragment, Loop + note, Parallel. Below is a text input area containing: "graph LR / Build:::good --> Test:::good / Test --> Deploy:::warn / Deploy --> Rollback:::bad / classDef good color:#3fb950 / classDef warn color:#e3b341 / classDef bad color:#ff7b72". A control row shows an unchecked "ASCII only" checkbox, "Padding X: 5", "Padding Y: 5", "Box padding: 1", and buttons "Copy as text" and "Copy link to this diagram". At the bottom on a black background is the rendered left-to-right flowchart with four connected boxes: "Build" (green text), "Test" (green text), "Deploy" (yellow text), "Rollback" (red text), each linked by arrows.](https://static.simonwillison.net/static/2026/mermaid-ascii.webp)

Similar Articles

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.

@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.

Show HN: Free Mermaid Diagram Editor

Hacker News Top

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.

merman: Mermaid.js, but headless, in Rust

Lobsters Hottest

Merman is a headless Rust implementation of Mermaid.js that parses, lays out, and renders diagrams (SVG, raster, ASCII) without a browser or JavaScript runtime, targeting parity with Mermaid.js v11.15.0.