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 mateaix in mateaix/mateclaw

Dark-themed SVG architecture/cloud/infra diagrams as HTML. An agent skill from mateaix/mateclaw.

Apache-2.0Auto-check passedDevelopment

Install Architecture Diagram

skills CLI
$ npx skills add mateaix/mateclaw --skill architecture-diagram -a claude-code

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

GitHub CLI
$ gh skill install mateaix/mateclaw 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/mateaix/mateclaw.git skills-src && mkdir -p .claude/skills && cp -r skills-src/mateclaw-server/src/main/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
1.2k
Used in
5 other repos
Token cost
~1.7k tokens
SKILL.md length
749 words
Files
2
Skills in repo
17
Repo updated
First seen
Licence
Apache-2.0

At a glance

Dark-themed SVG architecture/cloud/infra diagrams as HTML. An agent skill from mateaix/mateclaw.

  • Works in 5 steps: User describes their system architecture… → Generate the HTML file following the… → Save with write_file to a .html file… → …
  • Tasks that involve Diagrams
  • SKILL.md covers Scope, Workflow, Design System & Visual Language and Technical Implementation Details, plus 3 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Architecture Diagram is an agent skill from mateaix/mateclaw. Dark-themed SVG architecture/cloud/infra diagrams as HTML.

Its SKILL.md is about 1.7k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files.

It sits in Development, covering Diagrams. The repository describes itself as: 🤖 MateClaw — Your second brain with Multi-Agent Orchestration, MCP Protocol, Skills & Memory, Dream, and Multi-Channel Support. Built on Spring AI Alibaba. The licence is Apache-2.0.

When your agent uses it

  • Tasks that involve Diagrams

Example prompts

  • “/architecture-diagram”

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  1. User describes their system architecture (components, connections, technologies)
  2. Generate the HTML file following the design system below
  3. Save with write_file to a .html file (e.g. ~/architecture-diagram.html)
  4. If the user wants to view/share the diagram in chat (web console, WeCom / 企业微信, DingTalk, Feishu, Telegram, ...): call…
  5. Otherwise, the user opens the .html directly in a browser — works offline, no dependencies.

What it can do on your machine

Read from SKILL.md and the folder at commit 10aad3b. 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 (its code samples are bash, svg and html).

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

  • Network

    Links to these hosts (documentation or services it may open):

    • github.com

    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 1.7k tokens when it runs. Until then it costs about 20 tokens; SKILL.md has 749 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~20
When it runs · the whole SKILL.md, loaded when a task matches
~1.7k

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 mateaix/mateclaw at commit 10aad3b, republished under its Apache-2.0 licence (© mateaix). 749 words, ~1,673 tokens.

Download SKILL.mdSave it as .claude/skills/architecture-diagram/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
architecture-diagram
description
Dark-themed SVG architecture/cloud/infra diagrams as HTML.
version
1.0.0
tags
architecture, diagrams, SVG, HTML, visualization, infrastructure, cloud
author
ported

Architecture Diagram Skill

Generate professional, dark-themed technical architecture diagrams as standalone HTML files with inline SVG graphics. No external tools, no API keys, no rendering libraries — just write the HTML file and open it in a browser.

Scope

Best suited for:

  • Software system architecture (frontend / backend / database layers)
  • Cloud infrastructure (VPC, regions, subnets, managed services)
  • Microservice / service-mesh topology
  • Database + API map, deployment diagrams
  • Anything with a tech-infra subject that fits a dark, grid-backed aesthetic

Look elsewhere first for:

  • Physics, chemistry, math, biology, or other scientific subjects
  • Physical objects (vehicles, hardware, anatomy, cross-sections)
  • Floor plans, narrative journeys, educational / textbook-style visuals
  • Hand-drawn whiteboard sketches (consider excalidraw)
  • Animated explainers (consider an animation skill)

If a more specialized skill is available for the subject, prefer that. If none fits, this skill can also serve as a general SVG diagram fallback — the output will just carry the dark tech aesthetic described below.

Based on Cocoon AI's architecture-diagram-generator (MIT).

Workflow

  1. User describes their system architecture (components, connections, technologies)
  2. Generate the HTML file following the design system below
  3. Save with write_file to a .html file (e.g. ~/architecture-diagram.html)
  4. If the user wants to view/share the diagram in chat (web console, WeCom / 企业微信, DingTalk, Feishu, Telegram, ...): call render_html_image(filePath="<the .html path>", filename="<name>") and return the markdown link it produces. IM channels can only deliver rasterised images natively, so a PNG is required for the diagram to appear inline rather than as a dead link or a file attachment.
  5. Otherwise, the user opens the .html directly in a browser — works offline, no dependencies.
Output Location

Save diagrams to a user-specified path, or default to the current working directory:

./[project-name]-architecture.html
Delivering through chat / IM channels

