Agent Skills › AgentEra/Agently › architecture-diagram

architecture-diagram

GitHub

生成包含内联SVG的深色主题自包含HTML文件，用于可视化软件系统架构、组件及层级关系。

examples/skills_executor/skills/architecture-diagram/SKILL.md AgentEra/Agently

Trigger Scenarios

需要可视化系统组件或架构请求绘制服务间关系图

Install

npx skills add AgentEra/Agently --skill architecture-diagram -g -y

More Options

Non-standard path

npx skills add https://github.com/AgentEra/Agently/tree/main/examples/skills_executor/skills/architecture-diagram -g -y

Use without installing

npx skills use AgentEra/Agently@architecture-diagram

指定 Agent (Claude Code)

npx skills add AgentEra/Agently --skill architecture-diagram -a claude-code -g -y

安装 repo 全部 skill

npx skills add AgentEra/Agently --all -g -y

预览 repo 内 skill

npx skills add AgentEra/Agently --list

SKILL.md

Frontmatter

{
    "name": "architecture-diagram",
    "keywords": [
        "architecture diagram",
        "system design",
        "svg",
        "html",
        "components",
        "layers"
    ],
    "description": "Create a professional, dark-themed software\/system architecture diagram as a single self-contained HTML file with inline SVG. Use when asked to visualize system components, layers, services, or how parts of a codebase fit together."
}

Architecture Diagram

Produce ONE self-contained HTML document (embedded CSS + inline SVG, no JavaScript, no external images; Google Fonts link is allowed). It must render correctly when opened directly in a browser.

Visual design system

Background #020617 with a subtle 40px grid pattern.
Font: JetBrains Mono (monospace) via Google Fonts.
Component boxes: rounded rects (rx="6"), 1.5px stroke, semi-transparent fills. Colour components by role:
- facade / developer surface: fill rgba(8,51,68,0.4), stroke #22d3ee
- core contracts: fill rgba(6,78,59,0.4), stroke #34d399
- plugins / providers: fill rgba(120,53,15,0.3), stroke #fbbf24
- execution environment / capabilities: fill rgba(76,29,149,0.4), stroke #a78bfa
- observation / event bus: fill rgba(251,146,60,0.3), stroke #fb923c
- external / generic: fill rgba(30,41,59,0.5), stroke #94a3b8
Component name at 11px white bold; sublabel at 8-9px #94a3b8.
Arrows via an SVG marker arrowhead; draw connecting arrows before boxes so they sit behind them.

Layout rules

Lay the system out as labelled horizontal bands stacked top-to-bottom, one band per architectural layer, with each layer's components inside its band.
Keep ≥40px vertical gaps between stacked rows; never overlap boxes.
Add a short header (title + subtitle) and a small legend mapping each colour to a layer. Place the legend outside every band.