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

SeeCode — Trình tạo sơ đồ

Chỉ viết một spec JSON ngắn để tạo 45 loại sơ đồ dạng HTML động và xuất ra PNG, SVG, GIF hoặc MP4.

Thiết kế · UITrung cấp★ 738⑂ 41Điểm AI 10/10Cập nhật lần cuối: 26 thg 10, 2026

Làm được gì

  • Hỗ trợ 45 loại sơ đồ: kiến trúc, flowchart, sequence, state, ER/DB schema, UML class, swimlane, timeline/gantt, cây & sơ đồ tổ chức, venn, quadrant, fishbone, wardley, bar/line/scatter/sankey/treemap/heatmap, và cả vật thể 3D isometric (ghế, mặt bằng, bản vẽ tách rời).
  • Claude không viết SVG/HTML thủ công, chỉ viết spec JSON gọn; script seecode.mjs lo bố cục, màu sắc, hiệu ứng, kiểm tra và xuất file.
  • Nhập từ Mermaid, Graphviz/DOT, PlantUML, D2, draw.io, Excalidraw, SQL, CSV, OpenAPI rồi vẽ lại sạch đẹp.
  • SC scan <thư mục> quét mã nguồn thật để dựng sơ đồ module/import/hạ tầng kèm bằng chứng file:dòng.
  • Xuất theo đích đến: --for pdf|docs|readme|slides|social|video hoặc --formats png,svg,gif,mp4.

Phù hợp với ai

  • Lập trình viên, kiến trúc sư hệ thống cần sơ đồ cho README, tài liệu thiết kế, slide.
  • Người muốn chuyển Mermaid/SQL schema sẵn có thành hình ảnh gọn gàng.
  • Người dùng phổ thông muốn trực quan hóa kế hoạch đời thường: du lịch, chuyển nhà, tìm việc, ngân sách.

Ví dụ sử dụng

  1. "Vẽ sequence diagram cho luồng gọi API thanh toán" → tạo spec → SC render spec.json → file HTML tương tác.
  2. "Chuyển đoạn Mermaid này thành SVG cho README" → SC import flow.mmd → vẽ lại → SC export x.html --for readme.
  3. "Dùng sales.csv vẽ biểu đồ cột và xuất PNG" → spec có "data":"sales.csv" → --formats png.

· · · 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/Aryanutkarsh/SeeCode/HEAD/skills/seecode/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/seecode từ repo GitHub Aryanutkarsh/SeeCode vào ~/.claude/skills/seecode/ 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/Aryanutkarsh/SeeCode.git /tmp/seecode && mkdir -p ~/.claude/skills && cp -r /tmp/seecode/skills/seecode ~/.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. Kiểm tra Node.js: chạy node -v (nếu chưa có, cài bản LTS từ nodejs.org).
  2. Tải repo: git clone https://github.com/Aryanutkarsh/SeeCode.git /tmp/seecode
  3. Chép nguyên thư mục kỹ năng (bắt buộc kèm scripts và references): mkdir -p ~/.claude/skills && cp -r /tmp/seecode/skills/seecode ~/.claude/skills/
  4. Khởi động lại Claude Code, rồi thử yêu cầu: "vẽ sơ đồ kiến trúc hệ thống giúp tôi".
  5. Lần chạy đầu, trả lời câu hỏi cấu hình rồi lưu bằng SC config init --use global; nếu cần GIF/MP4 hãy chạy SC doctor để kiểm tra công cụ ngoài.
Xem mã nguồn trên GitHub ↗Giấy phép: MIT