#543 by GitHub stars

caru-ini/stack-diagram

Create cloud-architecture-style diagrams of tech stacks, system architectures, infra layouts, and service topologies — with real brand logos, grouped containers, and clean orthogonal arrows — delivered as self-contained HTML, a PNG image, a React/TSX component, or a live artifact. Use this skill whe

Engineering

History

Review weekly changes to SKILL.md before updating. Dates mark the weeks in which we observed each version; checks apply to the recorded commits.

View weekly changes

`skills/stack-diagram/SKILL.md`

Week of Oct 26, 2026 · Line counts unavailable

Before Not checked yet → After Network or broad shell

First observation → 188f43b7c4f1

No earlier version was observed for comparison.

Compare on GitHub

View on GitHub Add to my skills

Verified commit 188f43b7c4f1725a0948feef8b94a199d07e6e0d

2kGitHub stars

Not availablestars in 7 days

1skill in this repository

29commits in 30 days

Heat

Insufficient history

Not enough history yet to measure heat. It appears after a few days of data.

Heat never changes the order by stars, and sponsorship never touches it. How heat works

Stars over time

30-day change not yet available: not enough history.

Individual skills in this repository

stack-diagram skills/stack-diagram

How it works

stack-diagram

When your agent uses it

Create cloud-architecture-style diagrams of tech stacks, system architectures, infra layouts, and service topologies — with real brand logos, grouped containers, and clean orthogonal arrows — delivered as self-contained HTML, a PNG image, a React/TSX component, or a live artifact. Use this skill whenever the user asks for an architecture / system / stack / infra diagram, a tech-stack overview, a service topology, a cloud-vendor-style diagram, or wants tech logos arranged into a picture of how their services connect — in any language, even if they don't name an output format, and even if the tools involved aren't cloud services.

What it loads into context

Frontmatter

179 tokens

Always available to the agent

SKILL.md

2,437 tokens

When the skill is activated

Reference documents

2,147 tokens

Loaded on request

Token counts are estimates. Scripts run separately; they are not counted as reference context.

The playbook

Requirements
Workflow
Step 1 — Content
Step 2 — Icons
Step 3 — Layout
Step 4 — Build
Step 5 — Verify by looking
Step 6 — Deliver

Scripts executed separately

scripts/build.py
scripts/fetch_icons.py
scripts/render_png.py

Files

LICENSEasset1,215 bytes
SKILL.mdcore10,376 bytes
SKILL.mdcore10,376 bytes
SKILL.mdcore10,376 bytes
SKILL.mdcore10,376 bytes
SKILL.mdcore10,376 bytes
SKILL.mdcore10,376 bytes
SKILL.mdcore10,376 bytes
SKILL.mdcore10,376 bytes
SKILL.mdcore10,376 bytes
SKILL.mdcore10,376 bytes
SKILL.mdcore10,376 bytes
SKILL.mdcore10,376 bytes
assets/fonts/Geist.woff2asset29,400 bytes
assets/fonts/JetBrainsMono.woff2asset31,340 bytes
assets/fonts/OFL-Geist.txtdoc4,383 bytes
assets/fonts/OFL-JetBrainsMono.txtdoc4,399 bytes
assets/fonts/README.mddoc448 bytes
assets/generic/browser.svgasset242 bytes
assets/generic/device.svgasset285 bytes
assets/generic/internet.svgasset293 bytes
assets/generic/server.svgasset319 bytes
assets/generic/user.svgasset255 bytes
assets/template.htmlasset13,164 bytes
references/geometry.mddoc4,907 bytes
references/tsx.mddoc2,328 bytes
scripts/build.pyruns1,830 bytes
scripts/fetch_icons.pyruns7,955 bytes
scripts/render_png.pyruns4,166 bytes

Read SKILL.md


# stack-diagram

Produces engineering-drawing-style architecture diagrams: real logos on white tiles, labeled group boxes (like cloud-vendor VPC diagrams), orthogonal arrows with monospace labels, on a cool graph-paper background. One self-contained HTML file is the source of truth; PNG / TSX / artifact are derived from it.

## Requirements

