VividKit Crystal clear AI coding
EN
Chọn Thiết Lập Bắt Đầu với AgentKit Tiếp Tục với ClaudeKit Chuyển từ ClaudeKit sang AgentKit Gỡ hẳn ClaudeKit AgentKit Là Gì? AgentKit Hoạt Động Như Thế Nào? Kit, Skill, Agent & Hook AgentKit Hỗ Trợ Runtime AgentKit Ứng Dụng AgentKit Desktop Cấu Hình AgentKit Tra Cứu CLI ak Cheatsheet skill AgentKit Workflows AgentKit Statusline AgentKit Cập Nhật CLI ak & Kits AgentKit Helper Cài lại clean AgentKit Xử Lý Sự Cố AgentKit Giới Thiệu ClaudeKit Hướng Dẫn ClaudeKit CLI Tìm Lệnh Phù Hợp Bảng Lệnh Nhanh Quy Trình Mẫu Tham Chiếu CLI Claude Mechanics Permission Modes ClaudeKit Hooks Coexistence ClaudeKit x Codex CK → Tool coding khác Cách ClaudeKit Hoạt Động Inside ClaudeKit Tìm Unknowns Của Bạn Khôi Phục Session Sửa Lỗi Từ Log Thiết Kế UI/UX Chuyển Đổi Tài Khoản Cấu Hình IDE Remote Control Codex App Sơ đồ hệ thống UI Review Gate Khuyến Mãi Ủng Hộ VividKit

Tóm tắt nhanh / Lệnh

Bộ Engineer

/ak:excalidraw

Sơ đồ Excalidraw chỉnh sửa được

Tạo sơ đồ Excalidraw chỉnh sửa được cho kiến trúc, luồng dữ liệu, workflow và bản đồ codebase qua MCP canvas live hoặc render bằng file.

01

Nhận diện backend

02

Đánh giá độ sâu

03

Ánh xạ mẫu hình

04

Dàn bố cục

Nguyên tắc 01

Sơ đồ phải lập luận bằng hình ảnh, không chỉ bày các hộp có nhãn.

Nguyên tắc 02

Thử bỏ toàn bộ chữ: cấu trúc vẫn phải truyền được ý chính.

Nguyên tắc 03

Mặc định dùng chữ tự do; container phải có lý do tồn tại.

Nguyên tắc 04

Mỗi khái niệm lớn nên dùng một mẫu hình trực quan khác nhau.

Nguyên tắc 05

Xác minh bằng mắt là một phần công việc, không phải phép lịch sự cuối cùng.

Bản đồ thực thi

Các nhánh chính từ đầu vào đến kết quả, bám theo cách command chạy khi dùng thật.

01

Khởi động

Đầu vào, phạm vi, route

  1. 1 Nhận diện backend Thử MCP canvas trước bằng guide Excalidraw; nếu không có thì fallback sang JSON .excalidraw và render bằng Playwright.
  2. 2 Đánh giá độ sâu Quyết định dạng conceptual đơn giản hay kỹ thuật toàn diện; với sơ đồ kỹ thuật, nghiên cứu spec, event, API và bằng chứng thật trước.
  3. 3 Ánh xạ mẫu hình Chuyển hành vi khái niệm thành ngữ pháp hình ảnh: fan-out, hội tụ, cây, timeline, vòng lặp, cloud, dây chuyền, so sánh cạnh nhau hoặc ngắt phase.
02

Xử lý

Agent / skill thực thi

  1. 4 Dàn bố cục Dẫn mắt trái-sang-phải hoặc trên-xuống-dưới, dành whitespace cho phần quan trọng và tránh lưới card đồng loạt.
  2. 5 Gắn ngữ nghĩa Dùng màu theo vai trò, hình theo ý nghĩa, mặc định dùng chữ tự do, chỉ dùng container khi hình dạng thêm thông tin.
  3. 6 Tự vẽ repo khi được yêu cầu Với sơ đồ repo, nhận diện project/framework, tìm component, map kết nối, xác nhận với user, rồi giới hạn 12 component và 20 mũi tên.
03

Kiểm chứng

