What dependencies are required for this skill?

The skill requires mermaid-cli (mmdc), Google Chrome, and Python 3 to be installed on your system to process the diagrams and generate images.

Can I use this skill in a WSL2 environment?

Yes, it includes a specific puppeteer-config.json file designed to address common browser rendering issues found in WSL2 and Linux environments.

How do I increase the resolution of the exported images?

You can override the default resolution by setting the MERMAID_SCALE environment variable to a higher value (e.g., 3 or 5) before running the export script.

How does the smart sizing feature work?

The skill detects the diagram type (e.g., Gantt, Architecture, or API) and automatically applies optimized aspect ratios, such as wide layouts for timelines and large grids for system designs.

Mermaid Diagram Exporter

Name: Mermaid Diagram Exporter
Author: daymade

bydaymade

•

147

•

Content Management

Automates the extraction of Mermaid diagrams from markdown files and converts them into high-resolution, production-ready PNG images.

Mermaid Diagram Exporter is a specialized utility designed to streamline technical documentation workflows by programmatically identifying Mermaid code blocks within markdown files and rendering them into high-quality visual assets. It features a sophisticated smart-sizing engine that automatically adjusts image dimensions based on the diagram type—optimizing layouts for Gantt charts, system architectures, or sequence diagrams. Whether you are preparing print-quality documentation or high-resolution presentation slides, this skill provides the necessary automation scripts and configurations to handle complex rendering tasks directly within your development environment.

Key Features

01High-resolution scaling support for print-quality and presentation-ready image exports

02Smart-sizing logic that optimizes dimensions for specific diagram types like Timelines and Architectures

03147 GitHub stars

04Automatic extraction of multiple Mermaid code blocks from markdown files with sequential numbering

05Bundled Puppeteer configuration optimized for reliability in WSL2 and Linux environments

06Sequential output generation that maintains the original document's visual flow

Use Cases

01Automating the visual documentation pipeline for complex system workflows and API sequences

02Generating professional architecture visuals for stakeholder presentations and design reviews

03Converting technical README diagrams into high-fidelity image assets for external documentation sites

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