amdahlco

System Diagram — Testing skill for Claude Code

Testing community

Claude Code skill: turn a spec or plan into an interactive diagram page.

How to install System Diagram

This entry records only its repository, not the path inside it, so there is no exact command to give. Open amdahlco/system-diagram and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What System Diagram does

Claude Code skill: turn a spec or plan into an interactive diagram page.

Alternatives in Testing

Spec Driven Development — Drive Kandev feature work through spec, plan, independent tasks, implementation, QA, and verification 697 ★
Spec Draft PR — Turn a feature idea or GitHub issue into a one-page spec saved to Documentation/specs/ and opened as a draft P 324 ★
Design QA — Visual QA on an HTML/CSS implementation — checks responsive behavior at mobile/tablet/desktop, design token co 309 ★

README

system-diagram

A Claude Code skill that turns a spec, plan, PRD, design doc or a running system into one interactive diagram page. The page is a grid: the steps go across, and who does each part goes down. Click any box to open a side panel with a plain sentence first and the technical detail after. Extra tabs can hold a build plan, tables, numbers and open questions.

Claude writes one data file. A fixed script builds the page from it, and a checker clicks everything on the page and takes screenshots. The result is a single HTML file that works in any browser, with dark mode and a phone layout. Where your Claude has an Artifact tool, the page is published as an Artifact; otherwise you get the HTML file.

![The made-up example in examples/skeleton](examples/skeleton/screenshot.png)

Install

You need `python3`. The checker also needs Node 18 or newer, with npm. Nothing else: no fonts, no design system, no account. Building a page needs no network.

Clone this repo into your Claude Code skills folder:

git clone https://github.com/amdahlco/system-diagram.git ~/.claude/skills/system-diagram

Windows (PowerShell):

git clone https://github.com/amdahlco/system-diagram.git $HOME\.claude\skills\system-diagram

If that folder already exists, move it away first.

Set up the checker. Do this once per machine.

macOS and Linux:
```
cd ~/.claude/skills/system-diagram/tools && npm ci && npx playwright-core install chromium
```
This downloads Chromium (about 150 MB) once. On Linux, use `npx playwright-core install --with-deps chromium` for the last part; it asks for sudo to install system libraries.

Windows (PowerShell):
```
cd $HOME\.claude\skills\system-diagram\tools; npm ci; npx playwright-core install chromium
```
`npm ci` installs the exact version locked in `tools/package-lock.json`, checked against its hash.

No Node? The skill still builds pages;