SeeCode

Overview

SeeCode is an Agent Skill for Claude Code, Cursor, Codex, OpenCode and other Agent Skills hosts. It converts a short JSON spec into editorial-quality diagrams that can be explored in a self-contained HTML file or exported for documents, presentations and social media.

Key Features

• Turns a short JSON spec into animated, explorable diagrams for Claude and other coding agents.
• Supports 45 diagram types plus 15 variants, each with its own animation and an option to be fully static.
• Interactive HTML diagrams include hover trace, click focus, route playback, lenses, step-through presentation, search, pan and zoom, an overview map and shareable view links.
• Exports diagrams as interactive HTML, SVG, PNG, JPEG, GIF and MP4; the in-page Export menu works in the browser without installing extra tools.
• Redraws existing diagrams and data from Mermaid, Graphviz, PlantUML, D2, draw.io, Excalidraw, Structurizr, BPMN, SQL, Prisma, DBML, OpenAPI, CSV, TSV and JSON.
• The agent writes 30 to 150 lines of JSON instead of SVG, while SeeCode renderers handle layout, edge routing, label placement, typography, accessibility and motion.

Use Cases

• Explain software architecture, deployment, dependencies, data models, flows, sequences, state machines and other technical systems.
• Produce diagrams for READMEs, docs sites, Notion, Confluence, PDFs, Word, PowerPoint, Keynote, Google Slides, Slack, social posts and talks.
• Import and redraw existing Mermaid, Graphviz, PlantUML, D2, draw.io, Excalidraw, Structurizr, BPMN, SQL, Prisma, DBML, OpenAPI or data files at a requested level of detail.
• Draw non-code explanatory visuals such as leave timelines, monthly spending Sankey diagrams, rental communication sequences or job-search state diagrams, with labels in any language.

Getting Started

• For Claude Code, run /plugin marketplace add Aryanutkarsh/seecode, then /plugin install seecode@seecode.
• For Cursor, Codex, OpenCode and other Agent Skills hosts, run npx skills add Aryanutkarsh/seecode -g.
• Then ask the agent in plain language to use SeeCode to show a flow or system, and continue with requests such as highlighting a path, making it dark or exporting it for slides.

Deployment & Requirements

• Requires Node 20 or later.
• The diagram's own Export menu can create PNG, JPEG, SVG, GIF and MP4 in the browser with nothing installed.
• From the command line, SVG needs only Node; other export formats use Chrome or Edge already installed on the machine.

Before You Adopt

• License: MIT. Review its terms before using, modifying, or distributing the project.
• Running SeeCode requires Node 20 or later.
• In Claude.ai or Claude Desktop, the sandbox has no browser, so image and video files must be produced through the diagram's own Export menu.
• Command-line exports have external runtime dependencies: SVG requires Node, while other formats require Chrome or Edge.
• SeeCode should be skipped when a reader would not learn more from the picture than from a good paragraph.