<div align="center"
<img src="frankenmermaidillustration.webp" alt="frankenmermaid" width="320" /
frankenmermaid
A Rust-first, Mermaid-compatible diagram engine with intent-aware parsing, 15 layout algorithms, and SVG / terminal / Canvas2D / WASM rendering from a single intermediate representation.
Live Demo: <https://dicklesworthstone.github.io/frankenmermaid/ 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
---
| Surface | Status | Evidence | |---------|--------|----------| | 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 15 layout algorithms 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 | |---|---| | 24 diagram types | Flowchart, sequence, class, state, ER, gantt, pie, gitGraph, journey, mindmap, timeline, sankey, quadrant, xyChart, block-beta, packet-beta, architecture-beta, 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 | | 15 layout algorithms | Sugiyama, force-directed, tree, radial, sequence, timeline, gantt, xychart, sankey, kanban, grid, pie, quadrant, gitgraph, packet — 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 |
Quick example
# Detect diagram type with confidence score
echo 'flowchart LR; A-->B-->C' | fm-cli detect -
# → Flowchart (confidence: 1.0, method: ExactKeyword)
# Render to SVG
echo 'flowchart LR; A-->B-->C' | fm-cli render - --format svg --output demo.svg
# Render to terminal (great for CI logs and SSH sessions)
echo 'flowchart LR; A-->B-->C' | fm-cli render - --format term
# Validate with structured diagnostics and a CI-friendly fail gate
echo 'flowchrt LR; A-->B' | fm-cli validate - --fail-on warningParse to IR JSON for tooling integration
echo 'sequenceDiagram; Alice-Bob: hello' | fm-cli parse - --pretty