← BACK TO LEVEL SELECT

🤖 Agentic AI · ★★★ FEATURED

Graphing — AI-Drivable Diagram Editor + MCP

A React Flow diagram editor that an AI agent can drive live over MCP — generate, patch, and auto-layout architecture/flow/ERD diagrams, with a CRDT substrate for human↔agent collaboration.

Overview

A diagramming tool with two front doors: a human opens a polished React Flow canvas, and an LLM agent opens a Model Context Protocol server that drives the same document. The agent can author a diagram from a prompt, then keep editing it incrementally while a person nudges nodes around — neither one stomps the other. It’s deployed and live.

Architecture

flowchart LR
  A["LLM Agent<br/>(Claude / Cursor)"] -->|"MCP tools"| B["Graphing<br/>MCP Server"]
  B --> C{"Tool?"}
  C -->|"search_icons"| D["Hybrid Search<br/>BM25 + embeddings + RRF"]
  C -->|"apply_diagram_ops"| E["Diagram Doc<br/>(Yjs CRDT)"]
  E -->|"origin: agent"| F["React Flow Editor<br/>(Zustand + zundo)"]
  F -->|"origin: user"| E
  F --> G["Export<br/>PNG / SVG / JSON"]
  E -.->|"resources/updated"| A

Engineering decisions

  • MCP as a first-class editing surface — 15 typed tools (create_diagram, an apply_diagram_ops patch tool, node/edge CRUD, auto-layout, export). Validation failures come back as structured tool errors so the model can self-correct instead of producing broken graphs.
  • CRDT so humans and agents don’t fight — a Yjs document with origin-tagged transactions and a scoped UndoManager: your Ctrl+Z reverts only your edits while the agent’s live changes fan out untouched. Verified with two-way state-merge tests.
  • Retrieval, not keyword match, for icons — hybrid search over 1,487 cloud/infra icons fusing BM25 lexical scoring with on-device dense embeddings via Reciprocal Rank Fusion.

Highlights

  • Live + deployed — runs on Vercel; agent and human edit one shared canvas.
  • 15-tool MCP server with a subscribable diagram:// resource that emits resources/updated to close the human→agent loop.
  • Editor depth — drag-coalesced undo/redo, Cmd+K command palette, smart guides, align/distribute, and PNG/SVG/JSON export with embedded-icon round-trip.
  • Built under test — every phase build-gated (tsc + Vite), 80 app tests + 31 MCP-server tests, and a v2 template JSON format ~70% smaller than the naive serialization.