New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Architecture Diagram

by CoWork-OS in CoWork-OS/CoWork-OS

Generate polished dark-themed architecture diagrams as standalone HTML files with inline SVG, semantic system grouping, and readable connection flows.

MITAuto-check passedDevelopment

Install Architecture Diagram

skills CLI
$ npx skills add CoWork-OS/CoWork-OS --skill architecture-diagram -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install CoWork-OS/CoWork-OS architecture-diagram --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/CoWork-OS/CoWork-OS.git skills-src && mkdir -p .claude/skills && cp -r skills-src/resources/skills/architecture-diagram .claude/skills/architecture-diagram && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
architecture-diagram
GitHub stars
477
Token cost
~1k tokens
SKILL.md length
407 words
Files
4 (incl. references, assets)
Skills in repo
46
Repo updated
First seen
Licence
MIT

At a glance

Generate polished dark-themed architecture diagrams as standalone HTML files with inline SVG, semantic system grouping, and readable connection flows.

  • Tasks that involve Diagrams
  • SKILL.md covers Purpose, Routing, Trigger Examples and Parameters, plus 3 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
  • Tasks that involve HTML artifacts

What it does

Architecture Diagram is an agent skill from CoWork-OS/CoWork-OS. Generate polished dark-themed architecture diagrams as standalone HTML files with inline SVG, semantic system grouping, and readable connection flows.

Its SKILL.md is about 1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 5 other files, including reference files and assets (for example `references/full-guidance.md`).

It sits in Development, covering Diagrams and HTML artifacts. The repository describes itself as: Local-first personal agentic OS and everything app for coding, knowledge work, web design, automations, and artifacts. The licence is MIT.

When your agent uses it

  • Tasks that involve Diagrams
  • Tasks that involve HTML artifacts

Example prompts

  • “/architecture-diagram”

What it can do on your machine

Read from SKILL.md and the folder at commit 0ace02b. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Architecture Diagram loads about 1k tokens when it runs, and up to ~2.5k if it reads all its reference files. Until then it costs about 43 tokens; SKILL.md has 407 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~43
When it runs · the whole SKILL.md, loaded when a task matches
~1k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~2.5k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from CoWork-OS/CoWork-OS at commit 0ace02b, republished under its MIT licence (© CoWork-OS). 407 words, ~1,005 tokens.

