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.
The Operating Theater.
Type Mermaid on the left, with syntax highlighting as you go. The WebAssembly engine parses, lays out, and renders SVG or Canvas2D on the right in under a millisecond.
Engine Head-to-Head.
Why we rebuilt diagram rendering in Rust: sub-millisecond WASM execution, zero Node.js or Chromium dependencies, 100% deterministic layouts, and native multi-surface output.
Sub-Millisecond WASM
Renders in 0.3ms – 0.9ms. Zero DOM reflows, no browser thread starvation, and 60fps typing responsiveness.
100% Determinism
SHA-256 byte-identical geometry across x86, ARM, and WebAssembly. No floating-point jitter or layout drift in CI.
Standalone Binary
Single static binary with zero Node.js, Puppeteer, or Chromium requirements (vs 350MB+ in mermaid-cli).
4 Native Targets
Shared semantic pipeline emits to high-DPI SVG, Canvas2D, Terminal Unicode/Braille, and WebGPU.
The Live Drag Race.
frankenmermaid (Rust WASM) and mermaid.js render the same ten diagrams in your browser, timed as they run.
Sequential 10-Diagram Race Log
Real-Time MeasurementsSide-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.
Incident Response Escalation
Dense operational workflow with cycle-aware routing, clear decision diamonds, and structured recovery subgraphs.
15 Specialized Layout Engines.
Rather than pushing every diagram through one generic DOT layout, frankenmermaid implements 15 dedicated geometry solvers, each matched to a diagram family's conventions, all deterministic with zero float drift.
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.
Barnes-Hut Force-Directed
Quadtree-accelerated N-body physical simulation with Coulomb repulsion and Hooke elasticity, stabilized by a symplectic Euler numerical integrator.
Orthogonal Grid Router
Dual-grid A* pathfinder with minimum-bend cost heuristics and channel compaction to route orthogonal connectors cleanly without node occlusion.
Concentric Radial Embedding
Depth-based concentric ring radii allocation with logarithmic sector partitioning, preventing angular crowding on high-degree root hubs.
Sequence Lifeline Solver
Deterministic participant column allocation with activation fragment stacking, causal message arrow routing, and multi-actor span geometry.
GitGraph Lane Allocator
Topological DAG branch reservation with compact lane compaction, branch lifespan tracking, and cubic Bézier merge route smoothing.
Class UML Pin Router
Stereotype compartmentalization, member table sizing, and cardinality-aware pin assignment for generalization, composition, and aggregation edges.
Statechart Matrix
Composite hierarchical state clustering with entry/exit pseudo-state pins, self-transition loops, and transition event label bounding.
Gantt Critical-Path Engine
Temporal date normalization across centuries to milliseconds with automated section swimlanes, milestone pins, and critical path cascades.
Sankey Flow Weaver
Volume-weighted node stratification enforcing conservation of flow laws with continuous variable-width Bézier ribbon splines.
Block Architecture Grid
Multi-column grid packing with fractional column spans, nested container bounds, and edge port coordinate auto-snapping.
C4 Enterprise Hierarchy
System Context, Container, Component, Dynamic and Deployment layout abstraction layers with boundary grouping and protocol tags.
Packet Bytefield Grid
Bitfield word boundary wrapping with bit-range headers, field span computation, and hardware register layout geometry.
Quadrant & Pie Arc Solver
Four-quadrant Cartesian partitioning and exact trigonometric arc sectioning with collision-free radial leader text placement.
Hierarchical Tree Embedding
Linear-time contour merging and subtree centering producing compact tree diagrams with guaranteed minimum sibling spacing.
One IR, Four Renderers.
Parse once, compute deterministic geometry, and emit to SVG, Canvas2D, Terminal ANSI, or WASM from a single intermediate representation.
24 Diagram Specimens.
Every Mermaid specification and extended dialect parsed into a unified semantic IR with live vector previews rendered in your browser.
Get Stitched In.
curl -fsSL "https://raw.githubusercontent.com/Dicklesworthstone/frankenmermaid/main/install.sh" | bash
cargo add frankenmermaid-core
The Graph Deck.
Add a %%{deck: …}%% directive to a Mermaid
file and the engine builds a guided presentation from the computed layout: the camera fits
each slide while off-slide nodes glide out of frame, and the whole thing is a
golden-testable manifest. Below, the engine presents its own pipeline.
←/→ steps & slides · o whole graph · f fullscreen · esc guided camera · drag to pan · scroll to zoom · click a dimmed node to travel
Presentation model from graphcon-deck by Yohei Nakajima, rebuilt here on computed layout, deterministic manifests, and reveal steps derived from the layout engine's ranks.