Documentation with diagrams that think.
Mantou is an MDX documentation system whose <Flow> blocks render as stateful, interactive system maps. Style nodes and edges with a safe expression language — no arbitrary JavaScript.
Agent Dependency Graph
Nothing selected
Click a node or edge to inspect it. Connected nodes light up, the rest dim.
MDX-native
Drop a <Flow> block into any page. Author diagrams inline, right next to your prose.
Reactive styling
Node & edge appearance depends on metadata, state, relationships, and selection — recomputed live.
Safe expressions
A tiny sandboxed language: property access, comparisons, ternaries, any()/all(). No eval, no JS.
Interactive runtime
Selection, hover, focus, dependency expansion, and automatic relayout — built in.
Write a diagram like a code block
The same Mermaid-like source you'd sketch on a whiteboard, plus declarative style rules that react to state and reader interaction.
<Flow title="Agent Dependency Graph">
{`
node Planner { type: agent on: true status: running }
node Researcher { parent: Planner }
Planner -> Researcher
style node {
background: node.on ? chili : node.parent.on ? bamboo : cream
pulse: node.status == "running"
}
`}
</Flow>