Diagram Design: Sơ Đồ Editorial Cho Claude Code

Diagram Design Cung Cấp Những Gì

Diagram Design là một skill Claude Code — cài được dưới dạng plugin hoặc repo gắn symlink — tạo ra 27 kiểu sơ đồ phong cách editorial dưới dạng file HTML tự chứa với SVG nhúng sẵn, không cần bước build và không dùng ảnh ngoài. Mỗi sơ đồ có ba biến thể (minimal light, minimal dark, full-editorial), và skill này có thể đọc một website mục tiêu để lấy bảng màu và font chữ, áp dụng cho mọi sơ đồ tạo ra sau đó.

Vấn Đề Với Các Sơ Đồ Chung Chung

Người tạo ra Diagram Design, Cathryn Lavery, xây dựng skill này sau khi liên tục gặp cùng một vấn đề khi viết bài ở littlemight.com và điều hành BestSelf.co: mỗi lần nhờ Claude vẽ một sơ đồ — một bản phác kiến trúc, một flowchart, một kim tự tháp ưu tiên — kết quả là một hình hộp bo góc chung chung, không ăn nhập gì với phần còn lại của trang, khiến cô phải chọn giữa việc vật lộn với Figma 30 phút hoặc bỏ luôn sơ đồ. Skill này ra đời để lấp khoảng trống đó bằng cách cho Claude một hệ thống thiết kế cố định (một màu accent, lưới chia hết cho 4px, không đổ bóng) thay vì để nó tự ứng biến giao diện mỗi lần.

Các Khả Năng Chính

• ✓27 kiểu sơ đồ trên ba biến thể (minimal light, minimal dark, full-editorial), mỗi sơ đồ là một file HTML tự chứa với SVG nhúng sẵn — mở trực tiếp trong trình duyệt, không cần build, không JS, không ảnh ngoài.
• ✓Luồng onboarding fetch website mục tiêu và đề xuất một bản diff token về màu sắc và font trước khi ghi bất cứ thứ gì vào file.
• ✓Kiểm tra độ tương phản WCAG AA giữa ink và paper được tích hợp sẵn trước khi ghi token, và đề xuất một giá trị điều chỉnh nếu màu của website không đạt chuẩn ở cỡ chữ sơ đồ.
• ✓Cơ chế first-run gate: nếu style guide vẫn ở mặc định trong một dự án mới, skill dừng lại và hỏi bạn muốn chạy onboarding, dán token thủ công, hay dùng mặc định.
• ✓Xuất sang SVG độc lập (kèm Google Fonts nhúng sẵn) hoặc PNG (render qua Playwright ở tỉ lệ 2x) bằng lệnh slash /diagram-design:export.
• ✓Kiến trúc progressive disclosure: SKILL.md là một index gọn nhẹ, chỉ file reference của đúng kiểu sơ đồ được yêu cầu mới được load, trong tổng số 34 file reference bao phủ mọi kiểu sơ đồ, primitive và tiện ích.
• ✓Ba primitive tuỳ chọn — callout chú thích chữ nghiêng serif, filter sketchy vẽ tay bằng SVG, và skin terminal/CLI-window — cùng bộ 55 icon đơn sắc (Tabler Icons và Simple Icons) cho sơ đồ kiến trúc và sequence.
• ✓Script lint skin (scripts/lint-skin.py) mà người đóng góp chạy trên ví dụ mới, cùng kiểm tra baseline toàn repo (--all --baseline) phải luôn pass.

Các Loại Sơ Đồ Và Ứng Dụng