Gate, review, xác thực

  1. 7 Tạo canvas Dùng workflow MCP hoặc file đang hoạt động với roughness 0, opacity 100, fontFamily monospace 3 và khoảng cách rộng rãi.
  2. 8 Vòng tự kiểm Render hoặc chụp màn hình, so với ý đồ ban đầu, sửa chồng lấn/cắt chữ/mũi tên sai hướng và lặp đến khi sạch.
  3. 9 Bàn giao file chỉnh được Trả canvas hoặc file .excalidraw cùng PNG/SVG khi được yêu cầu và nêu bằng chứng với sơ đồ kỹ thuật.

Cú pháp, đối số, subcommand

Cách gọi skill: cú pháp, đối số vị trí, option dùng chung, rồi từng subcommand với cú pháp và kết quả riêng.

Cú pháp

/ak:excalidraw <diagram request>

Đối số

<diagram request> Bắt buộc

Yêu cầu sơ đồ

Outcome trực quan và ranh giới bằng chứng bằng ngôn ngữ tự nhiên: audience, câu hỏi cần trả lời, độ sâu mong muốn, đường dẫn output và cần source chỉnh sửa được, PNG, SVG hay live canvas.

/ak:excalidraw "Inspect this repository and propose an architecture overview for a new maintainer. Confirm the components and connections before drawing, then create architecture.excalidraw and architecture.png without installing software or clearing an existing canvas."

Mode / route nên dùng

MCP Canvas

Chỉnh sửa live

Nghiên cứu:
mcp-workflow
Review:
Max 2 self-critique iterations
Xác thực:
Canvas screenshot
File-based

JSON + render

Nghiên cứu:
file-workflow
Review:
Check schema/coordinates
Xác thực:
Rendered PNG
Auto-diagram

Bản đồ codebase

Nghiên cứu:
auto-diagram-guide
Review:
12 components, 20 arrows
Xác thực:
User-verified plan before draw

Tính năng đặc biệt

Bài test isomorphism

Nếu bỏ chữ mà sơ đồ mất nghĩa, cấu trúc hình ảnh chưa gánh đủ thông tin.

Bài test container

Nếu phần trong hộp vẫn ổn khi chuyển thành chữ tự do, hãy bỏ hộp đó.

Prompt mẫu

Ví dụ gọi command theo từng flag, subcommand, mode hoặc route dùng được trong workflow thực tế.

Canvas kiến trúc Khuyến nghị 
/ak:excalidraw vẽ kiến trúc ingestion dựa trên queue của chúng ta
Dùng khi:
Người dùng cần sơ đồ kiến trúc hoặc system design có thể chỉnh sửa, không phải bản render editorial tĩnh.
Kết quả:
Phát hiện mode MCP trực tiếp hay mode tệp, nghiên cứu component và event cụ thể cho sơ đồ kỹ thuật, chuyển các fact đó thành visual pattern, rồi render và sửa output Excalidraw có thể chỉnh sửa.
Tự map repo 
/ak:excalidraw vẽ sơ đồ repo này
Dùng khi:
Yêu cầu là trực quan hóa codebase không cần cấu hình.
Kết quả:
Nhận diện project/framework, tìm component và kết nối trong giới hạn tool-call, hỏi người dùng xác nhận bản đồ đề xuất trước khi vẽ, rồi tạo overview giới hạn 12 component và 20 mũi tên.
Xuất workflow 
/ak:excalidraw trực quan hóa quy trình onboarding và xuất PNG/SVG
Dùng khi:
Workflow cần sơ đồ có thể chỉnh sửa cùng các định dạng review/export được yêu cầu.
Kết quả:
Chọn cấu trúc timeline, cycle hoặc phase-break thay vì card đồng dạng, tạo source Excalidraw hoặc canvas trực tiếp, kiểm tra trực quan clipping, overlap, spacing và hướng arrow, rồi trả PNG/SVG đã yêu cầu.

Phạm vi xử lý

  • Chỉnh live canvas qua MCP và sinh file .excalidraw
  • Sơ đồ kiến trúc, workflow, luồng dữ liệu và system design
  • Tự vẽ sơ đồ codebase không cần cấu hình
  • Hệ màu, hình và spacing có ngữ nghĩa
  • QA hình ảnh cho chồng lấn, cắt chữ, hướng mũi tên, cân bằng và chất lượng export

Skill liên quan

Tiếp theo