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

Sơ đồ bảng trắng tldraw

Kỹ năng tạo sơ đồ phong cách vẽ tay dạng tldraw (.tldr) rồi xuất ra PNG/SVG ngay trên máy.

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

Làm được gì

  • Nhận diện yêu cầu kiểu "vẽ sơ đồ", "flowchart", "sơ đồ kiến trúc" và tạo trực tiếp file .tldr (JSON của tldraw).
  • Xuất PNG/SVG bằng @kitschpatrol/tldraw-cli, sau đó tự đọc lại ảnh (nếu model có thị giác) để sửa chữ tràn hộp, mũi tên hở đầu, hình bị chồng.
  • Cung cấp preset cho kiến trúc, flowchart, sequence, mô hình ML, ERD, UML kèm công thức tính w/h theo độ dài nhãn và quy tắc khoảng cách.
  • Vòng phản hồi có quy tắc sửa JSON tối thiểu thay vì tạo lại toàn bộ sơ đồ mỗi lần.

Phù hợp với ai

  • Lập trình viên, kiến trúc sư hệ thống thường chèn sơ đồ vào tài liệu thiết kế hoặc README.
  • Người muốn cảm giác phác thảo bảng trắng thay vì sơ đồ "chuẩn slide thuyết trình".
  • Người cần hình minh họa mạng nơ-ron, pipeline dữ liệu cho bài viết kỹ thuật.
  • Nếu cần logo, mảng màu đặc hoặc tự động sắp xếp nhiều node thì skill này khuyên chuyển sang drawio/mermaid.

Ví dụ sử dụng

  1. "Vẽ kiến trúc gồm API Gateway, Auth Service, Order Service, PostgreSQL, Redis" → file .tldr xếp theo tầng kèm PNG scale 2x.
  2. "Sơ đồ luồng xử lý retry khi thanh toán lỗi" → flowchart dọc, nhánh hình thoi có nhãn Yes/No.
  3. "Minh họa khối Transformer" → chồng lớp từ trên xuống, kích thước tensor ở dòng thứ hai, skip connection nét đứt.

· · · 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/tldraw-skill/HEAD/skills/tldraw-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/tldraw-skill từ repo GitHub Agents365-ai/tldraw-skill vào ~/.claude/skills/tldraw-skill/ 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/tldraw-skill.git && mkdir -p ~/.claude/skills && cp -r tldraw-skill/skills/tldraw-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. Kiểm tra Node.js: node -v
  2. Cài CLI toàn cục: npm install -g @kitschpatrol/tldraw-cli
  3. Xác nhận: tldraw --version
  4. Tải skill: git clone https://github.com/Agents365-ai/tldraw-skill.git
  5. Sao chép vào thư mục skill: mkdir -p ~/.claude/skills && cp -r tldraw-skill/skills/tldraw-skill ~/.claude/skills/
  6. Khởi động lại Claude Code và thử: "vẽ sơ đồ kiến trúc hệ thống đặt hàng".
  7. Nếu lần xuất đầu báo Could not find Chrome (ver. X), chạy một lần npx puppeteer browsers install chrome@X với đúng phiên bản trong thông báo lỗi.
Xem mã nguồn trên GitHub ↗Giấy phép: MIT