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 ( , , and ) in the 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 script: Parameters: - : Path to the markdown file containing Mermaid diagrams - : (Optional) Directory for output files. Defaults to Example: What the Script Does 1. Extracts all Mermaid code blocks from the markdown…

, '', header)\n header = header.strip()\n\n # Convert to filename-friendly format\n name_part = re.sub(r'[^\\w\\s-]', '', header)\n name_part = re.sub(r'\\s+', '-', name_part.strip())\n name_part = name_part.lower()[:30] # Limit length\n\n if name_part and name_part != 'detailed-design':\n diagram_name = f\"{i:02d}-{name_part}\"\n break\n\n diagrams.append({\n 'number': i,\n 'name': diagram_name,\n 'content': match.strip()\n })\n\n print(f\"Found diagram {i}: {diagram_name}\")\n\n # Write .mmd files\n output_path = Path(output_dir)\n output_path.mkdir(parents=True, exist_ok=True)\n\n created_files = []\n for diagram in diagrams:\n mmd_file = output_path / f\"{diagram['name']}.mmd\"\n try:\n with open(mmd_file, 'w', encoding='utf-8') as f:\n f.write(diagram['content'])\n created_files.append(str(mmd_file))\n print(f\"Created: {mmd_file}\")\n except Exception as e:\n print(f\"ERROR: Cannot create {mmd_file}: {e}\")\n\n return created_files\n\nif __name__ == \"__main__\":\n if len(sys.argv) != 3:\n print(\"Usage: python3 extract_diagrams.py \u003cmarkdown_file> \u003coutput_directory>\")\n sys.exit(1)\n\n markdown_file = sys.argv[1]\n output_dir = sys.argv[2]\n\n files = extract_mermaid_diagrams(markdown_file, output_dir)\n print(f\"\\nExtracted {len(files)} diagrams successfully\")","content_type":"text/x-python; charset=utf-8","language":"python","size":5066,"content_sha256":"81b209e441a1633d11c8c5ce2b353685cfca3351355ee623236452d96872286f"},{"filename":"scripts/extract-and-generate.sh","content":"#!/bin/bash\n# Enhanced Mermaid diagram extraction and PNG generation script\n# Extracts diagrams from markdown and numbers them sequentially\n#\n# Usage: ./extract-and-generate.sh \u003cmarkdown_file> [output_directory]\n# Example: ./extract-and-generate.sh \u003cmarkdown_file> \u003coutput_directory>\n\nset -e\n\nSCRIPT_DIR=\"$(cd \"$(dirname \"${BASH_SOURCE[0]}\")\" && pwd)\"\nCONFIG_FILE=\"$SCRIPT_DIR/puppeteer-config.json\"\nEXTRACTOR_SCRIPT=\"$SCRIPT_DIR/extract_diagrams.py\"\n\n# Parse arguments\nif [ $# -lt 1 ]; then\n echo \"Usage: $0 \u003cmarkdown_file> [output_directory]\"\n echo \"Example: $0 \u003cmarkdown_file> \u003coutput_directory>\"\n exit 1\nfi\n\nMARKDOWN_FILE=\"$1\"\nOUTPUT_DIR=\"${2:-$(dirname \"$MARKDOWN_FILE\")/diagrams}\"\n\necho \"=== Enhanced Mermaid Diagram Processor ===\"\necho \"Source markdown: $MARKDOWN_FILE\"\necho \"Output directory: $OUTPUT_DIR\"\necho \"Environment: WSL2 Ubuntu with Chrome dependencies\"\necho\n\n# Validate inputs\nif [ ! -f \"$MARKDOWN_FILE\" ]; then\n echo \"ERROR: Markdown file not found: $MARKDOWN_FILE\"\n exit 1\nfi\n\n# Create output directory if it doesn't exist\nmkdir -p \"$OUTPUT_DIR\"\n\n# Configuration\nCHROME_PATH=\"/usr/bin/google-chrome-stable\"\n\n# Check dependencies\necho \"Checking dependencies...\"\nif ! command -v mmdc &> /dev/null; then\n echo \"ERROR: @mermaid-js/mermaid-cli not installed\"\n echo \"Install with: npm install -g @mermaid-js/mermaid-cli\"\n exit 1\nfi\n\nif [ ! -f \"$CHROME_PATH\" ]; then\n echo \"ERROR: Google Chrome not found at $CHROME_PATH\"\n echo \"Install Chrome and dependencies with the setup commands\"\n exit 1\nfi\n\nif [ ! -f \"$CONFIG_FILE\" ]; then\n echo \"ERROR: Puppeteer config not found: $CONFIG_FILE\"\n exit 1\nfi\n\nif [ ! -f \"$EXTRACTOR_SCRIPT\" ]; then\n echo \"ERROR: Python extractor script not found: $EXTRACTOR_SCRIPT\"\n exit 1\nfi\n\necho \"✅ Dependencies verified\"\necho\n\n# Extract Mermaid diagrams from markdown\necho \"Extracting Mermaid diagrams from markdown...\"\npython3 \"$EXTRACTOR_SCRIPT\" \"$MARKDOWN_FILE\" \"$OUTPUT_DIR\"\n\nif [ $? -ne 0 ]; then\n echo \"ERROR: Failed to extract diagrams from markdown\"\n exit 1\nfi\n\necho\n\n# Now generate PNGs using the existing generation logic\necho \"Generating PNG files...\"\ncd \"$OUTPUT_DIR\"\n\n# Default dimensions - can be overridden with environment variables\nDEFAULT_WIDTH=\"${MERMAID_WIDTH:-1200}\"\nDEFAULT_HEIGHT=\"${MERMAID_HEIGHT:-800}\"\nSCALE_FACTOR=\"${MERMAID_SCALE:-2}\"\n\n# Process all .mmd files in order\nmmd_files=(*.mmd)\n\nif [ ${#mmd_files[@]} -eq 1 ] && [ \"${mmd_files[0]}\" = \"*.mmd\" ]; then\n echo \"No .mmd files found in output directory\"\n exit 0\nfi\n\n# Sort files numerically by their prefix\nIFS=

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 ( , , and ) in the 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 script: Parameters: - : Path to the markdown file containing Mermaid diagrams - : (Optional) Directory for output files. Defaults to Example: What the Script Does 1. Extracts all Mermaid code blocks from the markdown…

