Mermaid to Unicode box art

Render a strict Mermaid subset as terminal-style Unicode box art in 24.35 kB of WebAssembly. It runs locally in your browser and as a CLI.

Copy as text Copy as HTML

This component supports the demonstrated flowchart, subgraph, sequence, state, class, and ER forms and traps on unsupported syntax.

Download #

• mermaid-to-unicode-html.wasm — 24.35 kB

CLI #

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 #

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.