Can I generate images for high-quality printing?

Yes, by adjusting the MERMAID_SCALE environment variable, you can generate high-density images (up to 5x scale) suitable for print or 4K presentations.

How does the smart sizing feature work?

The skill detects diagram types based on context and applies optimal aspect ratios. For example, Timelines are rendered wide and short (2400x400), while Architecture diagrams use a larger, detailed canvas (2400x1600).

What output files are created during extraction?

For every diagram found, the skill generates a numbered .mmd file containing the raw Mermaid code and a corresponding high-resolution .png image.

What are the prerequisites for using Mermaid Tools?

You will need Python 3, mermaid-cli (mmdc), and Google Chrome installed on your local system to run the generation scripts.

Is this skill compatible with WSL2?

Yes, it includes a bundled puppeteer-config.json specifically designed to handle common Chrome execution hurdles in Windows Subsystem for Linux environments.

Mermaid Diagram Exporter

Name: Mermaid Diagram Exporter
Author: daymade

bydaymade

•

108

•

Learning & Documentation

Extracts and converts Mermaid diagrams from Markdown files into high-quality PNG images with automated smart sizing and scaling.

This skill automates the workflow of documenting systems by extracting Mermaid syntax directly from Markdown files and rendering them into production-ready visual assets. It features a robust orchestration script that handles sequential file naming, smart dimension adjustment based on diagram type—such as wide layouts for timelines or dense layouts for system architectures—and high-resolution scaling for presentations. Designed for reliability and portability, it bundles all necessary scripts and Puppeteer configurations to ensure consistent output across different development environments, including WSL2.

Key Features

01Smart sizing logic that automatically optimizes dimensions based on diagram type (Gantt, Architecture, API, etc.).

02High-resolution scaling support (up to 5x) for professional print and presentation quality.

03108 GitHub stars

04Sequential numbering of output files to maintain the original document flow.

05Automated extraction of multiple Mermaid code blocks from a single Markdown document.

06Pre-configured Puppeteer settings for seamless Chrome execution in containerized or WSL2 environments.

Use Cases

01Generating high-resolution architecture diagrams for technical READMEs and internal wikis.

02Converting code-based documentation into visual slides for project stakeholders and presentations.

03Automating the export of system flowcharts and Gantt charts during the development lifecycle.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add daymade/claude-code-skills mermaid-tools

For use in Claude.ai and ChatGPT

Download Skill