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:mermaidjs-v11

Sơ đồ Mermaid v11

Tạo sơ đồ Mermaid v11 nhúng inline và tùy chọn xuất SVG/PNG/PDF cho flow, sequence, mô hình dữ liệu, timeline, state và journey.

01

Chọn họ sơ đồ

02

Viết mã sơ đồ

03

Chuẩn bị block Markdown

04

Cấu hình hiển thị

Nguyên tắc 01

Chọn đúng họ sơ đồ Mermaid trước khi viết cú pháp

Nguyên tắc 02

Giữ code block inline render được trong Markdown hoặc browser

Nguyên tắc 03

Chỉ dùng comment, frontmatter và config khi chúng làm rõ sơ đồ

Nguyên tắc 04

Với output để xuất bản, phải kiểm tra khoảng cách, đường nối và độ dễ đọc sau khi render

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 Chọn họ sơ đồ Ghép yêu cầu với cú pháp Mermaid như flowchart, sequenceDiagram, classDiagram, stateDiagram, erDiagram, gantt, journey hoặc loại v11 khác.
  2. 2 Viết mã sơ đồ Bắt đầu bằng khai báo diagram, rồi mã hóa actor, entity, state, task, mũi tên, nhãn, ngày tháng hoặc quan hệ cho đúng họ đó.
02

Xử lý

Agent / skill thực thi

  1. 3 Chuẩn bị block Markdown Bọc output inline trong code block mermaid và chỉ dùng comment %% hoặc frontmatter Mermaid khi chúng làm sơ đồ rõ hơn.
  2. 4 Cấu hình hiển thị Đặt theme, look, fontFamily hoặc securityLevel qua config/frontmatter Mermaid khi sơ đồ cần cách render riêng.
03

Kiểm chứng

Gate, review, xác thực

  1. 5 Nhúng hoặc tích hợp Giữ block Mermaid để render trong Markdown/browser hoặc dùng pattern tích hợp HTML/JavaScript được tài liệu hóa.
  2. 6 Xuất bằng mmdc Khi cần artifact dạng ảnh hoặc tài liệu, chuyển input .mmd thành SVG, PNG hoặc PDF bằng @mermaid-js/mermaid-cli.
04

Đóng

Báo cáo, bàn giao, artifact

  1. 7 Rà soát độ dễ đọc Kiểm tra nhãn, khoảng cách, đường mũi tên và va chạm sau khi render; áp dụng hướng dẫn layout tech-graph cho SVG cần xuất bản.

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:mermaidjs-v11 [diagram-type or description]

Đối số

[diagram-type or description] Bắt buộc

Yêu cầu diagram

Họ diagram Mermaid hoặc mô tả bằng ngôn ngữ tự nhiên về diagram cần tạo. Nêu loại diagram khi đã biết; nếu chưa, cung cấp relationship, fact, output target và ràng buộc để Skill chọn mà không bịa chi tiết còn thiếu.

/ak:mermaidjs-v11 "Create sequence diagram trái-sang-phải cho các sự kiện checkout được cung cấp, thêm accTitle và accDescr, trả về khối Mermaid fenced và checkout-sequence.mmd, parse bằng Mermaid v11, render SVG bằng CLI v11 đã pin nếu có, và report mọi layout chưa verified."

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ế.

Luồng kiến trúc Khuyến nghị 
/ak:mermaidjs-v11 sơ đồ luồng cho pipeline tiếp nhận webhook
Dùng khi:
Dùng khi cần sơ đồ Mermaid inline để giải thích quy trình hoặc kiến trúc.
Kết quả:
Code block flowchart Mermaid sẵn để dán, có cú pháp v11 hợp lệ, nhãn ngắn và cấu trúc node/cạnh dễ đọc.
Sequence API 
/ak:mermaidjs-v11 sơ đồ tuần tự cho checkout và xác nhận webhook
Dùng khi:
Dùng khi thứ tự tương tác actor hoặc lời gọi API cần sơ đồ Mermaid inline.
Kết quả:
Code block sequenceDiagram có participant, message request/response theo thứ tự và nhãn tương tác an toàn khi render.
ERD database 
/ak:mermaidjs-v11 erDiagram cho users orders và payments
Dùng khi:
Dùng khi quan hệ database cần được tài liệu hóa bằng sơ đồ Mermaid inline.
Kết quả:
Code block erDiagram nêu entity, field và quan hệ cardinality bằng cú pháp ER của Mermaid v11.
Timeline dự án 
/ak:mermaidjs-v11 biểu đồ gantt cho các mốc ra mắt beta
Dùng khi:
Dùng khi milestone hoặc lịch dự án cần artifact dạng timeline Mermaid.
Kết quả:
Code block Gantt Mermaid có section, task, ngày tháng và dependency, có thể render hoặc xuất bằng mmdc.

Phạm vi xử lý

  • Flowchart và cây quyết định
  • Sequence diagram và luồng API
  • Class diagram và ERD
  • Timeline Gantt
  • State machine và user journey
  • Markdown, HTML và xuất file bằng CLI

Artifact tạo ra

Output sơ đồ

Mẫu đường dẫn

Code block Mermaid inline hoặc file SVG/PNG/PDF đã xuất

Sơ đồ Mermaid v11 render được, dùng đúng họ diagram, cú pháp hợp lệ, config tùy chọn và bố cục dễ đọc.

Skill liên quan

Tiếp theo