Architecture Diagrams 1.2

Tiếng Việt

Bản 1.2 thêm cách làm việc theo hai tầng: vẽ sơ đồ tổng quan trước, rồi dựng bản chi tiết cho từng khối, vẽ tay hoặc nhờ AI.

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

• Bấm Dựng bản chi tiết: mỗi khối thành một khung ở đúng vị trí cũ, mỗi đường nối thành một dây giữa hai cổng trên viền khung.
• Cổng mang tên theo quy ước RTL: i_, o_, io_ ở đầu, chữ thường nối bằng _, _n cho tín hiệu tích cực mức thấp. Giao diện bus giữ tên theo giao thức (s_axi_cpu, m_apb).
• Tool tự chọn cạnh đặt cổng để dây không cắt ngang khung khác.
• Sơ đồ tổng quan thay đổi thì bảng chi tiết tự thêm khung, cổng và dây. Tool không tự xoá phần đã vẽ; chỗ nào không còn khớp thì hiện trong mục Kiểm tra.
• ▸ Bên trong tách phần vẽ của một khung ra tab riêng, cổng hai bên luôn khớp nhau.
• ⟲ Sắp lại bên trong xếp các khối trong khung thành cột, tín hiệu đi từ cổng vào sang cổng ra, rồi nới khung cho vừa. Các khung bên cạnh dịch ra để giữ nguyên hàng.

Ghi chú dán

• Bấm phím N để dán ghi chú vào khối, khung hoặc dây. Mỗi ghi chú có loại (ràng buộc, lý do, câu hỏi, việc cần làm…), ngày và người viết.
• Tool gợi ý sẵn ghi chú dựa trên sơ đồ, ví dụ tín hiệu qua hai miền clock hay chân còn trống.
• Ghi chú đi kèm khi lưu ra draw.io và mở lại.

AI ngay trong trang

• Chọn một hay nhiều khối, bấm ✦ AI rồi gõ yêu cầu; tab AI bên trái nhận yêu cầu cho cả sơ đồ.
• AI trả về các thao tác sửa. Tool kiểm tra nối dây, cho AI tự sửa tối đa 2 lần, tô màu phần thay đổi để xem trước, rồi áp dụng thành một bước hoàn tác kèm ghi chú của AI.
• Những gì người dùng sửa trong lúc AI đang làm vẫn được giữ.
• Cần chạy python3 architecture-diagrams/scripts/ai_bridge.py trên máy có Claude Code đã đăng nhập (gói Claude là đủ, không cần khoá API). Cầu nối chỉ nghe trên máy đó và tắt mọi công cụ của Claude.

Cho agent và dòng lệnh: assist.py --board, assist.py --inside KHUNG, thao tác tidyFrame, và hai công cụ MCP mới diagram_build_board, diagram_open_inside.

Kiểm thử: 113 bài kiểm thử đơn vị và 21 nhóm kiểm thử trên trình duyệt (437 điểm kiểm), cùng một lần chạy thật với Claude qua cầu nối.

English

1.2 adds a two-level way of working: draw the overview, then build the detail of each block by hand or with AI.

• Detail board: every block of an overview becomes a frame in the same place, every connection a wire between named RTL ports (i_/o_/io_, snake_case, _n for active-low; bus interfaces such as s_axi_cpu keep their protocol names). Ports take the side that keeps wires clear of other frames. The board follows later changes to the overview and never deletes what was drawn. ▸ Inside moves a frame's content to its own tab with its ports kept in step; ⟲ Tidy inside lays the content out in columns from inputs to outputs and makes room for it.
• Sticky notes with kind, date and author, attached to blocks, frames or wires; suggested notes from the diagram; kept in draw.io files.
• AI in the page: ✦ AI next to selected blocks and an AI tab. The answer is checked, fixed by the AI (twice at most), previewed and applied as one undo step with a note. Needs scripts/ai_bridge.py and a signed-in Claude Code on the same computer (a Claude seat is enough).
• Agents: assist.py --board, --inside, the tidyFrame op, MCP tools diagram_build_board and diagram_open_inside.
• Tests: 113 unit tests, 21 browser groups (437 checks), and a live run with Claude through the bridge.

Architecture Diagrams 1.1

Bản 1.1 của Architecture Diagrams: sửa nhanh an toàn hơn, 30 mạch mẫu, gợi ý theo loại sơ đồ và mục "Bước tiếp theo".

Tải về

• architecture-diagrams.zip (cũng là architecture-diagrams.skill): skill cho Claude. Với Claude Code, giải nén vào ~/.claude/skills/. Với ứng dụng Claude, tải file zip lên phần Skills trong Settings.
• architecture-diagrams-editor.html: trình sửa chạy được khi không có mạng, dành cho người không dùng AI. Mở bằng Chrome, Edge, Firefox hoặc Safari.
• MCP server và hướng dẫn cho AI chat bất kỳ nằm trong mã nguồn; xem README.

