Bạn viết một câu kiểu “Next.js với Hono API trên Vercel, Postgres trên Neon, auth bằng Clerk, thanh toán qua Stripe”. Rồi agent trả về một file HTML có sơ đồ kiến trúc đầy đủ, logo đúng nhãn hiệu, đường nối không cắt ngang chữ. Đó là toàn bộ ý tưởng của stack-diagram.
Repo này là một “skill” cho agent, không phải một app độc lập. Nó đóng gói quy trình: lấy logo, dựng layout, render, tự kiểm tra rồi giao file. Cài bằng một lệnh npx, chạy trong Claude Code, Codex, Cursor hoặc các agent hỗ trợ skill.
Nó giải quyết chuyện gì, cụ thể
Vẽ sơ đồ kiến trúc bằng tay rất mất thời gian. Mở draw.io, kéo từng box, tìm logo, canh thẳng, rồi đến lúc thêm một service là phải sửa lại toàn bộ. Với một stack cỡ 8 thành phần, việc này dễ ngốn cả buổi. stack-diagram biến nó thành một câu prompt.
Phần khó nhất mà repo này xử lý được là logo. Nó fetch logo từ svgl trước, nếu không có thì sang devicon, rồi gilbarbara/logos, rồi tới repo của chính thương hiệu. Riêng icon AWS thì lấy từ package chính thức của AWS. Tác giả ghi rõ: không đổi màu, không vẽ lại. Mấy tool tự sinh diagram thường tô lại logo cho hợp theme, nhìn là biết ngay.
Chi tiết nữa là định tuyến đường nối. README nói thẳng: “No arrows through text”. Dây được route vòng qua label, và agent tự render rồi kiểm tra trước khi giao. Nghe nhỏ nhưng đây đúng là thứ khiến sơ đồ tự động trông dùng được thay vì rối như canh hẹ.
Vì sao 589 sao trong hai ngày
Repo tạo ngày 2026-11-01, cập nhật ngày 2026-11-02. Tức là gần như toàn bộ số sao đến trong khoảng một ngày. Đây là kiểu repo bắt đúng sóng “agent skills” đang lên, cộng thêm một thứ rất dễ share: ảnh sơ đồ đẹp.
Nhu cầu có thật. Dev hay phải giải thích kiến trúc cho người mới vào team, cho sếp, cho khách, hoặc viết vào README. Ai cũng muốn có hình. Nhưng ít ai muốn bỏ công vẽ. Và cái khó chịu nhất khi vẽ là logo: tải về sai kích thước, nền trong suốt bị mất, màu bị lệch. Repo này nhắm đúng điểm đau đó.
Điểm khác biệt so với mấy tool “text to diagram” khác nằm ở chỗ nó là skill chứ không phải web app. Không cần đăng ký, không cần API key riêng, không upload dữ liệu lên server lạ. Chạy local trong agent bạn đang dùng.
Cài và chạy thử
Một lệnh, không cần clone:
npx skills add caru-ini/stack-diagramNếu dùng Claude app thì tải stack-diagram.zip trong mục Releases rồi upload như một skill.
Sau đó chỉ cần mô tả stack. Ví dụ lấy nguyên từ README:
Diagram our stack: Next.js and a Hono API on Vercel. Postgres on Neon, auth with Clerk, payments with Stripe. GitHub Actions deploys.Và một ví dụ khác, cũng từ README, cho thấy nó không chỉ vẽ cloud:
Draw our monorepo tooling: a pnpm workspace with Turborepo, Biome, Vitest and Lefthook. GitHub Actions runs CI and publishes to npm.Ví dụ thứ ba dùng icon AWS chính thức:
Draw our app on AWS: CloudFront in front of S3 and an ALB in a public subnet. Fargate, RDS and ElastiCache sit in a private subnet.Output mặc định là một file HTML tự chứa: font và logo inline hết, mở không cần mạng. Ngoài ra có PNG, một React component không dependency, hoặc publish thành Claude artifact. README nói PNG và React component được render từ cùng file đó, nên không sợ lệch nhau.
Yêu cầu môi trường: Python 3.9 trở lên, có mạng để tải logo. Export PNG thì cần Playwright với Chromium. Cái này nên biết trước, vì nếu máy chưa có Chromium thì bước export sẽ fail chứ không tự cài.
Ai nên dùng
Hợp nhất với người viết tài liệu kiến trúc. README, wiki, trang onboarding đều cần sơ đồ, và cập nhật sơ đồ là việc ai cũng trì hoãn. Sửa một câu prompt nhanh hơn sửa file draw.io.
Cũng hợp với ai hay thuyết trình nội bộ. Cần hình cho slide, cần bản light và dark. Repo render cả hai theme, tile giữ nền trắng để logo giữ màu gốc, còn label nhóm thì đổi sang logo bản dark theme của thương hiệu. Chi tiết này cho thấy tác giả có để ý tới việc dùng thật.
Không hợp lắm với ai cần sơ đồ cực chi tiết kiểu C4 model nhiều tầng, hoặc cần chỉnh tay từng pixel. Đây là công cụ sinh nhanh, không phải editor.
So với mấy lựa chọn khác
Mermaid và D2 đều vẽ được sơ đồ từ text, ổn định, chạy offline, không cần agent. Nhưng chúng không lo phần logo: bạn phải tự chèn ảnh, tự canh. Đổi lại, output của chúng là text nên diff được trong git, còn stack-diagram cho ra HTML đã render.
Excalidraw thì linh hoạt hơn nhiều khi cần chỉnh tay, nhưng vẫn là vẽ bằng tay. Nếu mục tiêu là “có hình trong 30 giây” thì stack-diagram thắng; nếu mục tiêu là “hình đẹp đúng ý tôi” thì vẫn phải mở editor.
Ưu điểm và mấy chỗ cần lưu ý
Ưu điểm rõ nhất: logo đúng nguồn và không bị tô lại, cộng với việc agent tự kiểm tra layout trước khi giao. Cài đặt nhẹ, một lệnh. License MIT cho code và docs, thoải mái dùng trong công ty.
Về license thì có một điểm phải đọc kỹ: logo không được bundle trong skill. Chúng tải lúc build từ svgl, devicon (MIT), gilbarbara/logos (CC0), AWS Architecture Icons, Lucide (ISC), hoặc từ site/repo của thương hiệu. Nghĩa là dùng logo vẫn phải tuân theo trademark của bên đó. README ghi rõ: dùng logo trong sơ đồ không hàm ý thương hiệu đó endorse bạn. Font bundle thì theo SIL Open Font License 1.1.
Điểm cần cân nhắc thứ hai: đây là repo mới tạo, mới cập nhật đúng một lần. 589 sao là tín hiệu tốt nhưng chưa nói lên độ ổn định. API của skill có thể đổi, format output có thể đổi. Đừng đưa nó vào pipeline CI/CD production ngay.
Thứ ba: phụ thuộc mạng và phụ thuộc agent. Không có mạng thì không có logo. Agent không hỗ trợ skill thì phải dùng đường upload file. Và nếu agent render sai, bạn vẫn phải prompt lại, không có giao diện để kéo thả sửa.
Cuối cùng, chất lượng phụ thuộc vào câu mô tả. Viết “web app với database” thì sơ đồ cũng mơ hồ theo. Viết rõ service nào nằm ở subnet nào, cái gì gọi cái gì, thì kết quả mới nét.
Kết luận thực dụng
Nếu bạn đang cần một sơ đồ kiến trúc cho README hoặc slide trong hôm nay, cài thử mất khoảng 30 giây và một prompt. 589 sao trong một ngày là con số đáng để bấm vào xem, nhưng hãy coi nó là tool tiện tay chứ chưa phải hạ tầng. Repo ở đây: caru-ini/stack-diagram.
