# Merlion > Merlion renders Mermaid flowcharts to static, themeable, accessible SVG. The core is a no_std Rust library with zero dependencies, shipped as the `merlion` CLI and as a WebAssembly module with byte-identical output, plus a rehype plugin, an Astro integration and a pan-and-zoom web component. The full text of every page is at https://merlion.fractalbox.dev/llms-full.txt. ## Start - [Merlion](https://merlion.fractalbox.dev/): Merlion renders Mermaid flowcharts to static, themeable, accessible SVG from a no_std Rust core shipped as a CLI and as WebAssembly. - [Getting started](https://merlion.fractalbox.dev/getting-started/): Render Mermaid flowcharts with the merlion CLI, the WebAssembly module, the rehype plugin or the Astro integration, from a checkout of the repository. ## Guides - [Diagnostics and repairs](https://merlion.fractalbox.dev/guides/diagnostics/): Every Merlion message has a severity and a stable code. Common syntax mistakes are repaired with a fix you can apply; --strict turns them into errors. - [Labels and titles](https://merlion.fractalbox.dev/guides/labels/): Title + detail node labels, Markdown in labels, edge labels, and the accessible title and outline every Merlion SVG carries. - [Roles and stylesheets](https://merlion.fractalbox.dev/guides/roles-and-stylesheets/): Class names are roles. Eight work with no stylesheet; one CSS-subset stylesheet colours the rest, on the page as compiled CSS and baked into standalone SVG. - [Stable layout](https://merlion.fractalbox.dev/guides/stable-layout/): Pass the previous SVG as a layout hint and nodes keep their order across edits. The CLI, the rehype plugin and the WASM module all accept one. - [Theming](https://merlion.fractalbox.dev/guides/theming/): Merlion colours are CSS custom properties. Light, dark and custom themes switch through CSS alone, on the page or on any container, with no re-render. - [The viewer](https://merlion.fractalbox.dev/guides/viewer/): adds pan, zoom, fullscreen and semantic zoom to any inline SVG. Optional, dependency-free, at most 6 KB gzipped. ## How it works - [Architecture](https://merlion.fractalbox.dev/how-it-works/architecture/): The packages Merlion ships, how they depend on each other, and the four-stage pipeline every render runs on every target. - [Container fit](https://merlion.fractalbox.dev/how-it-works/layout/container-fit/): How Merlion makes a drawing fit the container width — component packing, direction choice, wrapping, layer splitting, narrower labels, and when it stops. - [Coordinate assignment](https://merlion.fractalbox.dev/how-it-works/layout/coordinate-assignment/): Phase 4 turns layer orders into coordinates with Brandes–Köpf, four alignments balanced into one, then fits clusters and spaces the layers. - [Crossing minimisation](https://merlion.fractalbox.dev/how-it-works/layout/crossing-minimisation/): Phase 3 orders every layer in three passes, layer sweeps, exact refinement for k ≤ 8 and a local pass, each drawing from a fixed fuel budget. - [Cycle removal](https://merlion.fractalbox.dev/how-it-works/layout/cycle-removal/): Phase 1 of the layout reverses loop back-edges found by dominators, then breaks irreducible cycles with the Eades–Lin–Smyth heuristic. - [Edge routing and clusters](https://merlion.fractalbox.dev/how-it-works/layout/edge-routing/): Phases 6 and 7 — how edges are routed through dummy nodes, where ports and label chips go, and how subgraphs become boxes with titles. - [Layer assignment](https://merlion.fractalbox.dev/how-it-works/layout/layer-assignment/): Phase 2 places every node in a layer by longest path, sinks extra entry points next to what they feed, and adds dummy nodes for long edges. - [Stable layout](https://merlion.fractalbox.dev/how-it-works/layout/stable-layout/): How the previous SVG becomes a layout hint, which nodes survive an edit, the ordering constraint on them, and when the hint is dropped. - [Render pipeline](https://merlion.fractalbox.dev/how-it-works/render-pipeline/): One render from source to SVG — the size limits checked at each step, the fuel budget, which failures return TooLarge and what the result carries. - [Stylesheets](https://merlion.fractalbox.dev/how-it-works/stylesheet/): How one Merlion stylesheet compiles to a typed model, then to page CSS for inline diagrams or to a baked palette for standalone SVG. ## Gallery - [Gallery](https://merlion.fractalbox.dev/gallery/): Every diagram of the Merlion gallery, rendered at build time by the Merlion Astro integration from the repository's fixture files. - [Test fixtures](https://merlion.fractalbox.dev/gallery/fixtures/): Every flowchart fixture of the Merlion core's test suite, rendered at build time: shapes, edges, labels, subgraphs, styles and LLM-style repairs. - [Mermaid corpus](https://merlion.fractalbox.dev/gallery/mermaid-corpus/): Twelve diagrams from the mermaid 12.0.0 compatibility corpus, rendered by Merlion: large graphs, nested subgraphs, classes and edge labels. - [Roles and stylesheet](https://merlion.fractalbox.dev/gallery/roles/): Built-in roles and site stylesheet roles on nodes, edges and clusters, inline and as standalone SVG with light and dark themes baked in. - [Showcase](https://merlion.fractalbox.dev/gallery/showcase/): Hand-written Merlion diagrams: a wide pipeline for the viewer, subgraphs, shapes and a titled request lifecycle. ## Specs - [Merlion specs](https://merlion.fractalbox.dev/reference/specs/): Merlion renders Mermaid diagrams to static, themeable, accessible SVG. It is a Rust core with no runtime dependencies. The same code ships as a native CLI… - [Architecture decision records](https://merlion.fractalbox.dev/reference/specs/adr/): A superseding decision is a new ADR; the old one keeps its text and changes status to Superseded by . - [ADR-0001: Rust core, shipped as a CLI and as WASM](https://merlion.fractalbox.dev/reference/specs/adr/0001-rust-core/): The renderer must run at build time without a browser, in the browser for live editing, and produce identical output in both places. mermaid-cli launches… - [ADR-0002: Zero runtime dependencies](https://merlion.fractalbox.dev/reference/specs/adr/0002-zero-runtime-dependencies/): Installing mermaid 12.0.0 adds 23 direct and 117 transitive npm packages (d3, cytoscape plus two layout plugins, katex, marked, dompurify, chevrotain,… - [ADR-0003: Pre-rendering is the primary target](https://merlion.fractalbox.dev/reference/specs/adr/0003-prerender-first/): Most Mermaid lives in documentation and content sites whose source is known at build time. Rendering in the browser ships a renderer (mermaid's… - [ADR-0004: Source of the layered layout implementation](https://merlion.fractalbox.dev/reference/specs/adr/0004-layout-implementation/): Zero runtime dependencies in a Rust core (ADR-0001, ADR-0002) rule out elkjs, which is JavaScript anyway. The layered layout (layout.md) is the largest… - [ADR-0005: Theming through CSS custom properties, labels as ](https://merlion.fractalbox.dev/reference/specs/adr/0005-css-variable-theming/): mermaid writes theme colours into the SVG at render time, so switching between light and dark means re-rendering, or rendering twice and hiding one copy… - [ADR-0006: Stable layout from a hint stored in the previous SVG, in M2](https://merlion.fractalbox.dev/reference/specs/adr/0006-stable-layout/): Every existing Mermaid renderer lays out each version from scratch. A one-edge change can reorder whole layers, which makes committed diagram diffs… - [ADR-0007: A reader-preference panel in the benchmark](https://merlion.fractalbox.dev/reference/specs/adr/0007-reader-panel/): Van Wageningen, Mchedlidze and Telea (GD 2025) show that a drawing can be morphed into an arbitrary shape while one or more quality metrics stay almost… - [ADR-0008: Layout work is bounded by fuel, not by time](https://merlion.fractalbox.dev/reference/specs/adr/0008-deterministic-work-budget/): Layout has optional work (exact crossing refinement, the local objective, sleeve routing) whose cost grows quickly with graph size, and mandatory phases… - [ADR-0009: One compiled stylesheet for web and standalone diagrams](https://merlion.fractalbox.dev/reference/specs/adr/0009-stylesheet/): Mermaid source can name roles (class q store, q:::store), but the only way to colour a role today is a classDef literal, which stays fixed in every theme… - [ADR-0010: Diagram interaction: click to pin in the viewer, hover as a preview](https://merlion.fractalbox.dev/reference/specs/adr/0010-hover-interaction/): Readers of a dense diagram want to pick a box and see what it connects to, fold away the parts they are not reading, and read or copy text that is too small… - [Architecture](https://merlion.fractalbox.dev/reference/specs/architecture/): flowchart LR src[Mermaid source] --> parse[Parse] parse --> ir[Diagram model] ir --> measure[Measure text] measure --> layout[Layout] hint[(Previous… - [Benchmark](https://merlion.fractalbox.dev/reference/specs/benchmark/): Merlion claims to beat an existing renderer only where this benchmark shows it, and publishes every run. No single number decides "better": quality metrics… - [Integrations](https://merlion.fractalbox.dev/reference/specs/integrations/): merlion render [] [-o ] [--width ] [--direction auto] [--edge-style orthogonal|polyline|spline] [--font link|embed|system] [--hint… - [Diagram interaction](https://merlion.fractalbox.dev/reference/specs/interaction/): Clicking a node pins a highlight on it: the node, the edges that touch it and the nodes at their other ends stay at full opacity, everything else dims, and… - [Layout](https://merlion.fractalbox.dev/reference/specs/layout/): Graph-shaped diagrams (flowchart, state, class, ER) use one layered layout engine. The engine follows the Sugiyama framework with three additions: it fits… - [Licensing](https://merlion.fractalbox.dev/reference/specs/licensing/): This spec defines what Merlion takes from each project, dataset and paper it uses, and under which terms. Licences below were checked against each project's… - [Parser](https://merlion.fractalbox.dev/reference/specs/parser/): A hand-written recursive-descent parser per diagram type, with no parser-generator runtime. It accepts Mermaid syntax as mermaid 12.0.0 documents it and… - [References](https://merlion.fractalbox.dev/reference/specs/reference/): Projects the specs cite for context, comparison or future integration. Merlion copies, ports, vendors, runs and depends on none of them. Before any of them… - [Landscape of Mermaid renderers](https://merlion.fractalbox.dev/reference/specs/research/landscape/): Snapshot as of 2026-09-22. Figures marked "measured" come from npm view, npm ls --all and local renders on that date; the rest cite the sources at the end. - [Research relevant to Merlion (2025–2026)](https://merlion.fractalbox.dev/reference/specs/research/papers/): Snapshot as of 2026-09-22. Each row states the paper's finding and where the specs apply it. - [Roadmap](https://merlion.fractalbox.dev/reference/specs/roadmap/): Effort estimates are for one engineer working full time and are rough (±50%). - [Security](https://merlion.fractalbox.dev/reference/specs/security/): Merlion renders untrusted Mermaid source — LLM output, chat messages, pull-request content — into SVG that hosts inline into their pages without a… - [Supply chain](https://merlion.fractalbox.dev/reference/specs/supply-chain/): Merlion ships no third-party code to users. Every published artifact has zero runtime dependencies, and every release can be traced to a tagged commit. - [SVG output](https://merlion.fractalbox.dev/reference/specs/svg-output/): Every render returns one self-contained SVG string and a plain-text outline. Inlining the SVG in HTML needs no sanitiser, even when the Mermaid source is… - [Text measurement](https://merlion.fractalbox.dev/reference/specs/text-measurement/): Layout needs the size of every label before it can place anything. Merlion measures labels from committed font metric tables, never from a DOM, so output is… - [](https://merlion.fractalbox.dev/reference/specs/viewer/): A custom element that adds pan, zoom and fullscreen to any SVG, and click-driven interaction to Merlion diagrams (Interaction). It is optional: without… ## Optional - [Playground](https://merlion.fractalbox.dev/playground/): live editor over the WebAssembly build