# 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. A top-to-bottom flowchart
can contain one rooted tree with no more than 16 nodes, 32 edges, and two
forward children per node. Solid feedback edges declared after the forward
tree can return to ancestor nodes. Longer solid arrows such as `--->` and
`---->` are accepted. Extra dashes do not increase the rank distance. The
renderer reuses right-side feedback lanes to keep cyclic graphs compact.
## 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,
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 result = BigInt.asUintN(64, render(input.length));
if ((result >> 63n) !== 0n) throw new Error("component rejected input");
const outputSize = Number(result & 0xffff_ffffn);
const outputPtr = Number((result >> 32n) & 0x7fff_ffffn);
return decoder.decode(new Uint8Array(memory.buffer, outputPtr, 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).