Can I adjust the image resolution for high-quality printing?

Yes, you can override default settings using environment variables. Setting MERMAID_SCALE to 5, for example, will generate print-quality, high-resolution output.

Is this skill compatible with WSL2?

Yes, it specifically includes a puppeteer-config.json file and instructions to handle the unique Chrome dependency requirements of the WSL2 environment.

How does the smart sizing feature work?

The skill analyzes the diagram name or type to detect layouts like 'Timeline' or 'Architecture' and automatically applies optimized aspect ratios, such as 2400x400 for timelines or 2400x1600 for detailed system designs.

What dependencies are required to run this skill?

You will need mermaid-cli (mmdc), Google Chrome, and Python 3 installed. The skill includes a detailed setup and troubleshooting guide to help configure these dependencies in various environments.

Does this skill handle multiple diagrams in a single Markdown file?

Yes, the script extracts all Mermaid blocks and numbers them sequentially (01, 02, 03, etc.) to ensure the generated images correspond to their original order in your document.

Mermaid Diagram Generator

Name: Mermaid Diagram Generator
Author: nguyendinhquocx

bynguyendinhquocx

0•

内容管理

Extracts Mermaid syntax from Markdown files and renders them into high-quality PNG images with smart sizing and high-resolution support.

This skill streamlines the documentation workflow by automating the conversion of Mermaid code blocks within Markdown files into professional, high-resolution PNG images. It includes intelligent 'Smart Sizing' that detects diagram types—such as Gantt charts or system architectures—and adjusts dimensions accordingly for the best visual result. By bundling all necessary extraction scripts and Puppeteer configurations, it provides a reliable and portable solution for generating visual documentation directly from Claude Code, ensuring your diagrams are always production-ready.

主要功能

010 GitHub stars

02Smart Sizing feature that auto-detects diagram types for optimal aspect ratios

03High-resolution PNG generation with customizable scaling and dimensions

04Bundled Puppeteer configuration optimized for reliable performance in WSL2 environments

05Sequential numbering of output files to maintain source document order

06Automated extraction of Mermaid blocks from any Markdown file

使用场景

01Automating the visualization of project timelines and Gantt charts directly from Markdown notes

02Converting documentation-embedded Mermaid code into high-quality images for slide decks and presentations

03Generating architecture diagrams and system workflows for technical documentation and READMEs

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add nguyendinhquocx/code-ai mermaid-tools

For use in Claude.ai and ChatGPT

主要功能

010 GitHub stars

02Smart Sizing feature that auto-detects diagram types for optimal aspect ratios

03High-resolution PNG generation with customizable scaling and dimensions

04Bundled Puppeteer configuration optimized for reliable performance in WSL2 environments

05Sequential numbering of output files to maintain source document order

06Automated extraction of Mermaid blocks from any Markdown file

使用场景

01Automating the visualization of project timelines and Gantt charts directly from Markdown notes

02Converting documentation-embedded Mermaid code into high-quality images for slide decks and presentations

03Generating architecture diagrams and system workflows for technical documentation and READMEs