Mantou language

Mantou is a layered language: GFM prose in MDX, document components and fences, a graph DSL for diagrams, and a sandboxed expression language for reactive styles.

File formats#

Place pages under src/content/docs/ or src/app/ with Next.js pageExtensions including mdx and mantou.

Layer 1 — Prose (GFM)#

Enabled via remark-gfm:

• Tables, strikethrough, task lists, autolinks
• Standard headings, lists, blockquotes, thematic breaks

Headings and paragraphs use Mantou typography through mdx-components.tsx.

Layer 2 — Document nodes (MDX)#

Register custom blocks in the document node engine (src/lib/mantou/document/).

Import from the package:

import { Flow, Callout } from "mantou/react";

Layer 3 — mantou fences

Fenced blocks with language mantou render as <Flow /> automatically:

```mantou title="Agent Graph" layout=dagre height=420
node Planner { type: agent  on: true }
Planner -> Researcher
```

Fence meta: title="...", layout=dagre|tree, height=NNN.

Layer 4 — Graph DSL#

Line-oriented source inside <Flow> or mantou fences:

• node Id { key: value }
• A -> B / edge A -> B { ... }
• style node|edge { prop: expression }
• on expand Id { add dependencies from "package.json" depth N }

See Graph syntax.

Layer 5 — Expression language#

Style rule values are compiled and evaluated in a sandbox. See Expression language and Safety model.

Package exports#

Playground preview#

The docs playground compiles MDX on the server (POST /api/mdx/preview) with the same remark plugins and an allowlisted component scope — no arbitrary imports in preview v1.