Initial release: Professional Claude Code Skills Marketplace

8 production-ready skills for enhanced Claude Code workflows: 1. github-ops - Comprehensive GitHub operations via gh CLI and API - PR/issue management, workflow automation, API interactions 2. markdown-tools - Document conversion to markdown - PDF/Word/PowerPoint/Confluence → Markdown with WSL support 3. mermaid-tools - Mermaid diagram generation - Extract and render diagrams from markdown to PNG/SVG 4. statusline-generator - Claude Code statusline customization - Multi-line layouts, cost tracking, git status, colors 5. teams-channel-post-writer - Microsoft Teams communication - Adaptive Cards, formatted announcements, corporate standards 6. repomix-unmixer - Repomix file extraction - Extract from XML/Markdown/JSON formats with auto-detection 7. skill-creator - Skill development toolkit - Init, validation, packaging scripts with privacy best practices 8. llm-icon-finder - AI/LLM brand icon finder - 100+ AI model icons in SVG/PNG/WEBP formats Features: - Individual skill installation (install only what you need) - Progressive disclosure design (optimized context usage) - Privacy-safe examples (no personal/company information) - Comprehensive documentation with references - Production-tested workflows Installation: /plugin marketplace add daymade/claude-code-skills /plugin marketplace install daymade/claude-code-skills#<skill-name> Version: 1.2.0 License: See individual skill licenses 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-22 23:42:29 +08:00
commit 94b40e0833
40 changed files with 7743 additions and 0 deletions
--- a/mermaid-tools/SKILL.md
+++ b/mermaid-tools/SKILL.md
@@ -0,0 +1,164 @@
+---
+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.
+---
+
+# 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:
+
+```bash
+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:**
+```bash
+cd ~/.claude/skills/mermaid-tools/scripts
+./extract-and-generate.sh "/path/to/document.md" "/path/to/output"
+```
+
+### What the Script Does
+
+1. **Extracts** all Mermaid code blocks from the markdown file
+2. **Numbers** them sequentially (01, 02, 03, etc.) in order of appearance
+3. **Generates** `.mmd` files for each diagram
+4. **Creates** high-resolution PNG images with smart sizing
+5. **Validates** all generated PNG files
+
+### Output Files
+
+For each diagram, the script generates:
+- `01-diagram-name.mmd` - Extracted Mermaid code
+- `01-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:
+
+```bash
+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 pixels
+- `MERMAID_HEIGHT` (default: 800) - Base height in pixels
+- `MERMAID_SCALE` (default: 2) - Scale factor for high-resolution output
+
+### High-Resolution Output for Presentations
+
+```bash
+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
+
+```bash
+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`):
+
+```bash
+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:
+
+1. **mermaid-cli**: `mmdc --version`
+2. **Google Chrome**: `google-chrome-stable --version`
+3. **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:**
+```bash
+chmod +x ~/.claude/skills/mermaid-tools/scripts/extract-and-generate.sh
+```
+
+**Low quality output:**
+```bash
+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.
--- a/mermaid-tools/references/setup_and_troubleshooting.md
+++ b/mermaid-tools/references/setup_and_troubleshooting.md
@@ -0,0 +1,175 @@
+# Mermaid Diagram Generation - Setup and Troubleshooting
+
+## Table of Contents
+- [Prerequisites](#prerequisites)
+- [Script Locations](#script-locations)
+- [Features](#features)
+- [Environment Variables](#environment-variables)
+- [Troubleshooting](#troubleshooting)
+- [Validation](#validation)
+
+## Prerequisites
+
+### 1. Node.js and mermaid-cli
+
+Install mermaid-cli globally:
+```bash
+npm install -g @mermaid-js/mermaid-cli
+```
+
+Verify installation:
+```bash
+mmdc --version
+```
+
+### 2. Google Chrome for WSL2
+
+Install Chrome and dependencies:
+```bash
+# Add Chrome repository
+wget -q -O - https://dl.google.com/linux/linux_signing_key.pub | sudo apt-key add -
+echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" | sudo tee /etc/apt/sources.list.d/google-chrome.list
+
+# Update and install Chrome
+sudo apt update
+sudo apt install -y google-chrome-stable
+
+# Install required dependencies for WSL2
+sudo apt install -y libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb fonts-liberation libxml2-utils
+```
+
+Verify Chrome installation:
+```bash
+google-chrome-stable --version
+```
+
+### 3. Python 3
+
+The extraction script requires Python 3 (usually pre-installed on Ubuntu):
+```bash
+python3 --version
+```
+
+## Script Locations
+
+The mermaid diagram tools are bundled with this skill in the `scripts/` directory:
+- Main script: `~/.claude/skills/mermaid-tools/scripts/extract-and-generate.sh`
+- Python extractor: `~/.claude/skills/mermaid-tools/scripts/extract_diagrams.py`
+- Puppeteer config: `~/.claude/skills/mermaid-tools/scripts/puppeteer-config.json`
+
+All scripts should be run from the `scripts/` directory to properly locate dependencies.
+
+## Features
+
+### Smart Sizing
+
+The script automatically adjusts diagram dimensions based on filename patterns:
+
+- **Timeline/Gantt charts**: 2400x400 (wide and short)
+- **Architecture/System/Caching diagrams**: 2400x1600 (large and detailed)
+- **Monitoring/Workflow/Sequence/API diagrams**: 2400x800 (wide for process flows)
+- **Default**: 1200x800 (standard size)
+
+### Sequential Numbering
+
+Diagrams are automatically numbered sequentially (01, 02, 03, etc.) in the order they appear in the markdown file.
+
+### High-Resolution Output
+
+Default scale factor is 2x for high-quality output. Can be customized with environment variables.
+
+## Environment Variables
+
+Override default dimensions and scaling:
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `MERMAID_WIDTH` | 1200 | Base width for generated PNGs |
+| `MERMAID_HEIGHT` | 800 | Base height for generated PNGs |
+| `MERMAID_SCALE` | 2 | Scale factor for high-resolution output |
+
+### Examples
+
+```bash
+# Custom dimensions
+MERMAID_WIDTH=1600 MERMAID_HEIGHT=1200 ./extract-and-generate.sh "file.md" "output_dir"
+
+# High-resolution mode for presentations
+MERMAID_WIDTH=2400 MERMAID_HEIGHT=1800 MERMAID_SCALE=4 ./extract-and-generate.sh "file.md" "output_dir"
+
+# Ultra-high resolution for print materials
+MERMAID_SCALE=5 ./extract-and-generate.sh "file.md" "output_dir"
+```
+
+## Troubleshooting
+
+### Browser Launch Failures
+
+**Symptom**: Errors about Chrome not launching or Puppeteer failures
+
+**Solution**:
+1. Verify Chrome is installed: `google-chrome-stable --version`
+2. Check Chrome path in script matches: `/usr/bin/google-chrome-stable`
+3. Ensure all dependencies are installed (see Prerequisites section 2)
+4. Verify puppeteer-config.json exists at the expected location
+
+### Permission Issues
+
+**Symptom**: "Permission denied" when running the script
+
+**Solution**:
+```bash
+chmod +x ~/.claude/skills/mermaid-tools/scripts/extract-and-generate.sh
+```
+
+### No Diagrams Found
+
+**Symptom**: Script reports "No .mmd files found" or "No diagrams extracted"
+
+**Solution**:
+1. Verify the markdown file contains Mermaid code blocks (` ```mermaid`)
+2. Check the markdown file path is correct
+3. Ensure Mermaid code blocks are properly formatted
+
+### Python Extraction Failures
+
+**Symptom**: Errors during the extraction phase
+
+**Solution**:
+1. Verify Python 3 is installed: `python3 --version`
+2. Check the markdown file encoding (should be UTF-8)
+3. Review the markdown file for malformed Mermaid code blocks
+
+### Output Quality Issues
+
+**Symptom**: Generated images are too small or low quality
+
+**Solution**:
+Use environment variables to increase dimensions and scale:
+```bash
+MERMAID_WIDTH=2400 MERMAID_HEIGHT=1800 MERMAID_SCALE=3 ./extract-and-generate.sh "file.md" "output_dir"
+```
+
+### Diagram-Specific Sizing Issues
+
+**Symptom**: Specific diagram types don't render well with default sizes
+
+**Solution**:
+The script has smart sizing for common patterns, but you can override for specific cases:
+```bash
+# For very wide sequence diagrams
+MERMAID_WIDTH=3000 MERMAID_HEIGHT=1000 ./extract-and-generate.sh "file.md" "output_dir"
+
+# For very tall flowcharts
+MERMAID_WIDTH=1200 MERMAID_HEIGHT=2400 ./extract-and-generate.sh "file.md" "output_dir"
+```
+
+## Validation
+
+The script automatically validates generated PNG files by:
+1. Checking file size is non-zero
+2. Verifying the file is a valid PNG image
+3. Reporting actual dimensions
+4. Displaying file size in bytes
+
+Look for ✅ validation messages in the output to confirm successful generation.
--- a/mermaid-tools/scripts/extract-and-generate.sh
+++ b/mermaid-tools/scripts/extract-and-generate.sh
@@ -0,0 +1,166 @@
+#!/bin/bash
+# Enhanced Mermaid diagram extraction and PNG generation script
+# Extracts diagrams from markdown and numbers them sequentially
+#
+# Usage: ./extract-and-generate.sh <markdown_file> [output_directory]
+# Example: ./extract-and-generate.sh "~/workspace/document.md" "~/workspace/diagrams"
+
+set -e
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+CONFIG_FILE="$SCRIPT_DIR/puppeteer-config.json"
+EXTRACTOR_SCRIPT="$SCRIPT_DIR/extract_diagrams.py"
+
+# Parse arguments
+if [ $# -lt 1 ]; then
+    echo "Usage: $0 <markdown_file> [output_directory]"
+    echo "Example: $0 '~/workspace/document.md' '~/workspace/diagrams'"
+    exit 1
+fi
+
+MARKDOWN_FILE="$1"
+OUTPUT_DIR="${2:-$(dirname "$MARKDOWN_FILE")/diagrams}"
+
+echo "=== Enhanced Mermaid Diagram Processor ==="
+echo "Source markdown: $MARKDOWN_FILE" 
+echo "Output directory: $OUTPUT_DIR"
+echo "Environment: WSL2 Ubuntu with Chrome dependencies"
+echo
+
+# Validate inputs
+if [ ! -f "$MARKDOWN_FILE" ]; then
+    echo "ERROR: Markdown file not found: $MARKDOWN_FILE"
+    exit 1
+fi
+
+# Create output directory if it doesn't exist
+mkdir -p "$OUTPUT_DIR"
+
+# Configuration
+CHROME_PATH="/usr/bin/google-chrome-stable"
+
+# Check dependencies
+echo "Checking dependencies..."
+if ! command -v mmdc &> /dev/null; then
+    echo "ERROR: @mermaid-js/mermaid-cli not installed"
+    echo "Install with: npm install -g @mermaid-js/mermaid-cli"
+    exit 1
+fi
+
+if [ ! -f "$CHROME_PATH" ]; then
+    echo "ERROR: Google Chrome not found at $CHROME_PATH"
+    echo "Install Chrome and dependencies with the setup commands"
+    exit 1
+fi
+
+if [ ! -f "$CONFIG_FILE" ]; then
+    echo "ERROR: Puppeteer config not found: $CONFIG_FILE"
+    exit 1
+fi
+
+if [ ! -f "$EXTRACTOR_SCRIPT" ]; then
+    echo "ERROR: Python extractor script not found: $EXTRACTOR_SCRIPT"
+    exit 1
+fi
+
+echo "✅ Dependencies verified"
+echo
+
+# Extract Mermaid diagrams from markdown
+echo "Extracting Mermaid diagrams from markdown..."
+python3 "$EXTRACTOR_SCRIPT" "$MARKDOWN_FILE" "$OUTPUT_DIR"
+
+if [ $? -ne 0 ]; then
+    echo "ERROR: Failed to extract diagrams from markdown"
+    exit 1
+fi
+
+echo
+
+# Now generate PNGs using the existing generation logic
+echo "Generating PNG files..."
+cd "$OUTPUT_DIR"
+
+# Default dimensions - can be overridden with environment variables  
+DEFAULT_WIDTH="${MERMAID_WIDTH:-1200}"
+DEFAULT_HEIGHT="${MERMAID_HEIGHT:-800}"
+SCALE_FACTOR="${MERMAID_SCALE:-2}"
+
+# Process all .mmd files in order
+mmd_files=(*.mmd)
+
+if [ ${#mmd_files[@]} -eq 1 ] && [ "${mmd_files[0]}" = "*.mmd" ]; then
+    echo "No .mmd files found in output directory"
+    exit 0
+fi
+
+# Sort files numerically by their prefix
+IFS=$'\n' mmd_files=($(sort -V <<< "${mmd_files[*]}"))
+
+echo "Found ${#mmd_files[@]} Mermaid diagram(s) to process"
+echo
+
+for mmd_file in "${mmd_files[@]}"; do
+    if [ ! -f "$mmd_file" ]; then
+        continue
+    fi
+    
+    # Extract filename without extension
+    diagram="${mmd_file%.mmd}"
+    
+    # Use smart defaults based on diagram content or filename patterns
+    width="$DEFAULT_WIDTH"
+    height="$DEFAULT_HEIGHT"
+    
+    # Smart sizing based on filename patterns
+    if [[ "$diagram" =~ timeline|gantt ]]; then
+        width=$((DEFAULT_WIDTH * 2))  # Wider for timelines
+        height=$((DEFAULT_HEIGHT / 2))  # Shorter for timelines
+    elif [[ "$diagram" =~ architecture|system ]]; then
+        width=$((DEFAULT_WIDTH * 2))  # Larger for complex diagrams
+        height=$((DEFAULT_HEIGHT * 2))
+    elif [[ "$diagram" =~ caching ]]; then
+        width=$((DEFAULT_WIDTH * 2))  # Larger for caching flowcharts
+        height=$((DEFAULT_HEIGHT * 2))
+    elif [[ "$diagram" =~ monitoring|workflow|sequence|api ]]; then
+        width=$((DEFAULT_WIDTH * 2))  # Wider for workflows and sequences
+        height="$DEFAULT_HEIGHT"
+    fi
+    
+    echo "Generating $diagram.png (${width}x${height}, scale: ${SCALE_FACTOR}x)..."
+    PUPPETEER_EXECUTABLE_PATH="$CHROME_PATH" mmdc \
+        -i "$mmd_file" \
+        -o "$diagram.png" \
+        --puppeteerConfigFile "$CONFIG_FILE" \
+        -w "$width" \
+        -H "$height" \
+        -s "$SCALE_FACTOR"
+    
+    if [ $? -eq 0 ]; then
+        echo "  ✅ Generated successfully"
+    else
+        echo "  ❌ Generation failed"
+        continue
+    fi
+    
+    # Validate PNG
+    if test -s "$diagram.png" && file "$diagram.png" | grep -q "PNG image"; then
+        size=$(stat -c%s "$diagram.png")
+        dimensions_actual=$(identify -format "%wx%h" "$diagram.png" 2>/dev/null || echo "unknown")
+        echo "  ✅ Validated PNG (${size} bytes, ${dimensions_actual})"
+    else
+        echo "  ❌ PNG validation failed"
+    fi
+    echo
+done
+
+echo "=== Generation Complete ==="
+echo "All PNG diagrams generated and validated successfully!"
+echo
+
+echo "Generated files (in sequence order):"
+ls -la [0-9][0-9]-*.png 2>/dev/null | awk '{printf "  %s (%s bytes)\n", $9, $5}' || echo "  No numbered PNG files found"
+
+echo
+echo "Generated files (all):"
+ls -la *.png 2>/dev/null | awk '{printf "  %s (%s bytes)\n", $9, $5}' || echo "  No PNG files found"
--- a/mermaid-tools/scripts/extract_diagrams.py
+++ b/mermaid-tools/scripts/extract_diagrams.py
@@ -0,0 +1,134 @@
+#!/usr/bin/env python3
+"""
+Extract Mermaid diagrams from markdown file and create numbered .mmd files
+"""
+
+import re
+import sys
+from pathlib import Path
+
+def extract_mermaid_diagrams(markdown_file, output_dir):
+    """Extract Mermaid diagrams from markdown file and create numbered .mmd files"""
+    
+    try:
+        with open(markdown_file, 'r', encoding='utf-8') as f:
+            content = f.read()
+    except Exception as e:
+        print(f"ERROR: Cannot read markdown file: {e}")
+        return []
+    
+    # Find all mermaid code blocks with their content
+    mermaid_pattern = r'```mermaid\n(.*?)\n```'
+    matches = re.findall(mermaid_pattern, content, re.DOTALL)
+    
+    if not matches:
+        print("No Mermaid diagrams found in markdown file")
+        return []
+    
+    # Extract diagram names from context (look backwards for section headers)
+    diagrams = []
+    lines = content.split('\n')
+    
+    for i, match in enumerate(matches, 1):
+        # Find the position of this diagram in the content
+        diagram_pattern = f'```mermaid\n{re.escape(match)}\n```'
+        diagram_match = re.search(diagram_pattern, content)
+        
+        if not diagram_match:
+            # Fallback: use simple search
+            diagram_start = content.find(f'```mermaid\n{match}\n```')
+        else:
+            diagram_start = diagram_match.start()
+        
+        # Count lines up to this point to find context
+        if diagram_start >= 0:
+            lines_before = content[:diagram_start].count('\n')
+        else:
+            lines_before = 0
+        
+        # Look backwards for the most recent section header or meaningful context
+        diagram_name = f"diagram-{i:02d}"  # Default fallback
+        
+        # Look for context clues in the 20 lines before the diagram
+        context_start = max(0, lines_before - 20)
+        context_lines = lines[context_start:lines_before] if lines_before > 0 else []
+        
+        # Priority 1: Look for specific diagram descriptions
+        for line in reversed(context_lines):
+            line = line.strip().lower()
+            if 'system architecture' in line:
+                diagram_name = f"{i:02d}-system-architecture"
+                break
+            elif 'authentication flow' in line:
+                diagram_name = f"{i:02d}-authentication-flow"
+                break
+            elif 'caching architecture' in line or 'multi-layer cache' in line:
+                diagram_name = f"{i:02d}-caching-architecture"
+                break
+            elif 'data flow' in line or 'redshift schema' in line:
+                diagram_name = f"{i:02d}-data-flow"
+                break
+            elif 'api request' in line or 'dashboard metrics endpoints' in line:
+                diagram_name = f"{i:02d}-api-request-response"
+                break
+            elif 'dashboard layout' in line or 'presentation layer' in line:
+                diagram_name = f"{i:02d}-dashboard-layout"
+                break
+            elif 'agency' in line and ('hierarchy' in line or 'filter' in line):
+                diagram_name = f"{i:02d}-agency-hierarchy"
+                break
+        
+        # Priority 2: Look for section headers (## or ###)
+        if diagram_name.startswith('diagram-'):
+            for line in reversed(context_lines):
+                line = line.strip()
+                if line.startswith('###') or line.startswith('##'):
+                    # Extract meaningful part from header
+                    header = re.sub(r'^#+\s*\*?\*?', '', line)
+                    header = re.sub(r'\*?\*?$', '', header)
+                    header = header.strip()
+                    
+                    # Convert to filename-friendly format
+                    name_part = re.sub(r'[^\w\s-]', '', header)
+                    name_part = re.sub(r'\s+', '-', name_part.strip())
+                    name_part = name_part.lower()[:30]  # Limit length
+                    
+                    if name_part and name_part != 'detailed-design':
+                        diagram_name = f"{i:02d}-{name_part}"
+                        break
+        
+        diagrams.append({
+            'number': i,
+            'name': diagram_name,
+            'content': match.strip()
+        })
+        
+        print(f"Found diagram {i}: {diagram_name}")
+    
+    # Write .mmd files
+    output_path = Path(output_dir)
+    output_path.mkdir(parents=True, exist_ok=True)
+    
+    created_files = []
+    for diagram in diagrams:
+        mmd_file = output_path / f"{diagram['name']}.mmd"
+        try:
+            with open(mmd_file, 'w', encoding='utf-8') as f:
+                f.write(diagram['content'])
+            created_files.append(str(mmd_file))
+            print(f"Created: {mmd_file}")
+        except Exception as e:
+            print(f"ERROR: Cannot create {mmd_file}: {e}")
+    
+    return created_files
+
+if __name__ == "__main__":
+    if len(sys.argv) != 3:
+        print("Usage: python3 extract_diagrams.py <markdown_file> <output_directory>")
+        sys.exit(1)
+    
+    markdown_file = sys.argv[1]
+    output_dir = sys.argv[2]
+    
+    files = extract_mermaid_diagrams(markdown_file, output_dir)
+    print(f"\nExtracted {len(files)} diagrams successfully")
--- a/mermaid-tools/scripts/puppeteer-config.json
+++ b/mermaid-tools/scripts/puppeteer-config.json
@@ -0,0 +1,14 @@
+{
+  "args": [
+    "--no-sandbox",
+    "--disable-setuid-sandbox",
+    "--disable-dev-shm-usage",
+    "--disable-gpu",
+    "--no-first-run",
+    "--disable-background-timer-throttling",
+    "--disable-backgrounding-occluded-windows",
+    "--disable-renderer-backgrounding",
+    "--disable-features=TranslateUI",
+    "--disable-ipc-flooding-protection"
+  ]
+}