When the current channel is anything other than a local browser session, follow up write_file with:

render_html_image(filePath="./architecture-diagram.html", filename="architecture")

This returns a /api/v1/files/generated/<id> URL with image/png MIME. The channel layer detects the image MIME and uploads the PNG as a native image message (so it renders inline in WeCom / DingTalk / Feishu / Telegram / Web). Without this step, an .html artifact reaches IM channels as either a dead markdown link or, at best, a non-previewable file attachment.

Local preview

After saving, the user can open the .html directly:

bash
# macOS
open ./my-architecture.html
# Linux
xdg-open ./my-architecture.html

Design System & Visual Language

Color Palette (Semantic Mapping)

Use specific rgba fills and hex strokes to categorize components:

Component TypeFill (rgba)Stroke (Hex)
Frontendrgba(8, 51, 68, 0.4)#22d3ee (cyan-400)
Backendrgba(6, 78, 59, 0.4)#34d399 (emerald-400)
Databasergba(76, 29, 149, 0.4)#a78bfa (violet-400)
AWS/Cloudrgba(120, 53, 15, 0.3)#fbbf24 (amber-400)
Securityrgba(136, 19, 55, 0.4)#fb7185 (rose-400)
Message Busrgba(251, 146, 60, 0.3)#fb923c (orange-400)
Externalrgba(30, 41, 59, 0.5)#94a3b8 (slate-400)
Typography & Background
  • Font: JetBrains Mono (Monospace), loaded from Google Fonts
  • Sizes: 12px (Names), 9px (Sublabels), 8px (Annotations), 7px (Tiny labels)
  • Background: Slate-950 (#020617) with a subtle 40px grid pattern
svg
<!-- Background Grid Pattern -->
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
  <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#1e293b" stroke-width="0.5"/>
</pattern>
Show full SKILL.md (286 more words)Show less

Technical Implementation Details

Component Rendering

Components are rounded rectangles (rx="6") with 1.5px strokes. To prevent arrows from showing through semi-transparent fills, use a double-rect masking technique:

  1. Draw an opaque background rect (#0f172a)
  2. Draw the semi-transparent styled rect on top
Connection Rules
  • Z-Order: Draw arrows early in the SVG (after the grid) so they render behind component boxes
  • Arrowheads: Defined via SVG markers
  • Security Flows: Use dashed lines in rose color (#fb7185)
  • Boundaries:
    • Security Groups: Dashed (4,4), rose color
    • Regions: Large dashed (8,4), amber color, rx="12"
Spacing & Layout Logic
  • Standard Height: 60px (Services); 80-120px (Large components)
  • Vertical Gap: Minimum 40px between components
  • Message Buses: Must be placed in the gap between services, not overlapping them
  • Legend Placement: CRITICAL. Must be placed outside all boundary boxes. Calculate the lowest Y-coordinate of all boundaries and place the legend at least 20px below it.

Document Structure

The generated HTML file follows a four-part layout:

  1. Header: Title with a pulsing dot indicator and subtitle
  2. Main SVG: The diagram contained within a rounded border card
  3. Summary Cards: A grid of three cards below the diagram for high-level details
  4. Footer: Minimal metadata
Info Card Pattern
html
<div class="card">
  <div class="card-header">
    <div class="card-dot cyan"></div>
    <h3>Title</h3>
  </div>
  <ul>
    <li>• Item one</li>
    <li>• Item two</li>
  </ul>
</div>

Output Requirements

  • Single File: One self-contained .html file
  • No External Dependencies: All CSS and SVG must be inline (except Google Fonts)
  • No JavaScript: Use pure CSS for any animations (like pulsing dots)
  • Compatibility: Must render correctly in any modern web browser

Template Reference

Load the full HTML template for the exact structure, CSS, and SVG component examples:

skill_view(name="architecture-diagram", file_path="templates/template.html")

The template contains working examples of every component type (frontend, backend, database, cloud, security), arrow styles (standard, dashed, curved), security groups, region boundaries, and the legend — use it as your structural reference when generating diagrams.

© mateaix, Apache-2.0. 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 1 other file in mateclaw-server/src/main/resources/skills/architecture-diagram of mateaix/mateclaw.

  • SKILL.md
  • templates/template.html

Open the folder on GitHubat commit 10aad3b

Used in 5 other repositories

We found 6 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 5 other GitHub owners. This page covers the copy in mateaix/mateclaw, which our catalogue first saw on October 7, 2026.

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 skillmateaix/mateclaw1.2k5 repos~1.7kAutomated safety check: PassApache-2.0
Architecture Diagramsmallnest/pigo4791 repos~1.6kAutomated safety check: PassMIT
HTML Diagramplannotator/effective-html3.6k—~678Automated safety check: PassMIT
Process Flow DiagramCocoon-AI/process-flow-diagram-generator103—~4.3kAutomated safety check: PassMIT
Whatissuyuan2022/suyuan-skill308—~606Automated safety check: PassMIT
Mobius Architecture Drawmobius-system/mobius138—~1.7kAutomated safety check: PassCustom licence

Similar skills

  • Architecture Diagram

    smallnest/pigo

    Create professional, dark-themed architecture diagrams as standalone HTML files with SVG graphics.

    479 GitHub starsUsed in 1 repo~1.6k tokens
    DevelopmentAuto-check passed

  • HTML Diagram

    plannotator/effective-html

    Direct-invocation specialist for self-contained HTML diagrams whose layout, notation, and interaction clarify relationships, sequence, topology, state, hierarchy, or quantitative structure.

    3.6k GitHub stars~678 tokensUpdated 26 days ago
    DevelopmentAuto-check passed

  • Process Flow Diagram

    Cocoon-AI/process-flow-diagram-generator

    Create polished dark-themed process flow diagrams as self-contained HTML+SVG files.

    103 GitHub stars~4.3k tokensUpdated 4 mo ago
    DevelopmentAuto-check passed

  • 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.

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

  • Flowchart

    Unclecheng-li/AI_Animation

    生成教育/科普类流程图、概念图、原理演示的动画 HTML 页面。用 CSS/SVG 绘制节点和连线，支持流动箭头、逐步出现、hover 高亮等动画效果。适合技术讲解、视频科普、PPT 配图场景。

    1.5k GitHub stars~616 tokensUpdated 5 days ago
    DevelopmentAuto-check passed

More from mateaix/mateclaw

All 17 skills in this repo

  • Pixel Art

    mateaix/mateclaw

    Pixel art w/ era palettes (NES, Game Boy, PICO-8). An agent skill from mateaix/mateclaw.

    1.2k GitHub starsUsed in 5 repos~1.8k tokens
    Auto-check passed

  • DOCX

    mateaix/mateclaw

    A skill your agent uses whenever the user wants to create, read, edit, or manipulate Word documents (.docx files).

    1.2k GitHub stars~4.1k tokensUpdated yesterday
    Auto-check passed

  • XLSX

    mateaix/mateclaw

    Use this skill any time a spreadsheet file is the primary input or output.

    1.2k GitHub stars~1.5k tokensUpdated yesterday
    Auto-check passed

  • Subagent Driven Development

    mateaix/mateclaw

    Execute plans via delegatetask subagents (2-stage review). An agent skill from mateaix/mateclaw.

    1.2k GitHub starsUsed in 3 repos~2.6k tokens
    Auto-check passed

  • Ideation

    mateaix/mateclaw

    Generate project ideas via creative constraints. An agent skill from mateaix/mateclaw.

    1.2k GitHub starsUsed in 2 repos~1.5k tokens
    Auto-check passed

  • Officecli

    mateaix/mateclaw

    Use the optional iOfficeAI/OfficeCLI engine for advanced inspection, validation, copy-on-write editing, template merge, or visual rendering of existing .docx, .xlsx, and .pptx files.

    1.2k GitHub stars~844 tokensUpdated yesterday
    Auto-check passed

Categories

Questions about Architecture Diagram

What does Architecture Diagram do?

Dark-themed SVG architecture/cloud/infra diagrams as HTML. An agent skill from mateaix/mateclaw. Architecture Diagram is an agent skill from mateaix/mateclaw. Dark-themed SVG architecture/cloud/infra diagrams as HTML.

When should I use Architecture Diagram?

Architecture Diagram fits situations like: tasks that involve Diagrams.

How do I install Architecture Diagram in Claude Code?

Run `npx skills add mateaix/mateclaw --skill architecture-diagram -a claude-code`. Or copy the skill folder (mateclaw-server/src/main/resources/skills/architecture-diagram in mateaix/mateclaw) 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 mateaix/mateclaw --skill architecture-diagram -a codex`. Or copy the skill folder (mateclaw-server/src/main/resources/skills/architecture-diagram in mateaix/mateclaw) 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 mateaix/mateclaw --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 names 1 domain. As links in the text: github.com. 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 Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Architecture Diagram use?

About 1.7k tokens (SKILL.md is roughly 6.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Architecture Diagram?

Skills that share tags, products or a category with Architecture Diagram: Architecture Diagram (smallnest/pigo, 479 stars), HTML Diagram (plannotator/effective-html, 3.6k stars), Process Flow Diagram (Cocoon-AI/process-flow-diagram-generator, 103 stars) and Whatis (suyuan2022/suyuan-skill, 308 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Architecture Diagram?

mateaix (a GitHub user) maintains it in mateaix/mateclaw, which has 1,152 GitHub stars. The repository holds 17 skills in this directory. The repository was last updated on October 9, 2026.

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