Introduction

Mantou is an MDX documentation system with one superpower: diagrams that think. Drop a <Flow> block into any page and it renders as a stateful, interactive system map — not a static image.

Authors write diagrams in a small Mermaid-like syntax. Node and edge appearance is driven by a safe expression language that can read metadata, runtime state, graph relationships, and the reader's own selection — all recomputed live, with no arbitrary JavaScript ever executed.

Click a node. Connected nodes light up, the rest dim. Toggle a node's power in the panel and watch children react via node.parent.on.

Why Mantou?#

• Diagrams as data. Every <Flow> parses into a graph AST, a relationship index, runtime state, and reactive style rules.
• Reactive styling. Appearance depends on node.on, node.parent.selected, node.children.any(on), and more.
• Safe by construction. A tiny expression language — no eval, no globals, no filesystem beyond a scoped package.json read.
• Interactive. Selection, hover, focus, dependency expansion, and live relayout, built in.