{"slug": "stack-diagram-agent-skill-that-draws-your-stack-from-one-sentence", "title": "stack-diagram: Agent Skill That Draws Your Stack From One Sentence", "summary": "The GitHub repository caru-ini/stack-diagram trended in early November 2026 for packaging architecture-diagram generation as an installable agent skill that takes a one-sentence stack description and returns a self-contained HTML file with inlined fonts and official logos, plus optional PNG or React output. The skill installs via `npx skills add caru-ini/stack-diagram` and is named for Claude Code, Codex, Cursor and other agentskills.io clients, resolving logos through svgl, devicon, gilbarbara/logos and AWS, Google Cloud and Azure vendor packs while routing connectors around text labels. It requires Python 3.9+ for build scripts, uses Playwright plus Chromium for PNG export, and is MIT-licensed for code with logos remaining vendor trademarks.", "body_md": "**The GitHub repository [caru-ini/stack-diagram](https://github.com/caru-ini/stack-diagram?ref=explainx)** trended in early November 2026 because it turns a boring chore — **drawing architecture diagrams with correct logos** — into a **repeatable agent skill**. You write one sentence about your production stack. The agent fetches **official icons**, routes connectors so lines do not slice through text, and hands back a **self-contained HTML file** (or PNG / React) you can drop into a wiki, PR or deck.\n\nIf you already use **agent skills** for coding, this is the same packaging idea applied to **documentation craft**, not model weights.\n\n## TL;DR\n\n| Question | Answer | \n|---|---|\n| What do I run? | `npx skills add caru-ini/stack-diagram` per the README | \n| Hosts named | Claude Code, Codex, Cursor, other [agentskills.io](https://agentskills.io/?ref=explainx) clients | \n| Default output | Single HTML file with inlined fonts and logos | \n| Themes | Light and dark renders; tiles stay white for brand colors | \n| Logo sources | svgl, devicon, vendor packs (AWS, GCP, Azure) | \n| Python needed? | Yes, 3.9+ for the build scripts | \n| PNG path | Playwright plus Chromium | \n| License | MIT for code; logos remain vendor trademarks | \n\n## Why developers forwarded it\n\nArchitecture diagrams fail in two predictable ways: **wrong logos** (recolored SVG hacks) and **unreadable routing** (arrows through labels). The README promises both are handled — **official assets only**, **lines routed around text**, and the agent **re-renders to check** before delivery.\n\nThat matches what teams actually argue about in design reviews, not what slide templates optimize for. It also rides the same wave as skills we covered for [Claude animated shorts via Remotion](https://explainx.ai/blog/claude-animated-shorts-remotion-threejs-agent-skill-github-trending-guide-2026) and [Blader humanizer patterns](https://explainx.ai/blog/blader-humanizer-agent-skill-wikipedia-ai-writing-patterns-github-trending-guide-2026): small repos that become **agent-native utilities** faster than traditional npm CLIs because `npx skills add` lowers install friction.\n\nThe repo's **skills.sh** badge links to [skills.sh/caru-ini/stack-diagram](https://skills.sh/caru-ini/stack-diagram?ref=explainx), the discovery surface many Cursor and Claude users search before GitHub Trending.\n\n## What the skill actually does\n\nFrom the README workflow:\n\n1. **Parse** a natural-language stack description (example: Next.js and Hono on Vercel, Postgres on Neon, auth with Clerk).\n2. **Resolve** each named product to a logo pipeline: try**svgl** , then**devicon** , then**gilbarbara/logos** , then vendor repositories.**AWS, Google Cloud and Azure** icons come from each cloud's published packs.\n3. **Layout** groups and edges, enforcing**no arrows through labels** .\n4. **Render** HTML with**inlined fonts and logos** so the file works offline — important for artifacts and email attachments.\n5. **Optionally export** PNG or a**dependency-free React component** from the same source.\n\nThe output is explicitly **not** a generic whiteboard export. It is a **branded architecture view** suitable for RFCs and onboarding docs.\n\nstack-diagram packages architecture-diagram generation as an installable agent skill\n\n## Install paths and host differences\n\n**Terminal-first agents** use:\n\n```\nnpx skills add caru-ini/stack-diagram\n```\n\n**Claude apps without CLI skills** can upload **`stack-diagram.zip`** from [GitHub Releases](https://github.com/caru-ini/stack-diagram/releases/latest?ref=explainx) as a skill bundle.\n\n**Cursor** users should confirm their build supports the same skills loader; the README points to **agentskills.io** for the compatibility list. If your client only runs MCP tools, this repo is **not** an MCP server — it is a **skill package** with Python helpers underneath.\n\nOur [agent skills complete guide](https://explainx.ai/blog/what-are-agent-skills-complete-guide) explains how skills differ from MCP and from raw prompts; stack-diagram is a worked example of **skills as packaged procedures** plus **local scripts**.\n\nstack-diagram resolves product names to official logo pipelines through svgl, devicon and vendor packs\n\n## Examples in the README\n\nThe project ships prompt templates beyond SaaS web apps:\n\n- **Dev tooling monorepos** — pnpm, Turborepo, Biome, Vitest, Lefthook, GitHub Actions.\n- **AI apps** — Next.js on Vercel, Supabase pgvector, Claude, Inngest syncing Notion.\n- **Regional cloud layouts** — AWS, GCP and Azure three-tier patterns with**vendor-native icons** .\n\nEach example reinforces one design rule: **name real products**, not abstract boxes. The skill's matcher lives or dies on whether it recognizes your strings.\n\n## Gallery and privacy\n\nAfter a diagram, the agent may **offer once** to publish **light and dark PNGs** to **[stacks.caru.moe](https://stacks.caru.moe/?ref=explainx)**. The README states:\n\n- It shows exactly what would be public (PNGs, English title, stack list, display name).\n- It requires **two explicit yes answers** .\n- **Your prompt is never sent** .\n- GitHub login is optional and only enables later deletion.\n\nFor teams under NDA, decline the gallery. The local HTML artifact still works.\n\n## Licensing and trademark hygiene\n\nCode and docs are **MIT**. Fonts use **SIL Open Font License 1.1**. **Logos are not bundled**; they download at build time under each vendor's terms. The README repeats that **diagram use is not endorsement** and that **Microsoft permits Azure icons** in architecture diagrams per their published guidance.\n\nThat matters for commercial decks. A skill that auto-fetches logos is convenient; **your legal review** may still want a static export archived with attribution.\n\n## Limitations honest builders should expect\n\n- **Network required** for logo fetches during generation.\n- **Python 3.9+** and, for PNG,**Playwright/Chromium** — CI containers need those dependencies.\n- **Ambiguous names** (\"Oracle\" database versus cloud) can map wrong; edit the sentence and regenerate.\n- **Star counts move** ; verify the README on the commit you install, not a screenshot from social media.\n\nThe GitHub page showed **zero stars** in one automated fetch while Trending metadata cited **thousands gained since November 1** — typical lag between indexer snapshots and the trending email. Use the repo's **release tags** and issue tracker for maturity, not stars alone.\n\n## How this compares to doing it manually\n\n| Approach | Pros | Cons | \n|---|---|---|\n| stack-diagram skill | Fast, logo-accurate, agent-driven iteration | Python and Playwright setup | \n| Figma / Lucid templates | Designer polish | Manual logo compliance | \n| Mermaid in markdown | Version controlled | Weak logo fidelity | \n| Cloud vendor diagram tools | Official stencils | Lock-in to one hyperscaler | \n\nFor agent-heavy teams, the skill wins on **iteration speed** when the diagram is a living document during refactors. For customer-facing PDFs, you may still touch up spacing in a design tool.\n\n## Security note\n\nThe skill runs **local Python** and fetches **third-party SVGs**. Treat it like any agent tool chain: run in a **trusted environment**, pin the skill version in team docs, and review HTML output before hosting on a public domain (inline resources can be large but should not execute remote scripts if you use the stock templates).\n\nFor broader agent hardening patterns, see [agent sandboxes compared](https://explainx.ai/blog/agent-sandboxes-coding-agents-compared-e2b-modal-daytona-guide-2026) and [loop engineering with coding agents](https://explainx.ai/blog/loop-engineering-coding-agents-claude-code-guide-2026).\n\n## What people ask after seeing the repo\n\n**Do I need a paid API?** No for the skill itself — you pay whatever model your agent host bills. Logo fetches hit public CDNs and vendor icon hosts.\n\n**Can I use this in client deliverables?** The MIT license covers the tooling. Logo trademark rules still belong to each vendor; keep the README's attribution mindset.\n\n**Does it replace C4 models?** No. C4 captures context containers and components; stack-diagram optimizes **logo fidelity** for **one snapshot** of what you run today. Many teams will use both: C4 for narrative, stack-diagram for the quick \"what we deploy\" slide.\n\n**Will it understand internal codenames?** Unlikely. Replace internal service names with the **public product** you actually run in prod, or add a gloss line the matcher can grep.\n\n**How does this relate to explainx.ai skills?** Our [skills directory](https://explainx.ai/skills) catalogs installable agent procedures for workshops and products. stack-diagram is an external skill you add the same way you would add a lint or deploy skill — it does not ship inside explainx.ai, but it is the kind of utility we expect in agent-heavy teams.\n\n## Maintenance and team rollout\n\nRollout works best as a **doc template**, not a one-off demo:\n\n1. Add the skill to your **team skill manifest** alongside testing and formatting skills.\n2. Store generated HTML under `docs/architecture/` in git so PRs show diagram diffs when stacks change.\n3. Pin the **release zip** version for Claude app users; floating`latest` will drift when logo sources move.\n4. In CI, skip PNG generation unless you maintain a **Playwright** image; HTML-only keeps pipelines light.\n\nWhen your stack changes — say you migrate auth from one vendor to another — regenerate in the same skill session so group boxes stay aligned. The README's **light and dark** pair helps Confluence and Notion pages that auto-theme.\n\n## Deeper comparison to diagram-as-code\n\n**Diagram-as-code** tools (Mermaid, D2, PlantUML) excel at **git diffs** and **reviewability**. stack-diagram trades some purity for **marketing-grade icons**. A sensible split:\n\n- Use **Mermaid** inside engineering specs for flows and sequence diagrams.\n- Use **stack-diagram** for onboarding README heroes and executive summaries.\n- Export PNG only when the audience lives in PowerPoint or PDF.\n\nIf you already document agents with [DESIGN.md patterns](https://explainx.ai/blog/design-md-templates-professional-ui-ai-agents), paste the stack sentence from your DESIGN stack section to keep diagrams synchronized with declared dependencies.\n\n## Try it in five minutes\n\n1. Clone or `npx skills add caru-ini/stack-diagram` .\n2. Paste a sentence that names **at least five concrete products** you deploy today.\n3. Ask the agent for **HTML first** ; open the file locally and toggle dark mode if your template supports it.\n4. Only then request PNG if you need slides.\n5. Decline gallery upload unless marketing owns the stack list.\n\n## Related reading\n\nDocument the **prompt sentence** your team standardizes on — for example listing **hosting, database, auth, payments and CI** in fixed order — so diffs stay readable when only one vendor changes.\n\n*Repository layout and commands follow the caru-ini/stack-diagram README as read on November 9, 2026.*", "url": "https://wpnews.pro/news/stack-diagram-agent-skill-that-draws-your-stack-from-one-sentence", "canonical_source": "https://explainx.ai/blog/stack-diagram-agent-skill-architecture-diagrams-github-trending-2026?utm_source=rss&utm_medium=feed&utm_campaign=blog", "published_at": "2026-11-09 00:00:00+00:00", "updated_at": "2026-11-09 11:53:19.273828+00:00", "lang": "en", "topics": ["ai-agents", "ai-tools", "developer-tools", "artificial-intelligence"], "entities": ["caru-ini/stack-diagram", "Claude Code", "Codex", "Cursor", "agentskills.io", "svgl", "devicon", "Playwright"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/stack-diagram-agent-skill-that-draws-your-stack-from-one-sentence", "markdown": "https://wpnews.pro/news/stack-diagram-agent-skill-that-draws-your-stack-from-one-sentence.md", "text": "https://wpnews.pro/news/stack-diagram-agent-skill-that-draws-your-stack-from-one-sentence.txt", "jsonld": "https://wpnews.pro/news/stack-diagram-agent-skill-that-draws-your-stack-from-one-sentence.jsonld"}}