# How to draw an architecture diagram for your README without a design tool with diagram-design

Repo: [cathrynlavery/diagram-design](https://github.com/cathrynlavery/diagram-design) | Difficulty: Beginner | Time: 15 minutes | Basis: Seen in the wild

Describe your app in plain words and get a clean HTML and SVG diagram to drop into your README.

**Who it is for:** Solo developer about to publish a repo who needs an architecture picture and does not want to open Figma or fight Mermaid

**The problem:** README diagrams either look like default Mermaid output or take an hour in a drawing app.

**The outcome:** One self-contained HTML file with an architecture diagram (frontend, backend, database, cache) you can open by double-clicking and export as PNG or SVG.

## Steps

1. Run: npx skills add cathrynlavery/diagram-design
2. Ask your agent in plain words, for example: Make me an architecture diagram of my app: frontend, backend, database, Redis cache.
3. Open the generated .html file in your browser and check the labels and arrows.
4. Ask the agent to export a PNG or SVG and add it to your README.

## Prompt to paste into your agent

```text
Using the diagram-design skill, draw an architecture diagram of <my project: components and how they connect> as a single HTML and SVG file. Then export it as SVG so I can embed it in the README, and tell me which diagram type you picked and why.
```

## Caveat

The skill works from your description, so any component you forget to mention will be missing from the diagram. Check it against your real code before publishing.

## Seen in the wild

- X (Oct 2026): https://x.com/i/web/status/2110268087534755891
- X (Oct 2026): https://x.com/i/web/status/2110194985379492140

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/cathrynlavery-diagram-design/architecture-diagram-for-readme/