Download SKILL.mdSave it as .claude/skills/architecture-diagram/SKILL.md (or your agent's skills folder). This skill also uses 3 other files; get the full folder from GitHub.
name
architecture-diagram
description
Generate polished dark-themed architecture diagrams as standalone HTML files with inline SVG, semantic system grouping, and readable connection flows.
version
1.0.0
license
MIT
metadata.author
CoWork OS Contributors <info@coworkosapp.com>
metadata.source-author
Cocoon AI, ported by CoWork OS

Architecture Diagram

Purpose

Turn an architecture description or inspected codebase into a self-contained HTML diagram with inline SVG that opens directly in any modern browser.

Routing

  • Use when: Use when the user asks to create a technical architecture diagram, infrastructure map, deployment topology, security/data-flow visual, or a polished system diagram artifact they can open in a browser.
  • Do not use when: Do not use for text-only summaries, requests that require Mermaid or another explicit diagram format, or non-technical visual design tasks such as UI mockups and marketing graphics.
  • Outputs: A standalone HTML architecture diagram plus supporting plan and summary artifacts.
  • Success criteria: The final HTML is readable, self-contained, faithful to the described or inspected system, and free of obvious layout collisions.

Trigger Examples

Positive
  • Create an architecture diagram for this SaaS stack and give me an HTML file.
  • Turn this codebase into a polished cloud architecture diagram.
  • Make a system topology diagram showing services, databases, queues, and auth.
  • Use the architecture-diagram skill for this request.
Negative
  • Summarize this architecture in bullets only.
  • Draw this as Mermaid so I can paste it into Markdown.
  • Design a landing page hero illustration for our product.
  • Create a wireframe for the settings screen.

Parameters

NameTypeRequiredDescription
system_namestringNoShort system or project name for the header
diagram_briefstringNoStructured architecture description
diagram_typeselectNoDiagram emphasis: auto, system-overview, cloud-infrastructure, deployment, data-flow, security, network-topology, microservices
output_pathstringNoWorkspace-relative or absolute HTML output path
Show full SKILL.md (164 more words)Show less

Workflow Notes

  • Start from assets/template.html. Do not freehand the outer page shell unless the request explicitly needs a very different composition.
  • Read references/full-guidance.md before major layout work. It contains the spacing, legend placement, component taxonomy, and arrow-order rules that keep the diagrams readable.
  • If the request is based on a local codebase, inspect the code first and derive components conservatively. Missing certainty is better than invented systems.
  • Prefer a slightly taller or wider SVG over cramped placement. Expanding the viewBox is cheap; unreadable overlaps are not.
  • When updating an existing diagram, preserve the established visual language unless the user asks for a redesign.
  • In the final assistant response, include a standalone ::html{...} directive that points at the generated HTML file so the main conversation view can render the diagram inline.

Reference Map

  • references/full-guidance.md: design system, layout heuristics, and output checklist
  • assets/template.html: starter HTML/SVG template to customize
  • LICENSE.txt: upstream MIT license carried with the bundled port

Runtime Prompt

  • Runtime prompt is defined directly in ../architecture-diagram.json.

© CoWork-OS, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 3 other files (references, assets) in resources/skills/architecture-diagram of CoWork-OS/CoWork-OS.

  • SKILL.md
  • LICENSE.txt
  • assets/template.html
  • references/full-guidance.md

Open the folder on GitHubat commit 0ace02b

Compare with similar skills

Architecture Diagram next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Architecture Diagram compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Architecture Diagram this skillCoWork-OS/CoWork-OS477—~1kAutomated safety check: PassMIT
Whatissuyuan2022/suyuan-skill308—~606Automated safety check: PassMIT
Mobius Architecture Drawmobius-system/mobius139—~1.7kAutomated safety check: PassCustom licence
ArchifyNousResearch/hermes-agent252k—~612Automated safety check: PassMIT
Archify Diagram BuilderUnclecheng-li/AI_Animation1.5k2 repos~4.1kAutomated safety check: PassMIT
Archify Diagramstt-a1i/archify82k—~2.9kAutomated safety check: PassMIT

Similar skills

  • Whatis

    suyuan2022/suyuan-skill

    What Is This — explain anything as a picture-first HTML page.

    308 GitHub stars~606 tokensUpdated 1 mo ago
    DevelopmentAuto-check passed

  • Mobius Architecture Draw

    mobius-system/mobius

    Analyze a Mobius project repository and generate a single-file HTML/SVG architecture diagram at .imac/generatedfigures/arch.html, with optional image fallbacks.

    139 GitHub stars~1.7k tokensUpdated today
    DevelopmentAuto-check passed

  • Archify

    NousResearch/hermes-agent

    Validated interactive HTML diagrams, upstream-maintained. An agent skill from NousResearch/hermes-agent.

    252k GitHub stars~612 tokensUpdated yesterday
    DevelopmentAuto-check passed

  • Archify Diagram Builder

    Unclecheng-li/AI_Animation

    Builds validated architecture, workflow, sequence, data-flow and lifecycle diagrams as standalone interactive HTML from a small JSON spec, with optional motion and image export.

    1.5k GitHub starsUsed in 2 repos~4.1k tokens
    DevelopmentAuto-check passed

  • Archify Diagrams

    tt-a1i/archify

    Creates interactive architecture, workflow, sequence, data-flow and lifecycle diagrams as standalone HTML with inline SVG, themes and image or video export.

    82k GitHub stars~2.9k tokensUpdated today
    DevelopmentAuto-check passed

  • Visual Review

    ai-dynamo/dynamo

    Create self-contained interactive HTML code-review dashboards from GitHub or GitLab pull requests, checked-out branch diffs, or supplied unified diffs, with correctness and safe-to-merge scores…

    8.3k GitHub stars~4.5k tokensUpdated today
    DevelopmentAuto-check passed

More from CoWork-OS/CoWork-OS

All 46 skills in this repo

  • Calendly

    CoWork-OS/CoWork-OS

    Manage Calendly scheduling via the v2 API. An agent skill from CoWork-OS/CoWork-OS.

    480 GitHub stars~595 tokensUpdated today
    Auto-check passed

  • Humanizer

    CoWork-OS/CoWork-OS

    Rewrite AI-generated text to sound natural and human-written.

    480 GitHub stars~557 tokensUpdated today
    Auto-check passed

  • Marketing Strategist

    CoWork-OS/CoWork-OS

    Comprehensive marketing strategy across 25 disciplines — positioning, copywriting frameworks, buyer psychology, SEO, CRO, paid ads, funnel architecture, content strategy, growth loops, analytics…

    480 GitHub stars~893 tokensUpdated today
    Auto-check passed

  • Moltbook

    CoWork-OS/CoWork-OS

    Interact with Moltbook — the social network for AI agents. An agent skill from CoWork-OS/CoWork-OS.

    480 GitHub stars~579 tokensUpdated today
    Auto-check passed

  • Polymarket

    CoWork-OS/CoWork-OS

    Query Polymarket prediction markets — search events, check odds and prices, view trending markets, track price momentum, get orderbook depth, analyze volume, and monitor market resolution timelines.

    480 GitHub stars~616 tokensUpdated today
    Auto-check passed

  • Skill Creator

    CoWork-OS/CoWork-OS

    Create or update AgentSkills for CoWork-OSS. An agent skill from CoWork-OS/CoWork-OS.

    480 GitHub stars~493 tokensUpdated today
    Auto-check passed

Categories

Questions about Architecture Diagram

What does Architecture Diagram do?

Generate polished dark-themed architecture diagrams as standalone HTML files with inline SVG, semantic system grouping, and readable connection flows. Architecture Diagram is an agent skill from CoWork-OS/CoWork-OS. Generate polished dark-themed architecture diagrams as standalone HTML files with inline SVG, semantic system grouping, and readable connection flows.

When should I use Architecture Diagram?

Architecture Diagram fits situations like: tasks that involve Diagrams; tasks that involve HTML artifacts.

How do I install Architecture Diagram in Claude Code?

Run `npx skills add CoWork-OS/CoWork-OS --skill architecture-diagram -a claude-code`. Or copy the skill folder (resources/skills/architecture-diagram in CoWork-OS/CoWork-OS) into .claude/skills/architecture-diagram in your project. Claude Code loads it when a task matches its description.

How do I install Architecture Diagram in Codex?

Run `npx skills add CoWork-OS/CoWork-OS --skill architecture-diagram -a codex`. Or copy the skill folder (resources/skills/architecture-diagram in CoWork-OS/CoWork-OS) into .agents/skills/architecture-diagram in your project. Codex loads it when a task matches its description.

Can I use Architecture Diagram in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add CoWork-OS/CoWork-OS --skill architecture-diagram -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/architecture-diagram, .gemini/skills/architecture-diagram, .github/skills/architecture-diagram and .opencode/skills/architecture-diagram in your project.

What does Architecture Diagram need to run?

SKILL.md names no scripts, command-line tools or credentials: Architecture Diagram is instructions for the agent only.

Does Architecture Diagram access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Architecture Diagram safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Architecture Diagram use?

Architecture Diagram is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Architecture Diagram use?

About 1k tokens (SKILL.md is roughly 4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 1.5k tokens, read only when the agent opens those files.

What are the alternatives to Architecture Diagram?

Skills that share tags, products or a category with Architecture Diagram: Whatis (suyuan2022/suyuan-skill, 308 stars), Mobius Architecture Draw (mobius-system/mobius, 139 stars), Archify (NousResearch/hermes-agent, 252k stars) and Archify Diagram Builder (Unclecheng-li/AI_Animation, 1.5k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Architecture Diagram?

CoWork-OS (a GitHub organization) maintains it in CoWork-OS/CoWork-OS, which has 477 GitHub stars. The repository holds 46 skills in this directory. The repository was last updated on October 9, 2026.

Source: CoWork-OS/CoWork-OS on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.