Khám phá Diagram-Design với Claude Code, Claude Cowork và Codex: Đột Phá Tạo Sơ Đồ Biên Tập Chuẩn Đẳng Cấp

Hình 1: Giao diện làm việc chuyên nghiệp khi tích hợp Diagram-Design vào các trợ lý AI.

Trong kỷ nguyên phát triển phần mềm và xây dựng sản phẩm số hiện đại, việc trực quan hóa kiến trúc hệ thống, luồng dữ liệu (data flow) hay quy trình nghiệp vụ đóng vai trò then chốt. Tuy nhiên, lập trình viên và nhà quản lý thường phải đối mặt với một thực tế quen thuộc: yêu cầu AI tạo sơ đồ và nhận lại những hình khối bo tròn nhàm chán, thiếu thẩm mỹ (thường được châm biếm là “Mermaid-slop”), hoặc phải tốn hàng giờ đồng hồ căn chỉnh thủ công trên các công cụ thiết kế truyền thống.

Dưới đây mình sẽ giới thiệu chi tiết về **Diagram-Design** — một skill đột phá do Cathryn Llavery phát triển [1]. Không chỉ hỗ trợ riêng lẻ, Diagram-Design nay đã mở rộng khả năng tương thích toàn diện trên cả **Claude Code**, **Claude Cowork** và **Codex**, mang đến 27 loại sơ đồ biên tập chuẩn thiết kế (editorial quality), tự động nhận diện thương hiệu qua website của bạn trong vòng 60 giây và tạo ra các tệp HTML/SVG tự chứa vô cùng sắc nét [1].

1. Giải mã “Nỗi đau” khi tạo sơ đồ kỹ thuật cùng AI truyền thống

Khi làm việc với các mô hình ngôn ngữ lớn (LLM) trước đây, việc yêu cầu vẽ sơ đồ kiến trúc hệ thống hay lưu đồ giải thuật thường dẫn đến hai kết cục không mấy khả quan: thứ nhất là các sơ đồ nghèo nàn, thiếu nhất quán và không tuân theo bất kỳ hệ thống thiết kế (design system) nào của doanh nghiệp; thứ hai là lập trình viên phải mất từ 30 phút đến hàng giờ đồng hồ để tinh chỉnh lại bố cục, khoảng cách và màu sắc trên các công cụ như Figma hay Miro.

Chính từ những trăn trở này, Diagram-Design ra đời như một lời giải hoàn hảo. Quy tắc cốt lõi của skill này là:

“Quy tắc vàng trong thiết kế tài liệu kỹ thuật: Mỗi node đều phải có lý do tồn tại. Màu sắc điểm nhấn (accent) chỉ dành cho 1–2 thông tin quan trọng nhất mà người đọc cần chú ý ngay từ cái nhìn đầu tiên. Mục tiêu mật độ thông tin luôn được giữ ở mức tinh gọn (4/10).”

2. Hệ sinh thái 27 loại sơ đồ và Sức mạnh Phiên bản 2.0

Phiên bản 2.0 của Diagram-Design mang đến những nâng cấp toàn diện, biến trợ lý AI của bạn thành một “nhà thiết kế đồ họa trưởng” thực thụ với các đặc điểm ưu việt:

• • 27 loại sơ đồ chuyên biệt: Từ Architecture, Flowchart, Sequence, State Machine, ER Diagram, Timeline, Swimlane, Quadrant, Nested, Tree, Org Chart, Layer Stack, Venn, Pyramid, cho đến các biểu đồ nâng cao như Radar, Bar, Line, Gantt, Scatter, High-Level, Process, Medallion, Data Flow, DP Integration, DP Security Matrix, và đặc biệt là Loop (vòng lặp flywheel với shared-memory hub).
• • Tự động nhận diện thương hiệu trong 60 giây: Skill có khả năng quét website của dự án, tự động trích xuất bảng màu (palette) và phông chữ (typography) để áp dụng trực tiếp vào mọi sơ đồ được tạo ra.
• • Hoàn toàn tự chứa (Self-contained HTML + SVG): Mỗi sơ đồ được xuất ra dưới dạng một tệp HTML duy nhất chứa sẵn SVG và CSS nội dòng. Không cần bước build phức tạp, không phụ thuộc vào JavaScript bên ngoài, dễ dàng xem trực tiếp trên mọi trình duyệt.

3. Hướng dẫn Cài đặt và Sử dụng chi tiết trên Claude Code, Claude Cowork và Codex

