Aryanutkarsh/SeeCode

Aryanutkarsh 资料

最近记录的来源活动: 2026年10月9日 14:08

SkillsMP 收录数据更新: 2026年10月17日 00:09

已收集 skills: 1

GitHub 星标: 484
GitHub Forks: 23

仓库 README

仓库 README 来源：README.md

查看 README 源文件

展开完整 README

<h1 align="center"> <picture> <source media="(prefers-color-scheme: dark)" srcset="branding/banner-transparent-dark.png"> <img src="branding/banner-transparent-light.png" alt="SeeCode" width="440"> </picture> </h1> <h3 align="center">Diagrams that move, explain and export themselves.</h3> 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. <a href="#install">Install</a>  ·  <a href="#42-diagram-types">Diagram types</a>  ·  <a href="#see-it-in-action">Features</a>  ·  <a href="#themes-and-your-brand">Themes</a>  ·  <a href="#bring-what-you-already-have">Import</a>  ·  <a href="#export-for-wherever-it-goes">Export</a>  ·  <a href="docs/cli.md">CLI</a> <a href="https://github.com/Aryanutkarsh/seecode/stargazers"><img src="https://img.shields.io/github/stars/Aryanutkarsh/seecode?style=flat-square&logo=github&label=Star&color=D4A574" alt="Star SeeCode on GitHub" /></a> <a href="https://github.com/Aryanutkarsh/seecode/actions/workflows/ci.yml"><img src="https://img.shields.io/github/actions/workflow/status/Aryanutkarsh/seecode/ci.yml?branch=main&style=flat-square&label=CI" alt="CI" /></a> <a href="https://github.com/Aryanutkarsh/seecode/blob/main/package.json"><img src="https://img.shields.io/github/package-json/v/Aryanutkarsh/seecode?style=flat-square&color=2f54eb&label=version" alt="Version" /></a> <a href="skills/seecode/SKILL.md"><img src="https://img.shields.io/badge/Agent-Skill-7C3AED?style=flat-square" alt="Agent Skill" /></a> <img src="https://img.shields.io/badge/dependencies-0-22c55e?style=flat-square" alt="Zero dependencies" /> <a href="LICENSE"><img src="https://img.shields.io/badge/license-MIT-22c55e?style=flat-square" alt="MIT License" /></a> <img src="examples/media/export-sample.gif" alt="An architecture diagram building itself step by step, with data flowing along its connections" width="900" /> Exported straight from the diagram. ▶ <a href="#see-it-in-action">See the viewer in action</a>: 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): ```text /plugin marketplace add Aryanutkarsh/seecode /plugin install seecode@seecode ``` **Cursor, Codex, OpenCode and other Agent Skills hosts:** ```bash npx skills add Aryanutkarsh/seecode -g ``` [More install options, and how to update](#install). Then ask: ```text 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. <table> <tr> <td align="center" width="33%"><a href="docs/screenshots/architecture.png"><img src="docs/screenshots/gifs/architecture.gif" alt="Architecture, animated"></a> Architecture Components and connections</td> <td align="center" width="33%"><a href="docs/screenshots/high-level.png"><img src="docs/screenshots/gifs/high-level.gif" alt="High-level, animated"></a> High-level 4–7-box overview for non-engineers</td> <td align="center" width="33%"><a href="docs/screenshots/deployment.png"><img src="docs/screenshots/gifs/deployment.gif" alt="Deployment, animated"></a> Deployment Where things run (hosts, regions)</td> </tr> <tr> <td align="center" width="33%"><a href="docs/screenshots/dependency.png"><img src="docs/screenshots/gifs/dependency.gif" alt="Dependency graph, animated"></a> Dependency graph What imports or depends on what</td> <td align="center" width="33%"><a href="docs/screenshots/architecture-delta.png"><img src="docs/screenshots/gifs/architecture-delta.gif" alt="Architecture delta, animated"></a> Architecture delta What a change adds, removes or alters</td> <td align="center" width="33%"><a href="docs/screenshots/it-state.png"><img src="docs/screenshots/gifs/it-state.gif" alt="IT current state, animated"></a> IT current state Current IT landscape with health status</td> </tr> <tr> <td align="center" width="33%"><a href="docs/screenshots/uml-class.png"><img src="docs/screenshots/gifs/uml-class.gif" alt="UML class, animated"></a> UML class Classes and interfaces</td> <td align="center" width="33%"><a href="docs/screenshots/er.png"><img src="docs/screenshots/gifs/er.gif" alt="ER / data model, animated"></a> ER / data model Entities and cardinality</td> <td align="center" width="33%"><a href="docs/screenshots/db-schema.png"><img src="docs/screenshots/gifs/db-schema.gif" alt="Database schema, animated"></a> Database schema Tables and FK columns</td> </tr> <tr> <td align="center" width="33%"><a href="docs/screenshots/flowchart.png"><img src="docs/screenshots/gifs/flowchart.gif" alt="Flowchart, animated"></a> Flowchart Decisions and branches</td> <td align="center" width="33%"><a href="docs/screenshots/sequence.png"><img src="docs/screenshots/gifs/sequence.gif" alt="Sequence, animated"></a> Sequence Messages between actors over time</td> <td align="center" width="33%"><a href="docs/screenshots/state.png"><img src="docs/screenshots/gifs/state.gif" alt="State machine, animated"></a> State machine States and transitions</td> </tr> <tr> <td align="center" width="33%"><a href="docs/screenshots/swimlane.png"><img src="docs/screenshots/gifs/swimlane.gif" alt="Swimlane, animated"></a> Swimlane Who does which step</td> <td align="center" width="33%"><a href="docs/screenshots/process.png"><img src="docs/screenshots/gifs/process.gif" alt="Process, animated"></a> Process Short linear numbered steps</td> <td align="center" width="33%"><a href="docs/screenshots/data-flow.png"><img src="docs/screenshots/gifs/data-flow.gif" alt="Data flow, animated"></a> Data flow Data moving through stages</td> </tr> <tr> <td align="center" width="33%"><a href="docs/screenshots/journey.png"><img src="docs/screenshots/gifs/journey.gif" alt="User journey, animated"></a> User journey User steps and emotion curve</td> <td align="center" width="33%"><a href="docs/screenshots/timeline.png"><img src="docs/screenshots/gifs/timeline.gif" alt="Timeline, animated"></a> Timeline Dated events</td> <td align="center" width="33%"><a href="docs/screenshots/gantt.png"><img src="docs/screenshots/gifs/gantt.gif" alt="Gantt, animated"></a> Gantt Work over time</td> </tr> <tr> <td align="center" width="33%"><a href="docs/screenshots/kanban.png"><img src="docs/screenshots/gifs/kanban.gif" alt="Kanban, animated"></a> Kanban Items by status</td> <td align="center" width="33%"><a href="docs/screenshots/story-map.png"><img src="docs/screenshots/gifs/story-map.gif" alt="Story map, animated"></a> Story map Backbone and release slices</td> <td align="center" width="33%"><a href="docs/screenshots/loop.png"><img src="docs/screenshots/gifs/loop.gif" alt="Loop / flywheel, animated"></a> Loop / flywheel Reinforcing cycle or flywheel</td> </tr> <tr> <td align="center" width="33%"><a href="docs/screenshots/medallion.png"><img src="docs/screenshots/gifs/medallion.gif" alt="Medallion, animated"></a> Medallion Bronze/silver/gold layers</td> <td align="center" width="33%"><a href="docs/screenshots/dp-integration.png"><img src="docs/screenshots/gifs/dp-integration.gif" alt="Platform integration, animated"></a> Platform integration Sources → integration → platform → serving</td> <td align="center" width="33%"><a href="docs/screenshots/dp-security-matrix.png"><img src="docs/screenshots/gifs/dp-security-matrix.gif" alt="Access matrix, animated"></a> Access matrix Roles × data access</td> </tr> <tr> <td align="center" width="33%"><a href="docs/screenshots/tree.png"><img src="docs/screenshots/gifs/tree.gif" alt="Tree, animated"></a> Tree Parent → children</td> <td align="center" width="33%"><a href="docs/screenshots/org-chart.png"><img src="docs/screenshots/gifs/org-chart.gif" alt="Org chart, animated"></a> Org chart People and teams</td> <td align="center" width="33%"><a href="docs/screenshots/nested.png"><img src="docs/screenshots/gifs/nested.gif" alt="Nested, animated"></a> Nested Containment and scopes</td> </tr> <tr> <td align="center" width="33%"><a href="docs/screenshots/layers.png"><img src="docs/screenshots/gifs/layers.gif" alt="Layer stack, animated"></a> Layer stack A stack</td> <td align="center" width="33%"><a href="docs/screenshots/venn.png"><img src="docs/screenshots/gifs/venn.gif" alt="Venn, animated"></a> Venn Overlaps</td> <td align="center" width="33%"><a href="docs/screenshots/pyramid.png"><img src="docs/screenshots/gifs/pyramid.gif" alt="Pyramid / funnel, animated"></a> Pyramid / funnel Ranking</td> </tr> <tr> <td align="center" width="33%"><a href="docs/screenshots/quadrant.png"><img src="docs/screenshots/gifs/quadrant.gif" alt="Quadrant, animated"></a> Quadrant A 2×2</td> <td align="center" width="33%"><a href="docs/screenshots/fishbone.png"><img src="docs/screenshots/gifs/fishbone.gif" alt="Fishbone, animated"></a> Fishbone Root causes</td> <td align="center" width="33%"><a href="docs/screenshots/wardley.png"><img src="docs/screenshots/gifs/wardley.gif" alt="Wardley map, animated"></a> Wardley map Evolution × visibility</td> </tr> <tr> <td align="center" width="33%"><a href="docs/screenshots/exploded.png"><img src="docs/screenshots/gifs/exploded.gif" alt="Exploded view, animated"></a> Exploded view Parts of one thing, isometric</td> <td align="center" width="33%"><a href="docs/screenshots/isometric-plan.png"><img src="docs/screenshots/gifs/isometric-plan.gif" alt="Isometric plan, animated"></a> Isometric plan A floor or site from above</td> <td align="center" width="33%"><a href="docs/screenshots/isometric.png"><img src="docs/screenshots/gifs/isometric.gif" alt="Isometric object, animated"></a> Isometric object Any object, from a description</td> </tr> <tr> <td align="center" width="33%"><a href="docs/screenshots/bar.png"><img src="docs/screenshots/gifs/bar.gif" alt="Bar, animated"></a> Bar Compare amounts</td> <td align="center" width="33%"><a href="docs/screenshots/line.png"><img src="docs/screenshots/gifs/line.gif" alt="Line, animated"></a> Line Change over time</td> <td align="center" width="33%"><a href="docs/screenshots/scatter.png"><img src="docs/screenshots/gifs/scatter.gif" alt="Scatter, animated"></a> Scatter Two measures</td> </tr> <tr> <td align="center" width="33%"><a href="docs/screenshots/waterfall.png"><img src="docs/screenshots/gifs/waterfall.gif" alt="Waterfall, animated"></a> Waterfall Running total</td> <td align="center" width="33%"><a href="docs/screenshots/treemap.png"><img src="docs/screenshots/gifs/treemap.gif" alt="Treemap, animated"></a> Treemap Part of whole</td> <td align="center" width="33%"><a href="docs/screenshots/heatmap.png"><img src="docs/screenshots/gifs/heatmap.gif" alt="Heatmap, animated"></a> Heatmap Intensity grid</td> </tr> <tr> <td align="center" width="33%"><a href="docs/screenshots/radar.png"><img src="docs/screenshots/gifs/radar.gif" alt="Radar, animated"></a> Radar Profile on shared axes</td> <td align="center" width="33%"><a href="docs/screenshots/polar.png"><img src="docs/screenshots/gifs/polar.gif" alt="Polar, animated"></a> Polar Cyclical values</td> <td align="center" width="33%"><a href="docs/screenshots/sankey.png"><img src="docs/screenshots/gifs/sankey.gif" alt="Sankey, animated"></a> Sankey Flow volumes</td> </tr> </table> 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 <a href="examples/specs/">examples/specs</a>. ### 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](skills/seecode/references/isometric.md) ```text Use SeeCode to draw an office chair in isometric, and label the parts. ``` <table> <tr> <td align="center" width="25%"><a href="docs/screenshots/isometric.png"><img src="docs/screenshots/gifs/isometric.gif" alt="Isometric office chair, animated"></a> Office chair Star base, gas lift, cushion</td> <td align="center" width="25%"><a href="docs/screenshots/laptop.png"><img src="docs/screenshots/gifs/laptop.gif" alt="Isometric laptop, animated"></a> Laptop Keys, trackpad, display</td> <td align="center" width="25%"><a href="docs/screenshots/espresso-machine.png"><img src="docs/screenshots/gifs/espresso-machine.gif" alt="Isometric espresso machine, animated"></a> Espresso machine Group head, wand, cups</td> <td align="center" width="25%"><a href="docs/screenshots/delivery-van.png"><img src="docs/screenshots/gifs/delivery-van.gif" alt="Isometric delivery van, animated"></a> Delivery van Wheels on their side</td> </tr> </table> <table> <tr> <td align="center" width="33%"><a href="docs/screenshots/exploded.png"><img src="docs/screenshots/gifs/exploded.gif" alt="Exploded phone teardown, animated"></a> Phone teardown Tray housing, camera module, display</td> <td align="center" width="33%"><a href="docs/screenshots/keyboard.png"><img src="docs/screenshots/gifs/keyboard.gif" alt="Exploded mechanical keyboard, animated"></a> Mechanical keyboard Case, PCB, plate, switches, keycaps</td> <td align="center" width="33%"><a href="docs/screenshots/agent-stack.png"><img src="docs/screenshots/gifs/agent-stack.gif" alt="Exploded AI agent stack, animated"></a> AI agent stack Vault, tools, skills, harness, interface</td> </tr> <tr> <td align="center" width="33%"><a href="docs/screenshots/burger.png"><img src="docs/screenshots/gifs/burger.gif" alt="Exploded burger, animated"></a> Anatomy of a burger Domed bun with sesame, ribbed layers</td> <td align="center" width="33%"><a href="docs/screenshots/server-rack.png"><img src="docs/screenshots/gifs/server-rack.gif" alt="Exploded server rack, animated"></a> One rack, unpacked Ports, drive bays and vents on the walls</td> <td align="center" width="33%"><a href="docs/screenshots/office-floors.png"><img src="docs/screenshots/gifs/office-floors.gif" alt="Exploded office building, animated"></a> Office, floor by floor Desks, monitors, solar panels</td> </tr> <tr> <td align="center" width="33%"><a href="docs/screenshots/isometric-plan.png"><img src="docs/screenshots/gifs/isometric-plan.gif" alt="Isometric campus plan, animated"></a> North campus Buildings, roads and trees, by phase</td> <td align="center" width="33%"><a href="docs/screenshots/coffee-shop.png"><img src="docs/screenshots/gifs/coffee-shop.gif" alt="Isometric coffee shop plan, animated"></a> Corner coffee shop Bar, kitchen, tables, queue posts</td> <td align="center" width="33%"><a href="docs/screenshots/street.png"><img src="docs/screenshots/gifs/street.gif" alt="Isometric street with roofs and a dome, animated"></a> A small street Gable, hip and shed roofs, a dome</td> </tr> </table> Also in the gallery: a fulfilment warehouse with storage racks. Specs are in <a href="examples/specs/isometric/">examples/specs/isometric</a>. ### 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. <table> <tr> <td align="center" width="50%"><a href="docs/screenshots/leave-plan.png"><img src="docs/screenshots/leave-plan.png" alt="Timeline of a year of leave"></a> A year of leave Timeline</td> <td align="center" width="50%"><a href="docs/screenshots/monthly-money.png"><img src="docs/screenshots/monthly-money.png" alt="Sankey of where a month's pay goes"></a> Where the pay goes Sankey</td> </tr> <tr> <td align="center" width="50%"><a href="docs/screenshots/renting.png"><img src="docs/screenshots/renting.png" alt="Sequence diagram, in Chinese, of renting a flat"></a> 租房的来回沟通 (renting) Sequence, in Chinese</td> <td align="center" width="50%"><a href="docs/screenshots/job-search.png"><img src="docs/screenshots/job-search.png" alt="State diagram, in Chinese, of a job application"></a> 求职申请走到哪一步了 (job search) State, in Chinese, with a custom legend</td> </tr> </table> ## See it in action Every HTML diagram is one self-contained file you can explore. Send it to anyone and the interactions go with it. These clips are recorded from real diagrams: <table> <tr> <td width="50%" valign="top"><img src="docs/features/trace.gif" alt="Hovering nodes lights up their connections with moving traces" /> Hover to trace Point at a node and its connections light up with a moving trace: outgoing in the accent colour, incoming in teal. Everything else steps back.</td> <td width="50%" valign="top"><img src="docs/features/focus.gif" alt="Clicking a node zooms in and opens its detail panel" /> Click to focus The camera zooms in and a panel opens with the node's role, reach and every connection. Hover a connection to send a token along it, or show everything downstream.</td> </tr> <tr> <td width="50%" valign="top"><img src="docs/features/route.gif" alt="Picking two nodes and playing the route between them" /> Walk a route Pick a start and an end, press Play, and the camera follows the request hop by hop, with each step listed in the panel.</td> <td width="50%" valign="top"><img src="docs/features/lens.gif" alt="Lens highlighting async edges, then the primary path" /> Look through a lens Highlight one kind of node or connection (async events, the primary path, stores) to read one layer of the system at a time.</td> </tr> <tr> <td width="50%" valign="top"><img src="docs/features/step.gif" alt="Stepping through a sequence diagram one message at a time" /> Step through it Use <kbd>←</kbd> <kbd>→</kbd> to walk the diagram's build-up one step at a time, which is ideal for presenting.</td> <td width="50%" valign="top"><img src="docs/features/export.gif" alt="Switching to dark theme and opening the export menu" /> Theme it, export it Flip the dark-mode switch. The Export menu saves PNG, JPEG, SVG, GIF and MP4 straight from the page, with nothing installed.</td> </tr> <tr> <td width="50%" valign="top"><img src="docs/features/canvas.gif" alt="Dragging the grip to make the canvas taller, then zooming in full screen" /> Give it room Drag the grip under the diagram to make the canvas taller, or press Full screen (<kbd>F</kbd>) to zoom and pan across the whole display. <kbd>Esc</kbd> brings you back.</td> <td width="50%" valign="top"></td> </tr> </table> Also: a dark-mode switch, search, pan and zoom, a clickable overview map, and links that reopen a view (`#focus=api`, `#route=web,db`). <kbd>Esc</kbd> clears focus, routes and lenses, and reduced-motion settings are respected. ## Themes, and your brand Light and dark come built in, and every diagram has a dark-mode switch that starts on your system setting. Dark mode is a soft `#1a1a1a`, never pure black. Point SeeCode at your site or your design tokens and it learns your brand palette too. <table> <tr> <td width="33%" valign="top"><img src="docs/themes/light.gif" alt="Architecture diagram in the default light theme" /> Light Warm paper, ink-dark text, one blue accent for what matters.</td> <td width="33%" valign="top"><img src="docs/themes/dark.gif" alt="Architecture diagram in the default dark theme" /> Dark Neutral <code>#1a1a1a</code> background, tuned so every label keeps its contrast.</td> <td width="33%" valign="top"><img src="docs/themes/brand.gif" alt="Architecture diagram in a learned brand palette of tan, off-white and charcoal" /> Your brand Learned from a site, CSS tokens or a list of colours. Shown here: <img src="https://img.shields.io/badge/tan-%23D4A574-D4A574?style=flat-square" alt="tan #D4A574" /> <img src="https://img.shields.io/badge/off--white-%23E7E5E2-E7E5E2?style=flat-square" alt="off-white #E7E5E2" /> <img src="https://img.shields.io/badge/charcoal-%231E1C1A-1E1C1A?style=flat-square" alt="charcoal #1E1C1A" /></td> </tr> </table> Tell your agent where your brand lives, in any of three ways: ```text Use SeeCode with our brand: https://your-site.com ``` Replace `https://your-site.com` with your own website. ```text Use SeeCode with the brand colours in this repo's CSS. ``` ```text Use SeeCode with these colours: #D4A574, #E7E5E2, #1E1C1A. ``` SeeCode reads the page and its stylesheets (or your repo's CSS, Tailwind and theme files) and works out which colour is the background, the text, the accent and the links, and which typefaces your body text, headings and code use. It builds a light and a dark version and fixes contrast where a brand colour would be hard to read: tan on off-white is deepened for light mode, while dark mode keeps it exactly. It then shows you the palette before saving it as a profile. No brand? Diagrams use the built-in themes. [How brand onboarding works](skills/seecode/references/onboarding.md) ## Bring what you already have Point SeeCode at an existing diagram or data file and it **redraws** it: same content, SeeCode's layout and style, at the level of detail you ask for. ```text Turn docs/architecture.mmd into a SeeCode diagram for my deck, simplified for executives. ``` | Source | Files | |---|---| | Mermaid (every diagram kind) | `.mmd`, `.mermaid`, fenced blocks in `.md` | | Graphviz · PlantUML · D2 | `.dot` `.gv` · `.puml` `.plantuml` · `.d2` | | draw.io · Excalidraw | `.drawio` (also `.drawio.png`/`.svg`) · `.excalidraw` | | Structurizr · BPMN | `.dsl` · `.bpmn` | | SQL · Prisma · DBML | `.sql` · `.prisma` · `.dbml` | | OpenAPI · data | `.yaml`/`.json` · `.csv` `.tsv` `.json` | **One file, many diagrams?** A design doc with several Mermaid blocks, a draw.io file with several pages or a board with frames comes out as a folder, one diagram per file, numbered in order and named after its heading or page, plus an `index.html` to browse them: ```text Use SeeCode to redraw every diagram in docs/design.md and export them for Confluence. ``` ```text diagrams/design/ 01-request-flow.html 01-request-flow.svg 01-request-flow.png 02-payment-sequence.html … index.html ``` You get a short report of what was merged or dropped. Source colours, fonts and coordinates never carry over. Or point it at code: *"diagram this repo"* scans the repository first, and each node can link back to the files it came from. ## Export for wherever it goes SeeCode works out where the diagram will live and picks the output to match: | Where it goes | You get | |---|---| | Explaining how something works, an artifact, a share link | **Interactive HTML** (motion, trace, focus, journey) | | PDF, Word, print | **SVG** with embedded fonts, plus a high-res PNG | | README, docs site, Notion, Confluence | SVG, plus a GIF if you want motion | | PowerPoint, Keynote, Google Slides | SVG or PNG | | Slack, X, LinkedIn, talks | PNG, **GIF** or **MP4** | Every diagram carries a small SeeCode mark in its bottom-right corner, drawn in the diagram's own text colour so it reads on any background. Ask to remove it and it's gone. Nothing to install. The diagram's own **Export** menu makes PNG, JPEG, SVG, GIF and MP4 in the browser. From the command line, SVG needs only Node, and the other formats use the Chrome or Edge you already have. The size adapts to the content: each format gets the resolution that keeps the smallest label readable while keeping the file practical. A small chart comes out at 3×, a dense system map at whatever keeps its labels sharp, GIFs stay compact and MP4s stay within 4K. [Export details](skills/seecode/references/export.md) <table> <tr> <td width="50%"><img src="examples/media/export-sample-bar.gif" alt="Bar chart export" /></td> <td width="50%"><img src="docs/screenshots/gifs/sequence.gif" alt="Sequence diagram export, animated" /></td> </tr> </table> ## Why it looks good every time - **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. - **Editorial by default.** One accent colour for what matters most, hairline borders, no shadows, and a complexity budget that pushes back on clutter. - **Mistakes come with fixes.** Problems come back as one line each with a fix hint, and repairs are small patches instead of rewrites. - **Light on tokens.** About 1.4k agent tokens per diagram, against roughly 15k when a model writes the SVG itself. - **Yours to style.** Light, dark and terminal skins, a sketchy hand-drawn style, and brand colours and fonts learned from your site or design tokens. ## When *not* to use it - A list of things: use a table or bullets. - A before/after of attributes: use a table. - One box with a label: write the sentence. If a reader wouldn't learn more from the picture than from a good paragraph, skip the diagram. ## Install **Claude Code** (plugin, recommended: it updates with every release): ```text /plugin marketplace add Aryanutkarsh/seecode /plugin install seecode@seecode ``` Run `/plugin` → **Marketplaces** → **seecode** → **Enable auto-update** once. The plugin also adds `/seecode:export`, `/seecode:import`, `/seecode:doctor` and `/seecode:settings`. <details> <summary>Any Agent Skills host, Codex, Copilot, Claude.ai, manual install</summary> **Any Agent Skills host** (Claude Code, Cursor, Codex, OpenCode…) via [skills.sh](https://skills.sh): ```bash npx skills add Aryanutkarsh/seecode -g ``` **Codex:** ```bash codex plugin marketplace add Aryanutkarsh/seecode codex plugin add seecode@seecode ``` **GitHub Copilot:** ```bash copilot plugin marketplace add Aryanutkarsh/seecode copilot plugin install seecode@seecode ``` **Claude.ai / Claude Desktop:** download `seecode.zip` from the [latest release](https://github.com/Aryanutkarsh/seecode/releases/latest) and upload it under **Settings → Capabilities → Skills**. Everything works there; image and video files come from the diagram's own Export menu, since the sandbox has no browser. **Manual:** ```bash git clone https://github.com/Aryanutkarsh/seecode ~/code/seecode ln -s ~/code/seecode/skills/seecode ~/.claude/skills/seecode ``` Requires Node 20 or later. Check your setup with `/seecode:doctor` or `node skills/seecode/scripts/seecode.mjs doctor`. </details> ### Updating Every change merged to `main` ships as a new version, with a [release](https://github.com/Aryanutkarsh/seecode/releases) and a fresh `seecode.zip`. How you pick it up depends on how you installed: | Installed with | To update | |---|---| | Claude Code plugin | Automatic once auto-update is on (`/plugin` → **Marketplaces** → **seecode** → **Enable auto-update**). To update now: `/plugin` → **Marketplaces** → **seecode** → **Update** | | `npx skills add` | `npx skills update seecode -g` (drop `-g` for a project install). Skills installed this way don't update on their own | | Codex / Copilot plugin | Update the plugin from your agent's plugin manager, or run the install commands above again | | Claude.ai / Claude Desktop | Download `seecode.zip` from the [latest release](https://github.com/Aryanutkarsh/seecode/releases/latest) and upload it again under **Settings → Capabilities → Skills** | | Manual clone | `git pull` in the clone (the symlink picks it up) | Then start a new agent session: skills load when a session starts. To see which version you have, check the `version:` line at the top of the installed `SKILL.md`, or run `/seecode:doctor`. ## Learn more - [CLI reference and how the pipeline works](docs/cli.md) - [Skill instructions](skills/seecode/SKILL.md) · [type guides](skills/seecode/references/types/) · [settings](skills/seecode/references/settings.md) - [Example specs](examples/specs/) ## Contributing Issues, pull requests and new diagram types are welcome. Start with the [contribution guide](CONTRIBUTING.md), and please follow the [code of conduct](CODE_OF_CONDUCT.md). Report security problems privately as described in [SECURITY.md](SECURITY.md). ## Privacy SeeCode has no server, accounts or telemetry. Generated diagrams load their fonts from Google Fonts (turn that off with `config set fonts system`), and the in-page GIF/MP4 export loads its encoders from jsDelivr. [PRIVACY.md](PRIVACY.md) lists every request. ## Acknowledgements SeeCode learned a great deal from excellent open-source projects: [diagram-design](https://github.com/cathrynlavery/diagram-design) by Cathryn Lavery, for its editorial approach to diagram types and its isometric projection, and [archify](https://github.com/tt-a1i/archify) by tt-a1i, for its explorable, animated viewer. The isometric object type was also inspired by [iso-glow](https://isoglow.dev) by April Zhu ([@Aprilzz423](https://x.com/Aprilzz423)) and [iso-figure](https://github.com/MrBongoC/ai-iso-skill) by Tolga Cohce, which showed how far isometric figures built from simple parts can go. All of these are MIT licensed; SeeCode's code is its own. Thank you all. If SeeCode is useful to you, a ⭐ helps others find it. ## License [MIT](LICENSE). Bundled encoders and fonts are listed in [THIRD_PARTY_LICENSES.md](THIRD_PARTY_LICENSES.md). <img src="branding/logo.png" alt="SeeCode lighthouse" width="56">

正在加载仓库 README…

这个仓库中的 skills

职业分类待补全

skill

职业分类

描述

更新

seecode

未分类

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,…

原文语言：英语

2026-10-09

已展示 1 / 1 个已收集 Skill。

用 AI 助手安装

复制这段 Prompt，发给你正在使用的 AI 助手。

Follow https://skillsmp.com/skill-install/prompt.md to install Agent Skills from https://github.com/Aryanutkarsh/SeeCode.

Aryanutkarsh/SeeCode

仓库 README

相关分享

这个仓库中的 skills

seecode

用 AI 助手安装

仓库 README