Back
Design Doc Mermaid
Design & UI92.9K installs
What it does
Mermaid diagram and documentation system with specialized guides and code-to-diagram capabilities.
Install
npx skills add https://github.com/spillwavesolutions/design-doc-mermaid --skill design-doc-mermaidWebsite
www.skills.sh/spillwavesolutions/design-doc-mermaid/design-doc-mermaidDetails
From the skill’s SKILL.md or README, by its authors. View the original
## Mermaid Architect - Hierarchical Diagram and Documentation Skill
Mermaid diagram and documentation system with specialized guides and code-to-diagram capabilities.
## Table of Contents
- Decision Tree
- GitHub wiki, WikiTicket, and Confluence
- Available Guides and Resources
- Usage Patterns
- Resilient Workflow
- Unicode Semantic Symbols
- Python Utilities
- Decision Tree Examples
- High-Contrast Styling
- File Organization
- Workflow Summary
- When to Use What
- Best Practices
- Learning Path
## Decision Tree
**How this skill works:**
- **User makes a request** → Skill analyzes intent
- **Skill determines diagram/document type** → Loads appropriate guide(s)
- **AI reads specialized guide** → Generates diagram/document using templates
- **Result delivered** → With validation and export options
**User Intent Analysis:**
```
flowchart TD
Start([User Request]) --> Analyze{Analyze Intent}
Analyze -->|"workflow, process, business logic"| Activity[Load Activity Diagram Guide
references/guides/diagrams/activity-diagrams.md] Analyze -->|"infrastructure, deployment, cloud"| Deploy[Load Deployment Diagram Guide
references/guides/diagrams/deployment-diagrams.md] Analyze -->|"system architecture, components"| Arch[Load Architecture Guide
references/guides/diagrams/architecture-diagrams.md] Analyze -->|"API flow, interactions"| Sequence[Load Sequence Diagram Guide
references/guides/diagrams/sequence-diagrams.md] Analyze -->|"class, ER, state, wiki, walkthrough"| WikiGuide[Load WikiTicket GitHub Guide
references/guides/wiki-ticket-and-github.md] Analyze -->|"code to diagram"| CodeToDiag[Load Code-to-Diagram Guide
references/guides/code-to-diagram/ + examples/] Analyze -->|"design document, full docs"| DesignDoc[Load Design Document Template
assets/*-design-template.md] Analyze -->|"unicode symbols, icons"| Unicode[Load Unicode Symbols Guide
references/guides/unicode-symbols/guide.md] Analyze -->|"extract, validate, convert"| Scripts[Use Python Scripts
scripts/extract_mermaid.py
scripts/mermaid_to_image.py] Activity --> Generate[Generate Diagram] Deploy --> Generate Arch --> Generate Sequence --> Generate WikiGuide --> Generate CodeToDiag --> Generate DesignDoc --> Generate Unicode --> Generate Scripts --> Execute[Execute Script] Generate --> Validate{Validate?} Validate -->|Yes| RunValidation[Run mmdc validation] Validate -->|No| Output RunValidation --> Output[Output Result] Execute --> Output classDef decision fill:#FFD700,stroke:#333,stroke-width:2px,color:black classDef guide fill:#90EE90,stroke:#333,stroke-width:2px,color:darkgreen classDef action fill:#87CEEB,stroke:#333,stroke-width:2px,color:darkblue class Analyze,Validate decision class Activity,Deploy,Arch,Sequence,WikiGuide,CodeToDiag,DesignDoc,Unicode,Scripts guide class Generate,Execute,RunValidation,Output action ``` ## Available Guides and Resources ### Diagram Type Guides (`references/guides/diagrams/`) | Guide | Full Path | Load When User Wants | Examples | |---|---|---|---| | Activity Diagrams | `references/guides/diagrams/activity-diagrams.md` | Workflows, processes, business logic, user flows, decision trees | "Show checkout flow", "Document ETL pipeline", "Create approval workflow" | | Deployment Diagrams | `references/guides/diagrams/deployment-diagrams.md` | Infrastructure, cloud architecture, K8s, serverless, network topology | "Show AWS architecture", "Document GCP deployment", "Create K8s diagram" | | Architecture Diagrams | `references/guides/diagrams/architecture-diagrams.md` | System architecture, component design, high-level structure | "Show system components", "Document microservices", "Architecture overview" | | Sequence Diagrams | `references/guides/diagrams/sequence-diagrams.md` | API interactions, service communication, request/response flows | "Show API call sequence", "Document auth flow", "Service interactions" | | WikiTicket / GitHub / Confluence | `references/guides/wiki-ticket-and-github.md` | Design docs, walkthroughs, requirements, wiki publish, Confluence images | "architecture doc", "code walkthrough", "wiki", "Confluence" | Default for WikiTicket and GitHub wiki is this skill, including `classDiagram`, `erDiagram`, and `stateDiagram-v2`. Do not send those to PlantUML. If GitHub fails to render C4 / architecture-beta / block-beta, fall back to `flowchart TD`. ### Code-to-Diagram Guide & Examples | Resource | Full Path | What It Provides | |---|---|---| | **Master Guide** | `references/guides/code-to-diagram/README.md` | Complete workflow for analyzing any codebase and extracting diagrams | | **Spring Boot** | `examples/spring-boot/README.md` | Controller→Service→Repository architecture, deployment config, sequence from methods, activity from business logic | | **FastAPI** | `examples/fastapi/README.md` | Python async patterns, Pydantic models, dependency injection, cloud deployment | | **React** | `examples/react/README.md` | Component hierarchy, state management, data flow, build pipeline | | **Python ETL** | `examples/python-etl/README.md` | Data pipeline, transformation steps, error handling, scheduling | | **Node/Express** | `examples/node-webapp/README.md` | Middleware chain, route handlers, async patterns, deployment | | **Java Web App** | `examples/java-webapp/README.md` | Traditional MVC, servlet containers, WAR deployment | ### Design Document Templates | Template | Full Path | Use For | Load When | |---|---|---|---| | Architecture Design | `assets/architecture-design-template.md` | System-wide architecture | "Create architecture doc", "Document system design" | | API Design | `assets/api-design-template.md` | API specifications | "API design doc", "Document REST API" | | Feature Design | `assets/feature-design-template.md` | Feature planning | "Feature design", "Plan new feature" | | Database Design | `assets/database-design-template.md` | Database schema | "Database design", "Document schema" | | System Design | `assets/system-design-template.md` | Complete system | "System design doc", "Full system documentation" | ### Unicode Symbols Guide **Full Path:** `references/guides/unicode-symbols/guide.md` **Load when user mentions:** "unicode symbols", "emoji in diagrams", "semantic icons", "add symbols" **Quick Reference:** - 📦 Infrastructure: ☁️ 🌐 🔌 📡 🗄️ - ⚙️ Compute: ⚙️ ⚡ 🔄 ♻️ 🚀 💨 - 💾 Data: 💾 📦 📊 📈 🗃️ 🧊 - 📨 Messaging: 📨 📬 📤 📥 🐰 📢 - 🔐 Security: 🔐 🔑 🛡️ 🚪 👤 🎫 - 📝 Monitoring: 📝 📊 🚨 ⚠️ ✅ ❌ ### Python Scripts (`scripts/`) | Script | Use For | Load When | |---|---|---| | `extract_mermaid.py` | Extract diagrams from Markdown, validate syntax, replace with images | "extract diagrams", "validate mermaid", "find all diagrams" | | `mermaid_to_image.py` | Convert .mmd to PNG/SVG, batch conversion, custom themes | "convert to image", "render diagram", "create PNG" | | `resilient_diagram.py` | Full workflow: save .mmd, generate image, validate, error recovery | "generate diagram", "create diagram with validation", "resilient diagram" | ## GitHub wiki, WikiTicket, and Confluence Load `references/guides/wiki-ticket-and-github.md` for WikiTicket design docs, code walkthroughs, requirements, GitHub wiki, or Confluence. | Target | What to ship | |---|---| | GitHub wiki / GFM | Fenced `mermaid` block. GitHub renders class, ER, state, sequence, flowchart, C4. | | Confluence / Notion / Word / PDF | Also render PNG or SVG (`scripts/resilient_diagram.py` or `mmdc`) and upload the image. Do not rely on Confluence to render Mermaid. | PlantUML is opt-in for Salt wireframes, use case, timing, ArchiMate, nwdiag, and WBS. Those always ship as PNG or SVG. ## Usage Patterns Common request patterns and guide selection. See When to Use What for complete mapping. | Pattern | Example Request | Guides to Load | |---|---|---| | Single Diagram | "Create activity diagram for login flow" | Diagram type guide + Unicode symbols | | Code-to-Diagram | "Generate deployment from application.yml" | Framework example + Deployment guide | | Design Document | "Create API design document" | Template from assets/ + Relevant diagram guides | | Extract/Validate | "Extract diagrams from design.md" | Use `scripts/extract_mermaid.py` | | Batch Convert | "Convert all .mmd to PNG" | Use `scripts/mermaid_to_image.py` | ## Resilient Workflow **CRITICAL:** This is the recommended approach for ALL diagram generation. It ensures validation, error recovery, and consistent file organization. **Full Guide:** `references/guides/resilient-workflow.md` ### Workflow Overview ``` flowchart LR A[1. Identify Type] --> B[2. Save .mmd + Image] B --> C{3. Valid?} C -->|Yes| D[4. Add to Markdown] C -->|No| E[5. Error Recovery] E --> F{Fix Found?} F -->|Yes| A F -->|No| G[Search External] G --> A classDef step fill:#90EE90,stroke:#333,color:darkgreen classDef decision fill:#FFD700,stroke:#333,color:black class A,B,D,E,G step class C,F decision ``` ### Key Principle **NEVER add a diagram to markdown until it passes validation.** This prevents broken diagrams in documentation. ### Using the Script (Recommended) ``` # Generate with full error recovery python scripts/resilient_diagram.py \ --code "flowchart TD; A-->B" \ --markdown-file design_doc \ --diagram-num 1 \ --title "process_flow" \ --format png \ --json ``` **Output:** Both `.mmd` and `.png` files in `./diagrams/` directory. ### File Naming Convention ``` ./diagrams/___.mmd
./diagrams/<markdown_file>_<num>_<type>_<title>.png
```
**Example:** `./diagrams/api_design_01_sequence_auth_flow.png`
### Error Recovery Priority
When validation fails, the workflow automatically:
- **Check troubleshooting guide** - `references/guides/troubleshooting.md` (28 documented errors)
- **Search with perplexity** - `perplexity_ask` MCP for syntax questions
- **Search with brave** - `brave_web_search` MCP for recent solutions
- **Ask gemini** - `gemini` skill for alternative perspective
- **General search** - `WebSearch` tool as fallback
### Manual Fallback Steps
If the script is unavailable:
- **Identify diagram type** from first line (flowchart, sequence, etc.)
- **Load reference guide** from `references/guides/diagrams/`
- **Save to** `./diagrams/<markdown_file>_<num>_<type>_<title>.mmd`
- **Validate:** `mmdc -i file.mmd -o file.png -b transparent`
- **On error:** Search `references/guides/troubleshooting.md` for matching error
- **If not found:** Use search tools in priority order above
- **Add reference:** ``
### Pattern 6: Resilient Diagram Generation
**User:** "Create a sequence diagram and add it to the design doc"
**Skill Actions:**
- Identify intent: **diagram generation** + **markdown integration**
- Load workflow guide: `references/guides/resilient-workflow.md`
- Identify diagram type: **sequence**
- Load diagram guide: `references/guides/diagrams/sequence-diagrams.md`
- Generate Mermaid code using templates
- Execute resilient workflow: ``` python scripts/resilient_diagram.py \ --code "[generated code]" \ --markdown-file design_doc \ --diagram-num 1 \ --title "api_sequence" \ --json ```
- If validation fails → Apply troubleshooting fix → Retry
- On success → Add `` to markdown
## Unicode Semantic Symbols
Always use Unicode symbols to enhance diagram clarity. Common patterns:
### Infrastructure & Deployment
```
graph TB
Client[👤 User] --> LB[🌐 Load Balancer]
LB --> App1[⚙️ App Server 1]
LB --> App2[⚙️ App Server 2]
App1 --> DB[(💾 Database)]
App1 --> Cache[(⚡ Redis)]
```
### Activity Flow with States
```
flowchart TD
Start([🚀 Start]) --> Process[⚙️ Process Data]
Process --> Check{✓ Valid?}
Check -->|Yes| Save[💾 Save]
Check -->|No| Error[❌ Error]
Save --> Complete([✅ Complete])
```
### Microservices Architecture
```
graph TB
API[🌐 API Gateway] --> Auth[🔐 Auth Service]
API --> Orders[📋 Order Service]
Orders --> Queue[📬 Message Queue]
Queue --> Worker[⚙️ Background Worker]
Worker --> Storage[📦 Object Storage]
```
**For complete symbol reference, load:** `references/guides/unicode-symbols/guide.md`
## Python Utilities
### Extract Mermaid Diagrams
```
# List all diagrams
python scripts/extract_mermaid.py document.md --list-only
# Extract to separate files
python scripts/extract_mermaid.py document.md --output-dir diagrams/
# Validate all diagrams
python scripts/extract_mermaid.py document.md --validate
# Replace with image references (for Confluence upload)
python scripts/extract_mermaid.py document.md --replace-with-images \
--image-format png --output-markdown output.md
```
### Convert to Images
```
# Single conversion
python scripts/mermaid_to_image.py diagram.mmd output.png
# With custom settings
python scripts/mermaid_to_image.py diagram.mmd output.svg \
--theme dark --background white --width 1200
# Batch convert directory
python scripts/mermaid_to_image.py diagrams/ output/ --format png --recursive
# From stdin
echo "graph TD; A-->B" | python scripts/mermaid_to_image.py - output.png
```
## Decision Tree Examples
### Example 1: User Asks for Workflow Diagram
**Input:** "Show the checkout process workflow"
**Skill Decision Path:**
```
1. Analyze: workflow, process → ACTIVITY DIAGRAM
2. Load guide: guides/diagrams/activity-diagrams.md
3. Find pattern: E-commerce checkout (template exists in guide)
4. Generate using template + Unicode symbols
5. Output activity diagram with decision points
```
**Output:** Complete activity diagram with Unicode symbols for cart, payment, order states.
### Example 2: User Provides Spring Boot Code
**Input:** "Here's my Spring Boot controller, create diagrams"
**Skill Decision Path:**
```
1. Analyze: Spring Boot, code provided → CODE-TO-DIAGRAM + SPRING BOOT
2. Load guides:
- examples/spring-boot/README.md
- guides/diagrams/architecture-diagrams.md (for structure)
- guides/diagrams/sequence-diagrams.md (for method calls)
- guides/diagrams/activity-diagrams.md (for business logic)
3. Generate multiple diagrams:
a. Architecture diagram from @RestController/@Service/@Repository annotations
b. Sequence diagram from method call chain
c. Activity diagram from business logic flow
4. Output all diagrams with explanations
```
**Output:** 3-4 diagrams showing different views of the Spring Boot application.
### Example 3: User Wants Infrastructure Documentation
**Input:** "Document my GCP Cloud Run deployment with AlloyDB"
**Skill Decision Path:**
```
1. Analyze: infrastructure, GCP, Cloud Run → DEPLOYMENT DIAGRAM
2. Load guides:
- guides/diagrams/deployment-diagrams.md
- examples/spring-boot/ or examples/fastapi/ (if code provided)
3. Check for IaC files (Pulumi, Terraform, docker-compose)
4. Generate deployment diagram with:
- Cloud Run services with specs
- VPC connector
- AlloyDB cluster
- Security (IAM, Secret Manager)
- Monitoring
5. Apply Unicode symbols for clarity
6. Output with resource specifications
```
**Output:** Complete GCP deployment diagram with all resources labeled.
## High-Contrast Styling
**ALL diagrams MUST use high-contrast colors:**
```
graph TB
classDef primary fill:#90EE90,stroke:#333,stroke-width:2px,color:darkgreen
classDef secondary fill:#87CEEB,stroke:#333,stroke-width:2px,color:darkblue
classDef database fill:#E6E6FA,stroke:#333,stroke-width:2px,color:darkblue
classDef error fill:#FFB6C1,stroke:#DC143C,stroke-width:2px,color:black
%% Every classDef MUST have color: property
```
**Rules:**
- Light background → Dark text color
- Dark background → Light text color
- Always specify `color:` in every `classDef`
## File Organization
```
design-doc-mermaid/
├── SKILL.md # This file - Main orchestrator
├── README.md # User documentation
├── CLAUDE.md # Claude Code instructions
│
├── references/ # Reference materials
│ ├── mermaid-diagram-guide.md # Legacy general guide
│ └── guides/ # Specialized guides (load on-demand)
│ ├── diagrams/
│ │ ├── activity-diagrams.md # Workflows, processes
│ │ ├── deployment-diagrams.md # Infrastructure, cloud
│ │ ├── architecture-diagrams.md # System architecture
│ │ └── sequence-diagrams.md # API interactions
│ ├── code-to-diagram/
│ │ └── README.md # Master guide for code analysis
│ ├── unicode-symbols/
│ │ └── guide.md # Complete symbol reference
│ └── troubleshooting.md # Common syntax errors & fixes
│
├── assets/ # Design document templates
│ ├── architecture-design-template.md
│ ├── api-design-template.md
│ ├── feature-design-template.md
│ ├── database-design-template.md
│ └── system-design-template.md
│
├── scripts/ # Python utilities
│ ├── extract_mermaid.py # Extract & validate diagrams
│ └── mermaid_to_image.py # Convert to PNG/SVG
│
├── examples/ # Language-specific patterns
│ ├── spring-boot/ # Spring Boot patterns
│ ├── fastapi/ # FastAPI patterns
│ ├── react/ # React patterns
│ ├── python-etl/ # Data pipeline patterns
│ ├── node-webapp/ # Express.js patterns
│ └── java-webapp/ # Traditional Java patterns
│
└── references/ # General Mermaid reference
└── mermaid-diagram-guide.md # Complete Mermaid syntax guide
```
## Workflow Summary
- **Analyze user intent** → Determine diagram type, document type, or action needed
- **Load appropriate guide(s)** → Read only what's needed (token efficient)
- **Apply templates and patterns** → Use examples from guides
- **Generate output** → Create diagram or document
- **Validate** (optional) → Use scripts to verify
- **Convert** (optional) → Export to images if needed
## When to Use What
| User Request | Load This |
|---|---|
| "activity diagram", "workflow", "process flow" | `references/guides/diagrams/activity-diagrams.md` |
| "deployment", "infrastructure", "cloud", "k8s" | `references/guides/diagrams/deployment-diagrams.md` |
| "architecture", "system design", "components" | `references/guides/diagrams/architecture-diagrams.md` + design template |
| "API", "sequence", "interactions", "flow" | `references/guides/diagrams/sequence-diagrams.md` |
| "class diagram", "ER", "state machine", "wiki", "walkthrough", "architecture doc" | `references/guides/wiki-ticket-and-github.md` plus the matching type guide |
| "Confluence", "upload image", "PNG", "SVG" | `scripts/resilient_diagram.py` or `scripts/mermaid_to_image.py` |
| "Spring Boot code" | `examples/spring-boot/` + relevant diagram guides |
| "FastAPI code", "Python API" | `examples/fastapi/` + relevant diagram guides |
| "React app", "frontend" | `examples/react/` + architecture guide |
| "ETL", "data pipeline", "Python batch" | `examples/python-etl/` + activity guide |
| "symbols", "unicode", "emoji" | `references/guides/unicode-symbols/guide.md` |
| "syntax error", "diagram won't render", "troubleshoot" | `references/guides/troubleshooting.md` |
| "extract diagrams" | `scripts/extract_mermaid.py` |
| "convert to image", "PNG", "SVG" | `scripts/mermaid_to_image.py` |
| "create diagram", "generate diagram", "add diagram to markdown" | `scripts/resilient_diagram.py` + `references/guides/resilient-workflow.md` |
| "design document", "full docs" | `assets/*-design-template.md` + diagram guides</div></div></section><section class="mt-10" aria-labelledby="related"><div class="mb-4 flex items-baseline justify-between gap-4"><h2 id="related" class="text-lg font-semibold text-gray-900">More <!-- -->Design & UI<!-- --> skills</h2><a class="text-sm font-medium text-brand-slate hover:underline" href="/skills?type=design">See all</a></div><ul class="grid gap-4 sm:grid-cols-2"><li><div class="relative flex h-full flex-col rounded-2xl border border-gray-200 bg-white p-5 transition-[border-color,box-shadow] hover:border-gray-300 hover:shadow-md"><p class="mb-1 text-xs font-medium text-gray-500">Design & UI</p><div class="flex items-start justify-between gap-2"><h3 class="min-w-0 break-words font-semibold text-gray-900"><a class="after:absolute after:inset-0 after:rounded-2xl focus:outline-none focus-visible:after:ring-2 focus-visible:after:ring-brand-slate" href="/skills/grill-me">Grill Me</a></h3></div><p class="mt-2 flex-1 text-sm leading-relaxed text-gray-600 line-clamp-4">A relentless interview to sharpen a plan or design.</p><div class="mt-4"><div class="relative z-10 flex items-center gap-2 rounded-lg bg-gray-50 border border-gray-200 pl-3 pr-1 py-1"><code class="min-w-0 flex-1 truncate font-mono text-xs text-gray-800" title="npx skills add https://github.com/mattpocock/skills --skill grill-me">npx skills add https://github.com/mattpocock/skills --skill grill-me</code><button type="button" aria-label="Copy install command for grill-me" class="inline-flex shrink-0 items-center gap-1 rounded-md px-2 py-1 text-xs font-medium text-brand-slate transition-colors hover:bg-white"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy h-3.5 w-3.5" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg><span aria-live="polite">Copy</span></button></div></div><span class="inline-flex items-center gap-1 tabular-nums mt-4 text-sm text-gray-500" title="1,516,327 installs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download h-3.5 w-3.5" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" x2="12" y1="15" y2="3"></line></svg>1.5M<!-- --> <!-- -->installs</span></div></li><li><div class="relative flex h-full flex-col rounded-2xl border border-gray-200 bg-white p-5 transition-[border-color,box-shadow] hover:border-gray-300 hover:shadow-md"><p class="mb-1 text-xs font-medium text-gray-500">Design & UI</p><div class="flex items-start justify-between gap-2"><h3 class="min-w-0 break-words font-semibold text-gray-900"><a class="after:absolute after:inset-0 after:rounded-2xl focus:outline-none focus-visible:after:ring-2 focus-visible:after:ring-brand-slate" href="/skills/frontend-design">Frontend Design</a></h3></div><p class="mt-2 flex-1 text-sm leading-relaxed text-gray-600 line-clamp-4">Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.</p><div class="mt-4"><div class="relative z-10 flex items-center gap-2 rounded-lg bg-gray-50 border border-gray-200 pl-3 pr-1 py-1"><code class="min-w-0 flex-1 truncate font-mono text-xs text-gray-800" title="npx skills add https://github.com/anthropics/skills --skill frontend-design">npx skills add https://github.com/anthropics/skills --skill frontend-design</code><button type="button" aria-label="Copy install command for frontend-design" class="inline-flex shrink-0 items-center gap-1 rounded-md px-2 py-1 text-xs font-medium text-brand-slate transition-colors hover:bg-white"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy h-3.5 w-3.5" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg><span aria-live="polite">Copy</span></button></div></div><span class="inline-flex items-center gap-1 tabular-nums mt-4 text-sm text-gray-500" title="1,092,005 installs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download h-3.5 w-3.5" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" x2="12" y1="15" y2="3"></line></svg>1.1M<!-- --> <!-- -->installs</span></div></li><li><div class="relative flex h-full flex-col rounded-2xl border border-gray-200 bg-white p-5 transition-[border-color,box-shadow] hover:border-gray-300 hover:shadow-md"><p class="mb-1 text-xs font-medium text-gray-500">Design & UI</p><div class="flex items-start justify-between gap-2"><h3 class="min-w-0 break-words font-semibold text-gray-900"><a class="after:absolute after:inset-0 after:rounded-2xl focus:outline-none focus-visible:after:ring-2 focus-visible:after:ring-brand-slate" href="/skills/prototype">Prototype</a></h3></div><p class="mt-2 flex-1 text-sm leading-relaxed text-gray-600 line-clamp-4">Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.</p><div class="mt-4"><div class="relative z-10 flex items-center gap-2 rounded-lg bg-gray-50 border border-gray-200 pl-3 pr-1 py-1"><code class="min-w-0 flex-1 truncate font-mono text-xs text-gray-800" title="npx skills add https://github.com/mattpocock/skills --skill prototype">npx skills add https://github.com/mattpocock/skills --skill prototype</code><button type="button" aria-label="Copy install command for prototype" class="inline-flex shrink-0 items-center gap-1 rounded-md px-2 py-1 text-xs font-medium text-brand-slate transition-colors hover:bg-white"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy h-3.5 w-3.5" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg><span aria-live="polite">Copy</span></button></div></div><span class="inline-flex items-center gap-1 tabular-nums mt-4 text-sm text-gray-500" title="1,054,880 installs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download h-3.5 w-3.5" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" x2="12" y1="15" y2="3"></line></svg>1.1M<!-- --> <!-- -->installs</span></div></li><li><div class="relative flex h-full flex-col rounded-2xl border border-gray-200 bg-white p-5 transition-[border-color,box-shadow] hover:border-gray-300 hover:shadow-md"><p class="mb-1 text-xs font-medium text-gray-500">Design & UI</p><div class="flex items-start justify-between gap-2"><h3 class="min-w-0 break-words font-semibold text-gray-900"><a class="after:absolute after:inset-0 after:rounded-2xl focus:outline-none focus-visible:after:ring-2 focus-visible:after:ring-brand-slate" href="/skills/ui-taste">UI Taste</a></h3></div><p class="mt-2 flex-1 text-sm leading-relaxed text-gray-600 line-clamp-4">ui-taste skill from uizze.sh.</p><div class="mt-4"><div class="relative z-10 flex items-center gap-2 rounded-lg bg-gray-50 border border-gray-200 pl-3 pr-1 py-1"><code class="min-w-0 flex-1 truncate font-mono text-xs text-gray-800" title="npx skills add https://github.com/uizze.sh --skill ui-taste">npx skills add https://github.com/uizze.sh --skill ui-taste</code><button type="button" aria-label="Copy install command for ui-taste" class="inline-flex shrink-0 items-center gap-1 rounded-md px-2 py-1 text-xs font-medium text-brand-slate transition-colors hover:bg-white"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy h-3.5 w-3.5" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg><span aria-live="polite">Copy</span></button></div></div><span class="inline-flex items-center gap-1 tabular-nums mt-4 text-sm text-gray-500" title="1,038,431 installs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download h-3.5 w-3.5" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" x2="12" y1="15" y2="3"></line></svg>1M<!-- --> <!-- -->installs</span></div></li></ul></section><p class="mt-6 text-xs text-gray-500">Skills are shared by members and not reviewed by us. Read a skill’s code before you install it.</p></div></div><!--$--><!--/$--></div></main><footer class="bg-brand-bg border-t border-gray-200 mt-auto"><div class="py-12 px-4 sm:px-6 lg:px-8"><div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-x-6 gap-y-10 lg:gap-8"><div class="col-span-2 md:col-span-3 lg:col-span-2"><div class="mb-4"><span class="flex items-center gap-2.5"><span class="block h-14 w-14 shrink-0 overflow-hidden"><img src="/logo-280.webp" alt="" width="112" height="112" loading="lazy" class="-ml-[28px] -mt-[20px] h-[112px] w-[112px] max-w-none"/></span><span class="text-lg font-semibold tracking-tight text-gray-900">Tool Directory AI</span></span></div><p class="text-gray-600 text-sm max-w-md">A reviewed directory of AI tools for writing, images, video, code and more. Find the right tool for the job, or list your own for free.</p><div class="mt-6 max-w-md"><h2 class="text-sm font-semibold text-gray-900 mb-1">Join the mailing list</h2><p class="mb-3 text-sm text-gray-600">An occasional email about new AI tools and guides. No spam.</p><form class="flex gap-2"><input type="email" required="" placeholder="you@email.com" class="min-w-0 flex-1 px-4 py-2.5 rounded-lg border border-gray-300 bg-white text-gray-900 placeholder-gray-400 text-sm focus:outline-none focus:border-brand-slate focus:ring-2 focus:ring-primary-100" value=""/><button type="submit" class="bg-brand-slate text-white px-4 py-2.5 rounded-lg text-sm font-medium hover:shadow-lg transition-shadow disabled:opacity-60 inline-flex items-center gap-1 whitespace-nowrap">Subscribe <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-send h-3.5 w-3.5"><path d="m22 2-7 20-4-9-9-4Z"></path><path d="M22 2 11 13"></path></svg></button></form></div></div><div><h2 class="text-sm font-semibold text-gray-900 mb-4">Explore</h2><ul class="space-y-2"><li><a class="text-gray-600 hover:text-brand-slate transition-colors text-sm" href="/categories">All categories</a></li><li><a class="text-gray-600 hover:text-brand-slate transition-colors text-sm" href="/new-ai-tools">New AI tools</a></li><li><a class="text-gray-600 hover:text-brand-slate transition-colors text-sm" href="/free-ai-tools">Free AI tools</a></li><li><a class="text-gray-600 hover:text-brand-slate transition-colors text-sm" href="/skills">Agent skills</a></li></ul><h2 class="text-sm font-semibold text-gray-900 mt-8 mb-4">Legal</h2><ul class="space-y-2"><li><a class="text-gray-600 hover:text-brand-slate transition-colors text-sm" href="/privacy">Privacy policy</a></li><li><a class="text-gray-600 hover:text-brand-slate transition-colors text-sm" href="/how-we-review">How we review tools</a></li><li><a class="text-gray-600 hover:text-brand-slate transition-colors text-sm" href="/terms">Terms</a></li></ul></div><div class="space-y-8 md:space-y-0 md:contents"><div><h2 class="text-sm font-semibold text-gray-900 mb-4">Resources</h2><ul class="space-y-2"><li><a class="text-gray-600 hover:text-brand-slate transition-colors text-sm" href="/articles">Articles</a></li><li><a class="text-gray-600 hover:text-brand-slate transition-colors text-sm" href="/blogs">Blogs</a></li></ul></div><div><h2 class="text-sm font-semibold text-gray-900 mb-4">Quick links</h2><ul class="space-y-2"><li><a class="text-gray-600 hover:text-brand-slate transition-colors text-sm" href="/">Home</a></li><li><a class="text-gray-600 hover:text-brand-slate transition-colors text-sm" href="/about-us">About us</a></li><li><a class="text-gray-600 hover:text-brand-slate transition-colors text-sm" href="/contact-us">Contact us</a></li><li><a class="text-gray-600 hover:text-brand-slate transition-colors text-sm" href="/submit">Submit a tool</a></li><li><a class="text-gray-600 hover:text-brand-slate transition-colors text-sm" href="/pricing">Pricing</a></li><li><a class="text-gray-600 hover:text-brand-slate transition-colors text-sm" href="/advertise">Advertise</a></li></ul></div></div></div><div class="mt-8 pt-8 border-t border-gray-200"><p class="text-gray-500 text-sm">© <!-- -->2026<!-- --> Tool Directory AI. All rights reserved.</p></div></div></footer></div><div role="dialog" aria-label="Ask Navi" aria-hidden="true" class="fixed z-[90] bottom-20 lg:bottom-24 left-3 right-3 sm:left-auto sm:right-4 lg:right-6 sm:w-[360px] lg:w-[380px] h-[min(480px,calc(100dvh-7rem))] lg:h-[min(560px,calc(100dvh-8rem))] bg-white rounded-2xl shadow-2xl border border-gray-200 flex flex-col overflow-hidden text-left origin-bottom-right transition-[opacity,transform,visibility] duration-300 ease-[cubic-bezier(.22,1,.36,1)] motion-reduce:transition-none opacity-0 scale-95 translate-y-3 invisible pointer-events-none"><div class="flex items-center justify-between px-5 py-4 border-b border-gray-200"><div class="flex items-center gap-3"><span aria-hidden="true" class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-brand-slate text-white"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-compass h-5 w-5"><circle cx="12" cy="12" r="10"></circle><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"></polygon></svg></span><div><h2 class="font-semibold text-gray-900">Ask Navi</h2><p class="text-xs text-gray-500">Finds tools from this directory and answers questions about the site.</p></div></div><button aria-label="Close" class="text-gray-400 hover:text-gray-700 p-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x h-5 w-5"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg></button></div><div class="flex-1 overflow-y-auto no-scrollbar px-5 py-4 space-y-4 text-sm text-gray-800"><div><p class="text-gray-600 mb-3">Hi, I'm Navi. Describe what you want to do and I'll suggest tools. Try:</p><div class="flex flex-col gap-2"><button class="text-left px-3 py-2 rounded-lg border border-gray-200 hover:border-brand-slate hover:bg-gray-50 hover:translate-x-0.5 transition text-gray-700 ">What is the best free AI image generator?</button><button class="text-left px-3 py-2 rounded-lg border border-gray-200 hover:border-brand-slate hover:bg-gray-50 hover:translate-x-0.5 transition text-gray-700 ">Find me a tool to edit videos</button><button class="text-left px-3 py-2 rounded-lg border border-gray-200 hover:border-brand-slate hover:bg-gray-50 hover:translate-x-0.5 transition text-gray-700 ">How do I get my tool featured?</button></div></div><div></div></div><form class="border-t border-gray-200 p-3 flex gap-2"><label for="ask-ai-input" class="sr-only">Your question for Navi</label><textarea id="ask-ai-input" rows="2" maxLength="1000" placeholder="Ask Navi about tools or this site…" class="flex-1 resize-none rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-900 transition-shadow focus:outline-none focus:ring-2 focus:ring-primary-500"></textarea><button type="submit" disabled="" aria-label="Send" class="self-end bg-brand-slate text-white rounded-full p-3 transition hover:opacity-90 active:scale-90 disabled:opacity-50 disabled:active:scale-100"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-send h-4 w-4"><path d="m22 2-7 20-4-9-9-4Z"></path><path d="M22 2 11 13"></path></svg></button></form></div><button aria-label="Open Ask Navi" aria-expanded="false" class="fixed z-[90] bottom-4 right-4 lg:bottom-6 lg:right-6 inline-flex items-center gap-1.5 lg:gap-2 h-11 lg:h-14 pl-3 pr-4 lg:pl-4 lg:pr-5 text-sm lg:text-base rounded-full bg-brand-slate text-white font-semibold shadow-lg transition-[background-color,box-shadow] duration-200 hover:bg-[#435e6c] hover:shadow-xl active:scale-95 motion-reduce:transition-none"><span class="transition-transform duration-300 rotate-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-compass h-4 w-4 lg:h-5 lg:w-5"><circle cx="12" cy="12" r="10"></circle><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"></polygon></svg></span>Ask Navi</button><script id="_R_">(globalThis["TURBOPACK"] || (globalThis["TURBOPACK"] = [])).push({"otherChunks":["static/chunks/05wjci380js-5.js","static/chunks/3srfjz42u14tx.js","static/chunks/3gclc0e6xifq0.js","static/chunks/0d66q46efh1wk.js","static/chunks/2hoi73vy1wqpo.js"],"runtimeModuleIds":[94553]});</script><script src="/_next/static/chunks/05wjci380js-5.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n4:\"/_next/static/chunks/0jtm09wm75ifu.js\"\n5:\"/_next/static/chunks/43jr4n6_vf1zz.js\"\n6:\"/_next/static/chunks/3to_73s7vveos.js\"\n7:\"/_next/static/chunks/3gbhmf8atqi5x.js\"\n8:\"/_next/static/chunks/29l6qjr-byb7o.js\"\n9:\"/_next/static/chunks/1abk9983lwwk0.js\"\na:I[39756,[\"$4\",\"$5\",\"$6\",\"$7\",\"$8\",\"$9\"],\"default\"]\nb:I[37457,[\"$4\",\"$5\",\"$6\",\"$7\",\"$8\",\"$9\"],\"default\"]\n10:I[97367,[\"$4\",\"$5\",\"$6\",\"$7\",\"$8\",\"$9\"],\"OutletBoundary\"]\n11:\"$Sreact.suspense\"\n13:\"ViewportBoundary\"\n14:I[97367,[\"$4\",\"$5\",\"$6\",\"$7\",\"$8\",\"$9\"],\"$13\"]\n16:\"MetadataBoundary\"\n17:I[97367,[\"$4\",\"$5\",\"$6\",\"$7\",\"$8\",\"$9\"],\"$16\"]\n19:I[68027,[\"$4\",\"$5\",\"$6\",\"$7\",\"$8\",\"$9\"],\"default\",1]\n:HL[\"/_next/static/chunks/2yomfwsra96s-.css\",\"style\"]\n:HL[\"/_next/static/media/Satoshi_400-s.p.0dvfn5g0xv8bu.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/Satoshi_500-s.p.1jgchyhj64537.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/Satoshi_700-s.p.2_-zzs2una4mm.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\nc:X\ne:[[\"children\",{\"s\":\"__PAGE__\",\"d\":{\"r\":[\"$\",\"$1\",\"c\",{\"children\":[\"$Lf\",[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/1jz4am8px3y0n.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$L10\",null,{\"children\":[\"$\",\"$11\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@12\"}]}]]}],\"p\":false,\"v\":null}}]]\nd:[[\"children\",{\"s\":{\"n\":\"id\",\"t\":\"d\",\"k\":\"design-doc-mermaid\",\"s\":[]},\"d\":{\"r\":[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$La\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Lb\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],\"p\":false,\"v\":\"$c\"},\"c\":\"$Qe\"}]]\n3:[[\"children\",{\"s\":\"skills\",\"d\":{\"r\":[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$La\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Lb\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],\"p\":false,\"v\":\"$c\"},\"c\":\"$Qd\"}]]\n0:{\"P\":null,\"c\":[\"\",\"skills\",\"design-doc-mermaid\"],\"q\":\"\",\"i\":false,\"t\":{\"t\":{\"s\":\"\",\"h\":16,\"d\":{\"r\":[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/2yomfwsra96s-.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/0jtm09wm75ifu.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/43jr4n6_vf1zz.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/chunks/3to_73s7vveos.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-3\",{\"src\":\"/_next/static/chunks/3gbhmf8atqi5x.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-4\",{\"src\":\"/_next/static/chunks/29l6qjr-byb7o.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-5\",{\"src\":\"/_next/static/chunks/1abk9983lwwk0.js\",\"async\":true,\"nonce\":\"$undefined\"}]],\"$L2\"]}],\"p\":false,\"v\":null},\"c\":\"$Q3\"},\"h\":{\"r\":[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$L14\",null,{\"children\":\"$L15\"}],[\"$\",\"$L17\",null,{\"children\":[[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$11\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L18\"}]}],null]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}],\"p\":false,\"v\":null}},\"m\":\"$undefined\",\"G\":[\"$19\",[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/2yomfwsra96s-.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]]],\"S\":false,\"r\":\"$undefined\",\"s\":\"$undefined\",\"a\":\"$undefined\",\"l\":\"$undefined\",\"p\":\"$undefined\",\"d\":\"$undefined\",\"b\":\"w1xLnW4e0eIs9IxmYEhvX\"}\n1a:\"ClientClerkProvider\"\n1b:I[41895,[\"$4\",\"$5\",\"$6\",\"$7\",\"$8\",\"$9\"],\"$1a\"]\n1d:I[34377,[\"$4\",\"$5\",\"$6\",\"$7\",\"$8\",\"$9\"],\"default\"]\n1e:I[31590,[\"$4\",\"$5\",\"$6\",\"$7\",\"$8\",\"$9\"],\"default\"]\n1f:I[71569,[\"$4\",\"$5\",\"$6\",\"$7\",\"$8\",\"$9\"],\"default\"]\n20:I[75909,[\"$4\",\"$5\",\"$6\",\"$7\",\"$8\",\"$9\"],\"default\"]\nc:C\n1c:T401,(function(){var c=\"ca-pub-4109718338001946\",done=false;function load(){if(done)return;done=true;var a=document.createElement('script');a.async=true;a.crossOrigin='anonymous';a.src='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client='+c;document.head.appendChild(a);var f=document.createElement('script');f.async=true;f.src='https://fundingchoicesmessages.google.com/i/'+c.replace('ca-','')+'?ers=1';document.head.appendChild(f);}['scroll','pointerdown','pointermove','keydown','touchstart','wheel'].forEach(function(e){addEventListener(e,load,{once:true,passive:true})});})();\n(function() {function signalGooglefcPresent() {if (!window.frames['googlefcPresent']) {if (document.body) {const iframe = document.createElement('iframe'); iframe.style = 'width: 0; height: 0; border: none; z-index: -1000; left: -1000px; top: -1000px;'; iframe.style.display = 'none'; iframe.name = 'googlefcPresent'; document.body.appendChild(iframe);} else {setTimeout(signalGooglefcPresent, 0);}}}signalGooglefcPresent();})();2:[\"$\",\"$L1b\",null,{\"appearance\":{\"elements\":{\"formFieldInput\":{\"color\":\"black\"}}},\"publishableKey\":\"pk_live_Y2xlcmsudG9vbGRpcmVjdG9yeWFpLmNvbSQ\",\"clerkJSUrl\":\"$undefined\",\"clerkJSVersion\":\"$undefined\",\"proxyUrl\":\"\",\"domain\":\"\",\"isSatellite\":false,\"signInUrl\":\"/sign-in\",\"signUpUrl\":\"/sign-up\",\"signInForceRedirectUrl\":\"\",\"signUpForceRedirectUrl\":\"\",\"signInFallbackRedirectUrl\":\"/\",\"signUpFallbackRedirectUrl\":\"/\",\"afterSignInUrl\":\"\",\"afterSignUpUrl\":\"\",\"newSubscriptionRedirectUrl\":\"\",\"telemetry\":{\"disabled\":false,\"debug\":false},\"sdkMetadata\":{\"name\":\"@clerk/nextjs\",\"version\":\"6.39.8\",\"environment\":\"production\"},\"nonce\":\"\",\"initialState\":null,\"children\":[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[[\"$\",\"head\",null,{\"children\":[[\"$\",\"link\",null,{\"rel\":\"preconnect\",\"href\":\"https://res.cloudinary.com\"}],[\"$\",\"script\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"$1c\"}}]]}],[\"$\",\"body\",null,{\"className\":\"poPk_q_variable\",\"style\":{\"fontFamily\":\"var(--font-satoshi), sans-serif\"},\"children\":[[[\"$\",\"script\",\"0\",{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"Organization\\\",\\\"name\\\":\\\"Tool Directory AI\\\",\\\"alternateName\\\":[\\\"tooldirectoryai.com\\\",\\\"ToolDirectoryAI\\\"],\\\"url\\\":\\\"https://tooldirectoryai.com\\\",\\\"logo\\\":\\\"https://res.cloudinary.com/dpj2vwi0n/image/upload/v1763317102/89ca77db-fb36-4702-858c-a24f0773dfe2_daobzg.png\\\",\\\"description\\\":\\\"Tool Directory AI (tooldirectoryai.com) is a directory of reviewed AI tools and agent skills, with verified pricing, comparisons and guides, run by Vamsi Reddy and Sai Goutham Reddy.\\\",\\\"sameAs\\\":[\\\"https://x.com/toolsdirectory\\\",\\\"https://www.linkedin.com/company/tooldirectoryai\\\"],\\\"founder\\\":[{\\\"@type\\\":\\\"Person\\\",\\\"name\\\":\\\"Vamsi Reddy\\\",\\\"url\\\":\\\"https://tooldirectoryai.com/authors/vamsi-reddy\\\",\\\"sameAs\\\":[\\\"https://www.linkedin.com/in/saivamsireddykovvuri/\\\",\\\"https://x.com/VamsiBuilds\\\"]},{\\\"@type\\\":\\\"Person\\\",\\\"name\\\":\\\"Sai Goutham Reddy\\\",\\\"url\\\":\\\"https://tooldirectoryai.com/authors/sai-goutham-reddy\\\",\\\"sameAs\\\":[\\\"https://www.linkedin.com/in/gali-sai-goutham-reddy/\\\"]}]}\"}}],[\"$\",\"script\",\"1\",{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"WebSite\\\",\\\"name\\\":\\\"Tool Directory AI\\\",\\\"alternateName\\\":[\\\"tooldirectoryai.com\\\",\\\"ToolDirectoryAI\\\"],\\\"url\\\":\\\"https://tooldirectoryai.com\\\",\\\"potentialAction\\\":{\\\"@type\\\":\\\"SearchAction\\\",\\\"target\\\":{\\\"@type\\\":\\\"EntryPoint\\\",\\\"urlTemplate\\\":\\\"https://tooldirectoryai.com/?search={search_term_string}\\\"},\\\"query-input\\\":\\\"required name=search_term_string\\\"}}\"}}]],[\"$\",\"$L1d\",null,{}],[\"$\",\"$L1e\",null,{}],[\"$\",\"$L1f\",null,{}],[\"$\",\"$L20\",null,{}],[\"$\",\"div\",null,{\"className\":\"min-h-screen flex flex-col\",\"children\":[\"$L21\",\"$L22\",\"$L23\"]}],\"$L24\",\"$L25\"]}]]}]}]\n26:I[70119,[\"$4\",\"$5\",\"$6\",\"$7\",\"$8\",\"$9\"],\"default\"]\n27:\"/_next/static/chunks/23ue6zlpe7ulr.js\"\n28:I[98168,[\"$4\",\"$5\",\"$6\",\"$7\",\"$8\",\"$9\",\"$27\"],\"default\"]\n29:\"/_next/static/chunks/1jz4am8px3y0n.js\"\n2a:I[22016,[\"$4\",\"$5\",\"$6\",\"$7\",\"$8\",\"$9\",\"$29\"],\"\"]\n2b:I[13397,[\"$4\",\"$5\",\"$6\",\"$7\",\"$8\",\"$9\"],\"default\"]\n2d:I[23319,[\"$4\",\"$5\",\"$6\",\"$7\",\"$8\",\"$9\"],\"default\"]\n2e:I[81695,[\"$4\",\"$5\",\"$6\",\"$7\",\"$8\",\"$9\"],\"default\"]\n21:[\"$\",\"$L26\",null,{}]\n22:[\"$\",\"main\",null,{\"className\":\"flex-grow\",\"children\":[\"$\",\"$La\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$Lb\",null,{}]}],\"templateStyles\":[],\"templateScripts\":[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/23ue6zlpe7ulr.js\",\"async\":true,\"nonce\":\"$undefined\"}]],\"notFound\":[[\"$\",\"div\",null,{\"className\":\"min-h-[60vh] flex items-center justify-center px-4 text-center\",\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"p\",null,{\"className\":\"text-6xl font-semibold tabular-nums text-brand-slate mb-2\",\"children\":\"404\"}],[\"$\",\"h1\",null,{\"className\":\"text-2xl font-semibold text-gray-900 mb-3\",\"children\":\"Page not found\"}],[\"$\",\"p\",null,{\"className\":\"text-gray-600 mb-6 max-w-md mx-auto\",\"children\":\"The page you're looking for doesn't exist or may have moved. The tool you wanted may still be in the directory.\"}],[\"$\",\"div\",null,{\"className\":\"flex gap-3 justify-center flex-wrap\",\"children\":[[\"$\",\"$L2a\",null,{\"href\":\"/\",\"className\":\"bg-brand-slate text-white px-6 py-2.5 rounded-full font-medium transition-colors hover:bg-[#435e6c]\",\"children\":\"Browse AI tools\"}],[\"$\",\"$L2a\",null,{\"href\":\"/categories\",\"className\":\"border border-gray-300 px-6 py-2.5 rounded-full font-medium text-gray-700 hover:bg-gray-50 transition-colors\",\"children\":\"Categories\"}]]}]]}]}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]\n23:[\"$\",\"footer\",null,{\"className\":\"bg-brand-bg border-t border-gray-200 mt-auto\",\"children\":[\"$\",\"div\",null,{\"className\":\"py-12 px-4 sm:px-6 lg:px-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-x-6 gap-y-10 lg:gap-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"col-span-2 md:col-span-3 lg:col-span-2\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-4\",\"children\":[\"$\",\"span\",null,{\"className\":\"flex items-center gap-2.5\",\"children\":[[\"$\",\"span\",null,{\"className\":\"block h-14 w-14 shrink-0 overflow-hidden\",\"children\":[\"$\",\"img\",null,{\"src\":\"/logo-280.webp\",\"alt\":\"\",\"width\":112,\"height\":112,\"fetchPriority\":\"$undefined\",\"loading\":\"lazy\",\"className\":\"-ml-[28px] -mt-[20px] h-[112px] w-[112px] max-w-none\"}]}],[\"$\",\"span\",null,{\"className\":\"text-lg font-semibold tracking-tight text-gray-900\",\"children\":\"Tool Directory AI\"}]]}]}],[\"$\",\"p\",null,{\"className\":\"text-gray-600 text-sm max-w-md\",\"children\":\"A reviewed directory of AI tools for writing, images, video, code and more. Find the right tool for the job, or list your own for free.\"}],[\"$\",\"$L2b\",null,{}]]}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"h2\",null,{\"className\":\"text-sm font-semibold text-gray-900 mb-4\",\"children\":\"Explore\"}],[\"$\",\"ul\",null,{\"className\":\"space-y-2\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"$L2a\",null,{\"href\":\"/categories\",\"className\":\"text-gray-600 hover:text-brand-slate transition-colors text-sm\",\"children\":\"All categories\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L2a\",null,{\"href\":\"/new-ai-tools\",\"className\":\"text-gray-600 hover:text-brand-slate transition-colors text-sm\",\"children\":\"New AI tools\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L2a\",null,{\"href\":\"/free-ai-tools\",\"className\":\"text-gray-600 hover:text-brand-slate transition-colors text-sm\",\"children\":\"Free AI tools\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L2a\",null,{\"href\":\"/skills\",\"className\":\"text-gray-600 hover:text-brand-slate transition-colors text-sm\",\"children\":\"Agent skills\"}]}]]}],[\"$\",\"h2\",null,{\"className\":\"text-sm font-semibold text-gray-900 mt-8 mb-4\",\"children\":\"Legal\"}],[\"$\",\"ul\",null,{\"className\":\"space-y-2\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"$L2a\",null,{\"href\":\"/privacy\",\"className\":\"text-gray-600 hover:text-brand-slate transition-colors text-sm\",\"children\":\"Privacy policy\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L2a\",null,{\"href\":\"/how-we-review\",\"className\":\"text-gray-600 hover:text-brand-slate transition-colors text-sm\",\"children\":\"How we review tools\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L2a\",null,{\"href\":\"/terms\",\"className\":\"text-gray-600 hover:text-brand-slate transition-colors text-sm\",\"children\":\"Terms\"}]}]]}]]}],[\"$\",\"div\",null,{\"className\":\"space-y-8 md:space-y-0 md:contents\",\"children\":[[\"$\",\"div\",null,{\"children\":[[\"$\",\"h2\",null,{\"className\":\"text-sm font-semibold text-gray-900 mb-4\",\"children\":\"Resources\"}],[\"$\",\"ul\",null,{\"className\":\"space-y-2\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"$L2a\",null,{\"href\":\"/articles\",\"className\":\"text-gray-600 hover:text-brand-slate transition-colors text-sm\",\"children\":\"Articles\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L2a\",null,{\"href\":\"/blogs\",\"className\":\"text-gray-600 hover:text-brand-slate transition-colors text-sm\",\"children\":\"Blogs\"}]}]]}]]}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"h2\",null,{\"className\":\"text-sm font-semibold text-gray-900 mb-4\",\"children\":\"Quick links\"}],[\"$\",\"ul\",null,{\"className\":\"space-y-2\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"$L2a\",null,{\"href\":\"/\",\"className\":\"text-gray-600 hover:text-brand-slate transition-colors text-sm\",\"children\":\"Home\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L2a\",null,{\"href\":\"/about-us\",\"className\":\"text-gray-600 hover:text-brand-slate transition-colors text-sm\",\"children\":\"About us\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L2a\",null,{\"href\":\"/contact-us\",\"className\":\"text-gray-600 hover:text-brand-slate transition-colors text-sm\",\"children\":\"Contact us\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L2a\",null,{\"href\":\"/submit\",\"className\":\"text-gray-600 hover:text-brand-slate transition-colors text-sm\",\"children\":\"Submit a tool\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L2a\",null,{\"href\":\"/pricing\",\"className\":\"text-gray-600 hover:text-brand-slate transition-colors text-sm\",\"children\":\"Pricing\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L2a\",null,{\"href\":\"/advertise\",\"className\":\"text-gray-600 hover:text-brand-slate transition-colors text-sm\",\"children\":\"Advertise\"}]}]]}]]}]]}]]}],[\"$\",\"div\",null,{\"className\":\"mt-8 pt-8 border-t border-gray-200\",\"children\":\"$L2c\"}]]}]}]\n24:[\"$\",\"$L2d\",null,{}]\n25:[\"$\",\"$L2e\",null,{}]\n2c:[\"$\",\"p\",null,{\"className\":\"text-gray-500 text-sm\",\"children\":[\"© \",2026,\" Tool Directory AI. All rights reserved.\"]}]\n15:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n2f:I[27201,[\"$4\",\"$5\",\"$6\",\"$7\",\"$8\",\"$9\"],\"IconMark\"]\n12:null\n18:[[\"$\",\"title\",\"0\",{\"children\":\"Design Doc Mermaid: AI agent skill | Tool Directory AI\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Mermaid diagram and documentation system with specialized guides and code-to-diagram capabilities.\"}],[\"$\",\"meta\",\"2\",{\"name\":\"application-name\",\"content\":\"Tool Directory AI\"}],[\"$\",\"meta\",\"3\",{\"name\":\"keywords\",\"content\":\"AI tools,best AI tools,AI tools directory,AI software,AI tools list,free AI tools,AI for business,AI writing tools,AI image generator,AI directory,find AI tools,top AI tools\"}],[\"$\",\"meta\",\"4\",{\"name\":\"robots\",\"content\":\"noindex, follow\"}],[\"$\",\"meta\",\"5\",{\"name\":\"google-adsense-account\",\"content\":\"ca-pub-4109718338001946\"}],[\"$\",\"link\",\"6\",{\"rel\":\"canonical\",\"href\":\"https://tooldirectoryai.com/skills/design-doc-mermaid\"}],[\"$\",\"meta\",\"7\",{\"name\":\"google-site-verification\",\"content\":\"QFBKyXYdzFVKWzKl1sTfs6owz4_19F5mstVWna3IzyM\"}],[\"$\",\"meta\",\"8\",{\"property\":\"og:title\",\"content\":\"Tool Directory AI: Discover the Best AI Tools\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:description\",\"content\":\"Tool Directory AI is a directory of AI tools. Browse 1,400+ AI tools by category, read articles and blogs, and find the right AI for any task.\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:url\",\"content\":\"https://tooldirectoryai.com\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:site_name\",\"content\":\"Tool Directory AI\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:image\",\"content\":\"https://res.cloudinary.com/dpj2vwi0n/image/upload/v1763317102/89ca77db-fb36-4702-858c-a24f0773dfe2_daobzg.png\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:image:alt\",\"content\":\"Tool Directory AI\"}],[\"$\",\"meta\",\"14\",{\"property\":\"og:type\",\"content\":\"website\"}],[\"$\",\"meta\",\"15\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"16\",{\"name\":\"twitter:title\",\"content\":\"Tool Directory AI: Discover the Best AI Tools\"}],[\"$\",\"meta\",\"17\",{\"name\":\"twitter:description\",\"content\":\"Tool Directory AI is a directory of AI tools. Browse 1,400+ AI tools by category, read articles and blogs, and find the right AI for any task.\"}],[\"$\",\"meta\",\"18\",{\"name\":\"twitter:image\",\"content\":\"https://res.cloudinary.com/dpj2vwi0n/image/upload/v1763317102/89ca77db-fb36-4702-858c-a24f0773dfe2_daobzg.png\"}],[\"$\",\"link\",\"19\",{\"rel\":\"icon\",\"href\":\"/icon.png?icon.09lcxlwx6u9y-.png\",\"sizes\":\"192x192\",\"type\":\"image/png\"}],[\"$\",\"link\",\"20\",{\"rel\":\"apple-touch-icon\",\"href\":\"/apple-icon.png?apple-icon.3ezfq13vq6dvf.png\",\"sizes\":\"180x180\",\"type\":\"image/png\"}],[\"$\",\"$L2f\",\"21\",{}]]\n30:I[41596,[\"$4\",\"$5\",\"$6\",\"$7\",\"$8\",\"$9\",\"$29\"],\"default\"]\n31:I[4504,[\"$4\",\"$5\",\"$6\",\"$7\",\"$8\",\"$9\",\"$29\"],\"SkillStat\"]\n32:T4fea,## Mermaid Architect - Hierarchical Diagram and Documentation Skill\n\nMermaid diagram and documentation system with specialized guides and code-to-diagram capabilities.\n\n## Table of Contents\n\n- Decision Tree\n\n- GitHub wiki, WikiTicket, and Confluence\n\n- Available Guides and Resources\n\n- Usage Patterns\n\n- Resilient Workflow\n\n- Unicode Semantic Symbols\n\n- Python Utilities\n\n- Decision Tree Examples\n\n- High-Contrast Styling\n\n- File Organization\n\n- Workflow Summary\n\n- When to Use What\n\n- Best Practices\n\n- Learning Path\n\n## Decision Tree\n\n**How this skill works:**\n\n- **User makes a request** → Skill analyzes intent\n\n- **Skill determines diagram/document type** → Loads appropriate guide(s)\n\n- **AI reads specialized guide** → Generates diagram/document using templates\n\n- **Result delivered** → With validation and export options\n\n**User Intent Analysis:**\n\n```\nflowchart TD\n Start([User Request]) --\u003e Analyze{Analyze Intent}\n\n Analyze --\u003e|\"workflow, process, business logic\"| Activity[Load Activity Diagram Guide\u003cbr/\u003ereferences/guides/diagrams/activity-diagrams.md]\n Analyze --\u003e|\"infrastructure, deployment, cloud\"| Deploy[Load Deployment Diagram Guide\u003cbr/\u003ereferences/guides/diagrams/deployment-diagrams.md]\n Analyze --\u003e|\"system architecture, components\"| Arch[Load Architecture Guide\u003cbr/\u003ereferences/guides/diagrams/architecture-diagrams.md]\n Analyze --\u003e|\"API flow, interactions\"| Sequence[Load Sequence Diagram Guide\u003cbr/\u003ereferences/guides/diagrams/sequence-diagrams.md]\n Analyze --\u003e|\"class, ER, state, wiki, walkthrough\"| WikiGuide[Load WikiTicket GitHub Guide\u003cbr/\u003ereferences/guides/wiki-ticket-and-github.md]\n Analyze --\u003e|\"code to diagram\"| CodeToDiag[Load Code-to-Diagram Guide\u003cbr/\u003ereferences/guides/code-to-diagram/ + examples/]\n Analyze --\u003e|\"design document, full docs\"| DesignDoc[Load Design Document Template\u003cbr/\u003eassets/*-design-template.md]\n Analyze --\u003e|\"unicode symbols, icons\"| Unicode[Load Unicode Symbols Guide\u003cbr/\u003ereferences/guides/unicode-symbols/guide.md]\n Analyze --\u003e|\"extract, validate, convert\"| Scripts[Use Python Scripts\u003cbr/\u003escripts/extract_mermaid.py\u003cbr/\u003escripts/mermaid_to_image.py]\n\n Activity --\u003e Generate[Generate Diagram]\n Deploy --\u003e Generate\n Arch --\u003e Generate\n Sequence --\u003e Generate\n WikiGuide --\u003e Generate\n CodeToDiag --\u003e Generate\n DesignDoc --\u003e Generate\n Unicode --\u003e Generate\n Scripts --\u003e Execute[Execute Script]\n\n Generate --\u003e Validate{Validate?}\n Validate --\u003e|Yes| RunValidation[Run mmdc validation]\n Validate --\u003e|No| Output\n RunValidation --\u003e Output[Output Result]\n Execute --\u003e Output\n\n classDef decision fill:#FFD700,stroke:#333,stroke-width:2px,color:black\n classDef guide fill:#90EE90,stroke:#333,stroke-width:2px,color:darkgreen\n classDef action fill:#87CEEB,stroke:#333,stroke-width:2px,color:darkblue\n\n class Analyze,Validate decision\n class Activity,Deploy,Arch,Sequence,WikiGuide,CodeToDiag,DesignDoc,Unicode,Scripts guide\n class Generate,Execute,RunValidation,Output action\n\n```\n\n## Available Guides and Resources\n\n### Diagram Type Guides (`references/guides/diagrams/`)\n\n| Guide | Full Path | Load When User Wants | Examples |\n|---|---|---|---|\n| Activity Diagrams | `references/guides/diagrams/activity-diagrams.md` | Workflows, processes, business logic, user flows, decision trees | \"Show checkout flow\", \"Document ETL pipeline\", \"Create approval workflow\" |\n| Deployment Diagrams | `references/guides/diagrams/deployment-diagrams.md` | Infrastructure, cloud architecture, K8s, serverless, network topology | \"Show AWS architecture\", \"Document GCP deployment\", \"Create K8s diagram\" |\n| Architecture Diagrams | `references/guides/diagrams/architecture-diagrams.md` | System architecture, component design, high-level structure | \"Show system components\", \"Document microservices\", \"Architecture overview\" |\n| Sequence Diagrams | `references/guides/diagrams/sequence-diagrams.md` | API interactions, service communication, request/response flows | \"Show API call sequence\", \"Document auth flow\", \"Service interactions\" |\n| WikiTicket / GitHub / Confluence | `references/guides/wiki-ticket-and-github.md` | Design docs, walkthroughs, requirements, wiki publish, Confluence images | \"architecture doc\", \"code walkthrough\", \"wiki\", \"Confluence\" |\n\nDefault for WikiTicket and GitHub wiki is this skill, including `classDiagram`, `erDiagram`, and `stateDiagram-v2`. Do not send those to PlantUML. If GitHub fails to render C4 / architecture-beta / block-beta, fall back to `flowchart TD`.\n\n### Code-to-Diagram Guide \u0026 Examples\n\n| Resource | Full Path | What It Provides |\n|---|---|---|\n| **Master Guide** | `references/guides/code-to-diagram/README.md` | Complete workflow for analyzing any codebase and extracting diagrams |\n| **Spring Boot** | `examples/spring-boot/README.md` | Controller→Service→Repository architecture, deployment config, sequence from methods, activity from business logic |\n| **FastAPI** | `examples/fastapi/README.md` | Python async patterns, Pydantic models, dependency injection, cloud deployment |\n| **React** | `examples/react/README.md` | Component hierarchy, state management, data flow, build pipeline |\n| **Python ETL** | `examples/python-etl/README.md` | Data pipeline, transformation steps, error handling, scheduling |\n| **Node/Express** | `examples/node-webapp/README.md` | Middleware chain, route handlers, async patterns, deployment |\n| **Java Web App** | `examples/java-webapp/README.md` | Traditional MVC, servlet containers, WAR deployment |\n\n### Design Document Templates\n\n| Template | Full Path | Use For | Load When |\n|---|---|---|---|\n| Architecture Design | `assets/architecture-design-template.md` | System-wide architecture | \"Create architecture doc\", \"Document system design\" |\n| API Design | `assets/api-design-template.md` | API specifications | \"API design doc\", \"Document REST API\" |\n| Feature Design | `assets/feature-design-template.md` | Feature planning | \"Feature design\", \"Plan new feature\" |\n| Database Design | `assets/database-design-template.md` | Database schema | \"Database design\", \"Document schema\" |\n| System Design | `assets/system-design-template.md` | Complete system | \"System design doc\", \"Full system documentation\" |\n\n### Unicode Symbols Guide\n\n**Full Path:** `references/guides/unicode-symbols/guide.md`\n\n**Load when user mentions:** \"unicode symbols\", \"emoji in diagrams\", \"semantic icons\", \"add symbols\"\n\n**Quick Reference:**\n\n- 📦 Infrastructure: ☁️ 🌐 🔌 📡 🗄️\n\n- ⚙️ Compute: ⚙️ ⚡ 🔄 ♻️ 🚀 💨\n\n- 💾 Data: 💾 📦 📊 📈 🗃️ 🧊\n\n- 📨 Messaging: 📨 📬 📤 📥 🐰 📢\n\n- 🔐 Security: 🔐 🔑 🛡️ 🚪 👤 🎫\n\n- 📝 Monitoring: 📝 📊 🚨 ⚠️ ✅ ❌\n\n### Python Scripts (`scripts/`)\n\n| Script | Use For | Load When |\n|---|---|---|\n| `extract_mermaid.py` | Extract diagrams from Markdown, validate syntax, replace with images | \"extract diagrams\", \"validate mermaid\", \"find all diagrams\" |\n| `mermaid_to_image.py` | Convert .mmd to PNG/SVG, batch conversion, custom themes | \"convert to image\", \"render diagram\", \"create PNG\" |\n| `resilient_diagram.py` | Full workflow: save .mmd, generate image, validate, error recovery | \"generate diagram\", \"create diagram with validation\", \"resilient diagram\" |\n\n## GitHub wiki, WikiTicket, and Confluence\n\nLoad `references/guides/wiki-ticket-and-github.md` for WikiTicket design docs, code walkthroughs, requirements, GitHub wiki, or Confluence.\n\n| Target | What to ship |\n|---|---|\n| GitHub wiki / GFM | Fenced `mermaid` block. GitHub renders class, ER, state, sequence, flowchart, C4. |\n| Confluence / Notion / Word / PDF | Also render PNG or SVG (`scripts/resilient_diagram.py` or `mmdc`) and upload the image. Do not rely on Confluence to render Mermaid. |\n\nPlantUML is opt-in for Salt wireframes, use case, timing, ArchiMate, nwdiag, and WBS. Those always ship as PNG or SVG.\n\n## Usage Patterns\n\nCommon request patterns and guide selection. See When to Use What for complete mapping.\n\n| Pattern | Example Request | Guides to Load |\n|---|---|---|\n| Single Diagram | \"Create activity diagram for login flow\" | Diagram type guide + Unicode symbols |\n| Code-to-Diagram | \"Generate deployment from application.yml\" | Framework example + Deployment guide |\n| Design Document | \"Create API design document\" | Template from assets/ + Relevant diagram guides |\n| Extract/Validate | \"Extract diagrams from design.md\" | Use `scripts/extract_mermaid.py` |\n| Batch Convert | \"Convert all .mmd to PNG\" | Use `scripts/mermaid_to_image.py` |\n\n## Resilient Workflow\n\n**CRITICAL:** This is the recommended approach for ALL diagram generation. It ensures validation, error recovery, and consistent file organization.\n\n**Full Guide:** `references/guides/resilient-workflow.md`\n\n### Workflow Overview\n\n```\nflowchart LR\n A[1. Identify Type] --\u003e B[2. Save .mmd + Image]\n B --\u003e C{3. Valid?}\n C --\u003e|Yes| D[4. Add to Markdown]\n C --\u003e|No| E[5. Error Recovery]\n E --\u003e F{Fix Found?}\n F --\u003e|Yes| A\n F --\u003e|No| G[Search External]\n G --\u003e A\n\n classDef step fill:#90EE90,stroke:#333,color:darkgreen\n classDef decision fill:#FFD700,stroke:#333,color:black\n class A,B,D,E,G step\n class C,F decision\n\n```\n\n### Key Principle\n\n**NEVER add a diagram to markdown until it passes validation.** This prevents broken diagrams in documentation.\n\n### Using the Script (Recommended)\n\n```\n# Generate with full error recovery\npython scripts/resilient_diagram.py \\\n --code \"flowchart TD; A--\u003eB\" \\\n --markdown-file design_doc \\\n --diagram-num 1 \\\n --title \"process_flow\" \\\n --format png \\\n --json\n\n```\n\n**Output:** Both `.mmd` and `.png` files in `./diagrams/` directory.\n\n### File Naming Convention\n\n```\n./diagrams/\u003cmarkdown_file\u003e_\u003cnum\u003e_\u003ctype\u003e_\u003ctitle\u003e.mmd\n./diagrams/\u003cmarkdown_file\u003e_\u003cnum\u003e_\u003ctype\u003e_\u003ctitle\u003e.png\n\n```\n\n**Example:** `./diagrams/api_design_01_sequence_auth_flow.png`\n\n### Error Recovery Priority\n\nWhen validation fails, the workflow automatically:\n\n- **Check troubleshooting guide** - `references/guides/troubleshooting.md` (28 documented errors)\n\n- **Search with perplexity** - `perplexity_ask` MCP for syntax questions\n\n- **Search with brave** - `brave_web_search` MCP for recent solutions\n\n- **Ask gemini** - `gemini` skill for alternative perspective\n\n- **General search** - `WebSearch` tool as fallback\n\n### Manual Fallback Steps\n\nIf the script is unavailable:\n\n- **Identify diagram type** from first line (flowchart, sequence, etc.)\n\n- **Load reference guide** from `references/guides/diagrams/`\n\n- **Save to** `./diagrams/\u003cmarkdown_file\u003e_\u003cnum\u003e_\u003ctype\u003e_\u003ctitle\u003e.mmd`\n\n- **Validate:** `mmdc -i file.mmd -o file.png -b transparent`\n\n- **On error:** Search `references/guides/troubleshooting.md` for matching error\n\n- **If not found:** Use search tools in priority order above\n\n- **Add reference:** ``\n\n### Pattern 6: Resilient Diagram Generation\n\n**User:** \"Create a sequence diagram and add it to the design doc\"\n\n**Skill Actions:**\n\n- Identify intent: **diagram generation** + **markdown integration**\n\n- Load workflow guide: `references/guides/resilient-workflow.md`\n\n- Identify diagram type: **sequence**\n\n- Load diagram guide: `references/guides/diagrams/sequence-diagrams.md`\n\n- Generate Mermaid code using templates\n\n- Execute resilient workflow: ``` python scripts/resilient_diagram.py \\ --code \"[generated code]\" \\ --markdown-file design_doc \\ --diagram-num 1 \\ --title \"api_sequence\" \\ --json ```\n\n- If validation fails → Apply troubleshooting fix → Retry\n\n- On success → Add `` to markdown\n\n## Unicode Semantic Symbols\n\nAlways use Unicode symbols to enhance diagram clarity. Common patterns:\n\n### Infrastructure \u0026 Deployment\n\n```\ngraph TB\n Client[👤 User] --\u003e LB[🌐 Load Balancer]\n LB --\u003e App1[⚙️ App Server 1]\n LB --\u003e App2[⚙️ App Server 2]\n App1 --\u003e DB[(💾 Database)]\n App1 --\u003e Cache[(⚡ Redis)]\n\n```\n\n### Activity Flow with States\n\n```\nflowchart TD\n Start([🚀 Start]) --\u003e Process[⚙️ Process Data]\n Process --\u003e Check{✓ Valid?}\n Check --\u003e|Yes| Save[💾 Save]\n Check --\u003e|No| Error[❌ Error]\n Save --\u003e Complete([✅ Complete])\n\n```\n\n### Microservices Architecture\n\n```\ngraph TB\n API[🌐 API Gateway] --\u003e Auth[🔐 Auth Service]\n API --\u003e Orders[📋 Order Service]\n Orders --\u003e Queue[📬 Message Queue]\n Queue --\u003e Worker[⚙️ Background Worker]\n Worker --\u003e Storage[📦 Object Storage]\n\n```\n\n**For complete symbol reference, load:** `references/guides/unicode-symbols/guide.md`\n\n## Python Utilities\n\n### Extract Mermaid Diagrams\n\n```\n# List all diagrams\npython scripts/extract_mermaid.py document.md --list-only\n\n# Extract to separate files\npython scripts/extract_mermaid.py document.md --output-dir diagrams/\n\n# Validate all diagrams\npython scripts/extract_mermaid.py document.md --validate\n\n# Replace with image references (for Confluence upload)\npython scripts/extract_mermaid.py document.md --replace-with-images \\\n --image-format png --output-markdown output.md\n\n```\n\n### Convert to Images\n\n```\n# Single conversion\npython scripts/mermaid_to_image.py diagram.mmd output.png\n\n# With custom settings\npython scripts/mermaid_to_image.py diagram.mmd output.svg \\\n --theme dark --background white --width 1200\n\n# Batch convert directory\npython scripts/mermaid_to_image.py diagrams/ output/ --format png --recursive\n\n# From stdin\necho \"graph TD; A--\u003eB\" | python scripts/mermaid_to_image.py - output.png\n\n```\n\n## Decision Tree Examples\n\n### Example 1: User Asks for Workflow Diagram\n\n**Input:** \"Show the checkout process workflow\"\n\n**Skill Decision Path:**\n\n```\n1. Analyze: workflow, process → ACTIVITY DIAGRAM\n2. Load guide: guides/diagrams/activity-diagrams.md\n3. Find pattern: E-commerce checkout (template exists in guide)\n4. Generate using template + Unicode symbols\n5. Output activity diagram with decision points\n\n```\n\n**Output:** Complete activity diagram with Unicode symbols for cart, payment, order states.\n\n### Example 2: User Provides Spring Boot Code\n\n**Input:** \"Here's my Spring Boot controller, create diagrams\"\n\n**Skill Decision Path:**\n\n```\n1. Analyze: Spring Boot, code provided → CODE-TO-DIAGRAM + SPRING BOOT\n2. Load guides:\n - examples/spring-boot/README.md\n - guides/diagrams/architecture-diagrams.md (for structure)\n - guides/diagrams/sequence-diagrams.md (for method calls)\n - guides/diagrams/activity-diagrams.md (for business logic)\n3. Generate multiple diagrams:\n a. Architecture diagram from @RestController/@Service/@Repository annotations\n b. Sequence diagram from method call chain\n c. Activity diagram from business logic flow\n4. Output all diagrams with explanations\n\n```\n\n**Output:** 3-4 diagrams showing different views of the Spring Boot application.\n\n### Example 3: User Wants Infrastructure Documentation\n\n**Input:** \"Document my GCP Cloud Run deployment with AlloyDB\"\n\n**Skill Decision Path:**\n\n```\n1. Analyze: infrastructure, GCP, Cloud Run → DEPLOYMENT DIAGRAM\n2. Load guides:\n - guides/diagrams/deployment-diagrams.md\n - examples/spring-boot/ or examples/fastapi/ (if code provided)\n3. Check for IaC files (Pulumi, Terraform, docker-compose)\n4. Generate deployment diagram with:\n - Cloud Run services with specs\n - VPC connector\n - AlloyDB cluster\n - Security (IAM, Secret Manager)\n - Monitoring\n5. Apply Unicode symbols for clarity\n6. Output with resource specifications\n\n```\n\n**Output:** Complete GCP deployment diagram with all resources labeled.\n\n## High-Contrast Styling\n\n**ALL diagrams MUST use high-contrast colors:**\n\n```\ngraph TB\n classDef primary fill:#90EE90,stroke:#333,stroke-width:2px,color:darkgreen\n classDef secondary fill:#87CEEB,stroke:#333,stroke-width:2px,color:darkblue\n classDef database fill:#E6E6FA,stroke:#333,stroke-width:2px,color:darkblue\n classDef error fill:#FFB6C1,stroke:#DC143C,stroke-width:2px,color:black\n\n %% Every classDef MUST have color: property\n\n```\n\n**Rules:**\n\n- Light background → Dark text color\n\n- Dark background → Light text color\n\n- Always specify `color:` in every `classDef`\n\n## File Organization\n\n```\ndesign-doc-mermaid/\n├── SKILL.md # This file - Main orchestrator\n├── README.md # User documentation\n├── CLAUDE.md # Claude Code instructions\n│\n├── references/ # Reference materials\n│ ├── mermaid-diagram-guide.md # Legacy general guide\n│ └── guides/ # Specialized guides (load on-demand)\n│ ├── diagrams/\n│ │ ├── activity-diagrams.md # Workflows, processes\n│ │ ├── deployment-diagrams.md # Infrastructure, cloud\n│ │ ├── architecture-diagrams.md # System architecture\n│ │ └── sequence-diagrams.md # API interactions\n│ ├── code-to-diagram/\n│ │ └── README.md # Master guide for code analysis\n│ ├── unicode-symbols/\n│ │ └── guide.md # Complete symbol reference\n│ └── troubleshooting.md # Common syntax errors \u0026 fixes\n│\n├── assets/ # Design document templates\n│ ├── architecture-design-template.md\n│ ├── api-design-template.md\n│ ├── feature-design-template.md\n│ ├── database-design-template.md\n│ └── system-design-template.md\n│\n├── scripts/ # Python utilities\n│ ├── extract_mermaid.py # Extract \u0026 validate diagrams\n│ └── mermaid_to_image.py # Convert to PNG/SVG\n│\n├── examples/ # Language-specific patterns\n│ ├── spring-boot/ # Spring Boot patterns\n│ ├── fastapi/ # FastAPI patterns\n│ ├── react/ # React patterns\n│ ├── python-etl/ # Data pipeline patterns\n│ ├── node-webapp/ # Express.js patterns\n│ └── java-webapp/ # Traditional Java patterns\n│\n└── references/ # General Mermaid reference\n └── mermaid-diagram-guide.md # Complete Mermaid syntax guide\n\n```\n\n## Workflow Summary\n\n- **Analyze user intent** → Determine diagram type, document type, or action needed\n\n- **Load appropriate guide(s)** → Read only what's needed (token efficient)\n\n- **Apply templates and patterns** → Use examples from guides\n\n- **Generate output** → Create diagram or document\n\n- **Validate** (optional) → Use scripts to verify\n\n- **Convert** (optional) → Export to images if needed\n\n## When to Use What\n\n| User Request | Load This |\n|---|---|\n| \"activity diagram\", \"workflow\", \"process flow\" | `references/guides/diagrams/activity-diagrams.md` |\n| \"deployment\", \"infrastructure\", \"cloud\", \"k8s\" | `references/guides/diagrams/deployment-diagrams.md` |\n| \"architecture\", \"system design\", \"components\" | `references/guides/diagrams/architecture-diagrams.md` + design template |\n| \"API\", \"sequence\", \"interactions\", \"flow\" | `references/guides/diagrams/sequence-diagrams.md` |\n| \"class diagram\", \"ER\", \"state machine\", \"wiki\", \"walkthrough\", \"architecture doc\" | `references/guides/wiki-ticket-and-github.md` plus the matching type guide |\n| \"Confluence\", \"upload image\", \"PNG\", \"SVG\" | `scripts/resilient_diagram.py` or `scripts/mermaid_to_image.py` |\n| \"Spring Boot code\" | `examples/spring-boot/` + relevant diagram guides |\n| \"FastAPI code\", \"Python API\" | `examples/fastapi/` + relevant diagram guides |\n| \"React app\", \"frontend\" | `examples/react/` + architecture guide |\n| \"ETL\", \"data pipeline\", \"Python batch\" | `examples/python-etl/` + activity guide |\n| \"symbols\", \"unicode\", \"emoji\" | `references/guides/unicode-symbols/guide.md` |\n| \"syntax error\", \"diagram won't render\", \"troubleshoot\" | `references/guides/troubleshooting.md` |\n| \"extract diagrams\" | `scripts/extract_mermaid.py` |\n| \"convert to image\", \"PNG\", \"SVG\" | `scripts/mermaid_to_image.py` |\n| \"create diagram\", \"generate diagram\", \"add diagram to markdown\" | `scripts/resilient_diagram.py` + `references/guides/resilient-workflow.md` |\n| \"design document\", \"full docs\" | `assets/*-design-template.md` + diagram guidesf:[\"$\",\"div\",null,{\"className\":\"min-h-screen bg-brand-bg\",\"children\":[[[\"$\",\"script\",\"0\",{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"SoftwareApplication\\\",\\\"name\\\":\\\"Design Doc Mermaid\\\",\\\"description\\\":\\\"Mermaid diagram and documentation system with specialized guides and code-to-diagram capabilities.\\\",\\\"url\\\":\\\"https://tooldirectoryai.com/skills/design-doc-mermaid\\\",\\\"applicationCategory\\\":\\\"DeveloperApplication\\\",\\\"applicationSubCategory\\\":\\\"AI agent skill: Design \u0026 UI\\\",\\\"operatingSystem\\\":\\\"Cross-platform\\\",\\\"sameAs\\\":\\\"https://www.skills.sh/spillwavesolutions/design-doc-mermaid/design-doc-mermaid\\\",\\\"interactionStatistic\\\":{\\\"@type\\\":\\\"InteractionCounter\\\",\\\"interactionType\\\":\\\"https://schema.org/InstallAction\\\",\\\"userInteractionCount\\\":92896}}\"}}]],[[\"$\",\"script\",\"0\",{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"BreadcrumbList\\\",\\\"itemListElement\\\":[{\\\"@type\\\":\\\"ListItem\\\",\\\"position\\\":1,\\\"name\\\":\\\"Home\\\",\\\"item\\\":\\\"https://tooldirectoryai.com\\\"},{\\\"@type\\\":\\\"ListItem\\\",\\\"position\\\":2,\\\"name\\\":\\\"Skills\\\",\\\"item\\\":\\\"https://tooldirectoryai.com/skills\\\"},{\\\"@type\\\":\\\"ListItem\\\",\\\"position\\\":3,\\\"name\\\":\\\"Design Doc Mermaid\\\",\\\"item\\\":\\\"https://tooldirectoryai.com/skills/design-doc-mermaid\\\"}]}\"}}]],[\"$\",\"div\",null,{\"className\":\"mx-auto max-w-3xl px-4 py-10 sm:px-6 md:py-14\",\"children\":[[\"$\",\"$L30\",null,{\"fallback\":\"/skills\"}],[\"$\",\"h1\",null,{\"className\":\"mt-6 text-4xl font-semibold tracking-tight text-gray-900\",\"children\":\"Design Doc Mermaid\"}],[\"$\",\"p\",null,{\"className\":\"mt-3 flex flex-wrap items-center gap-x-2 text-sm text-gray-500\",\"children\":[[\"$\",\"$L2a\",null,{\"href\":\"/skills?type=design\",\"className\":\"font-medium text-brand-slate hover:underline\",\"children\":\"Design \u0026 UI\"}],[[\"$\",\"span\",null,{\"aria-hidden\":true,\"children\":\"·\"}],[\"$\",\"$L31\",null,{\"s\":{\"id\":\"d2a7305bd296ba2fce3b03b61f543e97\",\"slug\":\"design-doc-mermaid\",\"name\":\"design-doc-mermaid\",\"description\":\"Mermaid diagram and documentation system with specialized guides and code-to-diagram capabilities.\",\"github_url\":\"https://www.skills.sh/spillwavesolutions/design-doc-mermaid/design-doc-mermaid\",\"install_command\":\"npx skills add https://github.com/spillwavesolutions/design-doc-mermaid --skill design-doc-mermaid\",\"category\":\"design\",\"stars\":null,\"installs\":92896,\"indexable\":false,\"details\":\"$32\",\"created_at\":\"2026-11-07T18:42:55.059Z\",\"updated_at\":\"2026-11-07T18:42:55.059Z\"},\"className\":\"font-medium text-gray-700\"}]]]}],\"$L33\",\"$L34\",\"$L35\",\"$L36\"]}]]}]\n37:I[4504,[\"$4\",\"$5\",\"$6\",\"$7\",\"$8\",\"$9\",\"$29\"],\"CopyCommand\"]\n39:I[4504,[\"$4\",\"$5\",\"$6\",\"$7\",\"$8\",\"$9\",\"$29\"],\"default\"]\n33:[\"$\",\"div\",null,{\"className\":\"mt-8 rounded-2xl border border-gray-200 bg-white p-6\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"text-sm font-medium text-gray-900\",\"children\":\"What it does\"}],[\"$\",\"p\",null,{\"className\":\"mt-2 whitespace-pre-line leading-relaxed text-gray-700\",\"children\":\"Mermaid diagram and documentation system with specialized guides and code-to-diagram capabilities.\"}],[[\"$\",\"h2\",null,{\"className\":\"mt-6 text-sm font-medium text-gray-900\",\"children\":\"Install\"}],[\"$\",\"div\",null,{\"className\":\"mt-2\",\"children\":[\"$\",\"$L37\",null,{\"command\":\"npx skills add https://github.com/spillwavesolutions/design-doc-mermaid --skill design-doc-mermaid\",\"name\":\"design-doc-mermaid\"}]}]],[\"$\",\"h2\",null,{\"className\":\"mt-6 text-sm font-medium text-gray-900\",\"children\":\"Website\"}],[\"$\",\"a\",null,{\"href\":\"https://www.skills.sh/spillwavesolutions/design-doc-mermaid/design-doc-mermaid\",\"target\":\"_blank\",\"rel\":\"ugc nofollow noopener\",\"className\":\"mt-2 inline-flex max-w-full items-center gap-2 text-brand-slate hover:underline\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-globe h-4 w-4 shrink-0\",\"aria-hidden\":true,\"children\":[[\"$\",\"circle\",\"1mglay\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\"}],[\"$\",\"path\",\"13o1zl\",{\"d\":\"M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20\"}],[\"$\",\"path\",\"9i4pu4\",{\"d\":\"M2 12h20\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"className\":\"truncate\",\"children\":\"www.skills.sh/spillwavesolutions/design-doc-mermaid/design-doc-mermaid\"}],[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-external-link h-3.5 w-3.5 shrink-0\",\"aria-hidden\":true,\"children\":[[\"$\",\"path\",\"a6xqqp\",{\"d\":\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"}],[\"$\",\"polyline\",\"mznyad\",{\"points\":\"15 3 21 3 21 9\"}],[\"$\",\"line\",\"18c3s4\",{\"x1\":\"10\",\"x2\":\"21\",\"y1\":\"14\",\"y2\":\"3\"}],\"$undefined\"]}]]}]]}]\n38:T4fea,## Mermaid Architect - Hierarchical Diagram and Documentation Skill\n\nMermaid diagram and documentation system with specialized guides and code-to-diagram capabilities.\n\n## Table of Contents\n\n- Decision Tree\n\n- GitHub wiki, WikiTicket, and Confluence\n\n- Available Guides and Resources\n\n- Usage Patterns\n\n- Resilient Workflow\n\n- Unicode Semantic Symbols\n\n- Python Utilities\n\n- Decision Tree Examples\n\n- High-Contrast Styling\n\n- File Organization\n\n- Workflow Summary\n\n- When to Use What\n\n- Best Practices\n\n- Learning Path\n\n## Decision Tree\n\n**How this skill works:**\n\n- **User makes a request** → Skill analyzes intent\n\n- **Skill determines diagram/document type** → Loads appropriate guide(s)\n\n- **AI reads specialized guide** → Generates diagram/document using templates\n\n- **Result delivered** → With validation and export options\n\n**User Intent Analysis:**\n\n```\nflowchart TD\n Start([User Request]) --\u003e Analyze{Analyze Intent}\n\n Analyze --\u003e|\"workflow, process, business logic\"| Activity[Load Activity Diagram Guide\u003cbr/\u003ereferences/guides/diagrams/activity-diagrams.md]\n Analyze --\u003e|\"infrastructure, deployment, cloud\"| Deploy[Load Deployment Diagram Guide\u003cbr/\u003ereferences/guides/diagrams/deployment-diagrams.md]\n Analyze --\u003e|\"system architecture, components\"| Arch[Load Architecture Guide\u003cbr/\u003ereferences/guides/diagrams/architecture-diagrams.md]\n Analyze --\u003e|\"API flow, interactions\"| Sequence[Load Sequence Diagram Guide\u003cbr/\u003ereferences/guides/diagrams/sequence-diagrams.md]\n Analyze --\u003e|\"class, ER, state, wiki, walkthrough\"| WikiGuide[Load WikiTicket GitHub Guide\u003cbr/\u003ereferences/guides/wiki-ticket-and-github.md]\n Analyze --\u003e|\"code to diagram\"| CodeToDiag[Load Code-to-Diagram Guide\u003cbr/\u003ereferences/guides/code-to-diagram/ + examples/]\n Analyze --\u003e|\"design document, full docs\"| DesignDoc[Load Design Document Template\u003cbr/\u003eassets/*-design-template.md]\n Analyze --\u003e|\"unicode symbols, icons\"| Unicode[Load Unicode Symbols Guide\u003cbr/\u003ereferences/guides/unicode-symbols/guide.md]\n Analyze --\u003e|\"extract, validate, convert\"| Scripts[Use Python Scripts\u003cbr/\u003escripts/extract_mermaid.py\u003cbr/\u003escripts/mermaid_to_image.py]\n\n Activity --\u003e Generate[Generate Diagram]\n Deploy --\u003e Generate\n Arch --\u003e Generate\n Sequence --\u003e Generate\n WikiGuide --\u003e Generate\n CodeToDiag --\u003e Generate\n DesignDoc --\u003e Generate\n Unicode --\u003e Generate\n Scripts --\u003e Execute[Execute Script]\n\n Generate --\u003e Validate{Validate?}\n Validate --\u003e|Yes| RunValidation[Run mmdc validation]\n Validate --\u003e|No| Output\n RunValidation --\u003e Output[Output Result]\n Execute --\u003e Output\n\n classDef decision fill:#FFD700,stroke:#333,stroke-width:2px,color:black\n classDef guide fill:#90EE90,stroke:#333,stroke-width:2px,color:darkgreen\n classDef action fill:#87CEEB,stroke:#333,stroke-width:2px,color:darkblue\n\n class Analyze,Validate decision\n class Activity,Deploy,Arch,Sequence,WikiGuide,CodeToDiag,DesignDoc,Unicode,Scripts guide\n class Generate,Execute,RunValidation,Output action\n\n```\n\n## Available Guides and Resources\n\n### Diagram Type Guides (`references/guides/diagrams/`)\n\n| Guide | Full Path | Load When User Wants | Examples |\n|---|---|---|---|\n| Activity Diagrams | `references/guides/diagrams/activity-diagrams.md` | Workflows, processes, business logic, user flows, decision trees | \"Show checkout flow\", \"Document ETL pipeline\", \"Create approval workflow\" |\n| Deployment Diagrams | `references/guides/diagrams/deployment-diagrams.md` | Infrastructure, cloud architecture, K8s, serverless, network topology | \"Show AWS architecture\", \"Document GCP deployment\", \"Create K8s diagram\" |\n| Architecture Diagrams | `references/guides/diagrams/architecture-diagrams.md` | System architecture, component design, high-level structure | \"Show system components\", \"Document microservices\", \"Architecture overview\" |\n| Sequence Diagrams | `references/guides/diagrams/sequence-diagrams.md` | API interactions, service communication, request/response flows | \"Show API call sequence\", \"Document auth flow\", \"Service interactions\" |\n| WikiTicket / GitHub / Confluence | `references/guides/wiki-ticket-and-github.md` | Design docs, walkthroughs, requirements, wiki publish, Confluence images | \"architecture doc\", \"code walkthrough\", \"wiki\", \"Confluence\" |\n\nDefault for WikiTicket and GitHub wiki is this skill, including `classDiagram`, `erDiagram`, and `stateDiagram-v2`. Do not send those to PlantUML. If GitHub fails to render C4 / architecture-beta / block-beta, fall back to `flowchart TD`.\n\n### Code-to-Diagram Guide \u0026 Examples\n\n| Resource | Full Path | What It Provides |\n|---|---|---|\n| **Master Guide** | `references/guides/code-to-diagram/README.md` | Complete workflow for analyzing any codebase and extracting diagrams |\n| **Spring Boot** | `examples/spring-boot/README.md` | Controller→Service→Repository architecture, deployment config, sequence from methods, activity from business logic |\n| **FastAPI** | `examples/fastapi/README.md` | Python async patterns, Pydantic models, dependency injection, cloud deployment |\n| **React** | `examples/react/README.md` | Component hierarchy, state management, data flow, build pipeline |\n| **Python ETL** | `examples/python-etl/README.md` | Data pipeline, transformation steps, error handling, scheduling |\n| **Node/Express** | `examples/node-webapp/README.md` | Middleware chain, route handlers, async patterns, deployment |\n| **Java Web App** | `examples/java-webapp/README.md` | Traditional MVC, servlet containers, WAR deployment |\n\n### Design Document Templates\n\n| Template | Full Path | Use For | Load When |\n|---|---|---|---|\n| Architecture Design | `assets/architecture-design-template.md` | System-wide architecture | \"Create architecture doc\", \"Document system design\" |\n| API Design | `assets/api-design-template.md` | API specifications | \"API design doc\", \"Document REST API\" |\n| Feature Design | `assets/feature-design-template.md` | Feature planning | \"Feature design\", \"Plan new feature\" |\n| Database Design | `assets/database-design-template.md` | Database schema | \"Database design\", \"Document schema\" |\n| System Design | `assets/system-design-template.md` | Complete system | \"System design doc\", \"Full system documentation\" |\n\n### Unicode Symbols Guide\n\n**Full Path:** `references/guides/unicode-symbols/guide.md`\n\n**Load when user mentions:** \"unicode symbols\", \"emoji in diagrams\", \"semantic icons\", \"add symbols\"\n\n**Quick Reference:**\n\n- 📦 Infrastructure: ☁️ 🌐 🔌 📡 🗄️\n\n- ⚙️ Compute: ⚙️ ⚡ 🔄 ♻️ 🚀 💨\n\n- 💾 Data: 💾 📦 📊 📈 🗃️ 🧊\n\n- 📨 Messaging: 📨 📬 📤 📥 🐰 📢\n\n- 🔐 Security: 🔐 🔑 🛡️ 🚪 👤 🎫\n\n- 📝 Monitoring: 📝 📊 🚨 ⚠️ ✅ ❌\n\n### Python Scripts (`scripts/`)\n\n| Script | Use For | Load When |\n|---|---|---|\n| `extract_mermaid.py` | Extract diagrams from Markdown, validate syntax, replace with images | \"extract diagrams\", \"validate mermaid\", \"find all diagrams\" |\n| `mermaid_to_image.py` | Convert .mmd to PNG/SVG, batch conversion, custom themes | \"convert to image\", \"render diagram\", \"create PNG\" |\n| `resilient_diagram.py` | Full workflow: save .mmd, generate image, validate, error recovery | \"generate diagram\", \"create diagram with validation\", \"resilient diagram\" |\n\n## GitHub wiki, WikiTicket, and Confluence\n\nLoad `references/guides/wiki-ticket-and-github.md` for WikiTicket design docs, code walkthroughs, requirements, GitHub wiki, or Confluence.\n\n| Target | What to ship |\n|---|---|\n| GitHub wiki / GFM | Fenced `mermaid` block. GitHub renders class, ER, state, sequence, flowchart, C4. |\n| Confluence / Notion / Word / PDF | Also render PNG or SVG (`scripts/resilient_diagram.py` or `mmdc`) and upload the image. Do not rely on Confluence to render Mermaid. |\n\nPlantUML is opt-in for Salt wireframes, use case, timing, ArchiMate, nwdiag, and WBS. Those always ship as PNG or SVG.\n\n## Usage Patterns\n\nCommon request patterns and guide selection. See When to Use What for complete mapping.\n\n| Pattern | Example Request | Guides to Load |\n|---|---|---|\n| Single Diagram | \"Create activity diagram for login flow\" | Diagram type guide + Unicode symbols |\n| Code-to-Diagram | \"Generate deployment from application.yml\" | Framework example + Deployment guide |\n| Design Document | \"Create API design document\" | Template from assets/ + Relevant diagram guides |\n| Extract/Validate | \"Extract diagrams from design.md\" | Use `scripts/extract_mermaid.py` |\n| Batch Convert | \"Convert all .mmd to PNG\" | Use `scripts/mermaid_to_image.py` |\n\n## Resilient Workflow\n\n**CRITICAL:** This is the recommended approach for ALL diagram generation. It ensures validation, error recovery, and consistent file organization.\n\n**Full Guide:** `references/guides/resilient-workflow.md`\n\n### Workflow Overview\n\n```\nflowchart LR\n A[1. Identify Type] --\u003e B[2. Save .mmd + Image]\n B --\u003e C{3. Valid?}\n C --\u003e|Yes| D[4. Add to Markdown]\n C --\u003e|No| E[5. Error Recovery]\n E --\u003e F{Fix Found?}\n F --\u003e|Yes| A\n F --\u003e|No| G[Search External]\n G --\u003e A\n\n classDef step fill:#90EE90,stroke:#333,color:darkgreen\n classDef decision fill:#FFD700,stroke:#333,color:black\n class A,B,D,E,G step\n class C,F decision\n\n```\n\n### Key Principle\n\n**NEVER add a diagram to markdown until it passes validation.** This prevents broken diagrams in documentation.\n\n### Using the Script (Recommended)\n\n```\n# Generate with full error recovery\npython scripts/resilient_diagram.py \\\n --code \"flowchart TD; A--\u003eB\" \\\n --markdown-file design_doc \\\n --diagram-num 1 \\\n --title \"process_flow\" \\\n --format png \\\n --json\n\n```\n\n**Output:** Both `.mmd` and `.png` files in `./diagrams/` directory.\n\n### File Naming Convention\n\n```\n./diagrams/\u003cmarkdown_file\u003e_\u003cnum\u003e_\u003ctype\u003e_\u003ctitle\u003e.mmd\n./diagrams/\u003cmarkdown_file\u003e_\u003cnum\u003e_\u003ctype\u003e_\u003ctitle\u003e.png\n\n```\n\n**Example:** `./diagrams/api_design_01_sequence_auth_flow.png`\n\n### Error Recovery Priority\n\nWhen validation fails, the workflow automatically:\n\n- **Check troubleshooting guide** - `references/guides/troubleshooting.md` (28 documented errors)\n\n- **Search with perplexity** - `perplexity_ask` MCP for syntax questions\n\n- **Search with brave** - `brave_web_search` MCP for recent solutions\n\n- **Ask gemini** - `gemini` skill for alternative perspective\n\n- **General search** - `WebSearch` tool as fallback\n\n### Manual Fallback Steps\n\nIf the script is unavailable:\n\n- **Identify diagram type** from first line (flowchart, sequence, etc.)\n\n- **Load reference guide** from `references/guides/diagrams/`\n\n- **Save to** `./diagrams/\u003cmarkdown_file\u003e_\u003cnum\u003e_\u003ctype\u003e_\u003ctitle\u003e.mmd`\n\n- **Validate:** `mmdc -i file.mmd -o file.png -b transparent`\n\n- **On error:** Search `references/guides/troubleshooting.md` for matching error\n\n- **If not found:** Use search tools in priority order above\n\n- **Add reference:** ``\n\n### Pattern 6: Resilient Diagram Generation\n\n**User:** \"Create a sequence diagram and add it to the design doc\"\n\n**Skill Actions:**\n\n- Identify intent: **diagram generation** + **markdown integration**\n\n- Load workflow guide: `references/guides/resilient-workflow.md`\n\n- Identify diagram type: **sequence**\n\n- Load diagram guide: `references/guides/diagrams/sequence-diagrams.md`\n\n- Generate Mermaid code using templates\n\n- Execute resilient workflow: ``` python scripts/resilient_diagram.py \\ --code \"[generated code]\" \\ --markdown-file design_doc \\ --diagram-num 1 \\ --title \"api_sequence\" \\ --json ```\n\n- If validation fails → Apply troubleshooting fix → Retry\n\n- On success → Add `` to markdown\n\n## Unicode Semantic Symbols\n\nAlways use Unicode symbols to enhance diagram clarity. Common patterns:\n\n### Infrastructure \u0026 Deployment\n\n```\ngraph TB\n Client[👤 User] --\u003e LB[🌐 Load Balancer]\n LB --\u003e App1[⚙️ App Server 1]\n LB --\u003e App2[⚙️ App Server 2]\n App1 --\u003e DB[(💾 Database)]\n App1 --\u003e Cache[(⚡ Redis)]\n\n```\n\n### Activity Flow with States\n\n```\nflowchart TD\n Start([🚀 Start]) --\u003e Process[⚙️ Process Data]\n Process --\u003e Check{✓ Valid?}\n Check --\u003e|Yes| Save[💾 Save]\n Check --\u003e|No| Error[❌ Error]\n Save --\u003e Complete([✅ Complete])\n\n```\n\n### Microservices Architecture\n\n```\ngraph TB\n API[🌐 API Gateway] --\u003e Auth[🔐 Auth Service]\n API --\u003e Orders[📋 Order Service]\n Orders --\u003e Queue[📬 Message Queue]\n Queue --\u003e Worker[⚙️ Background Worker]\n Worker --\u003e Storage[📦 Object Storage]\n\n```\n\n**For complete symbol reference, load:** `references/guides/unicode-symbols/guide.md`\n\n## Python Utilities\n\n### Extract Mermaid Diagrams\n\n```\n# List all diagrams\npython scripts/extract_mermaid.py document.md --list-only\n\n# Extract to separate files\npython scripts/extract_mermaid.py document.md --output-dir diagrams/\n\n# Validate all diagrams\npython scripts/extract_mermaid.py document.md --validate\n\n# Replace with image references (for Confluence upload)\npython scripts/extract_mermaid.py document.md --replace-with-images \\\n --image-format png --output-markdown output.md\n\n```\n\n### Convert to Images\n\n```\n# Single conversion\npython scripts/mermaid_to_image.py diagram.mmd output.png\n\n# With custom settings\npython scripts/mermaid_to_image.py diagram.mmd output.svg \\\n --theme dark --background white --width 1200\n\n# Batch convert directory\npython scripts/mermaid_to_image.py diagrams/ output/ --format png --recursive\n\n# From stdin\necho \"graph TD; A--\u003eB\" | python scripts/mermaid_to_image.py - output.png\n\n```\n\n## Decision Tree Examples\n\n### Example 1: User Asks for Workflow Diagram\n\n**Input:** \"Show the checkout process workflow\"\n\n**Skill Decision Path:**\n\n```\n1. Analyze: workflow, process → ACTIVITY DIAGRAM\n2. Load guide: guides/diagrams/activity-diagrams.md\n3. Find pattern: E-commerce checkout (template exists in guide)\n4. Generate using template + Unicode symbols\n5. Output activity diagram with decision points\n\n```\n\n**Output:** Complete activity diagram with Unicode symbols for cart, payment, order states.\n\n### Example 2: User Provides Spring Boot Code\n\n**Input:** \"Here's my Spring Boot controller, create diagrams\"\n\n**Skill Decision Path:**\n\n```\n1. Analyze: Spring Boot, code provided → CODE-TO-DIAGRAM + SPRING BOOT\n2. Load guides:\n - examples/spring-boot/README.md\n - guides/diagrams/architecture-diagrams.md (for structure)\n - guides/diagrams/sequence-diagrams.md (for method calls)\n - guides/diagrams/activity-diagrams.md (for business logic)\n3. Generate multiple diagrams:\n a. Architecture diagram from @RestController/@Service/@Repository annotations\n b. Sequence diagram from method call chain\n c. Activity diagram from business logic flow\n4. Output all diagrams with explanations\n\n```\n\n**Output:** 3-4 diagrams showing different views of the Spring Boot application.\n\n### Example 3: User Wants Infrastructure Documentation\n\n**Input:** \"Document my GCP Cloud Run deployment with AlloyDB\"\n\n**Skill Decision Path:**\n\n```\n1. Analyze: infrastructure, GCP, Cloud Run → DEPLOYMENT DIAGRAM\n2. Load guides:\n - guides/diagrams/deployment-diagrams.md\n - examples/spring-boot/ or examples/fastapi/ (if code provided)\n3. Check for IaC files (Pulumi, Terraform, docker-compose)\n4. Generate deployment diagram with:\n - Cloud Run services with specs\n - VPC connector\n - AlloyDB cluster\n - Security (IAM, Secret Manager)\n - Monitoring\n5. Apply Unicode symbols for clarity\n6. Output with resource specifications\n\n```\n\n**Output:** Complete GCP deployment diagram with all resources labeled.\n\n## High-Contrast Styling\n\n**ALL diagrams MUST use high-contrast colors:**\n\n```\ngraph TB\n classDef primary fill:#90EE90,stroke:#333,stroke-width:2px,color:darkgreen\n classDef secondary fill:#87CEEB,stroke:#333,stroke-width:2px,color:darkblue\n classDef database fill:#E6E6FA,stroke:#333,stroke-width:2px,color:darkblue\n classDef error fill:#FFB6C1,stroke:#DC143C,stroke-width:2px,color:black\n\n %% Every classDef MUST have color: property\n\n```\n\n**Rules:**\n\n- Light background → Dark text color\n\n- Dark background → Light text color\n\n- Always specify `color:` in every `classDef`\n\n## File Organization\n\n```\ndesign-doc-mermaid/\n├── SKILL.md # This file - Main orchestrator\n├── README.md # User documentation\n├── CLAUDE.md # Claude Code instructions\n│\n├── references/ # Reference materials\n│ ├── mermaid-diagram-guide.md # Legacy general guide\n│ └── guides/ # Specialized guides (load on-demand)\n│ ├── diagrams/\n│ │ ├── activity-diagrams.md # Workflows, processes\n│ │ ├── deployment-diagrams.md # Infrastructure, cloud\n│ │ ├── architecture-diagrams.md # System architecture\n│ │ └── sequence-diagrams.md # API interactions\n│ ├── code-to-diagram/\n│ │ └── README.md # Master guide for code analysis\n│ ├── unicode-symbols/\n│ │ └── guide.md # Complete symbol reference\n│ └── troubleshooting.md # Common syntax errors \u0026 fixes\n│\n├── assets/ # Design document templates\n│ ├── architecture-design-template.md\n│ ├── api-design-template.md\n│ ├── feature-design-template.md\n│ ├── database-design-template.md\n│ └── system-design-template.md\n│\n├── scripts/ # Python utilities\n│ ├── extract_mermaid.py # Extract \u0026 validate diagrams\n│ └── mermaid_to_image.py # Convert to PNG/SVG\n│\n├── examples/ # Language-specific patterns\n│ ├── spring-boot/ # Spring Boot patterns\n│ ├── fastapi/ # FastAPI patterns\n│ ├── react/ # React patterns\n│ ├── python-etl/ # Data pipeline patterns\n│ ├── node-webapp/ # Express.js patterns\n│ └── java-webapp/ # Traditional Java patterns\n│\n└── references/ # General Mermaid reference\n └── mermaid-diagram-guide.md # Complete Mermaid syntax guide\n\n```\n\n## Workflow Summary\n\n- **Analyze user intent** → Determine diagram type, document type, or action needed\n\n- **Load appropriate guide(s)** → Read only what's needed (token efficient)\n\n- **Apply templates and patterns** → Use examples from guides\n\n- **Generate output** → Create diagram or document\n\n- **Validate** (optional) → Use scripts to verify\n\n- **Convert** (optional) → Export to images if needed\n\n## When to Use What\n\n| User Request | Load This |\n|---|---|\n| \"activity diagram\", \"workflow\", \"process flow\" | `references/guides/diagrams/activity-diagrams.md` |\n| \"deployment\", \"infrastructure\", \"cloud\", \"k8s\" | `references/guides/diagrams/deployment-diagrams.md` |\n| \"architecture\", \"system design\", \"components\" | `references/guides/diagrams/architecture-diagrams.md` + design template |\n| \"API\", \"sequence\", \"interactions\", \"flow\" | `references/guides/diagrams/sequence-diagrams.md` |\n| \"class diagram\", \"ER\", \"state machine\", \"wiki\", \"walkthrough\", \"architecture doc\" | `references/guides/wiki-ticket-and-github.md` plus the matching type guide |\n| \"Confluence\", \"upload image\", \"PNG\", \"SVG\" | `scripts/resilient_diagram.py` or `scripts/mermaid_to_image.py` |\n| \"Spring Boot code\" | `examples/spring-boot/` + relevant diagram guides |\n| \"FastAPI code\", \"Python API\" | `examples/fastapi/` + relevant diagram guides |\n| \"React app\", \"frontend\" | `examples/react/` + architecture guide |\n| \"ETL\", \"data pipeline\", \"Python batch\" | `examples/python-etl/` + activity guide |\n| \"symbols\", \"unicode\", \"emoji\" | `references/guides/unicode-symbols/guide.md` |\n| \"syntax error\", \"diagram won't render\", \"troubleshoot\" | `references/guides/troubleshooting.md` |\n| \"extract diagrams\" | `scripts/extract_mermaid.py` |\n| \"convert to image\", \"PNG\", \"SVG\" | `scripts/mermaid_to_image.py` |\n| \"create diagram\", \"generate diagram\", \"add diagram to markdown\" | `scripts/resilient_diagram.py` + `references/guides/resilient-workflow.md` |\n| \"design document\", \"full docs\" | `assets/*-design-template.md` + diagram guides34:[\"$\",\"section\",null,{\"className\":\"mt-6 rounded-2xl border border-gray-200 bg-white p-6\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"text-sm font-medium text-gray-900\",\"children\":\"Details\"}],[\"$\",\"p\",null,{\"className\":\"mt-1 text-xs text-gray-500\",\"children\":[\"From the skill’s SKILL.md or README, by its authors.\",\" \",[\"$\",\"a\",null,{\"href\":\"https://www.skills.sh/spillwavesolutions/design-doc-mermaid/design-doc-mermaid\",\"target\":\"_blank\",\"rel\":\"ugc nofollow noopener\",\"className\":\"underline underline-offset-2 hover:text-brand-slate\",\"children\":\"View the original\"}]]}],[\"$\",\"div\",null,{\"className\":\"mt-4\",\"children\":[[\"$\",\"div\",\"0\",{\"className\":\"break-words text-gray-700 [\u0026_code]:rounded [\u0026_code]:bg-gray-100 [\u0026_code]:px-1 [\u0026_code]:text-[0.9em] [\u0026_table]:my-5 [\u0026_table]:block [\u0026_table]:w-full [\u0026_table]:overflow-x-auto sm:[\u0026_table]:table [\u0026_table]:rounded-xl [\u0026_table]:border [\u0026_table]:border-gray-200 [\u0026_table]:text-sm [\u0026_th]:bg-gray-50 [\u0026_th]:px-3 [\u0026_th]:py-2 [\u0026_th]:text-left [\u0026_th]:font-semibold [\u0026_th]:text-gray-900 [\u0026_th]:border-b [\u0026_th]:border-gray-200 [\u0026_td]:px-3 [\u0026_td]:py-2 [\u0026_td]:align-top [\u0026_td]:border-t [\u0026_td]:border-gray-100 [\u0026_td:first-child]:whitespace-nowrap\",\"dangerouslySetInnerHTML\":{\"__html\":\"$38\"}}]]}]]}]\n35:[\"$\",\"section\",null,{\"className\":\"mt-10\",\"aria-labelledby\":\"related\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-4 flex items-baseline justify-between gap-4\",\"children\":[[\"$\",\"h2\",null,{\"id\":\"related\",\"className\":\"text-lg font-semibold text-gray-900\",\"children\":[\"More \",\"Design \u0026 UI\",\" skills\"]}],[\"$\",\"$L2a\",null,{\"href\":\"/skills?type=design\",\"className\":\"text-sm font-medium text-brand-slate hover:underline\",\"children\":\"See all\"}]]}],[\"$\",\"ul\",null,{\"className\":\"grid gap-4 sm:grid-cols-2\",\"children\":[[\"$\",\"li\",\"32fc618d305dcb539dbba74c5d780763\",{\"children\":[\"$\",\"$L39\",null,{\"s\":{\"id\":\"32fc618d305dcb539dbba74c5d780763\",\"slug\":\"grill-me\",\"name\":\"grill-me\",\"description\":\"A relentless interview to sharpen a plan or design.\",\"github_url\":\"https://www.skills.sh/mattpocock/skills/grill-me\",\"install_command\":\"npx skills add https://github.com/mattpocock/skills --skill grill-me\",\"category\":\"design\",\"stars\":null,\"installs\":1516327,\"indexable\":false,\"created_at\":\"2026-11-07T18:42:55.059Z\",\"updated_at\":\"2026-11-07T18:42:55.059Z\"}}]}],[\"$\",\"li\",\"344cbf4a7dcecab9320b67cb404c338d\",{\"children\":[\"$\",\"$L39\",null,{\"s\":{\"id\":\"344cbf4a7dcecab9320b67cb404c338d\",\"slug\":\"frontend-design\",\"name\":\"frontend-design\",\"description\":\"Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.\",\"github_url\":\"https://www.skills.sh/anthropics/skills/frontend-design\",\"install_command\":\"npx skills add https://github.com/anthropics/skills --skill frontend-design\",\"category\":\"design\",\"stars\":null,\"installs\":1092005,\"indexable\":false,\"created_at\":\"2026-11-07T18:42:55.059Z\",\"updated_at\":\"2026-11-07T18:42:55.059Z\"}}]}],[\"$\",\"li\",\"b5717dd0381b11428915a64548cab231\",{\"children\":[\"$\",\"$L39\",null,{\"s\":{\"id\":\"b5717dd0381b11428915a64548cab231\",\"slug\":\"prototype\",\"name\":\"prototype\",\"description\":\"Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.\",\"github_url\":\"https://www.skills.sh/mattpocock/skills/prototype\",\"install_command\":\"npx skills add https://github.com/mattpocock/skills --skill prototype\",\"category\":\"design\",\"stars\":null,\"installs\":1054880,\"indexable\":false,\"created_at\":\"2026-11-07T18:42:55.059Z\",\"updated_at\":\"2026-11-07T18:42:55.059Z\"}}]}],[\"$\",\"li\",\"41a9962bf0d85ca1e7a021fe757a26fd\",{\"children\":[\"$\",\"$L39\",null,{\"s\":{\"id\":\"41a9962bf0d85ca1e7a021fe757a26fd\",\"slug\":\"ui-taste\",\"name\":\"ui-taste\",\"description\":\"ui-taste skill from uizze.sh.\",\"github_url\":\"https://www.skills.sh/uizze.sh/ui-taste\",\"install_command\":\"npx skills add https://github.com/uizze.sh --skill ui-taste\",\"category\":\"design\",\"stars\":null,\"installs\":1038431,\"indexable\":false,\"created_at\":\"2026-11-07T18:42:55.059Z\",\"updated_at\":\"2026-11-07T18:42:55.059Z\"}}]}]]}]]}]\n36:[\"$\",\"p\",null,{\"className\":\"mt-6 text-xs text-gray-500\",\"children\":\"Skills are shared by members and not reviewed by us. Read a skill’s code before you install it.\"}]\n"])</script></body></html>
references/guides/diagrams/activity-diagrams.md] Analyze -->|"infrastructure, deployment, cloud"| Deploy[Load Deployment Diagram Guide
references/guides/diagrams/deployment-diagrams.md] Analyze -->|"system architecture, components"| Arch[Load Architecture Guide
references/guides/diagrams/architecture-diagrams.md] Analyze -->|"API flow, interactions"| Sequence[Load Sequence Diagram Guide
references/guides/diagrams/sequence-diagrams.md] Analyze -->|"class, ER, state, wiki, walkthrough"| WikiGuide[Load WikiTicket GitHub Guide
references/guides/wiki-ticket-and-github.md] Analyze -->|"code to diagram"| CodeToDiag[Load Code-to-Diagram Guide
references/guides/code-to-diagram/ + examples/] Analyze -->|"design document, full docs"| DesignDoc[Load Design Document Template
assets/*-design-template.md] Analyze -->|"unicode symbols, icons"| Unicode[Load Unicode Symbols Guide
references/guides/unicode-symbols/guide.md] Analyze -->|"extract, validate, convert"| Scripts[Use Python Scripts
scripts/extract_mermaid.py
scripts/mermaid_to_image.py] Activity --> Generate[Generate Diagram] Deploy --> Generate Arch --> Generate Sequence --> Generate WikiGuide --> Generate CodeToDiag --> Generate DesignDoc --> Generate Unicode --> Generate Scripts --> Execute[Execute Script] Generate --> Validate{Validate?} Validate -->|Yes| RunValidation[Run mmdc validation] Validate -->|No| Output RunValidation --> Output[Output Result] Execute --> Output classDef decision fill:#FFD700,stroke:#333,stroke-width:2px,color:black classDef guide fill:#90EE90,stroke:#333,stroke-width:2px,color:darkgreen classDef action fill:#87CEEB,stroke:#333,stroke-width:2px,color:darkblue class Analyze,Validate decision class Activity,Deploy,Arch,Sequence,WikiGuide,CodeToDiag,DesignDoc,Unicode,Scripts guide class Generate,Execute,RunValidation,Output action ``` ## Available Guides and Resources ### Diagram Type Guides (`references/guides/diagrams/`) | Guide | Full Path | Load When User Wants | Examples | |---|---|---|---| | Activity Diagrams | `references/guides/diagrams/activity-diagrams.md` | Workflows, processes, business logic, user flows, decision trees | "Show checkout flow", "Document ETL pipeline", "Create approval workflow" | | Deployment Diagrams | `references/guides/diagrams/deployment-diagrams.md` | Infrastructure, cloud architecture, K8s, serverless, network topology | "Show AWS architecture", "Document GCP deployment", "Create K8s diagram" | | Architecture Diagrams | `references/guides/diagrams/architecture-diagrams.md` | System architecture, component design, high-level structure | "Show system components", "Document microservices", "Architecture overview" | | Sequence Diagrams | `references/guides/diagrams/sequence-diagrams.md` | API interactions, service communication, request/response flows | "Show API call sequence", "Document auth flow", "Service interactions" | | WikiTicket / GitHub / Confluence | `references/guides/wiki-ticket-and-github.md` | Design docs, walkthroughs, requirements, wiki publish, Confluence images | "architecture doc", "code walkthrough", "wiki", "Confluence" | Default for WikiTicket and GitHub wiki is this skill, including `classDiagram`, `erDiagram`, and `stateDiagram-v2`. Do not send those to PlantUML. If GitHub fails to render C4 / architecture-beta / block-beta, fall back to `flowchart TD`. ### Code-to-Diagram Guide & Examples | Resource | Full Path | What It Provides | |---|---|---| | **Master Guide** | `references/guides/code-to-diagram/README.md` | Complete workflow for analyzing any codebase and extracting diagrams | | **Spring Boot** | `examples/spring-boot/README.md` | Controller→Service→Repository architecture, deployment config, sequence from methods, activity from business logic | | **FastAPI** | `examples/fastapi/README.md` | Python async patterns, Pydantic models, dependency injection, cloud deployment | | **React** | `examples/react/README.md` | Component hierarchy, state management, data flow, build pipeline | | **Python ETL** | `examples/python-etl/README.md` | Data pipeline, transformation steps, error handling, scheduling | | **Node/Express** | `examples/node-webapp/README.md` | Middleware chain, route handlers, async patterns, deployment | | **Java Web App** | `examples/java-webapp/README.md` | Traditional MVC, servlet containers, WAR deployment | ### Design Document Templates | Template | Full Path | Use For | Load When | |---|---|---|---| | Architecture Design | `assets/architecture-design-template.md` | System-wide architecture | "Create architecture doc", "Document system design" | | API Design | `assets/api-design-template.md` | API specifications | "API design doc", "Document REST API" | | Feature Design | `assets/feature-design-template.md` | Feature planning | "Feature design", "Plan new feature" | | Database Design | `assets/database-design-template.md` | Database schema | "Database design", "Document schema" | | System Design | `assets/system-design-template.md` | Complete system | "System design doc", "Full system documentation" | ### Unicode Symbols Guide **Full Path:** `references/guides/unicode-symbols/guide.md` **Load when user mentions:** "unicode symbols", "emoji in diagrams", "semantic icons", "add symbols" **Quick Reference:** - 📦 Infrastructure: ☁️ 🌐 🔌 📡 🗄️ - ⚙️ Compute: ⚙️ ⚡ 🔄 ♻️ 🚀 💨 - 💾 Data: 💾 📦 📊 📈 🗃️ 🧊 - 📨 Messaging: 📨 📬 📤 📥 🐰 📢 - 🔐 Security: 🔐 🔑 🛡️ 🚪 👤 🎫 - 📝 Monitoring: 📝 📊 🚨 ⚠️ ✅ ❌ ### Python Scripts (`scripts/`) | Script | Use For | Load When | |---|---|---| | `extract_mermaid.py` | Extract diagrams from Markdown, validate syntax, replace with images | "extract diagrams", "validate mermaid", "find all diagrams" | | `mermaid_to_image.py` | Convert .mmd to PNG/SVG, batch conversion, custom themes | "convert to image", "render diagram", "create PNG" | | `resilient_diagram.py` | Full workflow: save .mmd, generate image, validate, error recovery | "generate diagram", "create diagram with validation", "resilient diagram" | ## GitHub wiki, WikiTicket, and Confluence Load `references/guides/wiki-ticket-and-github.md` for WikiTicket design docs, code walkthroughs, requirements, GitHub wiki, or Confluence. | Target | What to ship | |---|---| | GitHub wiki / GFM | Fenced `mermaid` block. GitHub renders class, ER, state, sequence, flowchart, C4. | | Confluence / Notion / Word / PDF | Also render PNG or SVG (`scripts/resilient_diagram.py` or `mmdc`) and upload the image. Do not rely on Confluence to render Mermaid. | PlantUML is opt-in for Salt wireframes, use case, timing, ArchiMate, nwdiag, and WBS. Those always ship as PNG or SVG. ## Usage Patterns Common request patterns and guide selection. See When to Use What for complete mapping. | Pattern | Example Request | Guides to Load | |---|---|---| | Single Diagram | "Create activity diagram for login flow" | Diagram type guide + Unicode symbols | | Code-to-Diagram | "Generate deployment from application.yml" | Framework example + Deployment guide | | Design Document | "Create API design document" | Template from assets/ + Relevant diagram guides | | Extract/Validate | "Extract diagrams from design.md" | Use `scripts/extract_mermaid.py` | | Batch Convert | "Convert all .mmd to PNG" | Use `scripts/mermaid_to_image.py` | ## Resilient Workflow **CRITICAL:** This is the recommended approach for ALL diagram generation. It ensures validation, error recovery, and consistent file organization. **Full Guide:** `references/guides/resilient-workflow.md` ### Workflow Overview ``` flowchart LR A[1. Identify Type] --> B[2. Save .mmd + Image] B --> C{3. Valid?} C -->|Yes| D[4. Add to Markdown] C -->|No| E[5. Error Recovery] E --> F{Fix Found?} F -->|Yes| A F -->|No| G[Search External] G --> A classDef step fill:#90EE90,stroke:#333,color:darkgreen classDef decision fill:#FFD700,stroke:#333,color:black class A,B,D,E,G step class C,F decision ``` ### Key Principle **NEVER add a diagram to markdown until it passes validation.** This prevents broken diagrams in documentation. ### Using the Script (Recommended) ``` # Generate with full error recovery python scripts/resilient_diagram.py \ --code "flowchart TD; A-->B" \ --markdown-file design_doc \ --diagram-num 1 \ --title "process_flow" \ --format png \ --json ``` **Output:** Both `.mmd` and `.png` files in `./diagrams/` directory. ### File Naming Convention ``` ./diagrams/