Để đáp ứng nhu cầu làm việc đa dạng của cộng đồng kỹ sư, Diagram-Design hỗ trợ cấu hình mượt mà trên cả 3 nền tảng phổ biến nhất hiện nay.

3.1. Cài đặt trên Claude Code (Terminal / CLI)

Đối với người dùng ưa chuộng giao diện dòng lệnh (CLI), bạn có thể cài đặt thông qua Git clone hoặc trực tiếp bằng hệ thống plugin:

# Cách 1: Clone repository và tạo symlink
git clone git@github.com:cathrynlavery/diagram-design.git ~/code/diagram-design
ln -s ~/code/diagram-design/skills/diagram-design ~/.claude/skills/diagram-design

# Cách 2: Cài đặt nhanh qua Claude Code Plugin marketplace
/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design

3.2. Cài đặt trên Claude Cowork (Giao diện trực quan)

Đối với người dùng Claude Cowork làm việc trên môi trường desktop/giao diện, việc tích hợp vô cùng trực quan:

• 1. Mở Claude Cowork, đi tới mục Customize.
• 2. Chọn Directory → Plugins → Nhấn dấu cộng (+).
• 3. Dán đường dẫn repository: cathrynlavery/diagram-design và nhấn Sync.
• 4. Kích hoạt và cài đặt skill từ danh sách Personal list.

3.3. Tích hợp trên Codex (Môi trường phát triển mã nguồn)

Diagram-Design hỗ trợ nguyên bản thư mục .codex-plugin với tệp plugin.json được cấu hình sẵn, cho phép các tác nhân Codex tự động nhận diện skill và render sơ đồ kỹ thuật chuẩn xác trong các dự án phát triển phần mềm.

4. Trải nghiệm Thực tế & Quy trình Onboarding

Ngay khi bạn khởi tạo dự án và yêu cầu vẽ sơ đồ đầu tiên, hệ thống sẽ kích hoạt Style Guide Gate để hỏi bạn có muốn tùy chỉnh bảng màu theo thương hiệu riêng hay không [1]. Sau đó, AI sẽ tự động sinh mã nguồn HTML/SVG với độ hoàn thiện cao, tuân thủ nghiêm ngặt các nguyên tắc về khoảng cách và hệ thống phân cấp thị giác [1].

You: “onboard diagram-design to https://yoursite.com”

Claude: → fetches the homepage

→ extracts the dominant palette + font stack

→ maps detected values to semantic roles:

paper, ink, muted, accent, link

→ shows a proposed diff

→ writes your tokens to references/style-guide.md

You: “yes, apply it”

Bảng tổng hợp các loại sơ đồ tiêu biểu

Case Studies Thực Tế: Ứng Dụng Diagram-Design Trong Dự Án

Để hiểu rõ sức mạnh thực sự của Diagram-Design, hãy cùng phân tích 3 trường hợp sử dụng tiêu biểu trong môi trường phát triển phần mềm chuyên nghiệp:

Case Study 1: Xây dựng Sơ đồ Kiến trúc Cloud (Architecture Diagram) cho Hệ thống SaaS

• Bối cảnh: Một đội ngũ phát triển sản phẩm SaaS cần thuyết trình kiến trúc hệ thống từ tầng Reader (Browser), Cloudflare CDN, Astro Origin Server cho đến hệ thống Content CMS và MDX Bundle cho ban quản trị.

• Thách thức trước đây: Mất hơn 45 phút vẽ trên Miro nhưng các đường kết nối (connectors) thường bị đè lên nhau, font chữ không đồng nhất.

• Giải pháp với Diagram-Design: Kỹ sư chỉ cần ra lệnh trên Claude Code: “Make an architecture diagram for our SaaS content platform”. Hệ thống tự động áp dụng chuẩn orthogonal elbows (đường gấp khúc vuông góc), căn chỉnh khoảng cách và xuất ra tệp HTML/SVG tự chứa hoàn hảo.

Case Study 2: Vận hành Vòng lặp Tự tối ưu (The Self-Improving Loop / Flywheel)

• Bối cảnh: Đội ngũ Product Growth muốn minh họa mô hình hoạt động khép kín gồm 6 trạm: Capture, Research, Decide, Act, Measure, Learn xoay quanh một “Shared Memory” hub ở trung tâm.