Có gì mới trong bản này

• Sửa nhanh trong danh sách kiểm tra: lỗi nối dây và lỗi đặt tên có nút sửa. Nút "sửa hết" chỉ áp những chỗ chắc chắn và gộp thành một bước hoàn tác. Tên gõ sai chỉ được sửa khi không có tên nào khác gần bằng.
• 30 mạch mẫu chia 4 nhóm:
  • Mạch số: đồng bộ 2 tầng, đồng bộ reset, đồng bộ xung, cổng clock, chia đôi tần số, bắt sườn lên, thanh ghi dịch, thanh ghi có enable, LFSR.
  • SoC, IP và kiểm thử: SoC RISC-V tối thiểu, cầu AXI sang APB, crossbar TL-UL, FIFO bất đồng bộ, khối UART và SPI, cây clock và reset, testbench UVM.
  • Phần mềm: web ba lớp, microservice, hướng sự kiện, serverless, luồng dữ liệu, luồng ML, Kubernetes, CI/CD.
  • Lưu đồ và máy trạng thái: quy trình duyệt, đăng nhập có thử lại, FSM điều khiển, bộ nhận UART, quy trình thiết kế ASIC.
• Mẫu đặt cạnh khối đang chọn sẽ tự nối dây tới từng chân, chạy theo clock của khối đó và không đè lên khung khác.
• Gợi ý theo loại sơ đồ: mạch, SoC, phần mềm, lưu đồ, máy trạng thái. Khi không chọn khối nào, mục "Bước tiếp theo" gợi ý cho cả tab. Ví dụ: nối lại hai khối sau khi xoá khối ở giữa, nối khối đứng riêng, gom khung khi sơ đồ đã lớn.
• Phím 1 đến 8 chọn gợi ý; phím Tab thêm khối mờ đang xem trước; có nút tắt khối mờ.
• Tab trống có khung "Bắt đầu từ đâu?" với mẫu tiêu biểu từng nhóm và ô dán câu trả lời của AI (cả sơ đồ hoặc {"ops": [...]}).
• Cho AI và agent: scripts/assist.py và 4 tool MCP mới (diagram_patterns, diagram_insert_pattern, diagram_apply_ops, diagram_suggest) chạy chính code của trang.
• Sửa 11 lỗi từ một lượt soát code độc lập.
• Kiểm thử: 17 nhóm kiểm thử trên trình duyệt (357 phép kiểm) và 52 kiểm thử đơn vị.

---

1.1: quick fixes that apply only when certain, 30 ready-made patterns in four groups, suggestions by kind of diagram and Next steps for the whole tab, a start panel for empty tabs, and four new MCP tools that run the page's own code. Assets: the skill (.zip / .skill) for Claude, and an offline editor page. Checks: 52 unit tests, 17 browser groups (357 checks).

Architecture Diagrams 1.0

Bản đầu tiên của Architecture Diagrams: vẽ sơ đồ phần mềm và vi mạch thành một trang HTML tương tác, chạy không cần mạng, mở và lưu được file draw.io.

Tải về

• architecture-diagrams.zip (cũng là architecture-diagrams.skill): skill cho Claude. Với Claude Code, giải nén vào ~/.claude/skills/. Với ứng dụng Claude, tải file zip lên phần Skills trong Settings.
• architecture-diagrams-editor.html: trình sửa chạy được khi không có mạng, dành cho người không dùng AI. Mở bằng Chrome, Edge, Firefox hoặc Safari.
• MCP server và hướng dẫn cho AI chat bất kỳ nằm trong mã nguồn; xem README.

Có gì trong bản này

• Sơ đồ khối, kiến trúc, luồng, quy trình, máy trạng thái; cây clock và reset, sơ đồ mạch vẽ tới từng chân; giản đồ thời gian WaveDrom, bản đồ thanh ghi, bản đồ địa chỉ, sơ đồ chip kiểu datasheet, sơ đồ chân.
• Trình sửa: bảng nhập liệu chia tab, ô bắt buộc, kiểm tra lỗi nhập và lỗi nối dây, kéo thả, chọn nhiều khối, căn hàng, chép và dán, hoàn tác.
• draw.io: mở, sửa và lưu lại; những ô không sửa được giữ nguyên.
• Kiểm thử: 15 nhóm kiểm thử trên trình duyệt (297 phép kiểm) và 29 kiểm thử đơn vị.

---

First release: diagrams for software and chip design as one interactive offline HTML page that opens and saves draw.io files. Assets: the skill (.zip / .skill) for Claude, and an offline editor page. See the README for the MCP server and the prompt for any AI chat.