DEDUPED Hot AI repos, turned into use cases Get 5 a day

What you can do with See Code

SeeCode is a JavaScript tool that turns a short JSON spec into an animated, explorable diagram that an AI coding agent can create and export.

Trended earlier

Aryanutkarsh/SeeCode on GitHub

Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk.

What do you want to do?

5 use cases

  • Turn a system description into an interactive architecture diagram

    Describe a request flow in plain words and get one HTML file that teammates can hover, click and walk through.

    View prompt
    Use the SeeCode skill from the Aryanutkarsh/SeeCode repo to diagram <describe the target system flow>. Produce one interactive HTML file that shows each component and its connections. Verify that every component named in the description appears as a node and that the file opens in a browser.

  • Redraw existing Mermaid or draw.io diagrams in See Code style

    Convert old diagram files into See Code diagrams, one per file, with an index page to browse them.

    View prompt
    Use the SeeCode skill from the Aryanutkarsh/SeeCode repo to redraw every diagram in <path to source file> as SeeCode diagrams in a folder. Expected output: one HTML file per diagram plus index.html. Verify that the count of diagrams matches the count of diagram blocks in the source and that the report lists anything dropped.

  • Export a diagram as SVG, PNG, GIF or MP4 for slides, docs or posts

    Pick the export format that matches where the diagram will be used, from a deck to a README to a short animated clip.

    View prompt
    Use the SeeCode skill from the Aryanutkarsh/SeeCode repo to export <path to diagram> as <format for the destination>. Expected output: one file in that format sized for the destination. Verify that the file opens and that its smallest labels are readable at the size you will use.

  • Make diagrams match your brand from your site or CSS

    Point See Code at your website, stylesheet or colour list so diagrams use your palette in light and dark modes.

    View prompt
    Use the SeeCode skill from the Aryanutkarsh/SeeCode repo to learn the brand palette from <your website URL or CSS path> and then draw <describe the diagram> with it. Expected output: a diagram in the brand palette with light and dark versions. Verify that the palette shown before saving matches the brand and that label text stays readable.

  • Draw a leave plan or a pay breakdown as a clear diagram

    Ask your agent to chart a year of leave or where your pay goes, and share the result as one file.

    View prompt
    Use the SeeCode skill from the Aryanutkarsh/SeeCode repo to draw <a timeline of my leave or a Sankey of my pay> from <the plain-words description or CSV path>. Expected output: one diagram file. Verify that the totals in the diagram match the source numbers.

How to use See Code

  1. Check you have what it needs: A coding agent that supports Agent Skills, such as Claude Code, Cursor, Codex or OpenCode; Node.js, needed for the command-line SVG export; Chrome or Edge, needed only for command-line PNG, GIF or MP4 export.
  2. Open Aryanutkarsh/SeeCode on GitHub and read the README and license.
  3. In Claude Code, run /plugin marketplace add Aryanutkarsh/seecode
  4. Run /plugin install seecode@seecode
  5. Ask your agent: describe the flow in plain words, naming each component and what it calls or writes to
  6. Open the generated HTML file in a browser and hover a node to check the connections

These steps come from our top use case, Turn a system description into an interactive architecture diagram, which also has a copy-paste agent prompt.

See Code alternatives · Best AI repos for Software and DevOps

About this repo

  • Who it is forWritten for engineers and team leads who use Claude Code, Cursor, Codex or another Agent Skills host and need architecture or flow diagrams.
  • Why it is hot
  • LanguageJavaScript
  • Sourcegithub.com/Aryanutkarsh/SeeCode · Back to Hot repos

Requirements

  • A coding agent that supports Agent Skills, such as Claude Code, Cursor, Codex or OpenCode
  • Node.js, needed for the command-line SVG export
  • Chrome or Edge, needed only for command-line PNG, GIF or MP4 export
Maintain See Code? Add the Featured on Deduped badge

Paste this into your README:

[![Featured on Deduped](https://dedupedai.com/badge/aryanutkarsh-seecode.svg)](https://dedupedai.com/use-cases/aryanutkarsh-seecode/?ref=badge)

More badge styles and HTML

Questions about See Code

What is See Code?

SeeCode is a JavaScript tool that turns a short JSON spec into an animated, explorable diagram that an AI coding agent can create and export. It is an open-source project on GitHub: https://github.com/Aryanutkarsh/SeeCode.

Who is See Code for?

Written for engineers and team leads who use Claude Code, Cursor, Codex or another Agent Skills host and need architecture or flow diagrams.

What can I do with See Code?

5 use cases so far, for example: Turn a system description into an interactive architecture diagram; Redraw existing Mermaid or draw.io diagrams in See Code style; Export a diagram as SVG, PNG, GIF or MP4 for slides, docs or posts. Each has steps and a copy-paste agent prompt.

What do I need to run See Code?

A coding agent that supports Agent Skills, such as Claude Code, Cursor, Codex or OpenCode; Node.js, needed for the command-line SVG export; Chrome or Edge, needed only for command-line PNG, GIF or MP4 export.

What are alternatives to See Code?

Other hot AI repos in Software and DevOps: Harness2, iFixAi, Orca, Diagram Design, AI Memory.

Is See Code safe to run?

Deduped does not own, audit or vouch for it. Read the README and license, run it on your own systems first and review every command before you run it.