SeeCode

Diagrams that move, explain and export themselves.

Ask your agent for a diagram. SeeCode turns a short spec into an editorial-quality, animated, explorable diagram: one HTML file you can hover, click and walk through, or export as SVG, PNG, GIF or MP4 for wherever it needs to go.

Install  ·  Diagram types  ·  Features  ·  Themes  ·  Import  ·  Export  ·  CLI

Exported straight from the diagram. ▶ See the viewer in action: hover trace, focus panel, route journey.

Install, then describe what you want to see

Claude Code (recommended: the plugin keeps you on the latest release):

/plugin marketplace add Aryanutkarsh/seecode
/plugin install seecode@seecode

Cursor, Codex, OpenCode and other Agent Skills hosts:

npx skills add Aryanutkarsh/seecode -g

More install options, and how to update.

Then ask:

Use SeeCode to show how checkout works: the browser calls the API,
the API writes to Postgres, charges Stripe and publishes an event to Kafka.

Keep going in plain language: "highlight the payment path", "make it dark", "export it for my slides". The first time you use it in a project, SeeCode asks once whether to use your global settings or create project-specific ones.

45 diagram types

Every type animates its own way (systems trace their flows, sequences play message by message, charts grow), and every type can also be fully static. Click any diagram for the full-size image. Charts take their numbers from a CSV or JSON file, so the data never has to pass through the model.

ArchitectureComponents and connections High-level4–7-box overview for non-engineers DeploymentWhere things run (hosts, regions)

Dependency graphWhat imports or depends on what Architecture deltaWhat a change adds, removes or alters IT current stateCurrent IT landscape with health status

UML classClasses and interfaces ER / data modelEntities and cardinality Database schemaTables and FK columns

FlowchartDecisions and branches SequenceMessages between actors over time State machineStates and transitions

SwimlaneWho does which step ProcessShort linear numbered steps Data flowData moving through stages

User journeyUser steps and emotion curve TimelineDated events GanttWork over time

KanbanItems by status Story mapBackbone and release slices Loop / flywheelReinforcing cycle or flywheel

MedallionBronze/silver/gold layers Platform integrationSources → integration → platform → serving Access matrixRoles × data access

TreeParent → children Org chartPeople and teams NestedContainment and scopes

Layer stackA stack VennOverlaps Pyramid / funnelRanking

QuadrantA 2×2 FishboneRoot causes Wardley mapEvolution × visibility

Exploded viewParts of one thing, isometric Isometric planA floor or site from above Isometric objectAny object, from a description

BarCompare amounts LineChange over time ScatterTwo measures

WaterfallRunning total TreemapPart of whole HeatmapIntensity grid

RadarProfile on shared axes PolarCyclical values SankeyFlow volumes

Plus 15 variants: dumbbell, marimekko, slopegraph, bump, streamgraph, ridgeline, bubble, beeswarm, funnel, consultant quadrant, terminal loop, OAuth sequence, lifecycle state, block decomposition and vertical high-level. Specs for every example are in examples/specs.

Isometric: compose anything

Three types draw in isometric 3D: isometric objects (anything, from a plain description: ask for "an office chair" and the agent lists its parts and SeeCode draws it), exploded views (the parts of one thing, lifted apart and labelled, assembling on load) and isometric plans (a floor or a site, built up phase by phase). There is no fixed library of drawings: every part is a solid or a beam you place in 3D and dress with items on its top and sides (screens, chips, keys, cards, windows, shelves), make hollow, round, ribbed, lay on its side, or cap with a dome or a roof. So the same few lines of spec draw a chair, a van, a phone, a burger or a street. How it works

Use SeeCode to draw an office chair in isometric, and label the parts.

Office chairStar base, gas lift, cushion LaptopKeys, trackpad, display Espresso machineGroup head, wand, cups Delivery vanWheels on their side

Phone teardownTray housing, camera module, display Mechanical keyboardCase, PCB, plate, switches, keycaps AI agent stackVault, tools, skills, harness, interface

Anatomy of a burgerDomed bun with sesame, ribbed layers One rack, unpackedPorts, drive bays and vents on the walls Office, floor by floorDesks, monitors, solar panels

North campusBuildings, roads and trees, by phase Corner coffee shopBar, kitchen, tables, queue posts A small streetGable, hip and shed roofs, a dome

Also in the gallery: a fulfilment warehouse with storage racks. Specs are in examples/specs/isometric.

Not just code

The same types draw everyday things: a leave plan, where your pay goes, a back-and-forth with a landlord, where a job application stands. Labels can be in any language (set lang, and Chinese, Japanese and Korean labels wrap between characters), and the legend can use your own words.

A year of leaveTimeline Where the pay goesSankey

租房的来回沟通 (re