SeeCode
Star644Get SeeCode
Star on GitHubFollow on GitHub

Make the
complex click.

Turn a simple prompt into a beautiful, animated visual.
Understand the system. Follow the connections.
Share the whole picture.

Install SeeCodeExplore diagrams

↳ Works inside the coding agent you already use.

AN IDEA, CONNECTED.checkout.html
ARCHITECTURE / 001

A little clarity.
A whole system.

CORE SERVICES HTTPSwritechargepublish BrowserNext.js storefront Checkout APIThe heart of the flow Postgres Stripe Event bus
⌘
Checkout API

One request. Three connections. The whole picture.

3 CONNECTIONS
Click a node. Follow the idea.
Open
“Show me how checkout works.”↵

BUILT FOR THE WAY YOU ALREADY WORK

Click your agent for installation steps.

01 / LESS DRAWING. MORE UNDERSTANDING.+

From “let me explain”
to “oh, I see.”

Your architecture, a launch plan, the story in your data.
Just tell your agent what you’re thinking.
SeeCode takes care of the picture.

01

Say what you see.

Describe an idea, point to your code, or bring a diagram you already have.

Use SeeCode to show
our payment flow▍
02

Watch it connect.

Your agent creates an animated diagram. Hover, focus, and follow every connection.

IdeaClarityAha.
03

Take it anywhere.

Keep the interactive HTML, or export a crisp image or animation for your next big explanation.

.html.svg.png.mp4.gif
03 / THERE’S MORE UNDER THE SURFACE+

Built to be explored.
Made to be understood.

A diagram should answer the next question,
not just look good on the first slide.

HOVER TO TRACESEE THE CONNECTIONS
Open the full viewer
◐

Your brand, in the picture.

Light, dark, or entirely yours. Learn a palette from your website or use your own colors and fonts.

⌘

Bring your starting point.

Mermaid, Graphviz, PlantUML, SQL, CSV, and more. Give an existing idea a new way to be seen.

A file. All yours.

One standalone HTML file. Keep it, share it, open it in a browser. No SeeCode account required.

GOOD IDEAS TRAVEL.

From your editor
to everywhere.

Docs, decks, a quick team message.
Keep the clarity, wherever the conversation goes.

Download a sample SVG
BUILT IN THE OPEN

Good ideas get better
together.

SeeCode is free, open source, and made to be yours.
Explore the code. Share an idea. Help shape what’s next.

Star on GitHub644
644GITHUB STARSLast checked 18 Oct 2026
Aryanutkarsh / SeeCode
Illustrated portrait of Aryan Utkarsh
ALWAYS EXPLORING
THE PERSON BEHIND SEECODE

Aryan Utkarsh.

Python programmer. Curious builder.

Aryan is a Python programmer learning data science and exploring Flutter and large language models. He builds tools, follows his curiosity, and shares what he makes.

Personal websiteGitHubLinkedIn
ALSO BUILDING
04 / YOUR NEXT AHA MOMENT STARTS HERE

Big ideas.
Small install.

Add SeeCode to your agent. Then ask for a diagram.
That really is the whole setup.

Free. Open source. Yours.

MIT licensed. Zero runtime dependencies.
No accounts, server, or telemetry.

RUN IN CLAUDE CODE
/plugin marketplace add Aryanutkarsh/seecode
/plugin install seecode@seecode

Run both commands in Claude Code, then start a new session.

THEN, JUST ASK

“Use SeeCode to show how
our checkout works.”

Ready when you are.
A FEW THINGS, CLEARED UP.

Good questions.

Is SeeCode an app or a skill?+

SeeCode is a skill for your coding agent. Install it in Claude Code, Codex, Cursor, OpenCode, or another Agent Skills host. Describe what you want to see and your agent creates the diagram.

Do I need to write code to make a diagram?+

No. Describe it in plain language, ask your agent to inspect your repository, or provide an existing diagram. Your agent prepares the spec and SeeCode renders it.

Can I use the diagrams without SeeCode?+

Yes. Every diagram is a standalone HTML file that opens in a browser. Export SVG, PNG, JPEG, GIF, or MP4 from the viewer for your documents and presentations.

Where does my data go?+

SeeCode has no server, accounts, or telemetry. Diagrams are generated locally. Fonts load from Google Fonts by default and can be set to system fonts. GIF and MP4 exports load browser encoders from jsDelivr. Your coding agent has its own data policies.

Is it really free?+

Yes. SeeCode is open source under the MIT license, including commercial use. Your coding agent’s own usage costs still apply.

LESS EXPLAINING. MORE UNDERSTANDING.

See the idea.
Share the clarity.

Get SeeCode

Something worth understanding is worth seeing.

YOUR FIRST VISUAL STARTS HERE

Install in Claude Code

Install the SeeCode plugin, then ask Claude Code for your first visual.

  1. Open Claude Code

    Start Claude Code in your project. You’ll need Node.js 20 or later to generate visuals.

  2. Install SeeCode

    Paste these commands into Claude Code, one at a time, and confirm the plugin installation.

    RUN INSIDE CLAUDE CODE
    /plugin marketplace add Aryanutkarsh/seecode
/plugin install seecode@seecode

  3. Start a fresh Claude Code session

    Skills load when a session starts. Open a new session, then try the prompt below.

    “Use SeeCode to show how our checkout works.”
How do I update SeeCode?

Free and open source. No SeeCode account needed.Full documentation