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ơ đồ Excalidraw

Tạo file .excalidraw theo chuẩn thiết kế sẵn có rồi xuất ra PNG/SVG qua Kroki hoặc CLI cục bộ.

Thiết kế · UITrung cấp★ 185⑂ 18Điểm AI 10/10Cập nhật lần cuối: 16 thg 7, 2026

Làm được gì

  • Khi bạn yêu cầu "vẽ sơ đồ", "flowchart", "kiến trúc hệ thống", skill sẽ sinh trực tiếp file JSON .excalidraw.
  • Tự động đề xuất vẽ hình khi giải thích hệ thống có từ 3 thành phần trở lên hoặc luồng dữ liệu phức tạp.
  • Hai cách xuất: Kroki API (chỉ cần curl, chỉ ra SVG) và excalidraw-brute-export-cli chạy Firefox cục bộ (PNG + SVG).
  • Có sẵn hệ thống thiết kế: bảng màu ngữ nghĩa, thang cỡ chữ 28→14px, bảng khoảng cách giữa các phần tử, quy ước nét mũi tên (liền/đứt/chấm).
  • Vòng lặp kiểm tra bản render: mở PNG thật để phát hiện chữ bị cắt, hộp chồng nhau, mũi tên xuyên qua hình rồi sửa lại; kèm vòng lặp tiếp nhận phản hồi của người dùng.
  • Hỗ trợ chèn icon AWS/Azure/GCP/UML từ thư viện cộng đồng bằng scripts/excalidraw_lib.py.

Phù hợp với ai

  • Lập trình viên, kiến trúc sư hệ thống thường xuyên vẽ sơ đồ kiến trúc cho tài liệu thiết kế.
  • Người thấy Mermaid tự bố cục quá cứng nhắc và muốn kiểm soát vị trí, màu sắc.
  • PM/BA cần sơ đồ trông thân thiện, không quá khô khan cho slide trình bày.

Ví dụ sử dụng

  1. "Vẽ sơ đồ kiến trúc luồng xác thực của dịch vụ" → sinh file .excalidraw với API Gateway, Auth Service, Database theo màu ngữ nghĩa rồi xuất PNG 2x.
  2. "Chuyển quy trình xử lý đơn hàng thành flowchart" → ellipse cho start/end, diamond cho điều kiện, nhánh Yes đi tới, No đi xuống.
  3. "Tóm tắt ý tưởng này thành mind map" → nhánh cấp 1 đặt đều trên đường tròn bán kính ~280px quanh nút trung tâm để tránh rối đường nố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/Agents365-ai/excalidraw-skill/HEAD/skills/excalidraw-skill/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/excalidraw-skill từ repo GitHub Agents365-ai/excalidraw-skill vào ~/.claude/skills/excalidraw/ 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/Agents365-ai/excalidraw-skill.git /tmp/excalidraw-skill && mkdir -p ~/.claude/skills && cp -r /tmp/excalidraw-skill/skills/excalidraw-skill ~/.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/Agents365-ai/excalidraw-skill.git /tmp/excalidraw-skill
  3. Sao chép skill: mkdir -p ~/.claude/skills && cp -r /tmp/excalidraw-skill/skills/excalidraw-skill ~/.claude/skills/
  4. Kiểm tra curl --version. Nếu chỉ cần SVG qua Kroki thì đến đây là xong.
  5. Muốn xuất PNG và kiểm tra hình ảnh: chạy npm install -g excalidraw-brute-export-cli rồi npx playwright install firefox.
  6. Người dùng macOS chạy thêm hai lệnh sed vá phím Control→Meta như hướng dẫn trong SKILL.md (chỉ một lần).
  7. Khởi động lại Claude Code và thử: "vẽ sơ đồ kiến trúc cho dự án này".
Xem mã nguồn trên GitHub ↗Giấy phép: MIT