PURE RUST CORE · ZERO NODE.JS · WASM CERTIFIED

The Monster Diagram Engine.

A clean-room, zero-dependency Rust diagram engine with intent-aware parsing, 15 layout algorithms, 100% deterministic geometry, and native multi-surface rendering across SVG, Canvas2D, Terminal ANSI, and WebAssembly.

⚡ Enter Operating Theater Explore 15 Layouts → 📜 MIT License

$ curl -fsSL https://frankenmermaid.com/install.sh | bash

Layout Algorithms

cycle-aware Sugiyama & force-directed

Determinism Parity

100%

byte-identical SHA-256 snapshots

Taxonomy Families

24/24

flowcharts, C4, gitGraph, mindmap & more

Render Backends

SVG, Canvas2D, Terminal, WASM

SPECIMEN_001 · LIVE ENGINE LAB

The Operating Theater.

Type Mermaid with performant real-time syntax highlighting on the left. The WebAssembly engine computes deterministic layouts and renders vector SVG or Canvas2D on the right in sub-millisecond frames.

fm_operating_theater

PARITY_100% DETERMINISM_LOCKED

LIVE (WASM)

Sample:

source.mmd FLOWCHART

0 lines 0 B

Insert:

vector_render.svg

SVG: 0.2ms DETERMINISTIC_STAGE

Compiling and rendering diagram...

100%

Bit-for-Byte Determinism Proof

100% Guaranteed

The determinism checker executes repeated WASM render passes on your source code and computes SHA-256 digests over the raw output bytes. Zero non-deterministic entropy allowed.

Ready to execute determinism audit.

Determinism evidence JSON will appear here after running...

🎨 THEME:

Radius: 8px

Shadows Embed CSS

Diagnostics:

Zero errors • Clean syntax

Parse: 0.1ms · Layout: 0.2ms · Render: 0.2ms · Total: 0.5ms

DIALECT_BENCHMARK_MATRIX · RUST VS JAVASCRIPT

Engine Head-to-Head.

Why we rebuilt diagram rendering from bare metal: sub-millisecond WASM execution, zero Node.js/Chromium dependencies, 100% deterministic layouts, and native multi-surface output.

0.3ms

⚡ Up to 300x Faster

Sub-Millisecond WASM

Renders in 0.3ms – 0.9ms. Zero DOM reflows, no browser thread starvation, and true 60fps typing responsiveness.

SHA

🔒 Bit-Exact Invariant

100% Determinism

SHA-256 byte-identical geometry across x86, ARM, and WebAssembly. No floating-point jitter or layout drift in CI.

0MB

📦 Zero Runtime Bloat

Standalone Binary

Single static binary with zero Node.js, Puppeteer, or Chromium requirements (vs 350MB+ in mermaid-cli).

🎯 Universal IR

4 Native Targets

Shared semantic pipeline emits to high-DPI SVG, Canvas2D, Terminal Unicode/Braille, and WebGPU.

⚡ LIVE BROWSER BENCHMARK 10 Heavy Enterprise Diagrams · Cold Start to Finish

Feel The Speed.

Watch frankenmermaid (pure Rust WASM) race head-to-head in real time against mermaid.js running live in your browser.

🧜

frankenmermaid

Rust WASM · Zero DOM reflows

0.0 ms

0 rendered / sec

Ready to race 0 / 10 Complete

Awaiting race start...

LIVE VECTOR STAGE

🐢

mermaid.js

JavaScript / DOM / D3 runtime

0.0 ms

0 rendered / sec

Ready to race 0 / 10 Complete

Awaiting race start...

LIVE DOM STAGE

Sequential 10-Diagram Race Log

Real-Time Measurements

← Swipe horizontally to see latencies → 10 Specimens

#	Diagram Specimen	Dialect Family	🧜 frankenmermaid	🐢 mermaid.js	Speedup

VISUAL_QUALITY_COMPARISON · SELECT ANY SPECIMEN TO INSPECT

Side-by-Side Visual Quality Duel.

Click any of the 10 diagrams below to inspect visual rendering quality, node alignment, bezier curvature, and typographic crispness head-to-head.

Style:

⚖️

