arch-diagram skill
A skill that reads a repository, article or PDF and draws an interactive architecture diagram with animated data flows
- 126 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- Runs build scripts and a headless browser and writes diagram files into the working directory.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/arch-diagramDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- Runs build scripts and a headless browser and writes diagram files into the working directory.
This is third-party code. Review the repository files before installing.
What it does
arch-diagram takes a GitHub repository link, an article, a PDF or a local project, analyses the structure and builds a diagram. The result is one HTML file: elements are coloured by kind, links by flow type (request, write, response, async call), light dots run along the lines and a log at the bottom adds a row for every exchange between modules. There are eight styles, with a dark terminal blueprint by default. The skill checks the diagram in headless Chrome for overlaps, clipped text and lines crossing boxes. The HTML exports to PNG, MP4, GIF and a Mermaid diagram. Label language follows the language of the request.
Who it is for. Developers and technical writers who need a clear diagram of someone else's or their own project for a README, talk or article.
Good fit when
- Before a talk you must show the architecture of an open project from its repository link.
- An article about a system has to become a request flow diagram for a slide.
- A README lacks a picture and it should come from the code itself.
- A short pipeline video is needed as a twenty-second MP4.
Not a fit when
- You need an editable diagram in Figma or draw.io: the result lives in HTML and in spec.json.
- The machine has no Chrome, Chromium or Edge: self-check and export need them.
- You require strict UML notation to a standard.
Example request
Draw the architecture of https://github.com/plausible/analytics in blueprint style and export a PNG.Limitations
Node 18 or newer and one of Chrome, Chromium or Edge are required. MP4 and GIF also need ffmpeg. The README is written in Chinese, with translations in docs. The diagram source is stored as a slug.spec.json file, and edits go through changing the spec and rebuilding. Running npx from the repository directory fails to find the command; run it outside the clone or through node bin/cli.mjs. Diagram quality depends on how completely the agent read the source material.
How to disable. Run npx @rokoai/arch-diagram uninstall, or delete ~/.claude/skills/arch-diagram and, for Codex, ~/.codex/skills/arch-diagram.
FAQ
How do I invoke the skill explicitly?
In Claude Code type /arch-diagram with a repository or article address, in Codex use $arch-diagram with the same address.
Which styles are available?
Eight in total: dark terminal by default, blueprint, kraft drafting, whiteboard, brutalism, CRT, soft cards and isometric. A phrase switches style without changing the structure.
Which output formats exist?
A single-file interactive HTML, a double-resolution PNG, an MP4 of 20 seconds by default, a one-cycle GIF and a Mermaid flowchart.
What language will labels use?
The language of the request: a Russian request gives Russian titles and log. Identifiers, paths and commands stay untranslated.
How do I install it in Codex?
With codex plugin marketplace add bassnova42/arch-diagram-skill, then codex plugin add arch-diagram@arch-diagram. The npm installer also places the skill in ~/.codex/skills when Codex is present.
Discussion
No questions or reviews yet.
Related
SkillsA skill that draws a system architecture diagram as one HTML file with SVG plus copy, PNG and PDF export
A skill that draws validated architecture, workflow, sequence and data-flow diagrams as one interactive HTML file
A skill that draws editorial diagrams as standalone HTML and SVG files: architecture, flowcharts, ER, funnels and about forty more types
A skill that draws 45 types of animated diagrams from a short JSON spec and saves them as HTML, SVG, PNG, GIF and MP4
A skill drawing animated architecture and process diagrams in a hand-drawn style: dark neon and light paper. The README is in Chinese
A skill drawing diagrams with Chinese typography: 45 types, one HTML file, no external fonts, SVG and PNG export, Mermaid redraw.
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Authentication | Repository stars | Main difference |
|---|---|---|---|---|
| arch-diagram (this card) | no | 126 | ||
| Diagram Design | no | 66,822 | a set of diagram design rules; arch-diagram reads the repository itself and builds an animated diagram | |
| GitDiagram | yes | not required | 18,884 | a web service for GitHub repository diagrams; arch-diagram runs inside the agent and outputs HTML, PNG and MP4 |
README in short
It installs three ways: the npm installer, a plugin for Claude Code or Codex, and manual copying of the skill folder. The agent is restarted after installation.