• •Tạo sơ đồ kiến trúc, flowchart, sequence, hoặc state machine — dạng sơ đồ kỹ thuật thường xuất hiện trong tài liệu hay README — ngay trong một cuộc trò chuyện Claude Code, không cần mở Figma.
• •Tạo các sơ đồ dạng biểu đồ — bar, line, Gantt, scatter plot, radar/spider — cho bất cứ thứ gì từ review roadmap đến tài liệu thiết kế data pipeline.
• •Dựng một quadrant hay consultant 2x2 để chấm điểm các lựa chọn, ví dụ xếp backlog theo impact và effort, với các ô được đặt tên rõ, thay vì một lưới bốn ô chung chung.
• •Làm sơ đồ onboarding hay sơ đồ hệ thống bám theo brand guidelines sẵn có của công ty thay vì trông chung chung kiểu AI, cho các team publish vào tài liệu hay bài blog nhạy cảm về thương hiệu.
• •Xuất một sơ đồ ra SVG hoặc PNG để đưa vào Figma, slide, hoặc social card, qua lệnh /diagram-design:export.

Bắt Đầu Với Diagram Design

Clone repo rồi symlink skill bên trong vào thư mục skills của Claude Code: `git clone [email protected]:cathrynlavery/diagram-design.git ~/code/diagram-design` sau đó `ln -s ~/code/diagram-design/skills/diagram-design ~/.claude/skills/diagram-design`, rồi khởi động lại Claude Code — skill đăng ký dưới tên `diagram-design` và kích hoạt bất cứ khi nào bạn nhờ tạo sơ đồ. Skill thật sự nằm ở `skills/diagram-design/` bên trong repo, đó là lý do cùng một cây thư mục cũng chạy được như một Codex skill hay một plugin Claude Cowork. Muốn nhanh hơn? Cài như plugin: `/plugin marketplace add cathrynlavery/diagram-design` rồi `/plugin install diagram-design@diagram-design` trong Claude Code, hoặc `npx skills add https://github.com/cathrynlavery/diagram-design --skill diagram-design` cho Codex — README lưu ý đánh đổi là các chỉnh sửa ở references/style-guide.md sẽ không giữ lại qua các lần update plugin, nên cách clone-và-symlink phù hợp hơn nếu bạn định tự tay chỉnh style guide.

Thương Hiệu Và Tuỳ Chỉnh

Nhờ Claude `onboard diagram-design to https://yoursite.com` và skill sẽ fetch trang chủ, trích xuất bảng màu chủ đạo và font stack, ánh xạ chúng vào năm token ngữ nghĩa — paper, ink, muted, accent, và link — rồi hiển thị một bản diff đề xuất trước khi ghi gì cả. Nói 'yes, apply it' và mọi sơ đồ tạo ra sau đó sẽ dùng màu nền của website làm paper, màu CTA làm accent, và font phần thân làm font tên node; một bảng trong README ánh xạ từng phần tử nguồn cụ thể (nền body, màu chữ chính, chữ phụ, khung card, màu thương hiệu dùng nhiều nhất, font heading/body/code) vào từng token. Muốn bỏ qua bước fetch? Sửa `skills/diagram-design/references/style-guide.md` bằng tay — mọi sơ đồ, primitive chú thích, và gallery đều đọc từ đúng file này. Trước khi onboard, sơ đồ mặc định hiển thị bảng màu jet-black và atomic-tangerine mà README mô tả là 'đủ tốt để chụp màn hình ngay'.

Các Lựa Chọn Thay Thế Cho Diagram Design

Câu Hỏi Thường Gặp

Ai nên dùng — và ai nên bỏ qua

Hãy thử Diagram Design nếu visual communication (truyền đạt thông tin bằng hình ảnh) quan trọng trong tài liệu kỹ thuật của bạn và bạn đã dùng Claude Code cho tài liệu hay công việc lên kế hoạch — đặc biệt nếu bạn muốn sơ đồ bám theo brand guidelines của riêng mình thay vì trông chung chung kiểu AI, và bạn thoải mái tự tay chỉnh một style guide dạng Markdown. Bỏ qua nếu bạn chỉ cần một sơ đồ dùng một lần bên trong một khối unicode, một danh sách đơn giản, hay một cái bảng — chính README cũng nói một đoạn văn viết tốt thường hay hơn một sơ đồ, và cả hệ thống thiết kế của skill này là quá mức cần thiết cho một hộp đơn với một nhãn.

Repo liên quan