How do I trigger the diagram conversion?

You can prompt Claude with phrases like 'Convert this Mermaid diagram to a WebP image' or 'Generate a flowchart image from this code'.

What types of Mermaid diagrams can I convert?

It supports a wide range of diagrams including flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, Gantt charts, pie charts, and mindmaps.

Which image formats are supported by this skill?

The skill primarily exports to WebP for modern web optimization, but it also supports high-quality PNG format conversion.

Does this skill require any local dependencies?

Yes, it requires Node.js 18+, @mermaid-js/mermaid-cli, and the sharp library to be installed in your environment.

Can I customize the visual style of the output images?

Yes, you can specify different Mermaid themes like dark, forest, or neutral, and adjust parameters such as width, height, and background color.

Mermaid to WebP Converter

Name: Mermaid to WebP Converter
Author: haboshi

byhaboshi

0•

学习与文档

Converts Mermaid diagram syntax into high-quality WebP or PNG images for technical documentation.

This skill enables Claude to transform Mermaid-based diagram code—including flowcharts, sequence diagrams, and ER diagrams—into optimized visual assets. It streamlines the documentation process by allowing developers to generate professional-grade images directly from text definitions using mermaid-cli and sharp, featuring full support for themes, custom dimensions, and quality scaling. It is ideal for developers who need to quickly turn architectural descriptions into web-ready visuals without leaving their development environment.

主要功能

01Customizable themes including dark, forest, neutral, and default

02High-performance conversion to optimized WebP and PNG formats

03Support for all major Mermaid types including flowcharts, ERD, and mindmaps

04Adjustable output dimensions, scaling, and image quality settings

050 GitHub stars

06Automated processing from both local files and standard input

使用场景

01Generating visual assets for software documentation and repository READMEs

02Creating system architecture diagrams for technical presentations

03Converting database ER diagrams into shareable image formats for design reviews

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add haboshi/claude-code-skills mermaid-to-webp

For use in Claude.ai and ChatGPT

主要功能

01Customizable themes including dark, forest, neutral, and default

02High-performance conversion to optimized WebP and PNG formats

03Support for all major Mermaid types including flowcharts, ERD, and mindmaps

04Adjustable output dimensions, scaling, and image quality settings

050 GitHub stars

06Automated processing from both local files and standard input

使用场景

01Generating visual assets for software documentation and repository READMEs

02Creating system architecture diagrams for technical presentations

03Converting database ER diagrams into shareable image formats for design reviews

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add haboshi/claude-code-skills mermaid-to-webp

For use in Claude.ai and ChatGPT