Mermaid to Unicode box art

Render a strict Mermaid subset as terminal-style Unicode box art in 32.68 kB 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 #



CLI #


printf 'graph TD\n  Request --> Response\n' | npx @qip.dev/qipx qip.dev run text/vnd.mermaid/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,
    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.