Repolode
Submit
Aryanutkarsh

Aryanutkarsh/SeeCode

An agent skill that turns a short JSON spec into animated, explorable diagrams exported as HTML, SVG, PNG, GIF or MP4.

Open-source alternative to:LucidchartMiro

View on GitHub
Stars
630
Forks
34
Open issues
0
Last commit
yesterday

What is it?

SeeCode is a skill for Claude Code and other coding agents. You describe the system or process you want to show, and the agent writes a short JSON spec, which SeeCode renders as a single self-contained HTML diagram. The viewer supports hover tracing of connections, click-to-focus detail panels, route playback between two nodes, layer filtering, and step-through presentation.

The project covers about 45 diagram types, including architecture, sequence, flowchart, ER, state, Gantt, kanban, UML class, Sankey and several isometric drawings. Chart types can read their values from CSV or JSON files. Existing Mermaid, Graphviz, PlantUML, D2, draw.io, Excalidraw, BPMN, SQL, Prisma, DBML and OpenAPI sources can be redrawn in SeeCode's style. Brand colours and fonts can be learned from a website or design tokens, and light and dark themes are built in.

Exports include SVG, PNG, JPEG, GIF and MP4. The browser Export menu needs nothing installed, and the command-line tool requires Node 20 or later, using a local Chrome or Edge for raster and video formats.

Key features

  • 01Generates animated, interactive HTML diagrams from a short JSON spec
  • 02Supports about 45 diagram types, from architecture and sequence diagrams to charts and isometric drawings
  • 03Imports Mermaid, Graphviz, PlantUML, D2, draw.io, Excalidraw and other formats for redrawing
  • 04Learns brand colours and fonts from a website or design tokens, with light and dark themes
  • 05Exports to SVG, PNG, JPEG, GIF and MP4

Use cases

  • Explaining a service architecture or request flow to teammates while working with a coding agent
  • Turning an existing Mermaid or draw.io diagram into a polished version for a deck or design doc
  • Producing diagrams for slides, Confluence or a README in a consistent brand style
  • Building charts from CSV data without passing the raw data through the model

Topics

#diagrams#agent-skills#claude-code#architecture-diagram#data-visualization#svg#mermaid#ai-agents#claude-skills#codex

FAQ

What is SeeCode?
An agent skill that turns a short JSON spec into animated, explorable diagrams exported as HTML, SVG, PNG, GIF or MP4. SeeCode is a skill for Claude Code and other coding agents. You describe the system or process you want to show, and the agent writes a short JSON spec, which SeeCode renders as a single self-contained HTML diagram. The viewer supports hover tracing of connections, click-to-focus detail panels, route playback between two nodes, layer filtering, and step-through presentation.
Is SeeCode free to use? What license does it have?
SeeCode is open source under the MIT license. Check the license terms before using it in commercial products.
Is SeeCode still maintained?
Actively maintained. The last commit to SeeCode was on Oct 17, 2026.
What can I use SeeCode for?
Explaining a service architecture or request flow to teammates while working with a coding agent Turning an existing Mermaid or draw.io diagram into a polished version for a deck or design doc Producing diagrams for slides, Confluence or a README in a consistent brand style Building charts from CSV data without passing the raw data through the model
Where can I get SeeCode?
The source code and installation instructions are on GitHub: https://github.com/Aryanutkarsh/SeeCode

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects