generate mermaid diagrams

Generated Architecture Diagram

%%{init: {'theme':'base', ...}}%%
graph TB
    subgraph "Agent System"
        Gateway[Gateway Process]
        Session[Session Manager]
        Tools[Tool Registry]
    end
    User((User))
    Provider((LLM Provider))
    User -->|Request| Gateway
    Gateway -->|Route| Session
    Session -->|Select Tool| Tools
    Tools -->|Execute| Provider

Output: Clean, consistent, professional diagram with uniform styling across all chapters.

Automated Installation (Recommended)

Run the installation script to automatically install and verify mermaid-cli:

cd $SKILL_DIR  # Path to skill-mermaid-diagrams directory
./scripts/install-deps.sh

The script will:

Manual Installation

Alternatively, install Mermaid CLI globally:

npm install -g @mermaid-js/mermaid-cli

Verify installation:

mmdc --version  # Should be >= 11.0.0

1. Consistent counts: Use same --max value for all chapters (e.g., 3) 2. Review before commit: Run validator on all outputs before pushing 3. Version control: Commit both .mmd source and .svg/.png renders 4. Iterate templates: If diagrams look wrong, adjust template then regenerate 5. Manual touch-ups: Edit .mmd files directly for fine-tuning, then re-render with mmdc