{"slug": "mermaid-to-unicode-box-art-grok-mermaid", "title": "Mermaid to Unicode box art (grok-mermaid)", "summary": "Developer Simon Willison ported xAI's open-source Rust-based Mermaid diagram renderer to the browser using WebAssembly, creating a tool that converts Mermaid diagrams to Unicode box art. The tool, built from code in the newly open-sourced Grok CLI coding agent, allows terminal-style diagram rendering in web environments.", "body_md": "**Tool:** [Mermaid to Unicode box art (grok-mermaid)](https://tools.simonwillison.net/grok-mermaid)\n\nWhile [exploring the codebase](https://simonwillison.net/2026/Jul/15/grok-build/) for the newly open-sourced Grok CLI coding agent I came across [xai-grok-markdown/src/mermaid.rs](https://github.com/xai-org/grok-build/blob/b189869b7755d2b482969acf6c92da3ecfeffd36/crates/codegen/xai-grok-markdown/src/mermaid.rs), a \"self-contained terminal renderer for Mermaid diagrams\" written in Rust.\n\nI figured it would be fun to try that out in a browser via WebAssembly. Here's [the prompt](https://github.com/simonw/tools/pull/293#issue-4897479396) I ran in Claude Code for web (Fable 5), and this is what the resulting tool looks like:", "url": "https://wpnews.pro/news/mermaid-to-unicode-box-art-grok-mermaid", "canonical_source": "https://simonwillison.net/2026/Jul/16/grok-mermaid/#atom-everything", "published_at": "2026-07-16 00:33:18+00:00", "updated_at": "2026-07-16 01:09:02.668797+00:00", "lang": "en", "topics": ["developer-tools", "ai-tools"], "entities": ["Simon Willison", "xAI", "Grok", "Claude Code", "Fable 5"], "alternates": {"html": "https://wpnews.pro/news/mermaid-to-unicode-box-art-grok-mermaid", "markdown": "https://wpnews.pro/news/mermaid-to-unicode-box-art-grok-mermaid.md", "text": "https://wpnews.pro/news/mermaid-to-unicode-box-art-grok-mermaid.txt", "jsonld": "https://wpnews.pro/news/mermaid-to-unicode-box-art-grok-mermaid.jsonld"}}