Skip to content

mermaid-ascii: Mermaid to ASCII art playground via Go WASM#295

Merged
simonw merged 1 commit into
mainfrom
claude/mermaid-ascii-wasm-playground-xp475v
Jul 16, 2026
Merged

mermaid-ascii: Mermaid to ASCII art playground via Go WASM#295
simonw merged 1 commit into
mainfrom
claude/mermaid-ascii-wasm-playground-xp475v

Conversation

@simonw

@simonw simonw commented Jul 16, 2026

Copy link
Copy Markdown
Owner

Clone https://github.com/AlexanderGrooff/mermaid-ascii to /tmp

Figure out if you can get it working in WebAssembly, like the most recently added project in this repo - then build a similar HTML playground called mermaid-ascii.html but with a ser if examples that fits this Go library (reusing existing samples from the Rust one if they work)

In-browser playground (mermaid-ascii.html) that renders Mermaid flowchart
and sequence diagram source as ASCII / Unicode box-drawing art, using
https://github.com/AlexanderGrooff/mermaid-ascii (MIT) compiled unmodified
to WebAssembly with the standard Go toolchain (GOOS=js GOARCH=wasm).

Follows the pattern of grok-mermaid.html but for the Go library:

  • mermaid-ascii/build_wasm.sh clones upstream at a pinned commit, strips
    the cobra CLI and gin web-server entry points (nothing else imports
    them), adds a syscall/js shim exporting renderMermaidAscii(), and
    builds a 3.7 MB module (wasm-opt -Oz; ~1.1 MB gzipped).
  • The page renders with the library's "html" style so classDef
    color:#hex classes work, sanitizing the unescaped span output via a
    strict tokenizer + textContent instead of innerHTML.
  • Examples cover the features this library actually supports: labeled
    edges, A --> B & C fan-out, subgraphs,
    multi-line labels,
    classDef colors, and sequence diagrams with alt/loop/par fragments
    and notes (two examples reused from grok-mermaid where compatible).
  • Controls: ASCII-only toggle, node padding X/Y, box padding, copy as
    text, permalink via URL fragment.
  • tests/test_mermaid_ascii.py: 8 Playwright tests incl. an XSS probe.

Co-Authored-By: Claude Fable 5 noreply@anthropic.com
Claude-Session: https://claude.ai/code/session_01UPeaso82zQbKb67TTSVQ2e

In-browser playground (mermaid-ascii.html) that renders Mermaid flowchart
and sequence diagram source as ASCII / Unicode box-drawing art, using
https://github.com/AlexanderGrooff/mermaid-ascii (MIT) compiled unmodified
to WebAssembly with the standard Go toolchain (GOOS=js GOARCH=wasm).

Follows the pattern of grok-mermaid.html but for the Go library:

- mermaid-ascii/build_wasm.sh clones upstream at a pinned commit, strips
  the cobra CLI and gin web-server entry points (nothing else imports
  them), adds a syscall/js shim exporting renderMermaidAscii(), and
  builds a 3.7 MB module (wasm-opt -Oz; ~1.1 MB gzipped).
- The page renders with the library's "html" style so classDef
  color:#hex classes work, sanitizing the unescaped span output via a
  strict tokenizer + textContent instead of innerHTML.
- Examples cover the features this library actually supports: labeled
  edges, A --> B & C fan-out, subgraphs, <br> multi-line labels,
  classDef colors, and sequence diagrams with alt/loop/par fragments
  and notes (two examples reused from grok-mermaid where compatible).
- Controls: ASCII-only toggle, node padding X/Y, box padding, copy as
  text, permalink via URL fragment.
- tests/test_mermaid_ascii.py: 8 Playwright tests incl. an XSS probe.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01UPeaso82zQbKb67TTSVQ2e
@claude

claude Bot commented Jul 16, 2026

Copy link
Copy Markdown
Contributor

Claude encountered an error —— View job


I'll analyze this and get back to you.

@simonw
simonw merged commit b9b8da0 into main Jul 16, 2026
1 of 4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants