<div align="center"
<img src="frankenmermaidillustration.webp" alt="frankenmermaid" width="320" /
frankenmermaid
A Rust-first, Mermaid-compatible diagram engine with intent-aware parsing, 18 layout algorithms plus Auto, and SVG / terminal / Canvas2D / WASM rendering from a single intermediate representation.
Live Showcase: <https://frankenmermaid.com/ (or <https://frankenmermaid.pages.dev/) 80+ interactive examples, live editor, presenter mode, style studio, diagnostics panel, and determinism checker.
curl -fsSL "https://raw.githubusercontent.com/Dicklesworthstone/frankenmermaid/main/install.sh" | bash</div
---
mermaid-js fails to render the certified large-graph corpus from 2,000 nodes upward
mermaid-js 11.15.0 raises RangeError: Maximum call stack size exceeded on all seven pinned 2,000–10,000-node architecture, flowchart, and database-schema workloads. frankenmermaid renders all seven.
| Surface | Status | Evidence | |---------|--------|----------| | WASM API renders deck manifests | Implemented | 2 evidence refs | | CLI deck command emitting a standalone HTML presentation | Implemented | 2 evidence refs | | CLI detect command | Implemented | 2 evidence refs | | CLI parse command with IR JSON evidence | Implemented | 1 evidence refs | | CLI SVG rendering | Implemented | 1 evidence refs | | CLI terminal rendering | Implemented | 1 evidence refs | | CLI validate command with structured diagnostics | Implemented | 1 evidence refs | | CLI capability matrix command | Implemented | 2 evidence refs | | WASM API renders SVG | Implemented | 1 evidence refs | | WASM API exposes capability matrix metadata | Implemented | 1 evidence refs | | Canvas rendering backend | Implemented | 1 evidence refs | <!-- END GENERATED: runtime-capability-metadata --
TL;DR
The Problem. Mermaid syntax is wonderful for diagrams-as-code, but real-world inputs hit walls fast: cycles produce tangled hierarchical layouts, malformed syntax crashes the parser, large graphs grind through quadratic crossing-minimization, styling control is shallow, and there is no terminal output path at all. JavaScript-based renderers can't easily run in CI, embed in CLIs, or guarantee bit-identical output across runs.
The Solution. frankenmermaid is a ground-up Rust implementation built around one shared intermediate representation that feeds 18 layout algorithms plus Auto and four render backends (SVG, terminal, Canvas2D, and WASM). It recovers from bad input instead of crashing, picks cycle-aware layout strategies automatically, optionally consults a graph-intelligence engine (FNX) for centrality and topology hints, runs an incremental layout pipeline that skips stages whose inputs have not changed, and produces deterministic output suitable for CI snapshot testing.
Why use frankenmermaid?
| Capability | What it does | |---|---| | 27 diagram types | Flowchart, sequence, class, state, ER, gantt, pie, gitGraph, journey, mindmap, timeline, sankey, quadrant, xyChart, block-beta, packet-beta, architecture-beta, treemap, radar-beta, info, 5 C4 variants, requirement, kanban | | Intent-aware parsing | Best-effort recovery with structured diagnostics. Fuzzy keyword matching catches typos like flowchar or seqeunceDiagram; dangling edges auto-create placeholder nodes; never panics on malformed input | | 18 layout algorithms plus Auto | Sugiyama, force-directed, tree, radial, sequence, timeline, gantt, xychart, sankey, kanban, grid, pie, quadrant, gitgraph, packet, architecture, treemap, radar — auto-selected per diagram type | | 4 cycle strategies | Greedy, DFS back-edge, MFAS approximation, full cycle-aware with SCC detection and cluster collapse | | Incremental layout | Adapton-style self-adjusting computation, a cache-oblivious vEB layout index, and an epoch-based concurrent IR handle skip unchanged subgraphs on re-render | | E-graph crossing minimization | Egg-based equality saturation explores rank-order rewrites in parallel, with strict node-budget and timeout guards plus Sugiyama fallback | | Conformal Geometric Algebra (CGA) | Rotor-based transform composition and intersection queries for obstacle-aware edge routing | | High-fidelity SVG | Responsive viewBox, 23 node shapes, 30 arrow variants, gradients, drop shadows, glow effects, CSS animations, custom SVG icons, cluster backgrounds, accessible ARIA markup, 10 theme presets | | Terminal rendering | Braille (2×4), block (2×2), half-block, and cell-only sub-pixel modes with Unicode box-drawing, ASCII fallback, diff engine, and minimap | | Web / WASM | @frankenmermaid/core API surface with SVG + Canvas2D rendering backends, parse/layout/render round-trip, and bidirectional source-map artifacts | | Deterministic output | Same input + same config → byte-identical SVG. Stable tie-breaking at every pipeline stage | | FNX graph intelligence | Optional frankennetworkx integration adds centrality-aware semantic styling, cycle scoring, hub detection, and structural diagnostics. Phase 1 (undirected, advisory) is live; Phase 2 (directed: SCC, WCC, reachability) is in canary rollout | | Zero unsafe code | #![forbid(unsafecode)] in every crate | | DOT bridge | Parses Graphviz DOT and converts to the shared IR for rendering through the same pipeline |
Layout algorithms
| Algorithm | Serves | Notes | |---|---|---| | auto | All types | Selection by diagram type and graph topology; sugiyama default in the general selector | | sugiyama | General graphs (flowchart, class, state, ER, requirement, DOT) | Cycle breaking (4 strategies), crossing minimization, Brandes-Kopf coordinate assignment, edge bundling | | force | General (fallback for dense/cyclic) | Fruchterman-Reingold with Barnes-Hut, cluster cohesion | | tree | Tree-like graphs | Reingold-Tilford variant with direction support | | radial | Mindmap | Leaf-weighted angle allocation | | sequence | Sequence diagrams | Participant columns, message stacking, activation bars, notes, fragments | | timeline | Timeline | Horizontal periods with vertical events | | gantt | Gantt charts | Time-axis bar layout with sections | | xychart | XY charts | Cartesian coordinate mapping | | sankey | Sankey diagrams | Flow-preserving column layout | | kanban | Journey, kanban | Fixed-column card stacking | | grid | Block-beta | CSS-grid-like positioning with column spans | | pie | Pie charts | Wedge angle computation, perimeter label positioning | | quadrant | Quadrant charts | 2D scatter on [0,1] axes | | gitgraph | Git graphs | Lane-based commit positioning | | packet | Packet-beta | Grid-based field layout | | architecture | Architecture-beta, C4 (conditional) | Direction-aware placement; engages when the input declares a side (bd-zce4), otherwise the general selector runs | | treemap | Treemap | Squarified tile allocation | | radar | Radar-beta | Polar wedges with cardinal-spline rendering | <!-- END GENERATED: layout-algorithms --