# Mermaid to Unicode box art
Render a strict Mermaid subset as terminal-style Unicode box art in
of WebAssembly. It runs locally in your browser and as a CLI.
Unicode box art
This component supports the demonstrated flowchart, subgraph, sequence, state, class, and ER forms and traps on unsupported syntax.
## Download
- mermaid-to-unicode-html.wasm —
## CLI
```bash
go install github.com/royalicing/qip@latest
curl -O https://qip.dev/components/text/vnd.mermaid/mermaid-to-unicode-html.wasm
printf '%s\n' \
'graph TD' \
' Start[Request received] --> Auth{Authenticated?}' \
' Auth -->|yes| Rate{Rate limit OK?}' \
' Auth -->|no| R401[401 Unauthorized]' \
' Rate -->|yes| H(Handle request)' \
' Rate -->|no| R429[429 Too Many Requests]' \
' H -.-> Log[Audit log]' \
' H ==> Resp[200 OK]' \
| qip run mermaid-to-unicode-html.wasm > graph.html
```
## JavaScript
```js
const mermaidRenderer = await WebAssembly.instantiateStreaming(
fetch("mermaid-to-unicode-html.wasm"),
);
const encoder = new TextEncoder(), decoder = new TextDecoder();
function renderMermaid(source) {
const {
memory,
input_ptr,
input_utf8_cap,
output_ptr,
render,
} = mermaidRenderer.instance.exports;
const input = encoder.encode(source);
if (input.length > input_utf8_cap()) throw new RangeError("Mermaid input is too large");
new Uint8Array(memory.buffer, input_ptr(), input.length).set(input);
const outputSize = render(input.length);
return decoder.decode(new Uint8Array(memory.buffer, output_ptr(), outputSize));
}
const diagram = `graph TD
Start[Request received] --> Auth{Authenticated?}
Auth -->|yes| Rate{Rate limit OK?}
Auth -->|no| R401[401 Unauthorized]
Rate -->|yes| H(Handle request)
Rate -->|no| R429[429 Too Many Requests]
H -.-> Log[Audit log]
H ==> Resp[200 OK]`;
document.querySelector("#diagram").innerHTML = renderMermaid(diagram);
```
The component returns an HTML fragment containing the box art and styling spans. Insert it as HTML to preserve the colors, or use the element's `textContent` when you only need plain Unicode text.
## Notes
Inspired by [Simon Willison’s Mermaid utility](https://tools.simonwillison.net/grok-mermaid).