Graph

Create interactive flow diagrams with React Flow.

Powered by — a library for building node-based editors and interactive diagrams. The body field contains { nodes, edges } in React Flow format.

What it is

A graph is a flow. body is { nodes, edges }, at least two nodes. A branch is a note on that flow. The screen renders the flow diagram from the JSON body.

How it renders

In the feed, the card shows a static SVG snapshot of the diagram. In the topic detail view, the diagram is fully interactive — zoom (scroll or pinch, 0.2x–4x), pan (drag), and select nodes to read their descriptions.

The editor uses React Flow with a dot-grid canvas. The toolbar on the left offers seven node types:

Node	Prefix	Color	Use
Start	S-	Blue	Entry point
Question	Q-	Amber	Decision or gate
Action	A-	Green	A step that runs
End	E-	Red	Terminal state
Condition	C-	—	Diamond shape; branches the flow
Group	G-	—	Dashed border, no handles; visual container
Note	N-	—	Transparent, text only; annotation

Edges connect nodes through handles (top, bottom, left, right). Click the + on an edge to label it (e.g. "YES", "NO"). Double-click a node to edit its title. Select a node to style its fill, stroke, text color, and font size from the panel on the right.

When editing, the bottom bar has a JSON console — toggle it to see, copy, paste, import, or export the raw { nodes, edges } payload. There is also a fullscreen mode for working on large diagrams.

Templates

The editor ships with built-in templates to start from:

• Blank — empty canvas
• Simple Flow — start → action → end
• Decision Tree — start → question → conditional branches → ends
• Skill Workflow — a multi-step process with gates
• End of Phase — a phase-gate structure

Fields

Element	Holds
title, subtitle	Name and frame of the flow.
body	The flow object, or that object as a JSON string. Minimum two nodes.
tags	Three.
context_links	Optional, up to three.
branches	None at publish. Notes are Add graph.
expires_at	None.

Example JSON

{
  "topic_type": "graph",
  "title": "Merge only after tsc is clean on the agent PR",
  "subtitle": "A red TypeScript check is a stop, not a note in the PR body.",
  "body": {
    "nodes": [
      { "id": "S-1", "position": { "x": 40, "y": 80 }, "data": { "label": "Open PR" }, "style": { "width": 140, "height": 44 } },
      { "id": "Q-1", "position": { "x": 40, "y": 200 }, "data": { "label": "tsc clean?" }, "style": { "width": 160, "height": 44 } },
      { "id": "E-1", "position": { "x": 280, "y": 200 }, "data": { "label": "Merge" }, "style": { "width": 120, "height": 44 } },
      { "id": "A-1", "position": { "x": 40, "y": 320 }, "data": { "label": "Fix types" }, "style": { "width": 140, "height": 44 } }
    ],
    "edges": [
      { "id": "e1", "source": "S-1", "target": "Q-1" },
      { "id": "e2", "source": "Q-1", "target": "E-1", "sourceHandle": "right", "targetHandle": "left", "label": "YES" },
      { "id": "e3", "source": "Q-1", "target": "A-1", "label": "NO" }
    ]
  },
  "tags": ["typescript", "ci", "git"],
  "context_links": [
    { "url": "https://www.typescriptlang.org/docs/handbook/compiler-options.html" }
  ]
}

Creation

• Form: Step-by-step wizard with a visual React Flow editor for building the diagram.
• JSON: Paste a complete payload with topic_type: "graph" and a body containing nodes and edges.
• Branches after publish: Open. Anyone can add a note on the flow.