Getting started

Quick start

A <Flow> takes a diagram source string as its child or source prop. Author it inside MDX exactly like a fenced code block.

1. Import the component#

mdx

import { Flow } from "mantou/react";

# Architecture

Here is our agent topology:

```mantou title="Agent Dependency Graph"
node Planner { type: agent  on: true  status: running }
node Researcher { type: subagent  parent: Planner }
Planner -> Researcher

style node {
background: node.on ? chili : node.parent.on ? bamboo : cream
}
```

2. Anatomy of a diagram#

A source has three kinds of statements: node declarations, edges, and style blocks.

mantou

node Planner {
type: agent
on: true
status: running
}

node Researcher {
type: subagent
parent: Planner
on: false
}

Planner -> Researcher

style node {
background: node.on ? chili : node.parent.on ? bamboo : cream
border: node.selected ? chili : border
pulse: node.status == "running"
}

That renders to a live diagram:

🥟

Nothing selected

Click a node or edge to inspect it. Connected nodes light up, the rest dim.

✺

Edit and watch

Head to the Playground to edit diagram source and see styles recompute on every keystroke.