Claude Skill MartKhám phá skillCâu dùng ngayHọc qua videoDùng terminalSkill là gì?
 
← Về danh sách

Trình tạo sơ đồ Baoyu

Kỹ năng vẽ 9 loại sơ đồ (kiến trúc, flowchart, sequence...) thành một file SVG nền tối duy nhất.

Thiết kế · UINhập môn★ 26,102⑂ 2,884Điểm AI 10/10Cập nhật lần cuối: 10 thg 9, 2026

Kỹ năng này làm gì

  • Hỗ trợ 9 loại sơ đồ: kiến trúc hệ thống, flowchart, sequence, class/ER, mind map, timeline, máy trạng thái, luồng dữ liệu và sơ đồ minh họa khái niệm.
  • Áp dụng một hệ thiết kế thống nhất: nền tối #0f172a có lưới, bảng màu ngữ nghĩa (frontend = cyan, backend = emerald, database = violet...), font JetBrains Mono.
  • Quy định chặt chẽ về bố cục: khoảng cách tối thiểu 40px giữa các khối, vị trí chú giải, viewBox chừa 30px, và mẹo đặt hình chữ nhật mờ đục phía dưới khối bán trong suốt để che mũi tên.
  • Xuất ra một file .svg độc lập rồi chuyển sang ảnh PNG @2x bằng script kèm theo.

Phù hợp với ai

  • Lập trình viên, kiến trúc sư hệ thống, technical writer thường xuyên cần sơ đồ cho tài liệu thiết kế hoặc bài thuyết trình.
  • Người thấy đầu ra của Mermaid quá thô và muốn hình ảnh đạt chuẩn trình chiếu.
  • Người hay làm sơ đồ có nhãn tiếng Trung/CJK (đã có quy tắc font và độ rộng khối riêng).

Ví dụ sử dụng

  1. "Vẽ sơ đồ kiến trúc AWS của dự án" → SVG có đường viền region, nhóm bảo mật nét đứt, hình trụ database.
  2. "Chuyển logic duyệt thanh toán thành flowchart" → hình thoi rẽ nhánh với nhãn Yes/No, luồng chính tô màu nhấn.
  3. "Vẽ sequence diagram cho luồng đăng nhập OAuth" → khối actor, lifeline dọc, mũi tên liền (đồng bộ) và nét đứt (phản hồi).

· · · Hướng dẫn cài đặt · · ·

Dùng thử ngay, không cần cài

Dán đoạn dưới vào Claude là dùng được skill này mà không cần cài đặt.

Hãy đọc hướng dẫn trong tệp này và làm theo để giúp mình:
https://raw.githubusercontent.com/JimLiu/baoyu-skills/HEAD/skills/baoyu-diagram/SKILL.md

Mình muốn: (viết việc bạn cần ở đây)

Nếu Claude không mở được liên kết, hãy mở liên kết và copy nội dung vào rồi dán.

↓ Thấy hữu ích thì tải ZIP bên dưới và cài. Sau đó skill tự chạy, không phải dán lại mỗi lần.

Cài vào ứng dụng Claude (không cần terminal)
  1. Tải tệp ZIP bằng nút bên dưới.
  2. Trong Claude, mở Settings → Capabilities và bật 'Code execution and file creation'. (chỉ một lần)
  3. Vào Customize → Skills → + → 'Upload a skill' rồi tải tệp ZIP lên.
↓ Tải ZIP
Cài vào Claude Code

Để Claude làm — dán câu dưới đây vào Claude Code

Hãy cài skill mình tìm thấy trên Claude Skill Mart.
Copy thư mục skills/baoyu-diagram từ repo GitHub JimLiu/baoyu-skills vào ~/.claude/skills/baoyu-diagram/ của mình.
Sau khi cài xong, cho mình biết skill này làm được gì trong một câu.

Cài bằng lệnh thủ công

git clone https://github.com/JimLiu/baoyu-skills.git /tmp/baoyu-skills && mkdir -p ~/.claude/skills && cp -r /tmp/baoyu-skills/skills/baoyu-diagram ~/.claude/skills/

⚠ Đây là skill do người khác tạo. Hãy kiểm tra repo gốc trước khi cài.

  1. Mở Terminal.
  2. Tải mã nguồn: git clone https://github.com/JimLiu/baoyu-skills.git
  3. Tạo thư mục kỹ năng: mkdir -p ~/.claude/skills
  4. Sao chép toàn bộ thư mục kỹ năng (phải có cả references/ và scripts/): cp -r baoyu-skills/skills/baoyu-diagram ~/.claude/skills/
  5. Nếu muốn xuất PNG, cài bun: curl -fsSL https://bun.sh/install | bash (có sẵn npx thì có thể bỏ qua).
  6. Khởi động lại Claude Code và thử: "Vẽ giúp mình sơ đồ kiến trúc hệ thống".
Xem mã nguồn trên GitHub ↗Giấy phép: MIT