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 description|path] [--export <png|svg>] [--live]

Đối số

[diagram description|path]

Mô tả hoặc đường dẫn

Yêu cầu sơ đồ bằng ngôn ngữ tự nhiên hoặc path tới file .excalidraw có sẵn, đều tùy chọn. Chỉ bỏ trống khi đang tiếp tục canvas live đã mở.

/ak:excalidraw draw our queue-based ingestion architecture

Option dùng chung

--export <png|svg>

Định dạng xuất

Ghi snapshot PNG hoặc SVG ngoài source Excalidraw chỉnh sửa được hoặc canvas live. Export là output để review, không thay sơ đồ chỉnh sửa được.

/ak:excalidraw visualize the onboarding workflow --export png
--live

Canvas MCP live

Ưu tiên canvas Excalidraw MCP live khi backend đó có sẵn. Nếu probe canvas thất bại, fallback sang JSON .excalidraw và render bằng Playwright.

/ak:excalidraw draw our queue-based ingestion architecture --live

Mode / route nên dùng

--export png|svg

Xuất tĩnh

Nghiên cứu:
file-workflow
Review:
Check clipping and routing
Xác thực:
PNG or SVG written
--live

Canvas MCP

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

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 draw our queue-based ingestion architecture --live
Dùng khi:
Người dùng cần canvas kiến trúc live có thể chỉnh sửa, không phải bản render editorial tĩnh.
Kết quả:
Probe canvas MCP live trước, 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 canvas Excalidraw có thể chỉnh sửa.
Tự map repo 
/ak:excalidraw diagram this repo
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, chỉ hỏi khi còn quyết định layout/nội dung chưa giải được, rồi tạo overview giới hạn 12 component và 20 mũi tên.
Xuất workflow PNG 
/ak:excalidraw visualize the onboarding workflow --export png
Dùng khi:
Workflow cần sơ đồ có thể chỉnh sửa kèm snapshot PNG để review.
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, kiểm tra clipping và hướng arrow, rồi ghi file PNG đã yêu cầu.
Xuất SVG 
/ak:excalidraw visualize the onboarding workflow --export svg
Dùng khi:
Cùng workflow đó cần snapshot vector thay vì PNG raster.
Kết quả:
Giữ source Excalidraw chỉnh sửa được, kiểm tra overlap, spacing và hướng arrow, rồi ghi file SVG để review mà không thay sơ đồ chỉnh sửa được.

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