Claude Skill MartKhám phá skillSkill là gì?
 
← Về danh sách

Bộ công cụ Mermaid

Kỹ năng trích xuất toàn bộ sơ đồ Mermaid trong file markdown và xuất ra ảnh PNG độ phân giải cao chỉ với một lệnh.

Tài liệu · Văn phòngTrung cấp★ 1,323⑂ 212Điểm AI 8/10Cập nhật lần cuối: 8 thg 8, 2026

Công cụ này làm gì

  • Quét file markdown và tự động lấy ra mọi khối mã ```mermaid.
  • Đánh số theo đúng thứ tự xuất hiện (01, 02, 03...) rồi tạo cặp file .mmd và .png cho từng sơ đồ.
  • Tự điều chỉnh kích thước theo loại sơ đồ: timeline/gantt (rộng và thấp), kiến trúc hệ thống (lớn, chi tiết), sequence/workflow (rộng cho luồng xử lý).
  • Cho phép tùy biến qua biến môi trường MERMAID_WIDTH, MERMAID_HEIGHT, MERMAID_SCALE để xuất ảnh cho slide hoặc bản in.
  • Kiểm tra tính hợp lệ của ảnh PNG sau khi tạo và kèm tài liệu xử lý sự cố chi tiết.

Phù hợp với ai

  • Lập trình viên, technical writer thường vẽ sơ đồ Mermaid trong tài liệu thiết kế hay README.
  • Người cần chèn sơ đồ vào Notion, Confluence, Google Slides — những nơi không render Mermaid trực tiếp.
  • Ai muốn chuyển hàng loạt sơ đồ trong một tài liệu dài thành bộ ảnh nhất quán.
  • Người dùng WSL2 hay gặp lỗi Chrome/Puppeteer khi chạy mermaid-cli.

Ví dụ sử dụng

  1. Xuất tài liệu kiến trúc: yêu cầu "trích xuất tất cả sơ đồ trong architecture.md thành PNG" → nhận thư mục diagrams/ chứa ảnh đã đánh số.
  2. Ảnh cho bài thuyết trình: chạy với MERMAID_WIDTH=2400 MERMAID_HEIGHT=1800 MERMAID_SCALE=4 để có ảnh sắc nét trên màn hình lớn.
  3. Chất lượng in ấn: dùng MERMAID_SCALE=5 để xuất ảnh đủ nét cho báo cáo in giấy.

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

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 /tmp/claude-code-skills && mkdir -p ~/.claude/skills && cp -r /tmp/claude-code-skills/daymade-docs/mermaid-tools ~/.claude/skills/ && chmod +x ~/.claude/skills/mermaid-tools/scripts/*.sh

⚠ Đâ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à tải kho mã: git clone https://github.com/daymade/claude-code-skills.git
  2. Tạo thư mục kỹ năng: mkdir -p ~/.claude/skills
  3. Sao chép kỹ năng: cp -r claude-code-skills/daymade-docs/mermaid-tools ~/.claude/skills/
  4. Cấp quyền chạy cho script: chmod +x ~/.claude/skills/mermaid-tools/scripts/*.sh
  5. Cài các phụ thuộc bắt buộc:
    • npm install -g @mermaid-js/mermaid-cli rồi kiểm tra mmdc --version
    • Cài Google Chrome (kiểm tra google-chrome-stable --version)
    • Kiểm tra Python: python3 --version
  6. Khởi động lại Claude Code và thử yêu cầu: "chuyển các sơ đồ Mermaid trong file này thành PNG".
  7. Nếu gặp lỗi trình duyệt hoặc quyền truy cập, xem references/setup_and_troubleshooting.md trong thư mục kỹ năng.
Xem mã nguồn trên GitHub ↗Giấy phép: MIT