Apples-to-Apples Parity or Modern Elevation: Select 🎯 1:1 Mermaid Parity to test exact Mermaid.js color palettes (#ECECFF/#9370DB) with 150x faster WASM execution, or toggle ✨ FrankenModern for tactile drop-shadows, obsidian glass cards, and neon vector highlights.

🎯

Crisp Vectors

Non-scaling geometric paths

📐

100% Deterministic

Zero floating jitter or drift

🏷️

Backdrop Blur Labels

High-contrast pill badges

⚡

Zero Reflow Lag

Native Rust WASM pipeline

FLOWCHART Incident Response Escalation

frankenmermaid: 0.35ms mermaid.js: 184.2ms

🧜 frankenmermaid Output Vector SVG

FRANKENMODERN PRO

Rendering vector diagram...

100%

🐢 mermaid.js Output DOM Render

BROWSER D3 / DAGRE

Rendering mermaid-js DOM...

100%

← Swipe table horizontally to compare → 5 Dialects

Feature / Dimension	🧜 frankenmermaid	mermaid-js	Graphviz (DOT)	Excalidraw
Execution & Core Engine	⚡ Pure Rust + WebAssembly Zero unsafe code, auditable core	JavaScript / DOM / D3 DOM-dependent parsing & layout	C / Native binary C codebase & build toolchain	React / Canvas JS Client-side React app
Render Latency (WASM / Native)	🚀 0.3ms – 0.9ms Instant 60fps typing frames	120ms – 450ms Noticeable typing lag & reflows	15ms – 60ms Process startup overhead	8ms – 30ms Interactive manual updates
Determinism Guarantee	🔒 100% Bit-Identical SHA-256 Zero float drift or test jitter in CI	✗ Non-deterministic Browser font & DOM layout variance	~ Near deterministic Libc floating-point variance	— Freehand drawing
Supported Render Targets	🎯 SVG, Canvas2D, ANSI Terminal, WASM Single unified intermediate representation	SVG (DOM only) Requires browser DOM environment	SVG, PostScript, PNG Native binary export	Canvas2D / PNG Export
Layout Engine Variety	📐 15 Specialized Solvers Sugiyama, Force, Tree, Radial, Timeline, Gantt, etc.	1 – 2 Layouts (Dagre / D3) Generic graph ranking	5 Layout engines dot, neato, fdp, sfdp, twopi	— Manual layout
Error Recovery & Tolerance	✓ Intent-Aware Recovery + Diagnostics Best-effort rendering without red crash screens	✗ Hard exception crash Fails with red syntax error box	⚠ Hard syntax exit Non-zero exit code on minor error	— N/A
CLI Footprint / Prerequisites	📦 Standalone Static Binary (~15MB) Zero runtime dependencies, instant execution	✗ Node + Puppeteer + Chromium 350MB+ download and headless browser	Native system packages Requires libgraphviz / OS package manager	No standalone CLI
Terminal / ASCII Rendering	✓ Unicode Box-Drawing & Braille Native ANSI TUI color rendering	✗ Unsupported Cannot render in CLI/terminals	✗ Unsupported	✗ Unsupported

FLOWCHART Supported Flagship Specimen Explorer

Incident Response Escalation

Dense operational workflow with cycle-aware routing, clear decision diamonds, and structured recovery subgraphs.

01 / 24

Rendering flagship SVG...

100%

Best recovery-and-operations proof. Dense but readable routing, explicit decision diamonds, and production-grade hierarchy.

✓ Deterministic ✓ Cycle-Aware ✓ Subgraphs & Clusters

GEOMETRY_DISPATCH_CORE

15 Specialized Layout Engines.

Instead of forcing every diagram into generic graphviz DOT, frankenmermaid implements 15 dedicated geometry solvers engineered for deterministic stability, zero float drift, and specialized domain aesthetics.

sugiyama O(V log V) · Layered DAG

Sugiyama Layered DAG

Decycled feedback arc set breaking, Coffman-Graham layer width bounds, and E-graph barycenter crossing minimization for hierarchical workflows and state machines.

Flowchart · State · Class

force O(N log N) · Spatial Quadtree

Barnes-Hut Force-Directed

Quadtree-accelerated N-body physical simulation with Coulomb repulsion and Hooke elasticity, stabilized by a symplectic Euler numerical integrator.

Network · Organic Topologies

grid A* Manhattan · 0 Bend

Orthogonal Grid Router

Dual-grid A* pathfinder with minimum-bend cost heuristics and channel compaction to route orthogonal connectors cleanly without node occlusion.

Block · Schematics · ER

radial Concentric · Angle Slices

Concentric Radial Embedding

Depth-based concentric ring radii allocation with logarithmic sector partitioning, preventing angular crowding on high-degree root hubs.

Mindmaps · Tree Graphs

sequence Strict Causal Matrix

Sequence Lifeline Solver

Deterministic participant column allocation with activation fragment stacking, causal message arrow routing, and multi-actor span geometry.

Sequence Diagrams · API Traces

gitgraph Topological Lanes

GitGraph Lane Allocator

Topological DAG branch reservation with compact lane compaction, branch lifespan tracking, and cubic Bézier merge route smoothing.

Git History · Version Graphs

class-uml Pin Orthogonal Router

Class UML Pin Router

Stereotype compartmentalization, member table sizing, and cardinality-aware pin assignment for generalization, composition, and aggregation edges.

Class Diagrams · Type Hierarchies

state-matrix Hierarchical Nested States

Statechart Matrix

Composite hierarchical state clustering with entry/exit pseudo-state pins, self-transition loops, and transition event label bounding.

State Diagrams · FSMs

gantt Critical Path Propagation

Gantt Critical-Path Engine

Temporal date normalization across centuries to milliseconds with automated section swimlanes, milestone pins, and critical path cascades.

Roadmaps · Release Cycles

sankey Conservation of Flow

Sankey Flow Weaver

Volume-weighted node stratification enforcing conservation of flow laws with continuous variable-width Bézier ribbon splines.

Flow Distributions · Cost Funnels

block Proportional Span Grid

Block Architecture Grid

Multi-column grid packing with fractional column spans, nested container bounds, and edge port coordinate auto-snapping.

Hardware Blocks · System Units

c4-engine Context · Container · Component

C4 Enterprise Hierarchy

System Context, Container, Component, Dynamic and Deployment layout abstraction layers with boundary grouping and protocol tags.

C4 Context · Containers · Mesh

packet Word-Aligned Bitfields

Packet Bytefield Grid

Bitfield word boundary wrapping with bit-range headers, field span computation, and hardware register layout geometry.

Network Headers · Wire Formats

quadrant-pie Trigonometric Bounding

Quadrant & Pie Arc Solver

Four-quadrant Cartesian partitioning and exact trigonometric arc sectioning with collision-free radial leader text placement.

Quadrant Charts · Pie Shares

tree Reingold-Tilford Linear

Hierarchical Tree Embedding

Linear-time contour merging and subtree centering producing aesthetic compact tree diagrams with guaranteed minimum sibling spacing.

Hierarchies · ASTs · Taxonomies

SUBSYSTEM_MAP

One IR. Every Target.

Parse once, compute deterministic geometry, and emit to SVG, Canvas2D, Terminal ANSI, or WASM from a single intermediate representation.

TAXONOMY MUSEUM · ALL 24 FAMILIES

24 Diagram Specimens.

Every Mermaid specification and extended dialect parsed into a unified semantic IR with live vector previews rendered in your browser.

⌘K

24 of 24 Specimens

REANIMATION_PROTOCOL

Get Stitched In.

1. Rust CLI Toolchain

curl -fsSL "https://raw.githubusercontent.com/Dicklesworthstone/frankenmermaid/main/install.sh" | bash

2. Cargo Workspace Dependency

cargo add frankenmermaid-core

The Monster Diagram Engine.

The Operating Theater.

Diagram Color Palettes

Bit-for-Byte Determinism Proof

Engine Head-to-Head.

Sub-Millisecond WASM

100% Determinism

Standalone Binary

4 Native Targets

Feel The Speed.

FrankenMermaid is 200x Faster!

Sequential 10-Diagram Race Log

Side-by-Side Visual Quality Duel.

Incident Response Escalation

15 Specialized Layout Engines.

Sugiyama Layered DAG

Barnes-Hut Force-Directed

Orthogonal Grid Router

Concentric Radial Embedding

Sequence Lifeline Solver

GitGraph Lane Allocator

Class UML Pin Router

Statechart Matrix

Gantt Critical-Path Engine

Sankey Flow Weaver

Block Architecture Grid

C4 Enterprise Hierarchy

Packet Bytefield Grid

Quadrant & Pie Arc Solver

Hierarchical Tree Embedding

One IR. Every Target.

24 Diagram Specimens.

Get Stitched In.