AI Skill MartKhám phá skillLệnhChương trìnhHọcSkill là gì?
 
← Về danh sách

Stack Diagram — Sơ đồ kiến trúc hệ thống

Tạo sơ đồ kiến trúc / tech stack theo phong cách nhà cung cấp cloud với logo thương hiệu thật, xuất ra HTML, PNG hoặc component React/TSX.

Thiết kế · UITrung cấp★ 337⑂ 7Điểm AI 9/10Cập nhật lần cuối: 1 thg 11, 2026

Làm được gì

  • Từ danh sách công nghệ/dịch vụ của bạn, kỹ năng dựng sơ đồ gồm node, khung nhóm (group box) và mũi tên vuông góc gọn gàng.
  • Tự động tải logo chính thức từ svgl, devicon, gilbarbara/logos, Lucide và bộ icon AWS Architecture Icons; nguyên tắc là không bao giờ tự đổi màu logo.
  • Xuất ra một file HTML độc lập (nhúng sẵn ảnh và font dưới dạng data URI), từ đó suy ra PNG (cả theme sáng và tối), component React/TSX hoặc artifact để xem trực tiếp.
  • Sơ đồ AWS tuân theo đúng quy ước vẽ của AWS: Region, AZ, VPC, subnet public/private, mũi tên đầu hở, tên đầy đủ Amazon S3 / AWS Fargate.
  • Có vòng kiểm tra: render PNG rồi tự soi xem mũi tên có cắt qua chữ, icon có bị trắng trên nền trắng hay không.

Dành cho ai

  • Lập trình viên cần hình minh hoạ stack cho README, blog hay slide thuyết trình.
  • Kỹ sư Infra/DevOps phải tài liệu hoá hạ tầng AWS, Cloudflare, Kubernetes...
  • Tech lead, founder muốn sơ đồ đẹp, chuyên nghiệp thay vì ảnh vẽ tay cẩu thả.

Ví dụ sử dụng

  1. "Stack của mình là Next.js + Hono + Drizzle + Cloudflare D1, vẽ sơ đồ giúp" → HTML + PNG với khung nhóm và luồng request được tô màu nhấn.
  2. "Vẽ kiến trúc AWS: ALB → ECS Fargate → RDS" → sơ đồ dùng icon AWS chính thức, tách subnet public/private trong VPC.
  3. "Xuất cả bản sáng và tối để nhét vào README" → hai file PNG @2x chụp từ cùng một HTML.

· · · Hướng dẫn cài đặt · · ·

Dùng thử ngay, không cần cài

Dán đoạn dưới vào Claude là dùng được skill này mà không cần cài đặt.

Hãy đọc hướng dẫn trong tệp này và làm theo để giúp mình:
https://raw.githubusercontent.com/caru-ini/stack-diagram/HEAD/skills/stack-diagram/SKILL.md

Mình muốn: (viết việc bạn cần ở đây)

Nếu Claude không mở được liên kết, hãy mở liên kết và copy nội dung vào rồi dán.

↓ Thấy hữu ích thì tải ZIP bên dưới và cài. Sau đó skill tự chạy, không phải dán lại mỗi lần.

Cài vào ứng dụng Claude (không cần terminal)
  1. Tải tệp ZIP bằng nút bên dưới.
  2. Trong Claude, mở Settings → Capabilities và bật 'Code execution and file creation'. (chỉ một lần)
  3. Vào Customize → Skills → + → 'Upload a skill' rồi tải tệp ZIP lên.
↓ Tải ZIP
Cài vào Claude Code

Để Claude làm — dán câu dưới đây vào Claude Code

Hãy cài skill mình tìm thấy trên AI Skill Mart.
Copy thư mục skills/stack-diagram từ repo GitHub caru-ini/stack-diagram vào ~/.claude/skills/stack-diagram/ của mình.
Sau khi cài xong, cho mình biết skill này làm được gì trong một câu.

Cài bằng lệnh thủ công

git clone https://github.com/caru-ini/stack-diagram.git /tmp/stack-diagram && mkdir -p ~/.claude/skills && cp -r /tmp/stack-diagram/skills/stack-diagram ~/.claude/skills/

⚠ Đây là skill do người khác tạo. Hãy kiểm tra repo gốc trước khi cài.

  1. Mở terminal và clone kho mã: git clone https://github.com/caru-ini/stack-diagram.git
  2. Chép thư mục kỹ năng vào Claude Code: mkdir -p ~/.claude/skills && cp -r stack-diagram/skills/stack-diagram ~/.claude/skills/
  3. Kiểm tra Python: python3 --version (cần 3.9 trở lên).
  4. Nếu muốn xuất PNG, cài thêm: pip install playwright && python3 -m playwright install --with-deps chromium
  5. Đảm bảo máy có kết nối mạng tới svgl.app, raw.githubusercontent.com, cdn.jsdelivr.net và aws.amazon.com để tải icon.
  6. Khởi động lại Claude Code và thử yêu cầu: "vẽ sơ đồ kiến trúc cho stack của tôi".
Xem mã nguồn trên GitHub ↗Giấy phép: MIT