Claude Skill MartKhám phá skillCâu dùng ngayHọc qua videoDùng terminalSkill là gì?
 
← Về danh sách

Trình tạo sơ đồ Mermaid

Tạo hơn 12 loại sơ đồ Mermaid dưới dạng văn bản và xuất ra PNG/SVG/PDF.

Thiết kế · UINhập môn★ 175⑂ 15Điểm AI 10/10Cập nhật lần cuối: 16 thg 7, 2026

Làm được gì

  • Chọn loại sơ đồ phù hợp (flowchart, sequence, class, ER, state, gantt, mindmap, architecture...) và ghi ra tệp .mmd.
  • Luôn kiểm tra cú pháp trước khi xuất, sau đó dùng mmdc cục bộ hoặc Kroki API (không cần cài gì) để tạo PNG/SVG/PDF.
  • Tự đọc lại ảnh PNG để phát hiện nhãn bị cắt, sơ đồ quá dày hay hướng sai, tự sửa tối đa 2 vòng, rồi tiếp tục vòng phản hồi với người dùng.
  • Chỉ rõ khi nào KHÔNG nên dùng Mermaid (cần bố cục chính xác từng pixel, phong cách vẽ tay, UML nghiêm ngặt) và gợi ý công cụ khác.

Phù hợp với ai

  • Lập trình viên, tech lead muốn minh họa kiến trúc hệ thống và luồng API trong tài liệu/README.
  • Nhóm muốn quản lý sơ đồ bằng Git thay vì tệp ảnh nhị phân.
  • Người viết tài liệu, giảng viên muốn tạo sơ đồ nhanh mà không cần công cụ vẽ.

Ví dụ sử dụng

  1. "Vẽ sequence diagram cho luồng xác thực JWT" → sinh .mmd với Client, Gateway, Auth Service, Database và xuất PNG.
  2. "Vẽ kiến trúc microservices cho sàn thương mại điện tử" → flowchart nhóm bằng subgraph cho tầng client/service/data.
  3. "Mô tả vòng đời đơn hàng" → state diagram Pending → Confirmed → Shipped → Delivered kèm bước tự kiểm tra độ dễ đọc.

· · · 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/Agents365-ai/mermaid-skill/HEAD/skills/mermaid-skill/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 Claude Skill Mart.
Copy thư mục skills/mermaid-skill từ repo GitHub Agents365-ai/mermaid-skill vào ~/.claude/skills/mermaid-skill/ 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/Agents365-ai/mermaid-skill.git /tmp/mermaid-skill && mkdir -p ~/.claude/skills && cp -r /tmp/mermaid-skill/skills/mermaid-skill ~/.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.
  2. Tải mã nguồn: git clone https://github.com/Agents365-ai/mermaid-skill.git /tmp/mermaid-skill
  3. Sao chép skill: mkdir -p ~/.claude/skills && cp -r /tmp/mermaid-skill/skills/mermaid-skill ~/.claude/skills/
  4. (Tùy chọn, để xuất cục bộ) Chạy npm install -g @mermaid-js/mermaid-cli, sau đó npx puppeteer browsers install chrome-headless-shell.
  5. Nếu không cài được, chỉ cần curl --version là dùng được Kroki API cho PNG/SVG (PDF thì buộc phải dùng mmdc cục bộ).
  6. Khởi động lại Claude Code và thử yêu cầu "vẽ flowchart cho..." để kiểm tra skill có kích hoạt.
Xem mã nguồn trên GitHub ↗Giấy phép: MIT