Skip to main content

​
Overview

Architecture Diagrams help you visualize and understand your project’s structure, components, and data flow using AI-generated visual representations.

Auto-Generate

AI analyzes your code and creates diagrams

Multiple Types

Component trees, data flow, file structure

Interactive

Click to navigate to files and components

Export

Download as PNG or SVG

​
Diagram Types

  • Component Tree
  • Data Flow
  • File Structure
  • Custom
Visualize React component hierarchyShows:
  • Parent-child relationships
  • Component dependencies
  • Prop flow
  • State management connections
Best for: Understanding component structure

​
Generating Diagrams

1

Open Project

Open the project you want to diagram
2

Click Diagram Icon

Find the Architecture Diagram button in toolbar
3

Choose Type

Select diagram type or use auto-detect
4

Generate

AI analyzes your codebase
5

View Result

Interactive diagram appears
6

Refine

Ask AI to adjust or add details
First diagram generation may take 30-60 seconds as AI analyzes your entire project.

​
Diagram Features

​
Interactive Elements

Click to Navigate

Click components to open their files

Zoom & Pan

Zoom in/out, pan around large diagrams

Hover Details

Hover for additional information

Filter

Show/hide certain elements

​
Customization

  • Color schemes
  • Layout direction (vertical/horizontal)
  • Spacing and sizing
  • Dark/light mode
  • Show/hide node_modules
  • Filter by file type
  • Focus on specific features
  • Collapse/expand sections
  • High-level overview
  • Detailed view with props
  • Show function signatures
  • Include comments

​
Use Cases

​
Onboarding New Developers

1

Generate Overview

Create high-level architecture diagram
2

Show Structure

Display file and component organization
3

Explain Flow

Generate data flow diagrams
4

Document Features

Create feature-specific diagrams
5

Share

Export and include in documentation

​
Refactoring

Visualize before refactoring:
  1. Current State: Generate diagram of existing structure
  2. Identify Issues: Spot circular dependencies, complexity
  3. Plan Changes: Sketch desired structure
  4. Refactor: Make changes
  5. Verify: Generate new diagram to confirm improvements

​
Documentation

README

Include architecture diagram in README

Technical Docs

Illustrate complex systems

Presentations

Show project structure to stakeholders

Code Reviews

Visualize changes and impact

​
AI Diagram Generation

​
Natural Language Requests

Ask AI to generate specific diagrams: Examples:
  • “Show me how authentication works in this app”
  • “Diagram the product catalog feature”
  • “Visualize all components that use the user context”
  • “Show the API endpoints and their relationships”
  • “Create a flowchart of the checkout process”

​
Refining Diagrams

  • Add Details
  • Simplify
  • Focus
  • Style
  • “Include prop types in the component diagram”
  • “Show which components fetch data”
  • “Add state management connections”

​
Exporting Diagrams

1

Open Diagram

View the diagram you want to export
2

Click Export

Click Export button in diagram toolbar
3

Choose Format

  • PNG (for documents, presentations)
  • SVG (for web, scalable graphics)
  • JSON (for re-importing later)
4

Adjust Settings

Set resolution, size, background
5

Download

Save to your computer

​
Best Practices

  • Generate overview diagram first
  • Get sense of project structure
  • Then drill into specific features
  • Avoid overwhelming detail initially
  • Regenerate after major changes
  • Keep diagrams current
  • Update documentation
  • Track architecture evolution
  • Export for onboarding docs
  • Include in README
  • Use in code reviews
  • Reference in discussions
  • Explain complex relationships
  • Note important patterns
  • Document decisions
  • Highlight problem areas

​
Advanced Features

​
Version Comparison

Coming soon:
  • Compare diagram from different branches
  • Visualize changes over time
  • Track architecture evolution
  • Before/after refactoring views

​
Collaborative Editing

Coming soon:
  • Annotate diagrams with team
  • Discuss architecture decisions
  • Propose changes visually
  • Vote on structure improvements

​
Auto-Update

Coming soon:
  • Diagrams update as code changes
  • Real-time sync with codebase
  • Highlight recent changes
  • Track diagram history

​
Troubleshooting

Solutions:
  • Ensure project has compiled successfully
  • Check for syntax errors in code
  • Verify project structure is valid
  • Try smaller scope (specific feature)
  • Restart and try again
Solutions:
  • Filter to show specific parts
  • Generate feature-specific diagrams
  • Hide utilities and helpers
  • Use high-level view
  • Split into multiple diagrams
Solutions:
  • Ensure components are imported
  • Check file naming conventions
  • Verify exports are correct
  • Regenerate diagram
  • Report missing items
Solutions:
  • Click refresh button
  • Close and regenerate
  • Clear cache
  • Check auto-update settings

​
Tips for Better Diagrams

Clean Code Structure

Organized code = clearer diagrams

Descriptive Names

Component names show up in diagrams

Logical Organization

Folder structure reflects in file diagrams

Document Complex Parts

Comments help AI understand relationships

​
Next Steps

Project Structure

Learn about project organization

Code Editor

Navigate your codebase

Using Agents

Let AI help you understand code

GitHub Integration

Include diagrams in your repo