skills.rest
nicepkg
nicepkgOFFICIAL
Explore all skills by this author →
GitHub

mermaid-tools

Extract Mermaid diagrams from markdown files and generate PNG images.

276|46|Updated Jan 16, 2026
Search Tags:#automation#markdown#mermaid#scripting#png generation#diagrams
One-click install
npx skills add https://github.com/nicepkg/ai-workflow --skill mermaid-tools-nicepkg
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mermaid-tools
Source: https://github.com/nicepkg/ai-workflow/tree/main/workflows/talk-to-slidev-workflow/.claude/skills/mermaid-tools
Command: npx skills add https://github.com/nicepkg/ai-workflow --skill mermaid-tools-nicepkg

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @mermaid-js/mermaid-cli, google-chrome-stable, python3, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This skill automates the extraction of Mermaid diagrams from markdown files and generates high-quality PNG images, eliminating the need for manual conversion and ensuring consistent visual output.

Core Features & Use Cases

  • Extracts Mermaid diagrams: Identifies and isolates Mermaid code blocks from markdown documents.
  • Generates PNG images: Creates high-resolution PNG files for each extracted diagram.
  • Smart sizing: Automatically adjusts dimensions based on diagram type (timeline, architecture, workflow, etc.).
  • Use Case: When documenting system architecture in markdown, this skill can automatically convert all embedded Mermaid diagrams into presentable PNGs for reports or wikis.

Quick Start

Use the mermaid-tools skill to extract all mermaid diagrams from the file '/path/to/document.md' and save them as PNGs in '/path/to/output'.

Frequently Asked Questions about mermaid-tools

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I extract Mermaid diagrams from markdown files and convert them to PNG?▼

To extract Mermaid diagrams from markdown and generate PNGs, this skill identifies Mermaid code blocks and processes them into high-resolution images using bundled scripts, requiring mermaid-cli, Google Chrome, and Python 3.

What dependencies are required to generate PNG images from Mermaid diagrams?▼

Generating PNG images from Mermaid diagrams requires mermaid-cli, Google Chrome, and Python 3 installed in your environment. These dependencies handle rendering and script execution for the conversion process.

Does this tool automatically adjust sizing for different Mermaid diagram types?▼

Yes, the Mermaid to PNG conversion process automatically adjusts dimensions based on diagram type, such as timeline, architecture, or workflow. This ensures consistent visual output without manual sizing adjustments.

Can I process multiple embedded Mermaid code blocks from a single markdown document?▼

Yes, you can process markdown files with embedded Mermaid code blocks to extract all diagrams and save them as PNGs. The tool identifies and isolates multiple Mermaid code blocks within a single document for batch conversion.

What is the best way to automate converting markdown Mermaid diagrams for wiki reports?▼

The best way to automate converting markdown Mermaid diagrams for wiki reports is using a script-based approach that extracts code blocks and renders high-quality PNGs. This eliminates manual conversion and ensures consistent visual output for documentation.

Related Skills

Explore More Software Engineering Skills→
daymadedaymade
1.3k

mermaid-tools

Extract Mermaid diagrams from Markdown files and render them as PNG images.

Community
Advanced
gyalamanch001agyalamanch001a

beautiful-mermaid

Render Mermaid diagrams into SVG and PNG images.

Community
Intermediate
diegocanepadiegocanepa

mermaid-diagrams

Generate flowcharts, sequence diagrams, and class diagrams from Mermaid syntax.

Community
Basic
patricio0312revpatricio0312rev
5

mermaid-diagram-generator

Generate Mermaid diagrams for flows, sequences, ERDs, and architecture in Markdown.

Community
Intermediate