# AI use cases for See Code (Aryanutkarsh/SeeCode)

Repo: [Aryanutkarsh/SeeCode](https://github.com/Aryanutkarsh/SeeCode) | Use cases: 5 | Page: https://dedupedai.com/use-cases/aryanutkarsh-seecode/

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.

This file holds every use case of this repo. Each one starts with a "## " heading and ends with its URL.

- Turn a system description into an interactive architecture diagram: https://dedupedai.com/use-cases/aryanutkarsh-seecode/explain-system-architecture-as-interactive-html/
- Redraw existing Mermaid or draw.io diagrams in See Code style: https://dedupedai.com/use-cases/aryanutkarsh-seecode/redraw-existing-diagrams-for-a-design-doc/
- Export a diagram as SVG, PNG, GIF or MP4 for slides, docs or posts: https://dedupedai.com/use-cases/aryanutkarsh-seecode/export-diagram-for-slides-readme-or-social/
- Make diagrams match your brand from your site or CSS: https://dedupedai.com/use-cases/aryanutkarsh-seecode/match-diagrams-to-your-brand/
- Draw a leave plan or a pay breakdown as a clear diagram: https://dedupedai.com/use-cases/aryanutkarsh-seecode/diagram-personal-timeline-or-budget/

## How to turn a system description into an interactive architecture diagram with See Code

Repo: [Aryanutkarsh/SeeCode](https://github.com/Aryanutkarsh/SeeCode) | Difficulty: Intermediate | Time: 30 minutes | Basis: From the README

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

**Who it is for:** An engineer or tech lead who must explain how a service, API and data stores work together to a team that has not read the code.

**The problem:** Architecture explanations in docs or chat are hard to follow, and static images do not show how a request moves through the system.

**The outcome:** A single self-contained HTML diagram of the system that readers can explore by hovering, focusing on nodes and following a route.

### Steps

1. In Claude Code, run `/plugin marketplace add Aryanutkarsh/seecode`
2. Run `/plugin install seecode@seecode`
3. Ask your agent: describe the flow in plain words, naming each component and what it calls or writes to
4. Open the generated HTML file in a browser and hover a node to check the connections
5. Share the HTML file with the team, or keep it as a link

### Prompt to paste into your agent

```text
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.
```

### Caveat

See Code draws only what the spec or description states, so the team's understanding is only as accurate as the description given to the agent.

Disclaimer: 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. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/aryanutkarsh-seecode/explain-system-architecture-as-interactive-html/

## How to redraw existing Mermaid or draw.io diagrams in See Code style with See Code

Repo: [Aryanutkarsh/SeeCode](https://github.com/Aryanutkarsh/SeeCode) | Difficulty: Intermediate | Time: 30 minutes | Basis: From the README

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

**Who it is for:** A developer or architect who keeps diagrams as Mermaid, draw.io or similar source files and needs them consistent for a review or a deck.

**The problem:** Diagrams created in different tools look inconsistent, and a document with many diagrams is hard to review.

**The outcome:** A folder of See Code diagrams named after their headings or pages, plus an index.html, and a short report of what was merged or dropped.

### Steps

1. Install See Code in your agent with `npx skills add Aryanutkarsh/seecode -g` or the Claude Code plugin commands
2. Ask your agent to redraw the source file, for example docs/architecture.mmd, simplified for your audience
3. Ask for a folder output if the file contains several diagrams, such as a design doc with multiple Mermaid blocks
4. Open index.html in the output folder and check each diagram against the source
5. Read the report of merged or dropped content before sharing the result

### Prompt to paste into your agent

```text
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.
```

### Caveat

See Code redraws the content with its own layout and style and does not carry over source colours, fonts or coordinates, so review each redrawn diagram against the original.

Disclaimer: 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. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/aryanutkarsh-seecode/redraw-existing-diagrams-for-a-design-doc/

## How to export a diagram as SVG, PNG, GIF or MP4 for slides, docs or posts with See Code

Repo: [Aryanutkarsh/SeeCode](https://github.com/Aryanutkarsh/SeeCode) | Difficulty: Beginner | Time: 15 minutes | Basis: From the README

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

**Who it is for:** An engineer or product lead who must place one diagram in a slide deck, a README, a docs site or a social post.

**The problem:** A diagram that works in one place may be the wrong format in another, and exporting from several tools is slow.

**The outcome:** A diagram file in the format that fits the destination, such as SVG for a docs site or PNG for slides, and a GIF or MP4 for motion.

### Steps

1. Open the finished diagram HTML file in a browser
2. Open the Export menu in the diagram and choose PNG, JPEG, SVG, GIF or MP4
3. For slides or PDF, pick SVG or a high-resolution PNG
4. For a README or docs site, pick SVG, and GIF if you want motion
5. Ask your agent to remove the See Code mark if you do not want it on the final image

### Prompt to paste into your agent

```text
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.
```

### Caveat

Command-line PNG, GIF and MP4 export needs Chrome or Edge, while the in-browser Export menu needs nothing installed.

Disclaimer: 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. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/aryanutkarsh-seecode/export-diagram-for-slides-readme-or-social/

## How to make diagrams match your brand from your site or CSS with See Code

Repo: [Aryanutkarsh/SeeCode](https://github.com/Aryanutkarsh/SeeCode) | Difficulty: Intermediate | Time: 30 minutes | Basis: From the README

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

**Who it is for:** A marketer or designer who needs architecture or process diagrams that match the company's visual identity for a deck or a blog post.

**The problem:** Default diagram colours and fonts do not match the brand, and recoloring diagrams by hand takes time.

**The outcome:** A saved brand profile with light and dark versions, applied to new diagrams after you approve the palette.

### Steps

1. Install See Code in your agent with `npx skills add Aryanutkarsh/seecode -g` or the Claude Code plugin commands
2. Ask your agent to use your brand, giving your website URL, your repo's CSS, or a list of hex colours
3. Review the palette the agent shows before it is saved as a profile
4. Ask for a diagram and check its contrast in light and dark mode

### Prompt to paste into your agent

```text
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.
```

### Caveat

The brand profile is inferred from the page or CSS, so See Code's palette needs your approval before it is used for final work.

Disclaimer: 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. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/aryanutkarsh-seecode/match-diagrams-to-your-brand/

## How to draw a leave plan or a pay breakdown as a clear diagram with See Code

Repo: [Aryanutkarsh/SeeCode](https://github.com/Aryanutkarsh/SeeCode) | Difficulty: Intermediate | Time: 30 minutes | Basis: From the README

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

**Who it is for:** An individual planning time off or reviewing a monthly budget who wants a visual that is easier to read than a spreadsheet.

**The problem:** Leave dates and money flows are hard to scan in a table, and sharing the numbers with a partner or manager is awkward.

**The outcome:** A timeline of leave or a Sankey chart of pay, shared as a single HTML file or exported as an image.

### Steps

1. Install See Code in your agent with `npx skills add Aryanutkarsh/seecode -g` or the Claude Code plugin commands
2. Ask your agent for a timeline of your leave dates, or a Sankey chart of where your pay goes
3. Give the dates or amounts in plain words or in a CSV or JSON file
4. Open the HTML file in a browser and check the totals against your records
5. Export it as PNG or SVG if you want to share it outside the browser

### Prompt to paste into your agent

```text
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.
```

### Caveat

See Code draws the numbers you provide, so check the totals against your own records before you rely on the chart.

Disclaimer: 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. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/aryanutkarsh-seecode/diagram-personal-timeline-or-budget/