Can I control the dimensions of the output image?

Absolutely. You can use the --width and --height options to set specific dimensions, and the --fit option to control how the diagram scales.

Which Mermaid diagram types are supported?

It supports all major Mermaid types including flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, Gantt charts, pie charts, and mindmaps.

Do I need to install anything else to use this?

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

Can I change the look of the generated diagrams?

Yes, you can specify themes such as 'dark', 'forest', 'neutral', or 'default' using the --theme option.

What image formats can this skill produce?

The skill primarily produces optimized WebP images but also supports standard PNG output for compatibility with all platforms.

Mermaid to Image Converter

Name: Mermaid to Image Converter
Author: haboshi

byhaboshi

0•

设计工具

Converts Mermaid diagram syntax into optimized WebP or PNG images for professional documentation and visual aids.

This skill automates the transformation of text-based Mermaid diagrams into high-quality visual assets directly within your development workflow. By integrating mermaid-cli and the Sharp image processing library, it allows users to generate polished WebP or PNG files from flowcharts, sequence diagrams, ERDs, and more. It is an essential tool for developers and technical writers who need to produce consistent, optimized diagrams for READMEs, project documentation, or architectural reviews without relying on manual export tools.

主要功能

01Customizable output settings for width, height, quality, and background color

02Converts Mermaid syntax to optimized WebP and high-quality PNG formats

03Supports both file-based batch processing and standard input (stdin) workflows

04Provides multiple visual themes including Dark, Forest, and Neutral

05Supports all Mermaid diagram types including Flowcharts, Sequence, ER, and Gantt charts

060 GitHub stars

使用场景

01Generating high-resolution diagram assets for technical documentation and README files

02Visualizing complex database schemas or software architectures during the design phase

03Creating sequence diagrams for bug reports or pull request descriptions to improve clarity

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

Download Skill