diff --git a/guide/ai-ecosystem.md b/guide/ai-ecosystem.md
index a155b0d..7d28c8b 100644
--- a/guide/ai-ecosystem.md
+++ b/guide/ai-ecosystem.md
@@ -57,6 +57,63 @@ The goal is not to find "better" tools, but to chain the **right tool for each s
## 1. Perplexity AI (Research & Sourcing)
+### Complementarity Diagram
+
+The following diagram illustrates how Perplexity and Claude Code complement each other across the development workflow:
+
+```mermaid
+flowchart TB
+ subgraph PERPLEXITY["🔍 PERPLEXITY DOMAIN"]
+ direction TB
+ P1["Deep Research
100+ sources synthesis"]
+ P2["Real-time Information
Latest APIs, versions"]
+ P3["Source Verification
Cited, verifiable facts"]
+ P4["Spec Generation
Structured requirements"]
+ end
+
+ subgraph CLAUDE["⚡ CLAUDE CODE DOMAIN"]
+ direction TB
+ C1["Contextual Implementation
Full codebase access"]
+ C2["Multi-file Editing
Atomic changes"]
+ C3["Test Generation
Pattern-aware"]
+ C4["CI/CD Integration
Automated pipelines"]
+ end
+
+ subgraph OVERLAP["🔄 OVERLAP ZONE"]
+ direction TB
+ O1["Quick Factual Lookups
→ Use Claude WebSearch"]
+ O2["Code Explanation
→ Use Claude (contextual)"]
+ end
+
+ P4 -->|"spec.md"| C1
+
+ style PERPLEXITY fill:#e8f4f8,stroke:#0ea5e9
+ style CLAUDE fill:#fef3c7,stroke:#f59e0b
+ style OVERLAP fill:#f3e8ff,stroke:#a855f7
+```
+
+**Key Insight**: Perplexity answers "What should we build?" → Claude Code answers "How do we build it here?"
+
+### Decision Flow
+
+```mermaid
+flowchart LR
+ Q["Developer Question"] --> D{Need verified
sources?}
+ D -->|Yes| P["Perplexity"]
+ D -->|No| D2{Need current
context?}
+ D2 -->|Yes| C["Claude Code"]
+ D2 -->|No| D3{Quick lookup
or deep research?}
+ D3 -->|Quick| CW["Claude WebSearch"]
+ D3 -->|Deep| P
+
+ P -->|"spec.md"| C
+ CW --> C
+
+ style P fill:#e8f4f8,stroke:#0ea5e9
+ style C fill:#fef3c7,stroke:#f59e0b
+ style CW fill:#fef3c7,stroke:#f59e0b
+```
+
### When to Use Perplexity Over Claude
| Scenario | Use Perplexity | Use Claude |