seaworld008/mermaid-tools
openclaw-skills/mermaid-tools/SKILL.md
Extracts Mermaid diagrams from markdown files and generates high-quality PNG images using bundled scripts. Activates when working with Mermaid diagrams, converting diagrams to PNG, extracting diagrams from markdown, or processing markdown files with embedded Mermaid code.
$ install --global
skillsauthnpx skillsauth add seaworld008/commonly-used-high-value-skills mermaid-toolsInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Jun 29, 2026, 5:31 AM210.2s5 files scanned
SKILL.md
- name:
- mermaid-tools
- description:
- Extracts Mermaid diagrams from markdown files and generates high-quality PNG images using bundled scripts. Activates when working with Mermaid diagrams, converting diagrams to PNG, extracting diagrams from markdown, or processing markdown files with embedded Mermaid code.
- zh_description:
- 用于mermaid、tools，支持文档、表格、演示和资料整理。
- version:
- 1.0.0
- author:
- seaworld008
- source:
- in-house
- tags:
- ["mermaid", "tools"]
- created_at:
- 2026-03-04
- updated_at:
- 2026-03-20
- quality:
- 4
- complexity:
- intermediate
Mermaid Tools
Overview
This skill enables extraction of Mermaid diagrams from markdown files and generation of high-quality PNG images. The skill bundles all necessary scripts (extract-and-generate.sh, extract_diagrams.py, and puppeteer-config.json) in the scripts/ directory for portability and reliability.
Core Workflow
Standard Diagram Extraction and Generation
Extract Mermaid diagrams from a markdown file and generate PNG images using the bundled extract-and-generate.sh script:
cd ~/.claude/skills/mermaid-tools/scripts
./extract-and-generate.sh "<markdown_file>" "<output_directory>"
Parameters:
<markdown_file>: Path to the markdown file containing Mermaid diagrams<output_directory>: (Optional) Directory for output files. Defaults to<markdown_file_directory>/diagrams
Example:
cd ~/.claude/skills/mermaid-tools/scripts
./extract-and-generate.sh "/path/to/document.md" "/path/to/output"
What the Script Does
- Extracts all Mermaid code blocks from the markdown file
- Numbers them sequentially (01, 02, 03, etc.) in order of appearance
- Generates
.mmdfiles for each diagram - Creates high-resolution PNG images with smart sizing
- Validates all generated PNG files
Output Files
For each diagram, the script generates:
01-diagram-name.mmd- Extracted Mermaid code01-diagram-name.png- High-resolution PNG image
The numbering ensures diagrams maintain their order from the source document.
Advanced Usage
Custom Dimensions and Scaling
Override default dimensions using environment variables:
cd ~/.claude/skills/mermaid-tools/scripts
MERMAID_WIDTH=1600 MERMAID_HEIGHT=1200 ./extract-and-generate.sh "<markdown_file>" "<output_directory>"
Available variables:
MERMAID_WIDTH(default: 1200) - Base width in pixelsMERMAID_HEIGHT(default: 800) - Base height in pixelsMERMAID_SCALE(default: 2) - Scale factor for high-resolution output
High-Resolution Output for Presentations
cd ~/.claude/skills/mermaid-tools/scripts
MERMAID_WIDTH=2400 MERMAID_HEIGHT=1800 MERMAID_SCALE=4 ./extract-and-generate.sh "<markdown_file>" "<output_directory>"
Print-Quality Output
cd ~/.claude/skills/mermaid-tools/scripts
MERMAID_SCALE=5 ./extract-and-generate.sh "<markdown_file>" "<output_directory>"
Smart Sizing Feature
The script automatically adjusts dimensions based on diagram type (detected from filename):
- Timeline/Gantt: 2400×400 (wide and short)
- Architecture/System/Caching: 2400×1600 (large and detailed)
- Monitoring/Workflow/Sequence/API: 2400×800 (wide for process flows)
- Default: 1200×800 (standard size)
Context-aware naming in the extraction process helps trigger appropriate smart sizing.
Important Principles
Use Bundled Scripts
CRITICAL: Use the bundled extract-and-generate.sh script from this skill's scripts/ directory. All necessary dependencies are bundled together.
Change to Script Directory
Run the script from its own directory to properly locate dependencies (extract_diagrams.py and puppeteer-config.json):
cd ~/.claude/skills/mermaid-tools/scripts
./extract-and-generate.sh "<markdown_file>" "<output_directory>"
Running the script without changing to the scripts directory first may fail due to missing dependencies.
Prerequisites Verification
Before running the script, verify dependencies are installed:
- mermaid-cli:
mmdc --version - Google Chrome:
google-chrome-stable --version - Python 3:
python3 --version
If any are missing, consult references/setup_and_troubleshooting.md for installation instructions.
Troubleshooting
For detailed troubleshooting guidance, refer to references/setup_and_troubleshooting.md, which covers:
- Browser launch failures
- Permission issues
- No diagrams found
- Python extraction failures
- Output quality issues
- Diagram-specific sizing problems
Quick fixes for common issues:
Permission denied:
chmod +x ~/.claude/skills/mermaid-tools/scripts/extract-and-generate.sh
Low quality output:
MERMAID_SCALE=3 ./extract-and-generate.sh "<markdown_file>" "<output_directory>"
Chrome/Puppeteer errors: Verify all WSL2 dependencies are installed (see references for full list).
Bundled Resources
scripts/
This skill bundles all necessary scripts for Mermaid diagram generation:
- extract-and-generate.sh - Main script that orchestrates extraction and PNG generation
- extract_diagrams.py - Python script for extracting Mermaid code blocks from markdown
- puppeteer-config.json - Chrome/Puppeteer configuration for WSL2 environment
All scripts must be run from the scripts/ directory to properly locate dependencies.
references/setup_and_troubleshooting.md
Comprehensive reference documentation including:
- Complete prerequisite installation instructions
- Detailed environment variable reference
- Extensive troubleshooting guide
- WSL2-specific Chrome dependency setup
- Validation procedures
Load this reference when dealing with setup issues, installation problems, or advanced customization needs.
Related Skills
seaworld008/omen
development
VerifiedTrustedCommunity
Enumerating failure modes via pre-mortem analysis. Systematically identifies failure scenarios for plans, designs, and features, scoring them with RPN/AP. Does not write code.
62SKILL.mdUpdated Jun 16, 2026
seaworld008/nexus
testing
VerifiedTrustedCommunity
Orchestrating specialist AI agent teams as a meta-coordinator. Decomposes requests into minimum viable chains, spawns each as an independent session in AUTORUN modes, and drives to final output. Use when a task spans multiple specialist domains, requires parallel agent execution, or needs hub-and-spoke routing across the skill ecosystem.
62SKILL.mdUpdated Jun 11, 2026
seaworld008/morph
development
VerifiedTrustedCommunity
Converting document formats (Markdown/Word/Excel/PDF/HTML). Converts specs from Scribe and reports from Harvest into distributable formats; generates reusable conversion scripts. Use when converting documents, building accessibility-compliant PDFs, or creating Pandoc/LibreOffice pipelines.
62SKILL.mdUpdated Jun 11, 2026
seaworld008/lore
testing
VerifiedTrustedCommunity
Curating cross-agent knowledge and guarding institutional memory. Extracts patterns from agent journals into METAPATTERNS.md, detects knowledge decay, propagates best practices, prevents organizational forgetting. Use when consolidating cross-agent insights, curating memory, or auditing knowledge decay.
62SKILL.mdUpdated Jun 11, 2026