# Giotto

> A live diagram canvas that coding agents draw on via MCP, with versioned edits, animated scenes, and SVG, PNG and MP4 export.

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.

## Features
- Live browser canvas with diagram sidebar
- Automatic layout without coordinates
- Rich boxes with titles, lists, tags, chat bubbles and code
- Visual change requests via drawn areas
- Numbered version history with restore
- Separate styles with gallery and dark mode
- Animated scenes exported as SVG or MP4
- HTML pages exported as PNG
- SVG and PNG export with overlap and fit warnings
- MCP tools for creating, editing, exporting and restoring diagrams

## Integrations
Claude Code, Codex, ChatGPT, Claude.ai, MCP, ngrok, Manufact

## Platforms
CLI, WEB, API

## Pricing
Open Source

## Links
- Website: https://nicoloboschi.github.io/giotto/
- Documentation: https://nicoloboschi.github.io/giotto/
- Repository: https://github.com/nicoloboschi/giotto
- EveryDev.ai: https://www.everydev.ai/tools/giotto