SeeCode renders 45 diagram types from a short JSON spec

Aryanutkarsh published SeeCode, a plugin and agent skill that turns a short JSON specification into an animated, interactive diagram, and the repository has gained 486 stars since it was created on 2 October. The description it ships with is specific about the division of labour: "The model never draws SVG. Your agent writes 30 to 150 lines of JSON: what's there, how it connects, roughly where. SeeCode's renderers handle layout, edge routing, label placement, typography, accessibility and motion."

What it does

SeeCode supports 45 diagram types and 15 further variants. The readme lists them in nine groups: systems (architecture, high-level, deployment, dependency graph, UML class, ER data model, database schema), process (flowchart, sequence, state machine, swimlane, data flow, user journey), time (timeline, gantt, kanban, story map), structure (tree, org chart, nested, layer stack, loop, medallion), shape (venn, pyramid or funnel, quadrant, fishbone, wardley map), isometric 3D (isometric objects from a description, exploded views, isometric plans), and charts (bar, line, scatter, waterfall, treemap, heatmap, radar, polar, sankey). Chart data is read from a CSV or a JSON file, so no numbers pass through the model.

Where it runs

The project is MIT-licensed and ships with zero runtime dependencies. The readme supports two paths. The Claude Code one is a plugin, which Aryanutkarsh calls the recommended path because it keeps itself on the latest release. The second path is as an Agent Skill, which works with Cursor, Codex, OpenCode and any other host of the shared skill format. The first time the skill runs inside a project it asks once whether to apply global settings or create project-specific ones, so a team can keep a shared look while letting a single repository override it.

What a reader can do with it

The output is one HTML file a reader can hover, click and walk through, with export to SVG, PNG, GIF or MP4 for a presentation, a documentation site or a ticket. The animation is per diagram type: a systems diagram traces its flows, a sequence plays message by message, a chart grows. Every type can also be rendered as a static image for a document.

The isometric path is the most unusual piece. Each part is built from solids and beams placed in 3D and dressed with items on its top and sides (screens, chips, keys, cards, windows, shelves), so the same handful of spec lines draw a chair, a van, a phone, a burger or a street. The agent lists what the parts are and SeeCode builds the geometry.

For a team using a coding agent to draft architecture docs, sequence diagrams or data flows, this is a project that treats the agent as the author of a spec and the renderer as a separate program. That split is what makes the output reliable at 45 types, because the agent never has to get SVG right.

Source

SeeCode on GitHub, by Aryanutkarsh.