Aryanutkarsh/SeeCode

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):
**Cursor, Codex, OpenCode and other Agent Skills hosts:**
More install options, and how to update.
Then ask:
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.
Architecture Components and connections
High-level 4–7-box overview for non-engineers
Deployment Where things run (hosts, regions)
Dependency graph What imports or depends on what
Architecture delta What a change adds, removes or alters
IT current state Current IT landscape with health status
UML class Classes and interfaces
ER / data model Entities and cardinality
Database schema Tables and FK columns
Flowchart Decisions and branches
Sequence Messages between actors over time
State machine States and transitions
Swimlane Who does which step
Process Short linear numbered steps
Data flow Data moving through stages
User journey User steps and emotion curve
Timeline Dated events
Gantt Work over time
Kanban Items by status
Story map Backbone and release slices
Loop / flywheel Reinforcing cycle or flywheel
Medallion Bronze/silver/gold layers
Platform integration Sources → integration → platform → serving
Access matrix Roles × data access
Tree Parent → children
Org chart People and teams
Nested Containment and scopes
Layer stack A stack
Venn Overlaps
Pyramid / funnel Ranking
Quadrant A 2×2
Fishbone Root causes
Wardley map Evolution × visibility
Exploded view Parts of one thing, isometric
Isometric plan A floor or site from above
Isometric object Any object, from a description
Bar Compare amounts
Line Change over time
Scatter Two measures
Waterfall Running total
Treemap Part of whole
Heatmap Intensity grid
Radar Profile on shared axes
Polar Cyclical values
Sankey Flow 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
Office chair Star base, gas lift, cushion
Laptop Keys, trackpad, display
Espresso machine Group head, wand, cups
Delivery van Wheels on their side
Phone teardown Tray housing, camera module, display
Mechanical keyboard Case, PCB, plate, switches, keycaps
AI agent stack Vault, tools, skills, harness, interface