Claude Skill MartKhám phá skillSkill là gì?
 
← Về danh sách

Baoyu Diagram (Trình tạo sơ đồ SVG)

Tạo sơ đồ SVG nền tối chuyên nghiệp cho 9 loại: kiến trúc, flowchart, sequence, mind map, timeline và hơn nữa.

Thiết kế · UITrung cấp★ 24,749⑂ 2,764Điểm AI 8/10Cập nhật lần cuối: 4 thg 7, 2026

Skill này làm gì

Phân tích yêu cầu của bạn, chọn đúng loại sơ đồ và vẽ ra một file .svg độc lập (nhúng sẵn style, marker, pattern).

  • Các loại hỗ trợ: kiến trúc hệ thống, flowchart, sequence, sơ đồ cấu trúc (class/ER/tổ chức), mind map, timeline, minh hoạ khái niệm, state machine, data flow
  • Nền slate tối kèm lưới mờ, bảng màu theo ngữ nghĩa (frontend = cyan, backend = emerald, database = violet, bảo mật = rose...)
  • Quy tắc khoảng cách chặt chẽ: chiều cao box, khoảng cách tối thiểu, vị trí legend, padding viewBox → hạn chế chồng lấn
  • Thủ thuật "rect mặt nạ đục" để mũi tên không lộ phía sau box bán trong suốt
  • Sau khi lưu SVG, tự động xuất PNG @2x qua scripts/main.ts

Phù hợp với ai

  • Developer cần hình minh hoạ cho tài liệu thiết kế, README, blog kỹ thuật mà không muốn mở Figma
  • Tech lead / kiến trúc sư cần sơ đồ đủ đẹp để trình bày, thay cho Mermaid mặc định
  • BA, PM, DevRel muốn biến biên bản họp hoặc tài liệu yêu cầu thành hình ngay lập tức

Ví dụ sử dụng

  1. "Vẽ kiến trúc AWS của hệ thống: ALB, 3 service ECS, RDS, Redis, S3" → SVG có khung region, luồng dữ liệu theo lớp, kèm PNG @2x
  2. "Vẽ flowchart cho logic retry khi thanh toán thất bại" → hình thoi quyết định với nhãn Yes/No, đường happy path được tô màu highlight
  3. Đính kèm file spec .md và nói "tạo sequence diagram cho luồng đăng nhập" → sơ đồ có lifeline, activation bar, lưu vào thư mục diagram/ cạnh file gốc

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

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 && mkdir -p ~/.claude/skills && cp -r 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 (macOS/Linux) hoặc WSL/Git Bash (Windows).
  2. Tạo thư mục skill nếu chưa có: mkdir -p ~/.claude/skills
  3. Clone repo: git clone https://github.com/JimLiu/baoyu-skills.git
  4. Copy riêng skill này: 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; nếu không cài được, skill sẽ thử dùng npx -y bun.
  6. Khởi động lại Claude Code, rồi thử: "vẽ sơ đồ kiến trúc cho dự án này".
  7. Kết quả nằm trong thư mục diagram/ gồm file .svg và @2x.png.
Xem mã nguồn trên GitHub ↗Giấy phép: MIT