- Python 3.9+ (standard library only for `fetch_icons.py` and `build.py`)
- Network access to the icon sources (svgl.app, raw.githubusercontent.com, cdn.jsdelivr.net, plus the brand's own site or repo for `name=URL`) when fetching icons
- Playwright + Chromium for `render_png.py`: `pip install playwright && python3 -m playwright install --with-deps chromium`

## Workflow

1. Settle the content (nodes, groups, edges)
2. Fetch icons — `scripts/fetch_icons.py`

View the complete source on GitHub

Skills included

stack-diagram

Repository facts

License: MIT
Created: Nov 1, 2026
Last pushed: Nov 3, 2026
Forks: 87
Open issues: 0
Project activity: Active

Rank over the last 12 weeks

Now #543 · best #543

#789 on Nov 2
#639 on Nov 3
#588 on Nov 4
#566 on Nov 5
#546 on Nov 6
#543 since Nov 7

Before you install

Network or broad shell

Automated signals, not a guarantee

Checked Nov 3, 2026

Not fully analyzed: some files were too long, unreadable or missing. This never lowers the level.

Show 11 notes

skills/stack-diagram/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
skills/stack-diagram/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
skills/stack-diagram/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
skills/stack-diagram/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
skills/stack-diagram/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
skills/stack-diagram/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
skills/stack-diagram/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
skills/stack-diagram/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
skills/stack-diagram/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
skills/stack-diagram/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
skills/stack-diagram/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed

No broad tool permissions
1 dangerous shell commandin 1 file: stack-diagram/scripts/render_png.py:53
30 network referencesin 10 files: stack-diagram/scripts/fetch_icons.py:8 stack-diagram/assets/fonts/OFL-Geist.txt:1 stack-diagram/assets/fonts/OFL-JetBrainsMono.txt:1 and 7 more
No hidden or obfuscated text
No instruction overrides
3 executable scriptsin 3 files: stack-diagram/scripts/build.py:1 stack-diagram/scripts/fetch_icons.py:1 stack-diagram/scripts/render_png.py:1
2 references to secretsin 1 file: stack-diagram/scripts/render_png.py:44
No requests to vote in Hot

Show all 36 signals by file

`skills/stack-diagram/SKILL.md`

Network accessline 43

python3 scripts/fetch_icons.py <icons-dir> tanstack hono drizzle "betterauth:better-auth" "orpc=https://orpc.unnoq.com/logo.webp"

`skills/stack-diagram/assets/fonts/OFL-Geist.txt`

Network accessline 1

Copyright 2024 The Geist Project Authors (https://github.com/vercel/geist-font)

Network accessline 3

This Font Software is licensed under the SIL Open Font License, Version 1.1. This license is copied below, and is also available with a FAQ at: https://openfontlicense.org

Network accessline 5
```
https://openfontlicense.org
```

`skills/stack-diagram/assets/fonts/OFL-JetBrainsMono.txt`

Network accessline 1

Copyright 2020 The JetBrains Mono Project Authors (https://github.com/JetBrains/JetBrainsMono)

Network accessline 3

This Font Software is licensed under the SIL Open Font License, Version 1.1. This license is copied below, and is also available with a FAQ at: https://openfontlicense.org

Network accessline 5
```
https://openfontlicense.org
```

`skills/stack-diagram/assets/generic/browser.svg`

Network accessline 1

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#3d4660" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="4" width="19" height="13" rx="1.5"/><path d="M8 21h8M12 17v4"/></svg

`skills/stack-diagram/assets/generic/device.svg`

Network accessline 1

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#3d4660" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="13" height="10" rx="1.5"/><path d="M6 19h7"/><rect x="17.5"

`skills/stack-diagram/assets/generic/internet.svg`

Network accessline 1

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#3d4660" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c2.8 2.6 4.2 5.6 4.2 9S14.8 18.4

`skills/stack-diagram/assets/generic/server.svg`

Network accessline 1

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#3d4660" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="4" width="17" height="7" rx="1.5"/><rect x="3.5" y="13" width="17" h

`skills/stack-diagram/assets/generic/user.svg`

Network accessline 1

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#3d4660" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="3.6"/><path d="M4.5 20.5c1.4-3.6 4.2-5.4 7.5-5.4s6.1 1.8 7.

`skills/stack-diagram/assets/template.html`

Network accessline 222

<div class="foot">     <span><!-- FOOT-LEFT: author / one-liner --></span>     <span><!-- FOOT-RIGHT: icon sources actually used, from manifest.json, e.g. "icons: svgl / devicon / Lucide" --> · made with <a href="https://github.com/caru-ini

Network accessline 223

<span><!-- FOOT-LEFT: author / one-liner --></span>     <span><!-- FOOT-RIGHT: icon sources actually used, from manifest.json, e.g. "icons: svgl / devicon / Lucide" --> · made with <a href="https://github.com/caru-ini/stack-diagram" target=

Network accessline 224

<span><!-- FOOT-RIGHT: icon sources actually used, from manifest.json, e.g. "icons: svgl / devicon / Lucide" --> · made with <a href="https://github.com/caru-ini/stack-diagram" target="_blank" rel="noopener">stack-diagram</a></span>

`skills/stack-diagram/scripts/build.py`

Executable scriptline 1
```
#!/usr/bin/env python3
```

`skills/stack-diagram/scripts/fetch_icons.py`

Executable scriptline 1
```
#!/usr/bin/env python3
```

Network accessline 8

name              -> slug == name          (e.g. hono)   name:slug         -> different slug        (e.g. betterauth:better-auth)   name=URL          -> explicit URL          (e.g. orpc=https://orpc.unnoq.com/logo.webp)

Network accessline 10

name=URL          -> explicit URL          (e.g. orpc=https://orpc.unnoq.com/logo.webp)

Network accessline 32

def get(url, timeout=15):     req = urllib.request.Request(url, headers=UA)

Network accessline 33

req = urllib.request.Request(url, headers=UA)

Network accessline 34

with urllib.request.urlopen(req, timeout=timeout) as r:

Network accessline 71

for q in dict.fromkeys(queries):         try:             items = json.loads(get(f"https://api.svgl.app?search={urllib.parse.quote(q)}"))

Network accessline 72

try:             items = json.loads(get(f"https://api.svgl.app?search={urllib.parse.quote(q)}"))         except Exception:

Network accessline 73

items = json.loads(get(f"https://api.svgl.app?search={urllib.parse.quote(q)}"))

Network accessline 87

if slug.startswith("lucide/"):         return [("lucide", f"https://cdn.jsdelivr.net/npm/lucide-static/icons/{slug[7:]}.svg", None)]

Network accessline 88

return [("lucide", f"https://cdn.jsdelivr.net/npm/lucide-static/icons/{slug[7:]}.svg", None)]

Network accessline 92

out.append(("svgl", *svgl))     return out + [         ("devicon", f"https://raw.githubusercontent.com/devicons/devicon/master/icons/{slug}/{slug}-original.svg", None),

Network accessline 93

return out + [         ("devicon", f"https://raw.githubusercontent.com/devicons/devicon/master/icons/{slug}/{slug}-original.svg", None),         ("gilbarbara", f"https://cdn.jsdelivr.net/gh/gilbarbara/logos/logos/{slug}-icon.svg", None),

Network accessline 94

("devicon", f"https://raw.githubusercontent.com/devicons/devicon/master/icons/{slug}/{slug}-original.svg", None),

Network accessline 95

("gilbarbara", f"https://cdn.jsdelivr.net/gh/gilbarbara/logos/logos/{slug}-icon.svg", None),

Network accessline 96

("gilbarbara", f"https://cdn.jsdelivr.net/gh/gilbarbara/logos/logos/{slug}.svg", None),

`skills/stack-diagram/scripts/render_png.py`

Executable scriptline 1
```
#!/usr/bin/env python3
```
Access to secretsline 44
```
[Credential-related source omitted]
```
Access to secretsline 45
```
[Credential-related source omitted]
```

Dangerous shell operationline 53

"variants. Install a Japanese font, e.g. on Debian/Ubuntu: sudo apt-get install fonts-noto-cjk\n"

How the signals fit together

Facts from a static read of the files at the pinned commit. They describe what the code does, not why.

Some files could not be read; the facts below still hold.

Signal confidence: 28 facts

Network access in code of the SKILL.mdstack-diagram/SKILL.md:43High confidence
Network access in prose of documentationstack-diagram/assets/fonts/OFL-Geist.txt:1Low confidence
Network access in prose of documentationstack-diagram/assets/fonts/OFL-Geist.txt:3Low confidence
Network access in prose of documentationstack-diagram/assets/fonts/OFL-Geist.txt:5Low confidence
Network access in prose of documentationstack-diagram/assets/fonts/OFL-JetBrainsMono.txt:1Low confidence
Network access in prose of documentationstack-diagram/assets/fonts/OFL-JetBrainsMono.txt:3Low confidence
Network access in prose of documentationstack-diagram/assets/fonts/OFL-JetBrainsMono.txt:5Low confidence
Executable script in code of a file that runsstack-diagram/scripts/build.py:1High confidence
Executable script in code of a file that runsstack-diagram/scripts/fetch_icons.py:1High confidence
Network access in prose of a file that runsstack-diagram/scripts/fetch_icons.py:8Low confidence
Network access in prose of a file that runsstack-diagram/scripts/fetch_icons.py:10Low confidence
Network access in code of a file that runsstack-diagram/scripts/fetch_icons.py:32High confidence
Network access in code of a file that runsstack-diagram/scripts/fetch_icons.py:33High confidence
Network access in code of a file that runsstack-diagram/scripts/fetch_icons.py:34High confidence
Network access in code of a file that runsstack-diagram/scripts/fetch_icons.py:71High confidence
Network access in code of a file that runsstack-diagram/scripts/fetch_icons.py:72High confidence
Network access in code of a file that runsstack-diagram/scripts/fetch_icons.py:73High confidence
Network access in code of a file that runsstack-diagram/scripts/fetch_icons.py:87High confidence
Network access in code of a file that runsstack-diagram/scripts/fetch_icons.py:88High confidence
Network access in code of a file that runsstack-diagram/scripts/fetch_icons.py:92High confidence
Network access in code of a file that runsstack-diagram/scripts/fetch_icons.py:93High confidence
Network access in code of a file that runsstack-diagram/scripts/fetch_icons.py:94High confidence
Network access in code of a file that runsstack-diagram/scripts/fetch_icons.py:95High confidence
Network access in code of a file that runsstack-diagram/scripts/fetch_icons.py:96High confidence
Executable script in code of a file that runsstack-diagram/scripts/render_png.py:1High confidence
Access to secrets in code of a file that runs: a variable, placeholder or call, not a stored valuestack-diagram/scripts/render_png.py:44Low confidence
Access to secrets in code of a file that runs: a variable, placeholder or call, not a stored valuestack-diagram/scripts/render_png.py:45Low confidence
Dangerous shell operation in code of a file that runsstack-diagram/scripts/render_png.py:53High confidence

Works with

Agent compatibility, from the files in this repository
Agent	Status	Evidence	Install to
Claude Code	Compatible	Standard SKILL.md skills/stack-diagram/SKILL.md	`.claude/skills/<skill-name>/`
Codex	Compatible	Standard SKILL.md skills/stack-diagram/SKILL.md	`.agents/skills/<skill-name>/`
Cursor	Compatible	Standard SKILL.md skills/stack-diagram/SKILL.md	`.cursor/skills/<skill-name>/`
Gemini CLI	Compatible	Standard SKILL.md skills/stack-diagram/SKILL.md	`.gemini/skills/<skill-name>/`
GitHub Copilot	Compatible	Standard SKILL.md skills/stack-diagram/SKILL.md	`.github/skills/<skill-name>/`
OpenCode	Compatible	Standard SKILL.md skills/stack-diagram/SKILL.md	`.opencode/skills/<skill-name>/`

Native The repository ships a manifest, folder or frontmatter field for this agent.
Compatible A standard SKILL.md that this agent can read.
Unknown No evidence either way.

Derived automatically from paths, manifests and frontmatter. Not tested on each agent.

Add this badge to your README

It updates every night and links to this page.

[![caru-ini/stack-diagram on hotskills](https://hotskills.dev/badge/caru-ini-stack-diagram.svg)](https://hotskills.dev/skill/caru-ini-stack-diagram/)

caru-ini/stack-diagram

History

skills/stack-diagram/SKILL.md

Share this page

Heat

Stars over time

Individual skills in this repository

How it works

stack-diagram

Frontmatter

SKILL.md

Reference documents

The playbook

Scripts executed separately

Files

Skills included

Repository facts

Rank over the last 12 weeks

Before you install

skills/stack-diagram/SKILL.md

skills/stack-diagram/assets/fonts/OFL-Geist.txt

skills/stack-diagram/assets/fonts/OFL-JetBrainsMono.txt

skills/stack-diagram/assets/generic/browser.svg

skills/stack-diagram/assets/generic/device.svg

skills/stack-diagram/assets/generic/internet.svg

skills/stack-diagram/assets/generic/server.svg

skills/stack-diagram/assets/generic/user.svg

skills/stack-diagram/assets/template.html

skills/stack-diagram/scripts/build.py

skills/stack-diagram/scripts/fetch_icons.py

skills/stack-diagram/scripts/render_png.py

How the signals fit together

Works with

You might also use

Aryanutkarsh/SeeCode

himanshu13ps/penciled

AaravKashyap12/advise-project-approach

MiaoQichuan/new-litigation-visualization

supermax92/qgraphflow

OthmanAdi/planning-with-files

Add this badge to your README

`skills/stack-diagram/SKILL.md`

`skills/stack-diagram/SKILL.md`

`skills/stack-diagram/assets/fonts/OFL-Geist.txt`

`skills/stack-diagram/assets/fonts/OFL-JetBrainsMono.txt`

`skills/stack-diagram/assets/generic/browser.svg`

`skills/stack-diagram/assets/generic/device.svg`

`skills/stack-diagram/assets/generic/internet.svg`

`skills/stack-diagram/assets/generic/server.svg`

`skills/stack-diagram/assets/generic/user.svg`

`skills/stack-diagram/assets/template.html`

`skills/stack-diagram/scripts/build.py`

`skills/stack-diagram/scripts/fetch_icons.py`

`skills/stack-diagram/scripts/render_png.py`