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

Bộ công cụ Mermaid → PNG

Trích xuất toàn bộ sơ đồ Mermaid trong file markdown và tự động render thành ảnh PNG chất lượng cao.

Tiện íchTrung cấp★ 1,323⑂ 212Điểm AI 9/10Cập nhật lần cuối: 8 thg 8, 2026

Skill này làm gì

  • Quét file markdown, lấy tất cả khối mã ```mermaid và lưu thành các file .mmd được đánh số 01, 02... theo đúng thứ tự xuất hiện.
  • Dùng mermaid-cli (mmdc) render từng sơ đồ thành PNG độ phân giải cao rồi kiểm tra tính hợp lệ của ảnh đầu ra.
  • Tự chọn kích thước thông minh theo loại sơ đồ: timeline/gantt (rộng và thấp), architecture (lớn, chi tiết), sequence/workflow (rộng).
  • Cho phép ghi đè kích thước bằng biến môi trường MERMAID_WIDTH, MERMAID_HEIGHT, MERMAID_SCALE.
  • Đi kèm sẵn extract-and-generate.sh, extract_diagrams.py và puppeteer-config.json (cấu hình Chrome cho WSL2).

Phù hợp với ai

  • Lập trình viên, technical writer cần chèn sơ đồ kiến trúc vào slide, wiki hay PDF.
  • Người dùng công cụ không hỗ trợ render Mermaid nên cần ảnh tĩnh.
  • Ai cần xuất hàng loạt sơ đồ từ nhiều tài liệu một lượt.
  • Người làm việc trên WSL2/Linux từng gặp lỗi Chrome/Puppeteer khi render Mermaid.

Ví dụ sử dụng

  1. "Xuất hết sơ đồ Mermaid trong docs/architecture.md ra PNG" → tạo thư mục docs/diagrams với các ảnh đánh số theo thứ tự.
  2. "Làm lại với 2400x1800, scale 4 để đưa vào slide thuyết trình" → chạy lại kèm biến môi trường độ phân giải cao.
  3. "Ảnh bị mờ, nâng lên chất lượng in" → chạy với MERMAID_SCALE=5.

· · · 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/daymade/claude-code-skills/HEAD/daymade-docs/mermaid-tools/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 daymade-docs/mermaid-tools từ repo GitHub daymade/claude-code-skills vào ~/.claude/skills/mermaid-tools/ 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/daymade/claude-code-skills.git && mkdir -p ~/.claude/skills && cp -r claude-code-skills/daymade-docs/mermaid-tools ~/.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. Cài phụ thuộc: npm install -g @mermaid-js/mermaid-cli, cài Google Chrome (hoặc Chromium) và Python 3.
  2. Kiểm tra: chạy mmdc --version, google-chrome-stable --version, python3 --version để chắc chắn mọi thứ đã có.
  3. Tải repo: git clone https://github.com/daymade/claude-code-skills.git
  4. Copy skill: mkdir -p ~/.claude/skills && cp -r claude-code-skills/daymade-docs/mermaid-tools ~/.claude/skills/
  5. Cấp quyền thực thi: chmod +x ~/.claude/skills/mermaid-tools/scripts/extract-and-generate.sh
  6. Mở lại Claude Code và yêu cầu: "chuyển các sơ đồ Mermaid trong file này thành PNG".
  7. Nếu Chrome không khởi chạy được, xem references/setup_and_troubleshooting.md trong skill để cài đủ thư viện hệ thống.
Xem mã nguồn trên GitHub ↗Giấy phép: MIT