Seecode
Create animated, explorable editorial diagrams in 45 types (architecture, flowchart...
Install
npx skills add Aryanutkarsh/SeeCode --skill seecode -g -a claude-code -y- Repository
- Aryanutkarsh/SeeCode816
- Category
- Data and ML
- Updated
- 9d ago
- License
- MIT
- Context cost
- Lightabout 806 tokens
- Runs scripts
- Yes, review before use
What it does
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.
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).
