SkillFoxx

Type a name, a task or a service

Match with Foxx AI

stack-diagram skill

stack-diagram is an architecture-diagram skill that embeds logos and fonts in HTML, so the finished file opens offline.

  • 1,880 ★ on the repository
  • Last commit
  • MIT
Skill

Extended access

Why this level

  • The agent fetches external images, runs scripts and browser rendering, and writes diagram files.
All reasons and checks

caru-ini/stack-diagramAuthor:caru-ini

Install

In your terminal, with SkillFoxx CLI

npx skillfoxx add skills/stack-diagram

Detects the agents on your machine, shows the access level and pins the version.

Other ways to install

Access and checks

How we review

Extended accessThe tool runs code or makes network calls and only reads external data.

  • The agent fetches external images, runs scripts and browser rendering, and writes diagram files.

This is third-party code. Review the repository files before installing.

What it does

stack-diagram is an agent skill that turns a technology description into a diagram of service placement and data flows. The agent groups services by runtime, fetches logos from designated sources and preserves their colors and shapes. The main output is self-contained HTML with embedded fonts and images. The agent derives PNG and React output from it. Before delivery, it renders the diagram and checks connections for label overlaps and clear group boundaries. The system owner separately verifies the technical relationships.

Who it is for. Documentation writers and architects showing service placement and data flows in a project.

Good fit when

  • A new teammate is learning how the application, database and external services connect.
  • A technical writer is adding CI and local checks to monorepo documentation.
  • An architect is grouping AWS resources and using their official service icons.
  • The team is sharing a diagram as one HTML file for offline viewing.

Not a fit when

  • You need automatic infrastructure discovery from a cloud account.
  • The required deliverable is an editable Excalidraw source file.
  • Connections must be exact but are absent from the brief and cannot be clarified.

Example request

Diagram our app: Next.js calls a Hono API, the API reads Postgres and GitHub Actions deploys. Flag uncertain connections before building.

Limitations

Scripts require Python 3.9 or newer and network access while fetching logos; the built HTML then works offline. PNG export and the required visual check need Playwright with Chromium. The agent works from the user’s description and may infer conventional connections, so the system owner must verify technical accuracy. Logos remain their owners’ trademarks; review terms before redistributing source icon collections alongside the skill.

How to disable. Remove stack-diagram from the agent’s skills directory. Finished HTML, PNG and components can remain in documentation.

FAQ

Will the finished diagram depend on logo websites?

No. Images and fonts are embedded in the HTML. Open the file offline: logos and labels should look the same as they do with a connection.

Are light and dark versions available?

Yes. The agent renders both themes. Check logo and label legibility in each.

Where do AWS icons come from?

From the official AWS Architecture Icons package. The agent selects the relevant service icon and checks it in the diagram.

What if a logo cannot be found?

Find an official file on the brand site or repository and provide its URL. The skill supports explicit source URLs.

Can it diagram developer tooling?

Yes. It can show a monorepo, tests, Git hooks and CI. Distinguish runtime links from development relationships.

Discussion

No questions or reviews yet.

Skills

Fireworks Tech Graph

fireworks-tech-graph

A skill that builds technical SVG diagrams from a text description: architecture, UML, agent and cloud schemes, with PNG and GIF export

SkillMinimal access11.9K

Skill that draws architecture, flowchart and sequence diagrams as hand-placed SVG in one house style

SkillMinimal access662

A skill that replaces terminal ASCII with self-contained HTML pages: diagrams, diff reviews, plan reviews, tables and slide decks

SkillExtended access10.8K

A skill that draws an interactive isometric map of a repository: buildings sized by real code, flows traced along real calls.

SkillExtended access383

The /graphify skill builds a knowledge graph of a project's code, docs and PDFs so the agent queries the graph instead of grepping

SkillExtended access143.4K

A skill that turns an architecture discussion into an interactive isometric map of the system and a SYSTEM.md text twin from one data file

SkillExtended access461

README in short

Lines between services turn at right angles, and labels explain what flows along them. The agent uses pictograms for general concepts such as a queue or a user.

README badge

Original SKILL.md

---
name: stack-diagram
description: "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."
license: MIT (see LICENSE); bundled fonts are SIL OFL 1.1
compatibility: Python 3.9+ and network access to fetch logos; PNG output also needs Playwright with Chromium
---

# 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, aws.amazon.com and d1.awsstatic.com for AWS icons, 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`
3. Plan coordinates — read `references/geometry.md`
4. Build the HTML from `assets/template.html` — `scripts/build.py`
5. **Render a PNG and look at it** before delivering
6. Deliver in the requested format(s)

## Step 1 — Content

From the user's list of technologies/services, decide:

- **Nodes**: each tech = one node (name + a short lowercase role like `http server`, `sqlite db`)
- **Groups**: draw a box around things that share a runtime, vendor, or repo (e.g. a cloud provider box containing a runtime box; a monorepo box for tooling). Nesting one level deep is fine; deeper gets noisy. Write group labels in the brand's own casing (`GitHub`, `npm`); the template shows them as written.
- **Edges**, three kinds:
  - accent-colored solid = the primary request/data flow (one continuous path reads best)
  - neutral solid = secondary internal connections
  - neutral dashed = dev-time / deploy-time relationships (CI, git hooks, IaC deploy)

If the user gave only a flat list of tools, infer sensible groups and flows from what the tools are — only ask when a tool is ambiguous enough that the diagram would be wrong either way.

## Step 2 — Icons

```bash

Report a problem

Foxx AIstack-diagram
Foxx AI

I am Foxx AI and I have already vetted this tool. Ask about install, setup or anything else, and I will keep it simple.