Bạn đang viết blog, làm tài liệu kỹ thuật hay thuyết trình và cần một sơ đồ kiến trúc đẹp? Mở Figma mất 30 phút chỉnh màu, nhờ AI thì ra mấy cái hộp bo tròn generic trông như slide PowerPoint năm 2010. Đó chính xác là nỗi đau mà Diagram Design giải quyết — một bộ skill cho Claude Code, Codex và Pi, tạo sơ đồ editorial-grade bằng HTML + SVG thuần, không dependency, không build step.
Với gần 19.500 star trên GitHub chỉ sau vài tháng ra mắt, Diagram Design đã nhanh chóng trở thành một trong những repo “AI-assisted design” được quan tâm nhất. Repo này không phải thư viện chart thông thường — nó là một agent skill được thiết kế để AI coding assistant hiểu và tạo sơ đồ đúng ngữ cảnh, đúng thương hiệu của bạn.
Diagram Design là bộ skill tạo 29 loại sơ đồ editorial chất lượng cao bằng HTML + SVG thuần, không cần JavaScript hay build step. Thiết kế dành cho Claude Code, Codex và Pi — chỉ cần mô tả bằng ngôn ngữ tự nhiên là agent tự chọn loại sơ đồ phù hợp. Điểm nổi bật nhất: tự động đọc brand từ website của bạn và áp dụng palette + typography vào mọi sơ đồ trong 60 giây.
Thông tin tổng quan
| Repo | cathrynlavery/diagram-design |
|---|---|
| Stars / Forks | ⭐ 19,469 / 1,192 |
| Ngôn ngữ | HTML (82%), Python (18%), Mermaid (0%) |
| License | MIT |
| Contributors | 17 |
| Release mới nhất | Chưa có release |
| Cập nhật cuối | 15/08/2026 |
diagram-design là gì?
Diagram Design là một bộ agent skill (kỹ năng cho AI agent) chứa 29 loại sơ đồ editorial — từ architecture, flowchart, sequence diagram đến Gantt chart, radar, Venn, pyramid — tất cả đều là file HTML tự chứa (self-contained) với SVG inline. Không có JavaScript, không cần server, không phụ thuộc hình ảnh bên ngoài. Mở file HTML trực tiếp trong trình duyệt là xem được ngay.
Repo ra đời từ nhu cầu thực tế của tác giả Cathryn Lavery — người viết blog tại littlemight.com và điều hành BestSelf.co. Mỗi lần cần sơ đồ cho bài viết, cô hoặc phải vật lộn với Figma hoặc chấp nhận output xấu từ AI. Diagram Design giải quyết vấn đề này bằng cách cung cấp cho AI agent một bộ template editorial chất lượng cao, kèm hệ thống brand matching tự động — agent đọc website của bạn, trích xuất palette màu và font, rồi áp dụng vào mọi sơ đồ. Triết lý thiết kế rất rõ ràng: mật độ thấp (target 4/10), mỗi node phải “earn its place”, accent color chỉ dùng cho 1-2 điểm nhấn quan trọng nhất.
Tính năng chính
- 29 loại sơ đồ editorial — Từ architecture, flowchart, sequence, state machine, ER diagram đến bar chart, scatter plot, Gantt, medallion, data flow… Mỗi loại có 3 variant: minimal light, minimal dark, và full-editorial.
- Brand matching tự động — Chỉ cần nói “onboard diagram-design to https://yoursite.com”, agent sẽ fetch homepage, trích xuất palette màu (paper, ink, accent, muted) và font stack, rồi áp dụng vào mọi sơ đồ. Có kiểm tra WCAG AA contrast tự động.
- Self-contained HTML + SVG — Không JavaScript, không build step, không external dependency. Mở file HTML trực tiếp trong browser, copy-paste vào blog, hoặc screenshot ngay.
- Semantic system patterns — Tách biệt behavior (queue, policy trace, trust boundary) khỏi layout, nên một pattern có thể dùng loại sơ đồ gần nhất mà không cần thêm type mới.
- Multi-agent support — Tích hợp Claude Code, Codex, Pi qua marketplace/plugin system. Mỗi agent có lệnh cài đặt riêng, cùng chia sẻ profile library.
- Profile system cho nhiều client — Onboard brand một lần, lưu thành named profile, rồi gắn marker file
.diagram-designvào mỗi project. Các workspace song song dùng brand khác nhau mà không đè lên nhau. - Import & redraw từ Mermaid/draw.io — Skill có thể đọc source Mermaid hoặc draw.io và vẽ lại ở format, kích thước, mức chi tiết bạn chọn.
- Accessible by default — Mỗi SVG có
role="img",aria-labelledby,<title>/<desc>. ID prefix theo diagram và variant để tránh trùng khi inline nhiều SVG trên cùng trang. Optional motion cho ordered explanation, static là mặc định.
Yêu cầu phần cứng & hệ thống
| Thành phần | Yêu cầu |
|---|---|
| CPU | Không yêu cầu đặc biệt — output là HTML/SVG tĩnh (ước tính) |
| RAM | Phụ thuộc vào AI agent host (Claude Code, Codex, Pi), bản thân repo rất nhẹ (ước tính) |
| GPU/VRAM | Không cần — không có inference hay rendering nặng |
| Ổ cứng | < 50 MB cho toàn bộ repo (ước tính) |
| OS | macOS, Linux, Windows — bất kỳ OS nào chạy được Claude Code, Codex hoặc Pi |
| Phần mềm nền | Claude Code, Codex CLI, hoặc Pi. Cần Git để clone. Trình duyệt để xem output. |
Cách cài đặt và sử dụng
Claude Code:
/plugin marketplace add cathrynlavery/diagram-design/plugin install diagram-design@diagram-design
Sau đó bật auto-update: chạy /plugin, mở Marketplaces, chọn diagram-design, bật Enable auto-update.
Codex:
codex plugin marketplace add cathrynlavery/diagram-designcodex plugin add diagram-design@diagram-design
Pi:
pi install https://github.com/cathrynlavery/diagram-design
Chạy /reload trong session Pi đang mở.
Editable install (nếu muốn tùy chỉnh style guide):
git clone [email protected]:cathrynlavery/diagram-design.git ~/code/diagram-design
Với Claude Code: ln -s ~/code/diagram-design/skills/diagram-design ~/.claude/skills/diagram-design
Mở gallery xem tất cả sơ đồ: open skills/diagram-design/assets/index.html (macOS) hoặc xdg-open (Linux).
Phù hợp với ai?
Nên dùng: Content creator, technical writer, blogger cần sơ đồ đẹp mà không muốn mở Figma. Developer đang dùng Claude Code hoặc Codex muốn tạo architecture diagram, flowchart nhanh cho tài liệu. Agency hoặc freelancer làm việc với nhiều client — profile system cho phép chuyển brand nhanh. Người làm slide thuyết trình muốn sơ đồ editorial-grade thay vì Mermaid output mặc định.
Không nên dùng: Nếu bạn cần interactive chart với tooltip, zoom, pan — đây không phải thư viện đó (output là SVG tĩnh). Nếu bạn không dùng AI coding agent nào (Claude Code, Codex, Pi) thì giá trị sẽ giảm đáng kể — bạn chỉ có thể dùng template HTML thủ công. Nếu bạn cần biểu đồ dữ liệu phức tạp với hàng nghìn data point, đây không phải công cụ phù hợp.
Ứng dụng thực tế
- Viết blog kỹ thuật: Mô tả kiến trúc microservice bằng lời, agent tự tạo architecture diagram đúng brand blog của bạn, embed luôn vào bài.
- Tài liệu nội bộ công ty: Tạo flowchart quy trình onboarding, swimlane diagram phân chia trách nhiệm giữa các team, Gantt chart cho roadmap — tất cả đồng nhất visual identity.
- Thuyết trình cho stakeholder: Quadrant chart so sánh impact vs effort của các dự án Q2, pyramid diagram về chiến lược ưu tiên, radar chart so sánh năng lực team.
- Chuyển đổi Mermaid/draw.io sang editorial format: Có sẵn sơ đồ Mermaid xấu? Import vào và để skill redraw lại ở chất lượng editorial với brand của bạn.
- Agency phục vụ nhiều client: Onboard brand mỗi client một lần, lưu profile, chuyển đổi giữa các project bằng marker file — không cần chỉnh lại màu sắc mỗi lần.
Đánh giá của danhbaai.com
Diagram Design giải quyết một pain point rất cụ thể và giải quyết tốt: tạo sơ đồ đẹp, đúng brand, không cần designer, không cần tool phức tạp. Triết lý thiết kế “editorial quality” — mật độ thấp, accent color có chủ đích, mỗi node phải có lý do tồn tại — tạo ra output trông chuyên nghiệp hơn hẳn so với Mermaid hay draw.io mặc định. Việc output là HTML + SVG thuần, không dependency, là một quyết định thiết kế thông minh: dễ embed, dễ screenshot, dễ version control.
Tuy nhiên, repo này gắn chặt với hệ sinh thái AI agent — đặc biệt Claude Code. Nếu bạn không dùng agent nào, bạn chỉ có thể copy template HTML và sửa tay, mất đi phần lớn giá trị. So với các giải pháp như D2 (diagram scripting language) hay Excalidraw, Diagram Design không phải công cụ vẽ sơ đồ độc lập mà là một “kỹ năng” cho AI — hai cách tiếp cận khác nhau. Ngoài ra, 29 type cố định có thể không đủ cho mọi nhu cầu, dù semantic pattern system giúp giảm bớt hạn chế này.
Nhìn chung, với gần 19.500 star, 17 contributor, và cách tiếp cận sáng tạo, Diagram Design xứng đáng là một trong những agent skill đáng cài nhất nếu bạn đang dùng Claude Code hoặc Codex cho công việc viết lách và tài liệu kỹ thuật.
- Output HTML + SVG thuần, không dependency, mở trực tiếp trong browser
- Brand matching tự động từ website chỉ trong 60 giây
- 29 loại sơ đồ đa dạng, 3 variant mỗi loại (light/dark/editorial)
- Accessible by default với WCAG AA contrast check
- Profile system hỗ trợ làm việc với nhiều client/brand song song
- Tích hợp đa agent: Claude Code, Codex, Pi
- Phụ thuộc nặng vào AI agent — giá trị giảm mạnh nếu không dùng Claude Code/Codex/Pi
- Chỉ tạo sơ đồ tĩnh, không có interactive chart (tooltip, zoom, filter)
- Chưa có release chính thức (no tagged release), quản lý version qua marketplace
- Số lượng type cố định (29), thêm type mới cần đợi maintainer
- Tài liệu onboarding khá dài và phức tạp cho người mới bắt đầu
Câu hỏi thường gặp
Diagram Design có cần JavaScript hoặc build step không?
Tôi không dùng Claude Code, có dùng Diagram Design được không?
Brand matching hoạt động như thế nào?
Có thể import sơ đồ Mermaid có sẵn không?
Diagram Design có miễn phí không?
Nguồn: github.com/cathrynlavery/diagram-design — Bài phân tích bởi danhbaai.com.
Quá đỉnh, cái này cài cho hyperframes rồi tạo sơ đồ cho video cũng đẹp lắm.