English | Chinese Simplified

What problem is being solved?

Now, drawing architecture diagrams doesn’t require manual effort, right? This skill can help you quickly create warm-toned architecture diagrams similar to Claude’s style (the style shown on the official Claude blog), with warm and clear colors.

There are many drawing skills, but when you actually use them, you’ll find that editing images is especially troublesome. The drawings created by this skill can **export drawio images in high fidelity (since I personally use Drawio the most). This way, when your Agent can’t meet your requirements in detail, you can export Drawio images yourself and quickly make local fine-tuning!

Example

Microservices Architecture

Perfetto Project Architecture

Runtime Mechanism Diagram

In addition to drawing architecture diagrams, Skill can also explain how a mechanism happens at runtime: triggers, participants, states, and observable outputs (examples include Perfetto heapprofd’s sampling and stack unwinding mechanism, see examples/runtime-mechanism.html).

Draw.io Export the demo

When you want to manually modify some details or convert to drawio files for local editing, you can use the one-click export download drawio feature to directly export drawio files and continue manual adjustments in diagrams.net / draw.io. Always control the details!

Tip: Draw.io files will not embed fonts. To ensure local rendering matches browser preview, install Montserrat locally; Otherwise, diagrams.net / draw.io will use the fallback font.

Get Started Quickly

Quick Start is divided into two steps: first install Skill in a location where the agent can read it, then call it in the prompt.

Installation

Provide the following GitHub address directly to your agent (Claude Code, Codex, Cursor, etc.), and it will automatically install it for you:

The Agent automatically selects the appropriate installation location (global or project-local) based on the operating environment.

Usage

Provide the agent with a system description and explicitly require the use of this skill:

Alternatively, the agent can analyze the codebase first and then generate the diagram:

If you want the diagram to be closer to a document or an existing architecture diagram, you can send the link, screenshot, or original description to the agent:

The generated result is usually a .html file. You can view it directly by opening it in a browser, and you can export using the Export menu: Copy Image / Download PNG / Download PDF / Download Draw.io.

Warehouse Structure

SKILL.md retains a clearly ordered creation process and universal contracts. assets/template.html is an executable generation starting point, references/ provides phase- and pattern-specific rules through precise pointers.