quangdangle

Architecture Diagrams Skill — Design skill for Claude Code

Design community

Diagrams for software and chip design as one interactive offline HTML page: block diagrams, clock trees, pin-level schematics, WaveDrom timing, register maps, pinouts.

How to install Architecture Diagrams Skill

This entry records only its repository, not the path inside it, so there is no exact command to give. Open quangdangle/architecture-diagrams-skill and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Architecture Diagrams Skill does

Diagrams for software and chip design as one interactive offline HTML page: block diagrams, clock trees, pin-level schematics, WaveDrom timing, register maps, pinouts. Opens and saves draw.io. Works with Claude, MCP agents or any AI chat.

Alternatives in Design

Plannotator — Interactive plan review UI for Claude Code with visual annotation, offline sharing, and Obsidian/Bear integrat 3.3k ★
WP Block Themes — WordPress block theme development 902 ★
Sadd Architecture — Software Architecture Design Documents 663 ★

README

Architecture Diagrams

Vẽ sơ đồ cho phần mềm và thiết kế vi mạch thành **một trang HTML tương tác**. Trang chạy không cần mạng và mở, lưu được file **draw.io**. Dùng được với Claude, với mọi agent hỗ trợ MCP, với AI chat bất kỳ, hoặc không cần AI.

*English: [see below](#english).*

**Xem thử ngay trên web:** [các trang mẫu](https://quangdangle.github.io/architecture-diagrams-skill/) và [trình sửa trống](https://quangdangle.github.io/architecture-diagrams-skill/editor.html).

Tiếng Việt

Tool làm được gì

Phần mềm: sơ đồ kiến trúc, sơ đồ khối, luồng xử lý, pipeline dữ liệu, quy trình có duyệt và làm lại, máy trạng thái. Có sẵn 165 biểu tượng Lucide.
Vi mạch: cây clock và reset, mạch CDC, sơ đồ mạch vẽ tới từng chân. Bộ ký hiệu gồm cổng logic, flip-flop, mux, PLL, ADC, linh kiện thụ động và transistor.
Hình kiểu datasheet: giản đồ thời gian theo định dạng WaveDrom, bản đồ thanh ghi, bản đồ địa chỉ, sơ đồ chip có bus và miền nguồn, sơ đồ chân LQFP, QFN, SOIC, BGA.
Trình sửa ngay trong trang:
- Bảng nhập liệu chia theo tab: khối, đường nối, nhóm, các bước, chú giải, thiết lập.
- Ô bắt buộc có dấu *; mỗi ô có ghi chú; ô nhập sai có viền đỏ và lời giải thích ngay bên dưới.
- Kéo thả, nối dây vào đúng chân, chọn nhiều khối, căn hàng, chép và dán.
- Sửa chữ ngay trên hình, dán bảng từ Excel.
- Hoàn tác, có lịch sử từng bước và các mốc đã lưu.
draw.io: mở file .drawio và vẽ giống hệt draw.io, sửa xong lưu lại thành .drawio. Những phần không bị sửa được giữ nguyên như cũ.
Xuất file: SVG, PNG, Mermaid, CSV. Có nút chép ảnh để dán thẳng vào Word, PowerPoint hoặc Teams.
Không cần cài gì, không cần mạng, không cần Figma. Chỉ cần một trình duyệt.