Loading...
Loading...
AI-powered comprehensive codebase documentation generator. Analyzes project structure, identifies architecture patterns, creates C4 model diagrams, and generates professional technical documentation. Use when users need to document codebases, understand software architecture, create technical specs, or generate developer guides. Supports all programming languages.
npx skill4agent add yzlin/supaviber smart-docsdeepwiki-rssopaco# Get directory structure
tree -L 3 -I 'node_modules|target|build|dist|vendor|__pycache__|.git'
# Or if tree not available:
find . -type d -maxdepth 3 -not -path '*/\.*' -not -path '*/node_modules/*' -not -path '*/target/*'# If cloc is available:
cloc . --exclude-dir=node_modules,target,build,dist,vendor
# Or basic count:
find . -name '*.rs' -o -name '*.py' -o -name '*.java' -o -name '*.go' -o -name '*.js' -o -name '*.ts' | xargs wc -l**/{README,Readme,readme}.md**/package.json**/Cargo.toml**/pom.xml**/go.mod**/setup.py**/main.***/index.***/app.*src/Cargo.toml__init__.pysrc/main/java/.gosrc/lib/tsconfig.json./docs/./docs/
├── 1. Project Overview.md
├── 2. Architecture Overview.md
├── 3. Workflow Overview.md
└── 4. Deep Dive/
├── [Component1].md
├── [Component2].md
└── [Component3].md# Project Overview
## What is [Project Name]?
[Brief description of what the project does]
## Core Purpose
[Main goals and objectives]
## Technology Stack
- **Language**: [Primary language(s)]
- **Framework**: [Main framework]
- **Build Tool**: [Build system]
- **Key Dependencies**: [Important libraries]
## Key Features
- Feature 1
- Feature 2
- Feature 3
## Project Structure
## Getting Started
[Quick start instructions based on README]
## Architecture Summary
[High-level architecture overview - detailed in next doc]# Architecture Overview
## System Context (C4 Level 1)
[Description of system boundaries and external actors]
```mermaid
C4Context
title System Context Diagram
Person(user, "User", "End user of the system")
System(system, "[Project Name]", "[Brief description]")
System_Ext(external1, "External System 1", "[Description]")
Rel(user, system, "Uses")
Rel(system, external1, "Integrates with")
```C4Container
title Container Diagram
Container(app, "Application", "[Tech]", "[Description]")
ContainerDb(db, "Database", "[DB Type]", "[Description]")
Container(api, "API", "[Tech]", "[Description]")
Rel(app, api, "Calls")
Rel(api, db, "Reads/Writes")graph TB
subgraph "Module A"
A1[Component A1]
A2[Component A2]
end
subgraph "Module B"
B1[Component B1]
B2[Component B2]
end
A1 --> B1
A2 --> B2
#### Document 3: Workflow Overview.md
**Content Structure**:
```markdown
# Workflow Overview
## Core Workflows
### Workflow 1: [Name]
[Description of workflow]
```mermaid
sequenceDiagram
participant User
participant Frontend
participant Backend
participant Database
User->>Frontend: Action
Frontend->>Backend: API Call
Backend->>Database: Query
Database-->>Backend: Results
Backend-->>Frontend: Response
Frontend-->>User: Displayflowchart LR
Input[Input Data] --> Process1[Process 1]
Process1 --> Process2[Process 2]
Process2 --> Output[Output]
#### Documents 4+: Deep Dive Components
For each major module/component, create detailed documentation:
```markdown
# Deep Dive: [Component Name]
## Overview
[Detailed description of component]
## Responsibilities
- Responsibility 1
- Responsibility 2
- Responsibility 3
## Architecture
```mermaid
classDiagram
class ComponentA {
+method1()
+method2()
}
class ComponentB {
+method3()
}
ComponentA --> ComponentB : usesfile1.extfile2.ext
### Phase 4: Diagram Generation (10-15 minutes)
**Mermaid Diagram Types to Use**:
1. **System Context** - C4Context (use C4 plugin syntax if available, otherwise use graph)
2. **Container Diagram** - C4Container or deployment diagram
3. **Component Relationships** - Graph TB/LR
4. **Sequence Diagrams** - For workflows
5. **Class Diagrams** - For OOP architectures
6. **State Diagrams** - For state machines
7. **ER Diagrams** - For data models
8. **Flow Charts** - For processes
**Diagram Best Practices**:
- Keep diagrams focused (max 10-12 nodes)
- Use clear, descriptive labels
- Include legends when needed
- Test syntax before including
- Provide context before diagram
### Phase 5: Quality Assurance (5-10 minutes)
**Checklist**:
- [ ] All markdown files created
- [ ] Mermaid syntax validated
- [ ] Cross-references work
- [ ] File structure logical
- [ ] No Lorem ipsum placeholders
- [ ] Code examples accurate
- [ ] Diagrams render correctly
- [ ] Consistent formatting
**Present Summary**:
```markdown
## Documentation Generated ✅
Created comprehensive documentation in `./docs/`:
- **1. Project Overview.md** - [X] lines
- Technology stack identified
- Core features documented
- **2. Architecture Overview.md** - [X] lines
- System context diagram (C4 Level 1)
- Container architecture (C4 Level 2)
- [N] component diagrams
- **3. Workflow Overview.md** - [X] lines
- [N] core workflows documented
- [N] sequence diagrams
- **4. Deep Dive/** - [N] component docs
- Detailed implementation documentation
- [N] technical diagrams
**Total**: ~[X] lines of documentation
**Diagrams**: [N] Mermaid diagrams
**Coverage**: [percentage]% of codebase analyzed
Next steps:
- Review generated documentation
- Customize as needed
- Integrate into project READMECargo.tomlsrc/main.rssrc/lib.rssetup.pypyproject.toml__init__.pypom.xmlbuild.gradlepackage.jsontsconfig.json