Visualize Code Command
Analyze source code files and automatically generate appropriate diagrams.
Usage
/visualization:visualize-code <path> [diagram-type]
Arguments
<path> - File or directory to analyze (required)
[diagram-type] - Optional: class, er, sequence, dependency (auto-detected if omitted)
Examples
/visualization:visualize-code src/models
/visualization:visualize-code src/services/user.service.ts class
/visualization:visualize-code prisma/schema.prisma er
/visualization:visualize-code src/routes sequence
/visualization:visualize-code src dependency
Supported Analysis Types
| Type |
Trigger |
Input |
class |
TypeScript/Python/Java classes |
.ts, .py, .java, .cs files |
er |
ORM/database schemas |
schema.prisma, models.py, *.entity.ts |
sequence |
API route handlers |
Route files with HTTP handlers |
dependency |
Import statements |
Any source files |
Execution
Delegate to the visualization:code-visualizer agent with the following prompt:
Task: Analyze source code and generate an appropriate diagram.
Target: $1 (path to analyze)
Diagram Type: $2 (optional - auto-detect if not specified)
Instructions:
- Discover files at the specified path using Glob
- Determine analysis type based on:
- Explicit diagram type argument (if provided)
- File patterns and content
- Read and analyze the relevant source files
- Extract structure:
- For class diagrams: classes, properties, methods, relationships
- For ER diagrams: entities, fields, keys, relationships
- For sequence diagrams: handlers, service calls, responses
- For dependency diagrams: imports, module relationships
- Generate diagram using Mermaid syntax (preferred for GitHub rendering)
- Return results with diagram and analysis notes
Auto-Detection Rules:
| File Pattern |
Default Type |
schema.prisma |
ER |
models.py (Django/SQLAlchemy) |
ER |
*.entity.ts |
ER |
**/routes/**, *_controller.* |
Sequence |
Generic .ts, .py, .java |
Class |
Output Format:
Return:
- Brief summary of what was analyzed (files, classes, entities, etc.)
- The generated diagram in a ```mermaid code block
- Any limitations or incomplete analysis notes
- Suggestions for refinement
Example Output for Class Diagram:
Analyzed 5 files in src/models/:
- User.ts (1 class, 4 methods)
- Post.ts (1 class, 3 methods)
- Comment.ts (1 class, 2 methods)
classDiagram
class User {
+String id
+String email
+createPost()
+addComment()
}
...
Note: Some private utility methods were omitted for clarity.
Converted and distributed by TomeVault — claim your Tome and manage your conversions.
1---2name: visualize-code3description: Analyze source code and generate architectural diagrams. Use when visualizing code structure, relationships, or workflows. Supports class, ER, sequence, and dependency diagrams. Use when this capability is needed.4---56# Visualize Code Command78Analyze source code files and automatically generate appropriate diagrams.910## Usage1112```bash13/visualization:visualize-code <path> [diagram-type]14```1516## Arguments1718- `<path>` - File or directory to analyze (required)19- `[diagram-type]` - Optional: `class`, `er`, `sequence`, `dependency` (auto-detected if omitted)2021## Examples2223```bash24/visualization:visualize-code src/models25/visualization:visualize-code src/services/user.service.ts class26/visualization:visualize-code prisma/schema.prisma er27/visualization:visualize-code src/routes sequence28/visualization:visualize-code src dependency29```3031## Supported Analysis Types3233| Type | Trigger | Input |34| --- | --- | --- |35| `class` | TypeScript/Python/Java classes | `.ts`, `.py`, `.java`, `.cs` files |36| `er` | ORM/database schemas | `schema.prisma`, `models.py`, `*.entity.ts` |37| `sequence` | API route handlers | Route files with HTTP handlers |38| `dependency` | Import statements | Any source files |3940## Execution4142Delegate to the `visualization:code-visualizer` agent with the following prompt:4344---4546**Task:** Analyze source code and generate an appropriate diagram.4748**Target:** $1 (path to analyze)49**Diagram Type:** $2 (optional - auto-detect if not specified)5051**Instructions:**52531. **Discover files** at the specified path using Glob542. **Determine analysis type** based on:55 - Explicit diagram type argument (if provided)56 - File patterns and content573. **Read and analyze** the relevant source files584. **Extract structure**:59 - For class diagrams: classes, properties, methods, relationships60 - For ER diagrams: entities, fields, keys, relationships61 - For sequence diagrams: handlers, service calls, responses62 - For dependency diagrams: imports, module relationships635. **Generate diagram** using Mermaid syntax (preferred for GitHub rendering)646. **Return results** with diagram and analysis notes6566**Auto-Detection Rules:**6768| File Pattern | Default Type |69| --- | --- |70| `schema.prisma` | ER |71| `models.py` (Django/SQLAlchemy) | ER |72| `*.entity.ts` | ER |73| `**/routes/**`, `*_controller.*` | Sequence |74| Generic `.ts`, `.py`, `.java` | Class |7576**Output Format:**7778Return:79801. Brief summary of what was analyzed (files, classes, entities, etc.)812. The generated diagram in a ```mermaid code block823. Any limitations or incomplete analysis notes834. Suggestions for refinement8485**Example Output for Class Diagram:**8687Analyzed 5 files in `src/models/`:8889- User.ts (1 class, 4 methods)90- Post.ts (1 class, 3 methods)91- Comment.ts (1 class, 2 methods)9293```mermaid94classDiagram95 class User {96 +String id97 +String email98 +createPost()99 +addComment()100 }101 ...102```103104Note: Some private utility methods were omitted for clarity.105106---107> Converted and distributed by [TomeVault](https://tomevault.io/claim/melodic-software) — claim your Tome and manage your conversions.108<!-- tomevault:4.0:skill_md:2026-04-11 -->