Architecture Diagrams

Vẽ sơ đồ 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, mở và lưu được file draw.io, và có trình sửa với kiểm tra nhập liệu và nối dây.

Diagrams for software and chip design as one interactive HTML page that works offline, opens and saves draw.io files, and has an editor with input and wiring checks.

✎ Mở trình sửa trống · Open the editor GitHub Tải về · Download

Trang mẫu · Examples

Cây clock và reset, mạch CDC

PLL, bộ chọn clock, clock gate, bộ đồng bộ; mạch CDC vẽ tới từng chân. Clock tree and a pin-level CDC circuit.

ICSymbols

Hình datasheet vi điều khiển

Sơ đồ chip có bus và miền nguồn, sơ đồ chân LQFP48. Datasheet block diagram and pinout.

ChipPinout

IP UART

Sơ đồ khối có cổng, máy trạng thái, giản đồ thời gian APB và UART, bản đồ thanh ghi. Block, FSM, timing and registers.

WaveDromRegisters

Sơ đồ khối SoC

Bus, bộ nhớ, ngoại vi, các bước khởi động và bản đồ địa chỉ. SoC blocks, boot walkthrough and address map.

SoCMemory map

Quy trình thiết kế chip

Các giai đoạn và vòng làm lại. Design flow with rework loops.

Process

Luồng đặt hàng

Luồng chính và cách xử lý lỗi, mỗi phần một tab. Checkout flow and failure handling.

Software

Kiến trúc web app

Biểu tượng chuẩn cho server, database, cloud, bảo mật. Web app architecture with standard icons.

Icons

Mở file draw.io

Một file draw.io mẫu, vẽ bằng thư viện hình gốc của draw.io; sửa xong lưu lại thành draw.io. A draw.io file opened, edited and saved back.

draw.io

Bảng chi tiết từ sơ đồ tổng quan

Mỗi khối của sơ đồ tổng quan thành một khung có cổng đặt tên theo RTL; khối UART do AI vẽ bên trong, kèm ghi chú dán. A detail board from an overview: every block a frame with named ports; the UART drawn inside by AI, with sticky notes.

Detail boardAINotes

Trình sửa

Bảng có kiểm tra lỗi và nút sửa nhanh, 30 mạch mẫu, gợi ý và bước tiếp theo, bảng chi tiết, ghi chú dán và AI ngay trong trang. Checks with quick fixes, 30 patterns, suggestions, detail boards, sticky notes and AI in the page.

Editor

Bốn cách dùng · Four ways to use it

ClaudeCài thư mục architecture-diagrams làm skill rồi nhờ Claude vẽ. Install the folder as a skill.
MCPĐăng ký scripts/mcp_server.py cho Codex CLI, Cursor, VS Code, Gemini CLI. Register the MCP server.
AI chat bất kỳ · Any AI chatTrong trình sửa, tab JSON, bấm "Chép prompt cho AI" rồi dán vào ChatGPT hoặc Gemini. Copy the prompt, paste the answer back.
Không cần AI · No AIMở trình sửa, nhập bảng, dán từ Excel, kéo thả. Fill in tables, paste from Excel, drag and drop.