Liên kết

Excalidraw Diagram Skill — Vẽ Biểu Đồ Đẹp Từ Ngôn Ngữ Tự Nhiên

3 tháng 3, 2026 · github

TL;DR

Skill này cho phép AI vẽ biểu đồ Excalidraw đẹp mắt chỉ từ câu mô tả bằng ngôn ngữ tự nhiên, thay thế hoàn toàn thao tác kéo thả thủ công. Agent tự thiết kế diagram truyền tải đúng ý nghĩa, bao gồm code thật và JSON, đồng thời tự kiểm tra output trước khi trả cho bạn.

Bài này dành cho ai?

1. Người muốn tạo sơ đồ nhanh mà không cần học Excalidraw

Vấn đề: Muốn giải thích kiến trúc, flow hoặc concept bằng hình ảnh nhưng không có thời gian học công cụ vẽ và thao tác kéo thả thủ công Được gì: Chỉ cần gõ câu mô tả, AI vẽ diagram đẹp ra cho bạn trong vài giây

2. Người build coding agent hoặc developer tool

Vấn đề: Cần tích hợp khả năng vẽ diagram vào ứng dụng của mình để tăng năng suất Được gì: Skill sẵn sàng tích hợp, có JSON schema và template để custom

3. Người cần diagram kỹ thuật có giá trị thực

Vấn đề: Diagram thường chỉ có hình mẫu, thiếu code thật để minh họa Được gì: Diagram bao gồm code snippet và JSON payload thật, không phải placeholder

Các điểm chính

Từ text ra diagram đẹp ngay — Chỉ cần gõ câu mô tả bằng tiếng Việt hoặc tiếng Anh, AI tự sinh diagram Excalidraw hoàn chỉnh, không cần học công cụ vẽ hay thao tác kéo thả.
Diagram truyền tải đúng ý nghĩa — Mỗi hình dạng phản ánh đúng concept: fan-out cho one-to-many, timeline cho sequence, convergence cho aggregation. Không dùng grid đều như nhau.
Code snippet thật trong diagram — Diagram kỹ thuật bao gồm code và JSON thật, không phải placeholder, giúp tài liệu có giá trị thực.
Agent tự kiểm tra trước khi trả — Render pipeline dùng Playwright cho phép agent nhìn thấy diagram, phát hiện lỗi layout (text chồng, mũi tên lệch) và tự sửa.
Đổi màu brand dễ dàng — Tất cả màu sắc nằm trong references/color-palette.md, edit một file thì mọi diagram theo palette mới.

Quick Start

Clone repo và copy vào .claude/skills/:

git clone https://github.com/coleam00/excalidraw-diagram-skill.git
cp -r excalidraw-diagram-skill .claude/skills/excalidraw-diagram

Yêu agent setup render pipeline: “Set up the Excalidraw diagram skill renderer by following the instructions in SKILL.md.”
Yêu agent vẽ diagram: “Vẽ sơ đồ Excalidraw thể hiện cách AG-UI protocol stream events từ AI agent đến frontend UI”