Stats
Actions
Tags
Use when generating comprehensive documentation for a codebase, creating wiki pages, documenting architecture, or when the user mentions "deep wiki", "codebase documentation", or "generate docs".
How this skill is triggered — by the user, by Claude, or both
Slash command
/agent-skills-collection:deep-wikiThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
This skill guides you in creating comprehensive, navigable documentation for any codebase, similar to what [DeepWiki.com](https://deepwiki.com) provides. The documentation is saved to a `.docs/` directory in HTML or Markdown format, analyzing code structure, extracting relationships, and creating an interactive wiki.
This skill guides you in creating comprehensive, navigable documentation for any codebase, similar to what DeepWiki.com provides. The documentation is saved to a .docs/ directory in HTML or Markdown format, analyzing code structure, extracting relationships, and creating an interactive wiki.
Note: This is a methodology skill that guides you through the documentation generation process. It does not provide a command-line tool. Instead, you will analyze the codebase and create documentation manually or with the help of existing documentation tools.
Use this skill when:
.docs/
├── index.html (or index.md)
├── architecture/
│ ├── overview.html
│ ├── components.html
│ ├── data-flow.html
│ └── dependencies.html
├── modules/
│ ├── module-name/
│ │ ├── overview.html
│ │ ├── api.html
│ │ └── examples.html
├── api/
│ ├── endpoints.html (for APIs)
│ └── reference.html
├── guides/
│ ├── getting-started.html
│ ├── development.html
│ └── deployment.html
└── assets/
├── diagrams/
└── images/
Important: Generated documentation should use Mermaid diagrams for all visualizations. Mermaid renders flowcharts, sequence diagrams, class diagrams, entity relationship diagrams, Gantt charts, and more directly in Markdown/HTML.
Scan Project Structure
Extract Code Structure
Analyze Relationships
Architecture Documentation
# Architecture Overview
## System Design
[High-level description of the system]
## Components
- **Component A**: [Description]
- **Component B**: [Description]
## Data Flow
```mermaid
flowchart LR
Client[Client] --> API[API Server]
API --> Services[Services]
Services --> Database[(Database)]
API --> Cache[(Cache)]
```
graph TD
A[Main App] --> B[Auth Module]
A --> C[API Module]
A --> D[Database Module]
B --> C
C --> D
Module Documentation
# Module: [module-name]
## Overview
[What this module does]
## Public API
### Functions
- `functionName(param1, param2)`: [Description]
### Classes
- `ClassName`: [Description]
## Dependencies
```mermaid
graph LR
A[[module-name]] --> B[Dependency 1]
A --> C[Dependency 2]
```
[Code examples showing usage]
API Documentation (for APIs)
# API Reference
## Endpoints
### GET /api/users
**Description**: Retrieve all users
**Parameters**:
- `page` (query): Page number (default: 1)
- `limit` (query): Items per page (default: 20)
**Response**:
\`\`\`json
{
"users": [...],
"total": 100,
"page": 1
}
\`\`\`
### Request Flow
```mermaid
sequenceDiagram
participant Client
participant API
participant DB
Client->>API: GET /api/users?page=1
API->>DB: SELECT users LIMIT 20
DB-->>API: [user1, user2, ...]
API-->>Client: {users: [...], total: 100}
```
Getting Started Guide
# Getting Started
## Prerequisites
- [List of required tools/versions]
## Installation
\`\`\`bash
[Installation commands]
\`\`\`
## Quick Start
\`\`\`bash
[Basic usage commands]
\`\`\`
Before generating documentation, analyze the codebase structure:
Scan Project Structure
Extract Code Structure
Analyze Relationships
Create the following directory structure:
mkdir -p .docs/{architecture,modules,api,guides,assets/{diagrams,images}}
Use existing documentation tools appropriate for your language:
JavaScript/TypeScript:
Python:
Go:
Rust:
General:
<!DOCTYPE html>
<html>
<head>
<title>{project-name} - Architecture</title>
<link rel="stylesheet" href="../assets/styles.css" />
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>
mermaid.initialize({ startOnLoad: true });
</script>
</head>
<body>
<nav><!-- Navigation --></nav>
<main>
<h1>Architecture Overview</h1>
<section id="system-design">
<h2>System Design</h2>
{system-description}
</section>
<section id="components">
<h2>Components</h2>
{component-list}
</section>
<section id="diagrams">
<h2>Architecture Diagrams</h2>
{mermaid-diagrams}
</section>
</main>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>{module-name} - {project-name}</title>
<link rel="stylesheet" href="../../assets/styles.css" />
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>
mermaid.initialize({ startOnLoad: true });
</script>
</head>
<body>
<nav><!-- Breadcrumb navigation --></nav>
<main>
<h1>{module-name}</h1>
<section id="overview">
<h2>Overview</h2>
{module-description}
</section>
<section id="dependencies">
<h2>Dependencies</h2>
{dependency-diagram}
</section>
<section id="api">
<h2>Public API</h2>
{api-documentation}
</section>
<section id="examples">
<h2>Examples</h2>
{code-examples}
</section>
</main>
</body>
</html>
All generated documentation MUST include Mermaid diagrams for visualizations.
Architecture Overview Page
Module Pages
API Reference Page
Dashboard Pages (optional)
graph TD %% Dependency graphs
graph LR %% Component diagrams
flowchart TD %% Workflows
sequenceDiagram %% Request flows
classDiagram %% Class relationships
erDiagram %% Entity relationships
gantt %% Project timelines
pie %% Coverage metrics
## Architecture
```mermaid
graph TD
Client[Web Client] --> LB[Load Balancer]
LB --> API1[API Server 1]
LB --> API2[API Server 2]
API1 --> Cache[(Redis Cache)]
API2 --> Cache
API1 --> DB[(PostgreSQL)]
API2 --> DB
API1 --> Queue[Message Queue]
API2 --> Queue
```
### Example: Module Dependency in Generated Docs
```markdown
## Dependencies
```mermaid
graph LR
UserModule[[User Module]] --> AuthModule[[Auth Module]]
UserModule --> DatabaseModule[[Database Module]]
AuthModule --> DatabaseModule
AuthModule --> CacheModule[[Cache Module]]
### Example: API Flow in Generated Docs
```markdown
## User Authentication Flow
```mermaid
sequenceDiagram
participant Client
participant API
participant Auth
participant DB
Client->>API: POST /login {email, password}
API->>Auth: Validate credentials
Auth->>DB: Query user
DB-->>Auth: User data + hash
Auth-->>API: Token
API-->>Client: {token, user}
### Documentation Workflow
```mermaid
flowchart TD
A[Analyze Codebase] --> B[Identify Modules]
B --> C[Extract Structure]
C --> D[Build Relationships]
D --> E[Create Doc Structure]
E --> F[Generate Architecture Docs]
E --> G[Generate Module Docs]
E --> H[Generate API Docs]
F --> I[Add Diagrams]
G --> I
H --> I
I --> J[Validate & Review]
J --> K{All Checks Pass?}
K -->|No| L[Fix Issues]
L --> J
K -->|Yes| M[Deploy Documentation]
graph TD
A[Main Module] --> B[Auth Module]
A --> C[Database Module]
B --> D[User Model]
C --> D
D --> E[Utils]
graph LR
Client[Client App] --> API[API Server]
API --> Auth[Auth Service]
API --> DB[Database]
Auth --> DB
sequenceDiagram
participant User
participant API
participant Auth
participant DB
User->>API: Login Request
API->>Auth: Validate Credentials
Auth->>DB: Query User
DB-->>Auth: User Data
Auth-->>API: Token
API-->>User: Success + Token
gantt
title Documentation Generation Timeline
dateFormat YYYY-MM-DD
section Analysis
Scan Structure :a1, 2024-01-01, 2d
Extract Code :a2, after a1, 3d
section Generation
Architecture Docs :b1, after a2, 2d
Module Docs :b2, after b1, 4d
API Reference :b3, after b1, 2d
section Review
Validation :c1, after b3, 1d
Fix Issues :c2, after c1, 1d
pie title Documentation Coverage
"APIs Documented" : 85
"Modules Documented" : 90
"Examples Provided" : 75
"Diagrams Added" : 60
"Guides Complete" : 80
flowchart LR
subgraph Analysis
A1[Scan Source] --> A2[Extract Exports]
A2 --> A3[Map Dependencies]
end
subgraph Generation
G1[Create Overview] --> G2[Document API]
G2 --> G3[Add Examples]
G3 --> G4[Generate Diagrams]
end
subgraph Validation
V1[Check Coverage] --> V2[Validate Links]
V2 --> V3[Test Examples]
end
Analysis --> Generation
Generation --> Validation
block-beta
columns 1
block:docs:3
columns 3
arch[Architecture<br/>Overview] comp[Components<br/>Diagram] dep[Dependencies<br/>Graph]
end
block:modules:3
columns 3
mod1[Module 1<br/>Overview] mod2[Module 2<br/>Overview] mod3[Module N<br/>Overview]
end
block:api:3
columns 3
endpoints[Endpoints<br/>List] ref[API<br/>Reference] schemas[Data<br/>Schemas]
end
block:guides:3
columns 3
start[Getting<br/>Started] dev[Development<br/>Guide] deploy[Deployment<br/>Guide]
end
docs --> modules
modules --> api
api --> guides
flowchart LR
subgraph Input
SRC[Source Code]
CONFIG[Config Files]
TESTS[Test Files]
end
subgraph Processing
PARSE[Parser]
ANALYZE[Analyzer]
GENERATE[Generator]
end
subgraph Output
MD[Markdown]
HTML[HTML]
DIAGRAMS[Diagrams]
end
SRC --> PARSE
CONFIG --> ANALYZE
TESTS --> ANALYZE
PARSE --> ANALYZE
ANALYZE --> GENERATE
GENERATE --> MD
GENERATE --> HTML
GENERATE --> DIAGRAMS
JavaScript/TypeScript:
Python:
Go:
Rust:
Monorepo Detection
Microservices Detection
Library Detection
MVC/MVVM Detection
/**
* Authenticates a user with credentials
* @param {string} username - The user's username
* @param {string} password - The user's password
* @returns {Promise<AuthToken>} Authentication token
* @throws {AuthenticationError} If credentials are invalid
* @example
* const token = await authenticate('user', 'pass');
*/
async function authenticate(username, password) {
// Implementation
}
## Examples
### Basic Usage
\`\`\`javascript
import { authenticate } from 'auth-module';
const token = await authenticate('user', 'password');
console.log(token.value);
\`\`\`
### With Error Handling
\`\`\`javascript
try {
const token = await authenticate('user', 'password');
} catch (error) {
if (error instanceof AuthenticationError) {
console.error('Invalid credentials');
}
}
\`\`\`
## Architecture Decision Records
### ADR-001: Use PostgreSQL for Primary Database
**Status**: Accepted
**Context**: Need a reliable, ACID-compliant database for user data.
**Decision**: Use PostgreSQL as the primary database.
**Consequences**:
- Strong data consistency guarantees
- Rich query capabilities
- Requires operational expertise
# GitHub Actions example
name: Generate Documentation
on:
push:
branches: [main]
pull_request:
branches: [main]
jobs:
docs:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Generate Documentation
run: deep-wiki generate --format markdown
- name: Deploy to GitHub Pages
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./.docs
Solution: Document the circular dependency and recommend refactoring:
## Known Issues
### Circular Dependency
The `auth` module imports `user` module, which imports `auth` module.
**Recommendation**: Extract shared types to a separate `types` module.
Solution: Generate placeholder documentation with TODOs:
## Module: auth
**TODO**: Add module description
### Function: login
**TODO**: Document parameters and return type
Solution: Generate documentation incrementally:
# Generate core modules first
deep-wiki generate --modules core,utils
# Then generate feature modules
deep-wiki generate --modules features/*
# Finally, generate full documentation
deep-wiki generate
When code changes, update documentation:
Identify Changed Files
Update Affected Documentation
Validate Documentation
.docs/ directory| Language | Tools |
|---|---|
| JavaScript/TypeScript | TypeDoc, JSDoc, TSDoc, Storybook |
| Python | Sphinx, pdoc, MkDocs |
| Go | godoc, pkgsite |
| Rust | rustdoc |
| Java | Javadoc |
| C# | DocFX, Sandcastle |
| General | Markdown, Mermaid diagrams |
.docs/
├── index.html # Home page
├── architecture/
│ ├── overview.html # System architecture
│ ├── components.html # Component breakdown
│ └── dependencies.html # Dependency graph
├── modules/
│ ├── auth/
│ │ ├── overview.html # Auth module overview
│ │ ├── api.html # Auth API reference
│ │ └── examples.html # Usage examples
│ └── user/
│ ├── overview.html
│ ├── api.html
│ └── examples.html
├── api/
│ └── reference.html # API endpoint reference
├── guides/
│ ├── getting-started.html # Quick start guide
│ ├── development.html # Development guide
│ └── deployment.html # Deployment guide
└── assets/
├── styles.css # Documentation styles
├── diagrams/ # Generated diagrams
└── images/ # Screenshots, diagrams
This skill guides you through creating comprehensive, navigable documentation for codebases, similar to what DeepWiki.com provides. By analyzing code structure, extracting relationships, and creating organized documentation, you help developers understand and navigate complex projects efficiently.
Key Points:
npx claudepluginhub ntk148v/skills --plugin development-skillsGuides creation, editing, and verification of skills for AI coding agents using test-driven development with subagent scenarios. Use when authoring or debugging skills.