SeeCode skill
A skill that draws 45 types of animated diagrams from a short JSON spec and saves them as HTML, SVG, PNG, GIF and MP4
- 736 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- The agent runs the skill's Node scripts and writes diagram files to the output folder
- For PNG, GIF and MP4 from the command line, the scripts launch your installed Chrome or Edge
- The scan command reads files in the chosen repository folder to place them on the diagram
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/seecodeDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The agent runs the skill's Node scripts and writes diagram files to the output folder
- For PNG, GIF and MP4 from the command line, the scripts launch your installed Chrome or Edge
- The scan command reads files in the chosen repository folder to place them on the diagram
This is third-party code. Review the repository files before installing.
What it does
SeeCode turns a request like "draw how checkout works" into a diagram you can explore. The agent writes a compact JSON spec of 30 to 150 lines, and the skill's scripts handle layout, edge routing, labels, motion and accessibility. The result is one HTML file: hover a node and its connections light up with a moving trace, a click zooms the camera and opens a panel with the node's role, and picking a start and an end plays a route hop by hop. There are 45 types: architecture, flowchart, sequence, state machine, ER and database schema, UML class, swimlane, timeline, Gantt, funnel, Venn, quadrant, Wardley map, bar, line, Sankey, heatmap, and three isometric types for objects, exploded views and floor plans. Chart numbers come from a CSV or JSON file, so the data never passes through the model. Existing diagrams get redrawn in the skill's style. It reads Mermaid, Graphviz, PlantUML, D2, draw.io, Excalidraw, Structurizr, BPMN, SQL, Prisma, DBML, OpenAPI and CSV tables. Asked to "diagram this repo", it scans the folder first and links nodes to the files they came from. Colours and fonts can be learned from your website or the project's CSS tokens. A finished diagram is exported as SVG for documents and slides, or as PNG, JPEG, GIF or MP4 for chats and talks. The skill picks the format from where the diagram will live.
Who it is for. For developers, architects and technical writers who need diagrams for documentation, slides and posts, and for anyone who wants old Mermaid or draw.io schemes redrawn in one consistent style.
Good fit when
- You want to show how a request travels through the browser, API, Postgres, Stripe and Kafka, with every node hoverable
- A document holds several Mermaid blocks that should be redrawn in one style, one file per diagram plus a shared index.html page
- A presentation needs a GIF or MP4 where the scheme builds up step by step
- The agent has to map a repository: modules, imports and infrastructure with links to files and lines
- Diagram colours must match your brand: the skill reads the palette and fonts from a website page or the project's CSS
Not a fit when
- You need a plain list: bullet points are enough
- You are comparing attributes before and after: a table reads faster than a diagram
- The whole idea fits one labelled box: a sentence will do
- The diagram would hold dozens of nodes: the skill advises at most 9 nodes and 12 edges per diagram and suggests splitting a large one
- The environment cannot run Node.js 20 or newer: the skill's scripts need it
Example request
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. Highlight the payment path and make it darkLimitations
Node.js 20 or newer is required. Scripts produce SVG with Node alone, while PNG, JPEG, GIF and MP4 from the command line use the Chrome or Edge you already have. Inside the page, the Export menu saves every format without extra programs.
Finished diagrams load fonts from Google Fonts, and the in-browser GIF and MP4 encoders come from jsDelivr. To drop Google Fonts, run `config set fonts system`. The skill has no server, accounts or telemetry beyond that.
A small SeeCode mark sits in the bottom-right corner of every diagram; ask the agent to remove it.
How to disable. In Claude Code, run `/plugin` and disable or remove the seecode plugin. If you installed with `npx skills add`, delete the seecode skill folder from the agent's skills directory; for a manual install, remove the `~/.claude/skills/seecode` symlink. Created diagrams stay in the output folder as ordinary files.
FAQ
How do I install SeeCode in Claude Code?
Run `/plugin marketplace add Aryanutkarsh/seecode`, then `/plugin install seecode@seecode`. The plugin adds the commands `/seecode:export`, `/seecode:import`, `/seecode:doctor` and `/seecode:settings`. Auto-update can be switched on in the Marketplaces section of `/plugin`.
Which file formats can SeeCode redraw?
Mermaid (`.mmd`, `.mermaid` and fenced blocks in Markdown), Graphviz, PlantUML, D2, draw.io, Excalidraw, Structurizr, BPMN, SQL, Prisma, DBML, OpenAPI and CSV or JSON tables. A file with several diagrams comes out as a folder with one file per diagram plus an index.html for browsing. The source's colours, fonts and coordinates are not carried over.
How do I install SeeCode in Cursor or Codex?
Any Agent Skills host works with `npx skills add Aryanutkarsh/seecode -g`. Codex also has a plugin route: `codex plugin marketplace add Aryanutkarsh/seecode`, then `codex plugin add seecode@seecode`. GitHub Copilot uses `copilot plugin marketplace add Aryanutkarsh/seecode` and `copilot plugin install seecode@seecode`.
How do I load SeeCode into Claude.ai or Claude Desktop?
Download seecode.zip from the repository's latest release and upload it under Settings, Capabilities, Skills. Image and video files there come from the diagram's own Export menu.
How many tokens does one SeeCode diagram cost?
About 1.4 thousand agent tokens per diagram, against roughly 15 thousand when the model writes the SVG itself. The saving comes from the agent writing 30 to 150 lines of JSON while scripts handle layout and rendering.
Discussion
No questions or reviews yet.
Related
SkillsA skill that draws editorial diagrams as standalone HTML and SVG files: architecture, flowcharts, ER, funnels and about forty more types
A skill that draws a system architecture diagram as one HTML file with SVG plus copy, PNG and PDF export
A skill that typesets resumes, one-pagers, letters, reports and slides from templates into PDF, PNG and PPTX and checks the result before delivery
A skill that draws validated architecture, workflow, sequence and data-flow diagrams as one interactive HTML file
Draw.io Skill
Draw.io Skill for Claude & Codex
Skills for draw.io diagrams: architecture, networks, flowcharts, import from Terraform and code, offline generation from YAML and PNG and SVG export
A skill for editable draw.io diagrams from text, code, Terraform, Kubernetes, SQL and OpenAPI, with export and self-checks
Comparison with similar tools
Entries that share the main search query, and how they differ.
| Entry | Official | Authentication | Repository stars | Main difference |
|---|---|---|---|---|
| SeeCode (this entry) | no | 736 | ||
| Diagram Design | no | 62,871 | draws editorial diagrams in HTML and SVG without route walkthroughs or GIF and MP4 export | |
| drawio-skill | no | 10,445 | builds editable draw.io diagrams that you then adjust by hand in the editor | |
| MCP Mermaid | no | not required | 646 | an MCP server that returns a Mermaid diagram on request with syntax checking |
README in short
The README opens with a promise of diagrams that move, explain and export themselves. It goes on to install steps for Claude Code, Cursor, Codex, Copilot and Claude.ai, a gallery of 45 types with examples, and sections on isometry, everyday subjects such as a leave plan, interactivity, themes, importing other formats and exporting. It also lists cases where a diagram is not needed, update steps for each install route, and a privacy section: the skill has no server, accounts or telemetry.
README badge
Original SKILL.md
--- name: seecode description: "Create animated, explorable editorial diagrams in 45 types (architecture, flowchart, sequence, state, ER, DB schema, UML class, swimlane, timeline, gantt, journey, tree, org chart, nested, venn, quadrant, fishbone, wardley, bar, line, scatter, sankey, treemap, heatmap, 3D isometric objects, floor plans and exploded views) as standalone HTML from a short JSON spec. Use when the user asks to draw, diagram, chart or visualize a system, codebase, flow, process, API call sequence, hierarchy, data or a physical object (a chair); to convert Mermaid, Graphviz/DOT, PlantUML, D2, draw.io, Excalidraw, SQL or CSV into a clean diagram; or to export a diagram as PNG, JPEG, SVG, GIF or MP4. Also for everyday plans: trips, moves, job hunts, approvals, budgets, where money goes." license: MIT metadata: version: "0.6.2" --- # SeeCode You write a **compact JSON spec**; scripts do layout, styling, motion, checks, export. Never write or read SVG/HTML. `SC` = `node <this skill's folder>/scripts/seecode.mjs`; each command prints one JSON line. ## 0. Settings + brand (once per project) `SC config status`. On `"state":"first-run"` ask its `ask` once, then `SC config init --use global|project`. **Brand:** no `settings.profile` but a brand is known (URL, theme tokens, colours)? Run `SC brand <url|dir>` or `SC brand --colors "#hex,…"`, show the palette, rerun with `--save <name> --use`. No brand: keep the defaults. See `references/onboarding.md`. ## 1. Where will it live? Then pick the type Settle destination, look, size, audience; everyday subjects too (`references/delivery.md`): infer; ask one question only if it matters. - **Explain / "artifact" / share:** the standalone **HTML** (motion, trace, focus); publish an artifact as-is. - **PDF / Word / docs / README / slides:** **SVG** first (vector), PNG fallback: `SC export x.html --for pdf|docs|readme|slides|gdocs|social|video`. Draw only if a picture beats a table or prose. | Showing | Type | |---|---| | Components + connections | `architecture` | | Decisions / branches | `flowchart` | | Messages over time | `sequence` | | States + transitions | `state` | | Tables / entities | `db-schema`, `er` | | Hierarchy | `tree` | | Amounts | `bar` | | A physical object | `isometric` | Others: `references/types/INDEX.md` (all 45). Read **only** `references/types/<type>.md` (+ `references/spec.md`). ## 2. Write the spec Save it to `<settings.outputDir>/<slug>.json`. - **Placement.** `row`/`col` for graph types; you decide layout, the renderer geometry. Related nodes adjacent. - **Labels.** Nodes 1–3 words, `sub` = tech, edges 1–2. - **Focus.** 1–2 `focal` nodes and `"primary"` edges for the main path; nothing else accented. - **Budget.** ≤ 9 nodes / 12 edges, else split. - **Motion.** `auto` (default) or `none`, `reveal`, `trace`, `step`, `loop`. - **Watermark.** Keep the logo; if asked: `"watermark":false` (always: `SC config set watermark false`). ## 3. Render, fix, repeat Run `SC render <spec.json>`. - `ok:true`: done.