frankenmermaid · The Monster Diagram Engine

5 min read Original article ↗

PURE RUST CORE · ZERO NODE.JS · WASM IN YOUR BROWSER

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.

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

Layout Algorithms

15

cycle-aware Sugiyama & force-directed

Determinism Parity

100%

byte-identical SHA-256 snapshots

Taxonomy Families

24/24

flowcharts, C4, gitGraph, mindmap & more

Render Backends

4

SVG, Canvas2D, Terminal, WASM

SPECIMEN_001 · LIVE ENGINE LAB

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.

DIALECT_BENCHMARK_MATRIX · RUST VS JAVASCRIPT

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.

GEOMETRY_DISPATCH_CORE

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 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 compact tree diagrams with guaranteed minimum sibling spacing.

Hierarchies · ASTs · Taxonomies

SUBSYSTEM_MAP

One IR, Four Renderers.

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

Mermaid Input file · stdin · string Intent-Aware Parser best-effort recovery Shared IR & Layout 15 layout algorithms fm-render-svg Vector SVG with defs & themes fm-render-canvas Hardware Canvas2D / WASM fm-render-term Unicode Box-Drawing & Braille

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

SPECIMEN_008 · GRAPH DECK

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 · grab a node and let go · 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.