Archify: Trình tạo sơ đồ kiến trúc AI ngay trong chat

Vấn đề nó giải quyết

Giữ cho sơ đồ kiến trúc luôn cập nhật là việc chẳng ai muốn: bạn mở draw.io hay viết Mermaid, đặt tay từng hộp, rồi làm lại mỗi khi hệ thống thay đổi. Ảnh chụp bảng trắng lỗi thời ngay lập tức, còn một sơ đồ Mermaid trong README chỉ có một theme trong khi người đọc có thể đang xem ở theme kia. Archify sinh ra để cắt bỏ khâu vẽ tay — bạn mô tả hệ thống cho một agent mình vốn đã dùng và nhận về sơ đồ.

Đây là gì?

Archify là trình tạo sơ đồ kiến trúc AI được đóng gói dưới dạng agent skill cho Claude, Codex CLI và opencode. Bạn mô tả một hệ thống hay quy trình bằng tiếng Anh và nó tạo ra một file HTML tự chứa duy nhất — không phụ thuộc, không cần cài runtime — hiển thị sơ đồ với nút chuyển theme dark/light tích hợp sẵn. Ngoài kiến trúc, nó vẽ được sơ đồ workflow, sequence, data-flow và lifecycle từ một biểu diễn trung gian JSON có kiểu, đi qua kiểm tra schema và layout trước khi render. Dự án dùng giấy phép MIT và hiện ở phiên bản 2.10.

Vì sao đang được chú ý

Agent skill đang là cách phổ biến để bổ sung năng lực cho Claude và các coding agent khác, và vẽ sơ đồ là một ứng dụng hợp lý — mô hình vốn đã đọc codebase của bạn, nên để nó vẽ luôn kiến trúc chỉ là một bước ngắn. Archify cài bằng một lệnh `npx skills add`, hoạt động với Claude, Codex CLI và opencode, và tự định vị là một lựa chọn thay Mermaid giải quyết bài toán README hai theme. Sự kết hợp đó đã đưa nó vượt 3.600 sao.

Tính năng chính

• ✓Năm loại sơ đồ từ một skill: architecture, workflow, sequence, data-flow và lifecycle/state-machine
• ✓Đầu ra là một file HTML tự chứa duy nhất, không phụ thuộc — mở trong bất kỳ trình duyệt nào và chia sẻ bằng cách gửi file
• ✓Nút chuyển theme dark/light một chạm (phím T), lưu trạng thái qua các phiên
• ✓Xuất raster ra PNG, JPEG hoặc WebP được render gốc ở độ phân giải tới 4x, cộng thêm SVG — hoặc Copy PNG thẳng vào clipboard
• ✓Xuất SVG kèm cả hai theme với quy tắc @media (prefers-color-scheme), nên một file trong README GitHub tự theo lựa chọn màu của mỗi người đọc
• ✓Sơ đồ dạng renderer đi qua kiểm tra JSON-schema và layout cùng một bước hậu kiểm artifact trước khi giao
• ✓Nhãn công nghệ ngữ nghĩa như aws.lambda, postgres hay redis được ánh xạ sang nhóm hình ảnh mà không cần thư viện icon đầy đủ

Trường hợp dùng tốt nhất

• •Ghi lại kiến trúc runtime của một repo bằng cách nhờ agent phân tích code rồi vẽ các thành phần, luồng dữ liệu và ranh giới tin cậy
• •Vẽ một workflow CI/CD hay phê duyệt với đường happy path rõ ràng cùng các lane ngoại lệ và bất đồng bộ
• •Giải thích một đường request bằng sơ đồ sequence — ví dụ cache miss rồi fallback từ Redis sang Postgres
• •Vẽ một data pipeline với ranh giới PII, hay một state machine của task/order, rồi tinh chỉnh qua chat
• •Đặt một SVG nhận biết theme vào README GitHub để khớp với người đọc ở chế độ tối lẫn sáng

Cách cài đặt / dùng thử

Cài toàn cục bằng một lệnh: `npx skills add tt-a1i/archify -g`, rồi chọn agent (Claude Code, Codex CLI hoặc opencode) khi được hỏi. Muốn thử mà không cài lâu dài, `npx skills use tt-a1i/archify@archify --agent codex` khởi động một bản tạm. Bạn cũng có thể giải nén gói `archify.zip` vào thư mục skills của agent, hoặc tải nó lên trong Settings -> Capabilities -> Skills trên Claude.ai. Nó đi kèm sẵn các validator độc lập, nên không có bước `npm install`.

Cách sử dụng

Sau khi cài, hãy nhắc agent kiểu như `Use archify to draw an architecture diagram: React frontend calls a Node API backed by Postgres and Redis`. Nó trả về một file HTML tự chứa; mở ra, nhấn T để đổi theme hoặc E để mở menu xuất, rồi lưu thành PNG, JPEG, WebP hoặc SVG. Tinh chỉnh qua chat — `add Redis`, `move auth to the left`, `highlight the rollback path` — và nó sửa phần JSON bên dưới thay vì vẽ lại từ đầu. Một CLI đi kèm (`bin/archify.mjs`) có thể render, validate và kiểm tra sơ đồ trực tiếp.

Lựa chọn thay thế

Ai nên thử — và ai nên bỏ qua

Lập trình viên và nhóm vốn đã làm việc trong Claude, Codex CLI hoặc opencode và muốn có sơ đồ kiến trúc, workflow hay sequence như một sản phẩm phụ của việc chat với agent — nhất là ai đã ngán việc duy trì sơ đồ hai theme trong README. Nếu bạn không dùng agent được hỗ trợ, hoặc cần kiểm soát thủ công chính xác từng hộp và đường nối, một công cụ trực tiếp như draw.io hay Excalidraw sẽ hợp hơn.

Câu hỏi thường gặp