AgentKit
Tài liệuBộ kitTham chiếu CLIỨng dụng Desktop

Skill

Tạo sơ đồ inline có thể review với ak:mermaidjs-v11

Biến process, relationship, timeline hoặc data model thành Mermaid v11 source và chỉ render khi có tooling đã duyệt.

Dùng ak:mermaidjs-v11 để biểu diễn flow, interaction, structure, timeline và journey thành Mermaid v11 source. Artifact chính là declarative text có thể nằm inline trong Markdown hoặc trong file .mmd. Render sang SVG, PNG hay PDF là bước riêng cần tooling tương thích.

Chọn Mermaid cho sơ đồ dựa trên text

Dùng ak:mermaidjs-v11 khi

  • Tài liệu cần flowchart, sequence, state, class, ER, Gantt, journey, architecture hoặc loại Mermaid được hỗ trợ khác ở dạng inline.
  • Reviewer cần đọc và diff diagram source.
  • Bạn cần visual nhỏ nơi structure quan trọng hơn custom illustration.
  • Bạn đã có fact và muốn map relationship mà không nghĩ ra claim mới.

Chọn workflow khác khi

  • Bạn cần SVG và PNG để publish với layout cùng visual style được kiểm soát. Dùng ak:tech-graph.
  • Bạn cần strategic HTML presentation. Dùng ak:slides.
  • Bằng chứng nền chưa sẵn sàng. Hãy thu thập và duyệt trước khi yêu cầu sơ đồ.

Chuẩn bị fact và ranh giới rendering

Cung cấp audience, mục tiêu diagram, node hoặc participant đã xác minh, relationship có label, direction mong muốn và output cần nhận. Nêu Skill có được sửa file hay chỉ trả source.

Mermaid inline không cần file renderer bổ sung. Chuyển .mmd thành image hoặc PDF cần Mermaid CLI (mmdc), và việc cài Skill không bảo đảm tool này có sẵn. Browser integration có thể dùng local package hoặc CDN; cả hai đều có thể tạo dependency hay network effect và cần phê duyệt riêng.

RuntimeCách gọiRanh giới khả dụng
Claude Code/ak:mermaidjs-v11 ...Phân phối native là mặc định; plugin rõ ràng cũng được hỗ trợ.
Cursor/ak:mermaidjs-v11 ...Cách gọi bằng slash đã được người dùng xác minh; rendering tool vẫn phụ thuộc local environment.
Codex$ak:mermaidjs-v11 ...Native Skill discovery được hỗ trợ; supporting Hook behavior phụ thuộc capability.

Tạo sơ đồ có phạm vi

/ak:mermaidjs-v11 Tạo sequence diagram Mermaid v11 inline cho lead-review flow đã duyệt: marketer gửi draft, reviewer yêu cầu sửa hoặc phê duyệt, còn publish là hành động manual riêng. Chỉ trả Mermaid source

Argument là diagram type hoặc description. File path, rendering, theme và integration behavior nên được yêu cầu rõ thay vì suy đoán.

Theo các giai đoạn tạo sơ đồ

  1. Chọn diagram type. Khớp outcome với flowchart, sequence, state, ER, class, Gantt, journey, architecture hoặc dạng được hỗ trợ khác.
  2. Trích structure đã xác minh. Xác định node, participant, relationship, direction, label và grouping từ bằng chứng được cung cấp.
  3. Viết Mermaid v11 source. Dùng fenced block mermaid cho tài liệu inline hoặc file .mmd khi cần source riêng.
  4. Configure có chủ đích. Chỉ thêm frontmatter, theme, layout hoặc accessibility text khi host yêu cầu và đã review.
  5. Validate. Dùng mermaid.parse hoặc mmdc khi tool tương thích đã có và execution được duyệt.
  6. Render và review khi được yêu cầu. mmdc -i diagram.mmd -o diagram.svg chọn output format theo extension. Kiểm tra label bị cắt, crossing, contrast và độ chính xác fact.

Giữ an toàn cho rendering và integration

Tạo source tách biệt với cài đặt và publish

Skill có thể viết diagram source mà không cài gì. Cài Mermaid CLI, pull container, tải CDN script hay icon pack, sửa site integration và publish file đã render là hành động riêng. Review policy về dependency, network, security và license trước khi duyệt.

Giữ securityLevel của Mermaid ở setting host đã duyệt; hướng dẫn đóng package xác định strict là mức mặc định và khuyến nghị. Đừng đặt secret hay private identifier trong node label. Diagram có thể đơn giản hóa bằng chứng nhưng không được biến inference thành fact hay ngụ ý review gate đã duyệt hành động live.

Xác minh source và output

Tùy yêu cầu, output có thể là:

  • code block mermaid cho Markdown hoặc MDX;
  • file source .mmd riêng;
  • .svg, .png hoặc .pdf được render bằng mmdc có sẵn; hoặc
  • integration code cho browser hay application surface đã duyệt.

Kiểm tra source parse được, label khớp bằng chứng, accessibility text mô tả sơ đồ và output đã render vẫn dễ đọc ở kích thước dùng. Ghi exact source cùng rendered path. Nếu không chạy renderer, hãy nói rõ; source trông hợp lệ không chứng minh visual result sạch.

Khắc phục và hiểu giới hạn

Triệu chứngBước tiếp theo an toàn
Runtime không nhận diện ak:mermaidjs-v11Xác nhận target cùng scope, mở lại runtime, rồi làm theo Runtime không tìm thấy Skill hoặc Agent.
mmdc không khả dụngGiữ Mermaid source, báo rendering đã bỏ qua và hỏi trước khi cài package local/global hoặc container.
Parsing thất bạiThu nhỏ thành source lỗi nhỏ nhất, xác nhận diagram keyword cùng v11 syntax rồi validate lại.
Diagram render khác ở host khácKiểm tra Mermaid version, diagram type, configuration và security policy của host đó.
Label overlap hoặc diagram quá dàyRút ngắn label, tách diagram, đổi direction hay layout, rồi render và kiểm tra lại.
Visual cần layout publish chính xácChuyển fact đã duyệt sang ak:tech-graph thay vì ép Mermaid styling.

Skill không bảo đảm host hỗ trợ mọi feature Mermaid v11 hay CDN bên ngoài luôn khả dụng. Skill không publish, deploy hoặc sửa site live trừ khi các hành động riêng đó được phê duyệt rõ.

Tiếp tục với ak:tech-graph, ak:docs hoặc Tổng quan Marketing Kit.