• Giải pháp với Diagram-Design: Sử dụng loại sơ đồ Loop (kiểu #27 mới trong phiên bản 2.0). Skill tự động định dạng vòng tròn đồng tâm với bán kính chuẩn xác, các mũi tên dòng chảy liền mạch (solid flow arrows) quanh vòng và các đường phản hồi nét đứt (dashed write-back spokes) hướng về trung tâm.

Case Study 3: Mô tả Luồng Quyết định Nghiệp vụ Phức tạp (Flowchart & Sequence)

• Bối cảnh: Xây dựng tài liệu tích hợp API thanh toán trực tuyến cho Mobile App.

• Giải pháp: Kết hợp Flowchart để thể hiện logic rẽ nhánh điều kiện và Sequence Diagram để mô tả các thông điệp trao đổi qua lại giữa Client, API Gateway và Payment Service theo thời gian thực.

Hình ảnh minh họa các loại sơ đồ thực tế

Hình 2: Sơ đồ kiến trúc hệ thống (Architecture)

Hình 3: Lưu đồ quyết định (Flowchart)

Hình 4: Vòng lặp Flywheel (Loop)

Hình 5: Sơ đồ tuần tự (Sequence)

5. Hướng Dẫn Tùy Chỉnh Style, Màu Sắc và Onboarding Tự Động

Một điểm đột phá của Diagram-Design là khả năng **tự động hóa việc nhận diện thương hiệu** thông qua tệp `references/style-guide.md` [1]. Thay vì phải gán mã màu thủ công cho từng node, mọi sơ đồ đều kế thừa các biến ngữ nghĩa (semantic tokens).

5.1. Quy trình Onboarding tự động (60 giây nhận diện thương hiệu)

Khi bạn khởi tạo sơ đồ đầu tiên trong một dự án mới, hệ thống sẽ kích hoạt cổng kiểm tra (Style Guide Gate) và cho phép bạn chọn 1 trong các phương thức trích xuất màu sắc và phông chữ sau [1]:

• 1. Trích xuất từ URL Website: Skill tự động fetch trang web của bạn, phân tích các mã màu chủ đạo và phông chữ, sau đó đề xuất bản cập nhật cho `style-guide.md`.
• 2. Trích xuất từ Skill có sẵn: Đọc các tệp định nghĩa token của các Claude Code skill khác trong hệ thống.
• 3. Trích xuất từ Thư mục cục bộ (Folder): Quét các tệp CSS, JSON hoặc Markdown chứa design system của dự án.
• 4. Nhập thủ công (Manual): Cung cấp trực tiếp các mã màu HEX mong muốn.

5.2. Cấu trúc bảng màu và Token ngữ nghĩa trong style-guide.md

Mặc định, hệ thống sử dụng bảng màu cool editorial palette (nền giấy trắng khói `#f5f5f5`, mực đen tuyền `#2d3142`, điểm nhấn cam nguyên tử `#b5523a`, và xám slate `#4f5d75`) [1]. Bạn có thể dễ dàng tùy chỉnh tệp `style-guide.md` như sau:

<!– Ví dụ cấu hình tùy chỉnh Custom Tokens trong style-guide.md –>
[Roles]
paper: #faf7f2 (Màu nền trang / node mặc định)
paper-2: #ececec (Màu nền container phụ)
ink: #1c1917 (Màu chữ chính và nét vẽ chính)
muted: #78716c (Màu chữ phụ, mũi tên, đường viền mờ)
accent: #b5523a (Màu điểm nhấn cho 1-2 thông tin quan trọng)

6. Kết luận

Diagram-Design không đơn thuần là một công cụ vẽ hình, mà là một cuộc cách mạng nhỏ trong cách chúng ta xây dựng tài liệu kỹ thuật trên các nền tảng AI tiên tiến như Claude Code, Claude Cowork và Codex. Bằng việc kết hợp tư duy logic của AI với các tiêu chuẩn thiết kế biên tập khắt khe, skill này giúp đội ngũ kỹ sư loại bỏ hoàn toàn sự ức chế, đem lại các sản phẩm trực quan, sắc sảo và mang đậm dấu ấn thương hiệu riêng.

Tài liệu tham khảo

[1] C. Llavery, “Diagram Design: Editorial diagrams your designer won’t hate”, GitHub repository, 2026. [Online]. Available: https://github.com/cathrynlavery/diagram-design. [Accessed: Aug 08, 2026].

Vui lòng đăng nhập để bình luận.