Tóm tắt nhanh:
ak-tech-graphvẽ sơ đồ kỹ thuật chất lượng xuất bản: kiến trúc, luồng dữ liệu, sequence, hệ AI agent, bảng so sánh. Nó cho ra file SVG để sửa và PNG rộng 1920px, xem lại ảnh đã xuất và báo thật trạng thái kiểm tra. Cần sơ đồ nhanh nằm ngay trong Markdown thìak-mermaidjs-v11hợp hơn.
Công khai: mình là maintainer của AgentKit và có quan hệ affiliate: link AgentKit trong bài là link affiliate, mua qua link này bạn được giảm 30%.
Tóm tắt
Dùng khi bạn cần sơ đồ để đăng lên docs, README, blog hay slide: kiến trúc khớp với code, sequence cho README nền tối, minh hoạ hệ AI agent, flowchart theo màu brand, bảng so sánh. Không cần cho sơ đồ dạng chữ nhỏ nằm ngay trong tài liệu, việc đó là của ak-mermaidjs-v11.
flowchart LR
A["Mô tả hoặc code"] --> B["ak-tech-graph"]
B --> C["File SVG để sửa"]
B --> D["File PNG 1920px"]
C --> E["Docs, README, blog, slide"]
D --> E
B --> F["Dừng, báo bằng chứng khi thiếu công cụ"]Nó dựa trên 4 ý:
| Ý | Câu hỏi | Ví dụ |
|---|---|---|
| Kiểu sơ đồ | Loại hình nào kể đúng câu chuyện? | Kiến trúc chia tầng, luồng dữ liệu, sequence, kiến trúc agent, bảng so sánh, timeline, ER |
| Style | Sơ đồ nằm ở đâu, nền sáng hay tối? | Flat Icon (mặc định) cho blog, Dark Terminal cho README GitHub, Blueprint cho tài liệu kiến trúc |
| Mũi tên có nghĩa | Màu và nét của mũi tên nói lên điều gì? | Luồng chính nét liền đậm, ghi vào bộ nhớ nét đứt, sự kiện bất đồng bộ nét đứt màu xám |
| Kiểm tra bằng mắt | SVG hợp lệ đã đủ chưa? | Chưa. Nhãn đè lên khung hay chữ bị cắt mép vẫn qua kiểm tra cú pháp, nên skill mở PNG ra xem |
Bạn đưa sẵn style hoặc màu brand thì skill giữ nguyên. Runtime không đọc được ảnh thì nó nói rõ chất lượng hình chưa được kiểm, không tự nhận là đẹp.
Prompt mẫu để vẽ kiến trúc từ code:
/ak-tech-graph Vẽ sơ đồ kiến trúc cho dịch vụ <tên dịch vụ> dựa trên code trong <thư mục>.
Chia tầng: client, gateway, các service, lớp dữ liệu.
Quan hệ nào code không cho thấy rõ thì đánh dấu là chưa chắc, đừng đoán.| Cờ | Để làm gì | Từ ak |
|---|---|---|
--output | Chọn nơi lưu file SVG và PNG | 1.0.0 |
Sau tên skill bạn ghi kiểu sơ đồ hoặc mô tả hệ thống bằng lời thường, có thể nêu luôn style trong câu.
Phần dưới đây là bản chi tiết: luồng chạy, 5 tình huống kèm prompt, giải thích cờ --output (dùng khi, không cần khi, nhận lại gì), lịch sử thay đổi theo bản ak và các lỗi hay vấp. Bản chi tiết và trang trực quan dành cho subscriber. Agent của bạn cũng tìm được trong đó qua MCP của portal.
Mở khi tài khoản có quyền subscriber
Bài này dành cho subscriber
Khi tài khoản có quyền, toàn bộ bài, bản visual tương tác và lệnh gọi từ agent đều mở.
- Đăng nhập hoặc tạo tài khoản modernEngineerQuyền đọc gắn với email tài khoản.
- Chọn gói trên trang Bảng giáGói 1, 3 hoặc 12 tháng, trả bằng chuyển khoản VietQR. Quyền đọc mở khoảng một phút sau khi tiền về.
- Hoặc nhập mã Facebook subscriberNgười ủng hộ trang qua Facebook nhận mã kích hoạt qua tin nhắn mỗi tháng.
Đã là subscriber? Đăng nhập để đọc.
Dùng bài này trong agent của bạn
Lấy API keyChép đoạn dưới, dán vào Claude Code, Codex hay agent bạn đang dùng. Agent đọc bài rồi đối chiếu với repo đang mở.
Đọc bài "ak-tech-graph: vẽ sơ đồ kỹ thuật SVG, PNG để xuất bản" trên modernEngineer rồi áp dụng vào repo này.
1. Gọi tool content_get của MCP server modernengineer với locale "vi", slug "ak-tech-graph". Nếu chưa nối MCP server modernengineer, dừng lại và hướng dẫn tôi nối theo https://modernengineer.dev/vi/mcp.
2. Tóm tắt các bước chính của bài, chỉ ra bước nào áp dụng được cho repo này.
3. Đề xuất thay đổi cụ thể và hỏi tôi trước khi sửa file.Nối MCP cho Claude Code (một lần)
claude mcp add --transport http modernengineer \
https://api.modernengineer.dev/mcp \
--header "Authorization: Bearer <API key>"Đọc trọn bài qua MCP cần API key của tài khoản subscriber hoặc đã mua guide này. Không có quyền, agent sẽ chỉ đọc được phần mở đầu.
- Phiên bản
- v1.0.0
- Cập nhật
- 22/10/2026
- Giấy phép
- Bảo lưu mọi quyền
- Slug
- ak-tech-graph
