mermaid-rs-wasm

Mermaid diagram renderer compiled to WebAssembly, powered by ariel-rs. Renders Mermaid syntax to SVG entirely in the browser — no server, no Node.js runtime.

Installation

npm install mermaid-rs-wasm

Usage

The package exports an ES module (ESM) and a CommonJS module (CJS).

// ESM (browser / bundler)
import { initMermaid, render_mermaid } from 'mermaid-rs-wasm';

await initMermaid();

const result = render_mermaid(`
flowchart TD
    A[Start] --> B{Check}
    B -->|Yes| C[Done]
    B -->|No| D[Retry]
    D --> B
`, 'default');

if (result.startsWith('{')) {
  // parse error — result is a JSON string
  const err = JSON.parse(result);
  console.error(err);
} else {
  // success — result is an SVG string
  document.getElementById('output').innerHTML = result;
}

CommonJS (Node.js)

The Node.js build loads WASM automatically at require time. Do not call any init function — it is not needed nor exported.

const { render_mermaid } = require('mermaid-rs-wasm');
const svg = render_mermaid('flowchart TD\n    A --> B', 'default');

When using TypeScript with tsx or ts-node, import statements are transpiled to require() by default, so the same rule applies:

import { render_mermaid } from 'mermaid-rs-wasm';
const svg = render_mermaid('flowchart TD\n    A --> B', 'default');

Bundler (Vite / webpack)

Pass the WASM URL explicitly so the bundler can handle the asset:

import { initMermaid, render_mermaid } from 'mermaid-rs-wasm';
import wasmUrl from 'mermaid-rs-wasm/pkg/ariel_wasm_bg.wasm?url'; // Vite

await initMermaid(wasmUrl);

API

initMermaid(input?): Promise<InitOutput>

Loads and instantiates the WASM module. Must be awaited before calling any other function. ESM only.

| Parameter | Type | Description | |-----------|------|-------------| | input | string \| URL \| Response \| BufferSource | Optional. Path or response for the .wasm file. Defaults to fetching ariel_wasm_bg.wasm from the same directory. |

initMermaidSync(module): InitOutput

Synchronous variant. ESM only. Pass a pre-loaded BufferSource or WebAssembly.Module.

import { initMermaidSync, render_mermaid } from 'mermaid-rs-wasm';
import { readFileSync } from 'fs';

initMermaidSync({ module: readFileSync(new URL('./node_modules/mermaid-rs-wasm/pkg/ariel_wasm_bg.wasm', import.meta.url)) });

render_mermaid(input, theme): string

Renders a Mermaid diagram to SVG.

| Parameter | Type | Values | |-----------|------|--------| | input | string | Mermaid diagram source | | theme | string | "default" "dark" "forest" "neutral" |

Return value:

• Starts with < — SVG string, render directly to the DOM or canvas.
• Starts with { — JSON error string. Parse it to get error details.

Error JSON shape:

// Parse error (syntax problems in the diagram source)
{
  diagram_type: string;
  errors: Array<{
    message: string;
    line?: number;     // 1-based line number, if available
  }>;
}

// Render error (internal failure, no parse errors)
{
  diagram_type: string;
  message: string;
  errors: [];
}

Error handling example:

const result = render_mermaid(source, 'default');

if (result.startsWith('{')) {
  const err = JSON.parse(result);
  for (const e of err.errors) {
    const loc = e.line ? `line ${e.line}: ` : '';
    console.error(`[${err.diagram_type}] ${loc}${e.message}`);
  }
} else {
  container.innerHTML = result;
}

Supported Diagram Types

| Keyword | Diagram | |---------|---------| | flowchart / graph | Flowchart | | sequenceDiagram | Sequence | | classDiagram | Class | | stateDiagram-v2 | State | | erDiagram | Entity Relationship | | gantt | Gantt | | gitGraph | Git Graph | | pie | Pie Chart | | mindmap | Mind Map | | timeline | Timeline | | quadrantChart | Quadrant | | xychart-beta | XY Chart | | C4Context / C4Container / ... | C4 | | block-beta | Block | | packet-beta | Packet | | journey | User Journey | | requirementDiagram | Requirement | | kanban | Kanban | | sankey-beta | Sankey | | treemap | Treemap | | radar | Radar | | venn | Venn | | architecture-beta | Architecture | | eventmodeling | Event Modeling | | fishbone / ishikawa | Ishikawa | | wardley | Wardley Map | | treeView-beta | Tree View |

License

MIT