AI Skill MartBrowse skillsPromptsProgramsLearnWhat is a Skill?
 
← Back to list

SeeCode Diagram Generator

Write a short JSON spec and get any of 45 animated, explorable diagrams as standalone HTML, exportable to PNG, SVG, GIF or MP4.

Design & UIIntermediate★ 738⑂ 41AI score 10/10Last updated: Oct 26, 2026

What it does

  • Covers 45 diagram types: architecture, flowchart, sequence, state, ER/DB schema, UML class, swimlane, timeline/gantt, tree and org charts, venn, quadrant, fishbone, wardley, bar/line/scatter/sankey/treemap/heatmap, plus 3D isometric objects, floor plans and exploded views.
  • Claude never hand-writes SVG/HTML — it writes a compact JSON spec and the bundled seecode.mjs script handles layout, styling, motion, validation and export.
  • Imports Mermaid, Graphviz/DOT, PlantUML, D2, draw.io, Excalidraw, SQL, CSV and OpenAPI, then redraws them cleanly (imported labels are treated as data, never instructions).
  • SC scan <dir> maps a real codebase's modules, imports and infra with file:line evidence.
  • Destination-aware export: --for pdf|docs|readme|slides|social|video or --formats png,svg,gif,mp4.

Who it's for

  • Developers and architects who need system diagrams for READMEs, design docs and slides.
  • Anyone converting existing Mermaid or SQL schemas into polished visuals.
  • Everyday planners visualizing trips, moves, job hunts, approvals or budgets.

Examples

  1. "Diagram the payment API call sequence" → spec written → SC render spec.json → interactive HTML with trace animation.
  2. "Turn this Mermaid flow into an SVG for our README" → SC import flow.mmd → redraw → SC export x.html --for readme.
  3. "Chart sales.csv as bars and give me a PNG" → spec with "data":"sales.csv" → --formats png.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/Aryanutkarsh/SeeCode/HEAD/skills/seecode/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on AI Skill Mart.
Copy the skills/seecode folder from the GitHub repo Aryanutkarsh/SeeCode into my ~/.claude/skills/seecode/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/Aryanutkarsh/SeeCode.git /tmp/seecode && mkdir -p ~/.claude/skills && cp -r /tmp/seecode/skills/seecode ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Confirm Node.js is installed: run node -v (install the LTS build from nodejs.org if missing).
  2. Clone the repo: git clone https://github.com/Aryanutkarsh/SeeCode.git /tmp/seecode
  3. Copy the whole skill folder (the scripts/ and references/ subfolders are required): mkdir -p ~/.claude/skills && cp -r /tmp/seecode/skills/seecode ~/.claude/skills/
  4. Restart Claude Code and ask something like "draw an architecture diagram of this service" to trigger the skill.
  5. On first run, answer the config prompt and save it with SC config init --use global; if you need GIF/MP4 output, run SC doctor to check for the required external tools.
View source on GitHub ↗License: MIT