\\n' mmd_files=($(sort -V \u003c\u003c\u003c \"${mmd_files[*]}\"))\n\necho \"Found ${#mmd_files[@]} Mermaid diagram(s) to process\"\necho\n\nfor mmd_file in \"${mmd_files[@]}\"; do\n if [ ! -f \"$mmd_file\" ]; then\n continue\n fi\n\n # Extract filename without extension\n diagram=\"${mmd_file%.mmd}\"\n\n # Use smart defaults based on diagram content or filename patterns\n width=\"$DEFAULT_WIDTH\"\n height=\"$DEFAULT_HEIGHT\"\n\n # Smart sizing based on filename patterns\n if [[ \"$diagram\" =~ timeline|gantt ]]; then\n width=$((DEFAULT_WIDTH * 2)) # Wider for timelines\n height=$((DEFAULT_HEIGHT / 2)) # Shorter for timelines\n elif [[ \"$diagram\" =~ architecture|system ]]; then\n width=$((DEFAULT_WIDTH * 2)) # Larger for complex diagrams\n height=$((DEFAULT_HEIGHT * 2))\n elif [[ \"$diagram\" =~ caching ]]; then\n width=$((DEFAULT_WIDTH * 2)) # Larger for caching flowcharts\n height=$((DEFAULT_HEIGHT * 2))\n elif [[ \"$diagram\" =~ monitoring|workflow|sequence|api ]]; then\n width=$((DEFAULT_WIDTH * 2)) # Wider for workflows and sequences\n height=\"$DEFAULT_HEIGHT\"\n fi\n\n echo \"Generating $diagram.png (${width}x${height}, scale: ${SCALE_FACTOR}x)...\"\n PUPPETEER_EXECUTABLE_PATH=\"$CHROME_PATH\" mmdc \\\n -i \"$mmd_file\" \\\n -o \"$diagram.png\" \\\n --puppeteerConfigFile \"$CONFIG_FILE\" \\\n -w \"$width\" \\\n -H \"$height\" \\\n -s \"$SCALE_FACTOR\"\n\n if [ $? -eq 0 ]; then\n echo \" ✅ Generated successfully\"\n else\n echo \" ❌ Generation failed\"\n continue\n fi\n\n # Validate PNG\n if test -s \"$diagram.png\" && file \"$diagram.png\" | grep -q \"PNG image\"; then\n size=$(stat -c%s \"$diagram.png\")\n dimensions_actual=$(identify -format \"%wx%h\" \"$diagram.png\" 2>/dev/null || echo \"unknown\")\n echo \" ✅ Validated PNG (${size} bytes, ${dimensions_actual})\"\n else\n echo \" ❌ PNG validation failed\"\n fi\n echo\ndone\n\necho \"=== Generation Complete ===\"\necho \"All PNG diagrams generated and validated successfully!\"\necho\n\necho \"Generated files (in sequence order):\"\nls -la [0-9][0-9]-*.png 2>/dev/null | awk '{printf \" %s (%s bytes)\\n\", $9, $5}' || echo \" No numbered PNG files found\"\n\necho\necho \"Generated files (all):\"\nls -la *.png 2>/dev/null | awk '{printf \" %s (%s bytes)\\n\", $9, $5}' || echo \" No PNG files found\"\n","content_type":"application/x-sh; charset=utf-8","language":"bash","size":4967,"content_sha256":"a82a5e303158d0672833c60ddbec839cd442aed98d5cf19da50e32798890a767"},{"filename":"scripts/puppeteer-config.json","content":"{\n \"args\": [\n \"--no-sandbox\",\n \"--disable-setuid-sandbox\",\n \"--disable-dev-shm-usage\",\n \"--disable-gpu\",\n \"--no-first-run\",\n \"--disable-background-timer-throttling\",\n \"--disable-backgrounding-occluded-windows\",\n \"--disable-renderer-backgrounding\",\n \"--disable-features=TranslateUI\",\n \"--disable-ipc-flooding-protection\"\n ]\n}","content_type":"application/json; charset=utf-8","language":"json","size":356,"content_sha256":"62868aec744a24c6f548047cb718692d35d14c768c0edfe23964e7796e4ed0bf"}],"content_json":{"type":"doc","content":[{"type":"heading","attrs":{"level":1},"content":[{"text":"Mermaid Tools","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Overview","type":"text"}]},{"type":"paragraph","content":[{"text":"This skill enables extraction of Mermaid diagrams from markdown files and generation of high-quality PNG images. The skill bundles all necessary scripts (","type":"text"},{"text":"extract-and-generate.sh","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"extract_diagrams.py","type":"text","marks":[{"type":"code_inline"}]},{"text":", and ","type":"text"},{"text":"puppeteer-config.json","type":"text","marks":[{"type":"code_inline"}]},{"text":") in the ","type":"text"},{"text":"scripts/","type":"text","marks":[{"type":"code_inline"}]},{"text":" directory for portability and reliability.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Core Workflow","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Standard Diagram Extraction and Generation","type":"text"}]},{"type":"paragraph","content":[{"text":"Extract Mermaid diagrams from a markdown file and generate PNG images using the bundled ","type":"text"},{"text":"extract-and-generate.sh","type":"text","marks":[{"type":"code_inline"}]},{"text":" script:","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"bash"},"content":[{"text":"cd \"${CLAUDE_SKILL_DIR}/scripts\"\n./extract-and-generate.sh \"\u003cmarkdown_file>\" \"\u003coutput_directory>\"","type":"text"}]},{"type":"paragraph","content":[{"text":"Parameters:","type":"text","marks":[{"type":"strong"}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"\u003cmarkdown_file>","type":"text","marks":[{"type":"code_inline"}]},{"text":": Path to the markdown file containing Mermaid diagrams","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"\u003coutput_directory>","type":"text","marks":[{"type":"code_inline"}]},{"text":": (Optional) Directory for output files. Defaults to ","type":"text"},{"text":"\u003cmarkdown_file_directory>/diagrams","type":"text","marks":[{"type":"code_inline"}]}]}]}]},{"type":"paragraph","content":[{"text":"Example:","type":"text","marks":[{"type":"strong"}]}]},{"type":"code_block","attrs":{"wrap":false,"language":"bash"},"content":[{"text":"cd \"${CLAUDE_SKILL_DIR}/scripts\"\n./extract-and-generate.sh \"\u003cmarkdown_file>\" \"\u003coutput_directory>\"","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"What the Script Does","type":"text"}]},{"type":"ordered_list","attrs":{"order":1,"listStyle":"number"},"content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Extracts","type":"text","marks":[{"type":"strong"}]},{"text":" all Mermaid code blocks from the markdown file","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Numbers","type":"text","marks":[{"type":"strong"}]},{"text":" them sequentially (01, 02, 03, etc.) in order of appearance","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Generates","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":".mmd","type":"text","marks":[{"type":"code_inline"}]},{"text":" files for each diagram","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Creates","type":"text","marks":[{"type":"strong"}]},{"text":" high-resolution PNG images with smart sizing","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Validates","type":"text","marks":[{"type":"strong"}]},{"text":" all generated PNG files","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Output Files","type":"text"}]},{"type":"paragraph","content":[{"text":"For each diagram, the script generates:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"01-diagram-name.mmd","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Extracted Mermaid code","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"01-diagram-name.png","type":"text","marks":[{"type":"code_inline"}]},{"text":" - High-resolution PNG image","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"The numbering ensures diagrams maintain their order from the source document.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Advanced Usage","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Custom Dimensions and Scaling","type":"text"}]},{"type":"paragraph","content":[{"text":"Override default dimensions using environment variables:","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"bash"},"content":[{"text":"cd \"${CLAUDE_SKILL_DIR}/scripts\"\nMERMAID_WIDTH=1600 MERMAID_HEIGHT=1200 ./extract-and-generate.sh \"\u003cmarkdown_file>\" \"\u003coutput_directory>\"","type":"text"}]},{"type":"paragraph","content":[{"text":"Available variables:","type":"text","marks":[{"type":"strong"}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"MERMAID_WIDTH","type":"text","marks":[{"type":"code_inline"}]},{"text":" (default: 1200) - Base width in pixels","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"MERMAID_HEIGHT","type":"text","marks":[{"type":"code_inline"}]},{"text":" (default: 800) - Base height in pixels","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"MERMAID_SCALE","type":"text","marks":[{"type":"code_inline"}]},{"text":" (default: 2) - Scale factor for high-resolution output","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"High-Resolution Output for Presentations","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"bash"},"content":[{"text":"cd \"${CLAUDE_SKILL_DIR}/scripts\"\nMERMAID_WIDTH=2400 MERMAID_HEIGHT=1800 MERMAID_SCALE=4 ./extract-and-generate.sh \"\u003cmarkdown_file>\" \"\u003coutput_directory>\"","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Print-Quality Output","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"bash"},"content":[{"text":"cd \"${CLAUDE_SKILL_DIR}/scripts\"\nMERMAID_SCALE=5 ./extract-and-generate.sh \"\u003cmarkdown_file>\" \"\u003coutput_directory>\"","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Smart Sizing Feature","type":"text"}]},{"type":"paragraph","content":[{"text":"The script automatically adjusts dimensions based on diagram type (detected from filename):","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Timeline/Gantt","type":"text","marks":[{"type":"strong"}]},{"text":": 2400×400 (wide and short)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Architecture/System/Caching","type":"text","marks":[{"type":"strong"}]},{"text":": 2400×1600 (large and detailed)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Monitoring/Workflow/Sequence/API","type":"text","marks":[{"type":"strong"}]},{"text":": 2400×800 (wide for process flows)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Default","type":"text","marks":[{"type":"strong"}]},{"text":": 1200×800 (standard size)","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Context-aware naming in the extraction process helps trigger appropriate smart sizing.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Important Principles","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Use Bundled Scripts","type":"text"}]},{"type":"paragraph","content":[{"text":"CRITICAL","type":"text","marks":[{"type":"strong"}]},{"text":": Use the bundled ","type":"text"},{"text":"extract-and-generate.sh","type":"text","marks":[{"type":"code_inline"}]},{"text":" script from this skill's ","type":"text"},{"text":"scripts/","type":"text","marks":[{"type":"code_inline"}]},{"text":" directory. All necessary dependencies are bundled together.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Change to Script Directory","type":"text"}]},{"type":"paragraph","content":[{"text":"Run the script from its own directory to properly locate dependencies (","type":"text"},{"text":"extract_diagrams.py","type":"text","marks":[{"type":"code_inline"}]},{"text":" and ","type":"text"},{"text":"puppeteer-config.json","type":"text","marks":[{"type":"code_inline"}]},{"text":"):","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"bash"},"content":[{"text":"cd \"${CLAUDE_SKILL_DIR}/scripts\"\n./extract-and-generate.sh \"\u003cmarkdown_file>\" \"\u003coutput_directory>\"","type":"text"}]},{"type":"paragraph","content":[{"text":"Running the script without changing to the scripts directory first may fail due to missing dependencies.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Prerequisites Verification","type":"text"}]},{"type":"paragraph","content":[{"text":"Before running the script, verify dependencies are installed:","type":"text"}]},{"type":"ordered_list","attrs":{"order":1,"listStyle":"number"},"content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"mermaid-cli","type":"text","marks":[{"type":"strong"}]},{"text":": ","type":"text"},{"text":"mmdc --version","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Google Chrome","type":"text","marks":[{"type":"strong"}]},{"text":": ","type":"text"},{"text":"google-chrome-stable --version","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Python 3","type":"text","marks":[{"type":"strong"}]},{"text":": ","type":"text"},{"text":"python3 --version","type":"text","marks":[{"type":"code_inline"}]}]}]}]},{"type":"paragraph","content":[{"text":"If any are missing, consult ","type":"text"},{"text":"references/setup_and_troubleshooting.md","type":"text","marks":[{"type":"code_inline"}]},{"text":" for installation instructions.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Troubleshooting","type":"text"}]},{"type":"paragraph","content":[{"text":"For detailed troubleshooting guidance, refer to ","type":"text"},{"text":"references/setup_and_troubleshooting.md","type":"text","marks":[{"type":"code_inline"}]},{"text":", which covers:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Browser launch failures","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Permission issues","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"No diagrams found","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Python extraction failures","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Output quality issues","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Diagram-specific sizing problems","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Quick fixes for common issues:","type":"text"}]},{"type":"paragraph","content":[{"text":"Permission denied:","type":"text","marks":[{"type":"strong"}]}]},{"type":"code_block","attrs":{"wrap":false,"language":"bash"},"content":[{"text":"chmod +x \"${CLAUDE_SKILL_DIR}/scripts/extract-and-generate.sh\"","type":"text"}]},{"type":"paragraph","content":[{"text":"Low quality output:","type":"text","marks":[{"type":"strong"}]}]},{"type":"code_block","attrs":{"wrap":false,"language":"bash"},"content":[{"text":"MERMAID_SCALE=3 ./extract-and-generate.sh \"\u003cmarkdown_file>\" \"\u003coutput_directory>\"","type":"text"}]},{"type":"paragraph","content":[{"text":"Chrome/Puppeteer errors:","type":"text","marks":[{"type":"strong"}]},{"text":" Verify all WSL2 dependencies are installed (see references for full list).","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Bundled Resources","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"scripts/","type":"text"}]},{"type":"paragraph","content":[{"text":"This skill bundles all necessary scripts for Mermaid diagram generation:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"extract-and-generate.sh","type":"text","marks":[{"type":"strong"}]},{"text":" - Main script that orchestrates extraction and PNG generation","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"extract_diagrams.py","type":"text","marks":[{"type":"strong"}]},{"text":" - Python script for extracting Mermaid code blocks from markdown","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"puppeteer-config.json","type":"text","marks":[{"type":"strong"}]},{"text":" - Chrome/Puppeteer configuration for WSL2 environment","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"All scripts must be run from the ","type":"text"},{"text":"scripts/","type":"text","marks":[{"type":"code_inline"}]},{"text":" directory to properly locate dependencies.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"references/setup_and_troubleshooting.md","type":"text"}]},{"type":"paragraph","content":[{"text":"Comprehensive reference documentation including:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Complete prerequisite installation instructions","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Detailed environment variable reference","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Extensive troubleshooting guide","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"WSL2-specific Chrome dependency setup","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Validation procedures","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Load this reference when dealing with setup issues, installation problems, or advanced customization needs.","type":"text"}]}]},"metadata":{"date":"2026-11-02","name":"mermaid-tools","author":"@skillopedia","source":{"stars":1511,"repo_name":"claude-code-skills","origin_url":"https://github.com/daymade/claude-code-skills/blob/HEAD/daymade-docs/mermaid-tools/SKILL.md","repo_owner":"daymade","body_sha256":"eda57bd623beb7f56fb57f350e0e32a49644dec4b93d90c0ad24d3daadd164e8","cluster_key":"cd60c10cade8d878dc2d3b5b00d688b461fb376b4388f11fa161dade5f958fee","clean_bundle":{"format":"clean-skill-bundle-v1","source":"daymade/claude-code-skills/daymade-docs/mermaid-tools/SKILL.md","text_bytes":15587,"source_commit":"0633c92cdf1192ebed0b550384ea2a56f0abd520","skills_sh_rank":10131,"attachment_count":4,"text_attachments":4,"attachment_storage":"skill_attachments","binary_attachments":0},"cluster_size":1,"skill_md_path":"daymade-docs/mermaid-tools/SKILL.md","import_metadata":{"date":"2026-11-02","author":"@skillopedia","version":"v1","category":"design-ux","category_label":"Design"},"exact_dupes_collapsed_into_this":0},"version":"v1","category":"design-ux","import_tag":"skills-sh-top20k-2026-11","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.","disable-model-invocation":true}},"renderedAt":1793666447999}

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 ( , , and ) in the 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 script: Parameters: - : Path to the markdown file containing Mermaid diagrams - : (Optional) Directory for output files. Defaults to Example: What the Script Does 1. Extracts all Mermaid code blocks from the markdown…