Skip to content
| Marketplace
Sign in
Visual Studio Code>Visualization>Naiad LensNew to Visual Studio Code? Get it now.
Naiad Lens

Naiad Lens

NaiadAI

| (0) | Free
Interactive codebase visualization and mapping with Mermaid.js diagrams - generate activity, class, state, and architecture diagrams from your code
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Naiad Lens

AI-powered codebase visualization with interactive Mermaid diagrams

Transform your code into beautiful, navigable diagrams. Naiad Lens analyzes your files and generates activity diagrams, class diagrams, state diagrams, sequence diagrams, and architecture overviews to help you understand and document complex codebases.

Features

📊 Multiple Diagram Types

  • Activity Diagrams - Visualize function flow and execution paths
  • Class Diagrams - Show class structures, methods, and relationships
  • State Diagrams - Display state transitions and workflows
  • Sequence Diagrams - Illustrate component interactions
  • Architecture Diagrams - Project structure and file organization overview

🎯 Smart Code Analysis

  • Multi-file diagrams - Generate diagrams from multiple files simultaneously
  • AI-powered generation - Intelligent code analysis and visualization
  • Clickable navigation - Click diagram nodes to jump directly to code
  • Historical diagrams - Access previously generated diagrams
  • Theme-aware - Automatically adapts to VS Code light/dark themes

🔐 Cloud Features

  • Google OAuth login - Secure authentication
  • Diagram history - All your diagrams saved and accessible
  • Cross-platform sync - Access diagrams from VS Code or JetBrains IDEs

📤 Export & Share

  • PNG export - Save diagrams as high-quality images
  • Copy to clipboard - Quick PNG or text export
  • Chat integration - Built-in diagram discussion (experimental)

🌐 Language Support

  • JavaScript/TypeScript
  • Python
  • Java
  • Kotlin
  • Go
  • C/C++/C#

Quick Start

  1. Install the extension from the marketplace
  2. Click the Naiad Lens icon in the Activity Bar (left sidebar)
  3. Click Log In and authenticate with Google
  4. Open a code file or click New Diagram to select multiple files
  5. Choose a diagram type and generate

Usage

Generate a Diagram

Single file:

  1. Open any supported code file
  2. Click a diagram type button (Activity, Class, State, Sequence, Architecture)

Multiple files:

  1. Click New Diagram button
  2. Search and select files from the floating palette
  3. Click a diagram type to generate

Navigate Code

Click any node in a diagram to jump directly to that function, class, or file in your editor.

Access History

Click the My Diagrams button to view previously generated diagrams. Click any diagram to load it.

Export Diagrams

  1. Click the Share button (⋮) in the toolbar
  2. Choose:
    • Save PNG - Download as image file
    • Copy PNG - Copy image to clipboard
    • Copy Text - Copy Mermaid source code

Keyboard Shortcuts

  • Ctrl+Shift+L (Mac: Ctrl+Shift+L) - Toggle Naiad Lens panel
  • Ctrl+Shift+N (Mac: Cmd+Shift+N) - Toggle chat panel

Requirements

  • VS Code 1.99.0 or higher
  • Internet connection for diagram generation and authentication
  • Google account for login

Privacy & Data

Naiad Lens sends code snippets to our API for diagram generation. We do not store your source code permanently. Generated diagrams and metadata are stored for your diagram history feature. See our privacy policy for details.

Support

  • Website: naiadai.com
  • Support: support@naiadai.com
  • License: Terms of Service

Release Notes

See CHANGELOG.md for version history.


Happy Diagramming! 🚀

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft