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

Gestión de Contenido

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

Acerca de

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.

Características Principales

0 GitHub stars
Smart Sizing feature that auto-detects diagram types for optimal aspect ratios
High-resolution PNG generation with customizable scaling and dimensions
Bundled Puppeteer configuration optimized for reliable performance in WSL2 environments
Sequential numbering of output files to maintain source document order
Automated extraction of Mermaid blocks from any Markdown file

Casos de Uso

Automating the visualization of project timelines and Gantt charts directly from Markdown notes
Converting documentation-embedded Mermaid code into high-quality images for slide decks and presentations
Generating 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

Download Skill

GitHub