draw-architecture skill
A skill that renders a system architecture as one HTML page with pan, zoom, node focus and a light or dark theme.
- 147 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The skill reads project files and writes an HTML file; build scripts run locally.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/draw-architectureDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skill reads project files and writes an HTML file; build scripts run locally.
This is third-party code. Review the repository files before installing.
What it does
The `architecture-canvas` skill turns a codebase, an architecture document or a plain description into an interactive diagram. Components are grouped into colour-coded planes and connections light up when a node is selected. The output is one self-contained `index.html`: pan and zoom, a focus mode with a description panel, a theme switch, PNG export and the view state kept in the URL hash. The file is easy to send to a colleague or publish as a page. A plain-words request is enough, for example “build a diagram from docs/architecture.md”.
Who it is for. Team leads and developers who need a readable service map for onboarding, review or documentation without drawing it by hand.
Good fit when
- A newcomer asks how services and data stores connect.
- `docs/architecture.md` should become a diagram you can click through.
- Module dependencies must be visible at a glance before a refactor.
- A diagram is going to be published as a page or attached to an article.
Not a fit when
- You need a UML diagram or a draw.io or Figma file.
- The diagram must be editable with a mouse after generation.
- The page opens without access to Google Fonts and must keep its typeface.
Example request
Build an interactive architecture canvas of this repository: services, queues, databases and external APIs grouped into planes.Limitations
Building and validating needs Node.js. The finished page requests the JetBrains Mono font from Google Fonts, so offline it falls back to another face. The diagram reflects what the agent understood from the code or description and can miss links absent from the files it read. Installing in two places (skills.sh and the npm installer) leaves two copies and the agent loads whichever it finds first. The diagram is static: regenerate it after the code changes.
How to disable. Run `npx skills remove architecture-canvas` or `npx draw-architecture uninstall`, depending on how it was installed. Delete generated HTML files by hand.
FAQ
What is the skill called after installation?
`architecture-canvas`. The npm package is `draw-architecture`, while the agent matches the skill by its directory name on disk.
What do I get as output?
A single `index.html` file. Open it in a browser, send it to a colleague or publish it as a page; no extra dependencies are needed.
Which agents are supported?
Through the `skills` CLI it installs into Claude Code, Codex, Cursor, OpenCode, Copilot, Gemini CLI and others. Claude Code also has the own installer `npx draw-architecture`.
How do I save the diagram as an image?
The page toolbar has PNG export. The export follows the selected theme.
Is internet needed to view the diagram?
The page opens offline, but the JetBrains Mono font loads from Google Fonts. Offline the text uses a fallback face.
Discussion
No questions or reviews yet.
Related
SkillsA skill that draws an interactive isometric map of a repository: buildings sized by real code, flows traced along real calls.
A skill that replaces terminal ASCII with self-contained HTML pages: diagrams, diff reviews, plan reviews, tables and slide decks
Builds interactive architecture diagrams in one HTML file: animated data flows, environment toggles and a step detail panel
Skill that draws architecture, flowchart and sequence diagrams as hand-placed SVG in one house style
stack-diagram is an architecture-diagram skill that embeds logos and fonts in HTML, so the finished file opens offline.
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
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Repository stars | Main difference |
|---|---|---|---|
| draw-architecture (this card) | no | 147 | |
| Architecture Diagram Generator | no | 7,583 | generates a diagram from a description; draw-architecture outputs an explorable page with node focus and PNG export |
| Excalidraw Diagram Skill | no | 5,240 | draws a diagram in Excalidraw for manual editing; here the result is explored rather than edited with a mouse |
README in short
Three install routes, of which one should be chosen. The agent is restarted to pick up the skill. Requests are phrased in plain words: a diagram from code, from a document or from a description.