Giotto

Giotto gives coding agents such as Claude Code and Codex, or any agent that speaks MCP, a canvas for drawing diagrams. You ask in chat, the agent draws, and the diagram appears live in your browser. It is hosted on GitHub by nicoloboschi.

What It Is

Giotto is an MCP-based diagram tool for coding agents. The agent already knows your repository, and Giotto supplies a live canvas at localhost:4321 where its diagrams appear. Diagrams are stored as JSON files in ~/.giotto, and agents can edit them but never delete them.

How the workflow works

Groups lay out their children, boxes fit their text, notes stay pinned and arrows route around boxes, so no coordinates are needed. You can move, resize and rename elements by hand, and the agent sees where you placed them. You can also draw areas on the canvas, write what should change in each, and copy them as one "Requested changes" note for the agent. Every change is saved as a numbered version that can be restored.

Styles, scenes and exports

Styles are separate from diagrams: the active style controls appearance, including dark mode and export headers and footers, and agents can make and change styles. Scenes animate a diagram with packets traveling along arrows, boxes filling in, narration, camera moves and a terminal or cursor, and they can be exported as an animated SVG or MP4. Pages let the agent write HTML for non-diagram images such as cards, posters and charts, exported as PNG, which needs Chrome. Diagrams export to SVG or PNG, and the agent gets the picture back with warnings about overlaps or text that does not fit.

Setup path

Install with the npx skills command, then ask your agent for a diagram. It requires git and Node.js 20+. Other agents can point their MCP config at the giotto CLI. For ChatGPT and Claude.ai, the MCP server can run over HTTP behind a tunnel so diagrams render inside the chat. A hosted mode serves MCP from any Node host.