skills.rest
haboshi
haboshiCOMMUNITY
Explore all skills by this author →
GitHub

mermaid-to-webp

Convert Mermaid syntax diagrams to WebP or PNG images using mermaid-cli and sharp.

Updated Jan 28, 2026
Search Tags:#png#mermaid#image generation#visualization#webp#diagram
One-click install
npx skills add https://github.com/haboshi/claude-code-skills --skill mermaid-to-webp
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mermaid-to-webp
Source: https://github.com/haboshi/claude-code-skills/tree/main/mermaid-to-webp
Command: npx skills add https://github.com/haboshi/claude-code-skills --skill mermaid-to-webp

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @mermaid-js/mermaid-cli, sharp, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill converts Mermaid syntax diagrams into high-quality WebP or PNG images, streamlining the process of visualizing code, architecture, or workflows.

Core Features & Use Cases

  • Versatile Diagram Support: Converts various diagram types including flowcharts, sequence diagrams, class diagrams, and more.
  • Format Flexibility: Outputs images in WebP or PNG format.
  • Customization Options: Allows control over theme, size, quality, and background color.

Quick Start

Convert the Mermaid diagram defined in 'diagram.mmd' to 'output.webp' using the dark theme.

Frequently Asked Questions about mermaid-to-webp

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert Mermaid diagrams to WebP or PNG images?▼

To convert Mermaid diagrams to WebP or PNG images, this tool processes Mermaid syntax using mermaid-cli and sharp. It supports flowcharts, sequence diagrams, and ER diagrams, outputting high-quality image files with customized themes and sizes.

What do I need to generate WebP images from Mermaid syntax?▼

Generating WebP images from Mermaid syntax requires Node.js 18+ along with the mermaid-cli and sharp packages. These dependencies handle the rendering of diagram code and the subsequent image manipulation and format conversion.

Can I customize the theme and background color when exporting Mermaid diagrams?▼

Yes, you can customize the theme, size, quality, and background color when exporting Mermaid diagrams. These options allow you to tailor the visual output of your flowcharts or sequence diagrams to match your specific design requirements.

What types of Mermaid diagrams can I render to image files?▼

You can render various Mermaid diagram types to image files, including flowcharts, sequence diagrams, class diagrams, and ER diagrams. The tool parses the standard Mermaid syntax for each type and converts them into WebP or PNG formats.

Why use sharp for Mermaid diagram image generation?▼

Using sharp for Mermaid diagram image generation enables efficient conversion to WebP or PNG formats with adjustable quality and dimensions. It processes the raw rendering output from mermaid-cli to produce optimized image files for web or documentation use.

Related Skills

Explore More Design & Creative Skills→
bengousbengous
3

mermaid-diagrams

Create, edit, and fix Mermaid diagrams from natural language prompts.

Community
Basic
kettleofketchupkettleofketchup
13

mermaidjs-v11

Generate Mermaid.js v11 diagrams from text definitions.

Community
Intermediate
githubgithub
37.6k

excalidraw-diagram-generator

Convert natural-language diagram requests into Excalidraw-ready .excalidraw files.

Official
Intermediate
krzemienskikrzemienski
2

beautiful-mermaid

Render Mermaid diagrams as SVG and PNG images.

Community
Advanced