Diagram is the template for an editable map of things and the relationships between them: a service architecture, a database schema, a sequence of calls, a state machine, a cloud network. Describe a system, or link your code and ask about it, and you get a diagram laid out automatically.
It shipped in 1.15.0. Plain numeric charts belong in Infographic, and screen layouts in UI mockups & wireframes.
Options on Home
Pick Diagram and three chips appear beside the composer:
- Type — Auto (the agent picks a structure from your brief and tells you which) or one of 28 types: Flowchart, System architecture, C4 model, Sequence, ER / database schema, State machine, Class / type diagram, Dependency graph, Data flow / pipeline, Deployment / infrastructure, API map, Agent / workflow graph, User flow, Sitemap / navigation tree, Swimlane process, User journey map, Mind map, Org chart / hierarchy, Timeline / roadmap, Gantt, Cloud architecture, Network topology, Threat model, BPMN, Event storming board, Git graph / branching, Quadrant / 2×2 and Sankey / funnel.
- Level — Overview or Detailed.
- Theme — Paper (the default), Ink for dark docs, Blueprint, Sketch or Mono.
What the agent writes
The agent never draws pixels. It writes a scene,
diagrams/<name>.diagram.json, made of nodes, edges and groups, and a local
layout engine places and routes everything. It aims for about 25 nodes and
folds the rest into named groups; a system too big for one readable picture is
split into linked diagrams. SVG, PNG, Mermaid and a Markdown embed are
regenerated next to the scene after every edit.
Grounded in your code
Link a repo with Link code and every node and edge carries a source reference: a relative path, an optional symbol and a line range. Anything the agent could not tie to a line is listed as an assumption and marked on the diagram. A reference that does not resolve fails the check, so a service cannot be quietly invented.
Local extractors read TypeScript and JavaScript, Prisma and SQL schemas, routes, Docker Compose services and infrastructure configs. Indexing runs on your machine and nothing leaves it. Git-history extraction is not available yet.
Drift
When the scene is rendered against the repo, a hash of each cited file is saved. If the code changes later, a banner reports how many source changes or unresolved references there are since the saved diagram. Update from code asks the agent to patch only that drift, keeping your pins, renamed labels and manual groups. A hash proves a file changed, not that the diagram is complete.
Editing in the preview
Pan, zoom and Search labels. Rename a node in place, or drag it to pin it; pins survive re-layout, and Unpin all clears them. Collapse groups, use Focus neighbours to dim everything unconnected, and Start walkthrough to step through a flow or sequence. The resizable inspector shows each node's details and source, and opening a file from it scrolls the code viewer to the cited line. Show diagram checks lists crowding and structure findings: hard findings block export, soft ones stay visible.
ER diagrams and the database workspace
Choose ER / database schema to get a live DBML editor beside the canvas. Import
SQL (PostgreSQL or MySQL), Prisma, Rails schema.rb or Django models, save a
selection as a named view, switch between All fields, Keys only and Table
names, group tables, add sticky notes, and export DBML or SQL from the full
schema.
Import and export
Import diagram accepts Mermaid, D2, PlantUML, DBML, SQL, Prisma, OpenAPI, an outline, or a whiteboard image for the agent to redraw. Imports keep the original text and mark every element as an assumption. Syntax outside the supported subset is refused with its line number.
Exports: SVG, PNG (1x to 3x, optionally transparent), PDF, Mermaid, D2, PlantUML, draw.io, Excalidraw, DBML, SQL, Markdown embed and ZIP. The draw.io and Excalidraw files have not yet been opened in those editors, specialist types such as BPMN and Sankey export as simplified shapes, and the whiteboard redraw has not been verified with a real agent.