Ctrl K

Tóm tắt nhanh / Lệnh

Bộ Engineer

/ak:diagram

Sơ đồ editorial hợp nhất

Bề mặt tạo sơ đồ ổn định cho Mermaid, 24 loại template editorial, HTML thô, ảnh PNG/SVG và luồng connector động MP4/GIF.

Định tuyến theo artifact

Chọn tầng đầu vào

Tính đến giới hạn

Dàn khung editorial

Nguyên tắc 01

Chọn theo artifact cần tạo, không chọn chỉ vì có chữ diagram.

Nguyên tắc 02

Sơ đồ editorial phải truyền nghĩa bằng hình học, bảng màu và chuyển động.

Nguyên tắc 03

Render ổn định rất quan trọng: Mermaid, trình duyệt, font và animation đều được ghim.

Nguyên tắc 04

HTML thô là đường đi đúng khi template chưa khai báo slot.

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.

Khởi động

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

1 Định tuyến theo artifact Chọn ak:diagram cho PNG/SVG editorial hoặc MP4/GIF ngắn; chuyển canvas chỉnh sửa sang ak:excalidraw, khám phá graph lớn sang ak:graphify, và render Mermaid thuần sang ak:mermaid nếu đã cài.
2 Chọn tầng đầu vào Dùng Tier 1 Mermaid, Tier 2 JSON kèm --type khi template có slot, hoặc Tier 3 HTML thô cho trang đã dàn dựng đầy đủ.

Xử lý

Agent / skill thực thi

3 Tính đến giới hạn Với template Tier 2 hiện tại, bắt đầu từ HTML vendored và chỉnh tay vì ví dụ upstream chưa mở slot thay thế.
4 Dàn khung editorial Dùng bảng màu mực-trên-giấy chặt chẽ, một màu nhấn, hình học có ý nghĩa và HTML tự chứa an toàn trên mobile.

Kiểm chứng

Gate, review, xác thực

5 Thêm chuyển động Với luồng chuyển động, gắn hiệu ứng connector như marching-ants, comet, wave, morse, glow, silhouette, pulse hoặc dashed-flow.
6 Render ổn định Chạy render.py để xuất HTML/PNG/SVG hoặc record.py để xuất MP4/GIF với Mermaid, Chromium, font cố định và animation được đóng băng.

Đóng

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

7 Kiểm tra golden Với thay đổi hình ảnh có chủ đích, so với snapshot hash trong profile Chromium/font đã ghim trước khi cập nhật golden.
8 Bàn giao kèm nguồn Trả lại artifact đã tạo và giữ attribution cho Mermaid/template/effect qua sổ third-party notices chung.

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:diagram [request]

Đối số

[request] Bắt buộc

Yêu cầu sơ đồ

Source, artifact cần tạo, loại sơ đồ hoặc mục tiêu visual, thư mục output và ranh giới cho phép browser rendering, video capture hoặc cài dependency bằng ngôn ngữ tự nhiên.

/ak:diagram Render checkout-flow.mmd thành PNG và SVG editorial trong ./artifacts

Mode / route nên dùng

Mermaid source

Tầng 1

Nghiên cứu:: Read Mermaid input guidance
Review:: Check syntax and framing
Xác thực:: HTML/PNG/SVG emitted

JSON spec + type

Tầng 2

Nghiên cứu:: Read per-type schema
Review:: Check template slot limitation
Xác thực:: Template render output

Raw HTML

Tầng 3

Nghiên cứu:: Inspect composed page
Review:: Check mobile and animation
Xác thực:: Rendered artifact output

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

Lưu ý Tier 2

JSON spec đã được nối, nhưng template vendored hiện là ví dụ hoàn chỉnh chưa khai báo slot thay thế.

Giảm chuyển động

Hiệu ứng connector tự đóng băng khi người dùng bật prefers-reduced-motion để artifact động vẫn dễ tiếp cận.

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

Mermaid sang PNG/SVG editorial Khuyến nghị

/ak:diagram Render checkout-flow.mmd thành PNG và SVG dạng editorial trong ./artifacts với khung tối, không cài đặt dependency, và nêu rõ mọi output chưa được xác minh.

Dùng khi:: Artifact mong muốn là sơ đồ tĩnh chỉn chu từ Mermaid source, không phải render Mermaid thuần hay canvas chỉnh sửa.
Kết quả:: Dùng đường Tier 1 Mermaid với Mermaid vendored, bọc source trong khung editorial, xuất HTML tự chứa kèm PNG và SVG nếu extract được, đồng thời báo giới hạn dependency hoặc renderer.

Video connector động

/ak:diagram Tạo animation MP4 connector-flow dài sáu giây từ diagram.html cho checkout handoff; chỉ tạo GIF nếu tôi yêu cầu riêng.

Dùng khi:: Video ngắn giải thích chuyển động hoặc bàn giao tốt hơn ảnh tĩnh.
Kết quả:: Xem video là bước record riêng trên HTML đã chuẩn bị, dùng connector effect bundled khi phù hợp, mặc định xuất MP4, và nêu yêu cầu ffmpeg cùng frame capture.

Template chỉnh tay

/ak:diagram Render loop.html đã chỉnh tay của tôi thành HTML và PNG editorial an toàn cho mobile; không dựa vào thay thế slot JSON.

Dùng khi:: Bạn cần giao diện của template editorial ở hiện tại, nhưng template vendored chưa mở slot thay thế JSON hữu ích.
Kết quả:: Dùng đường Tier 3 HTML thô, giữ nội dung trang đã dàn dựng, render HTML tự chứa và PNG, và không hứa rằng field JSON có cấu trúc sẽ điền vào template.

Probe dependency

/ak:diagram Kiểm tra xem môi trường này có thể kết xuất PNG/SVG và ghi MP4 cho ./diagrams mà không cần cài đặt gì không.

Dùng khi:: Trước khi render, bạn cần biết Playwright, Chromium, Mermaid vendored và ffmpeg có sẵn hay không mà không thay đổi environment.
Kết quả:: Chạy dependency probe không cài đặt, tách yêu cầu output tĩnh render bằng browser khỏi video, và báo tool thiếu như setup cần phê duyệt thay vì tự cài âm thầm.

Phạm vi xử lý

Bọc Mermaid v11 và trích xuất SVG
Hai mươi bốn loại sơ đồ editorial với biến thể light, dark và full
HTML tự chứa, chụp PNG, trích SVG và ghi video
Hiệu ứng connector không phụ thuộc thư viện và hỗ trợ reduced-motion
Snapshot hash, profile render được ghim và nguồn template vendored

Artifact tạo ra

Artifact sơ đồ

Mẫu đường dẫn

<basename>.html + <basename>.png + tùy chọn .svg/.mp4/.gif

HTML tự chứa, PNG 2× ổn định, SVG được trích khi có, và bản ghi MP4/GIF có thể lặp lại cho luồng động.