Mermaid Code Diagram

Generate beautiful Mermaid.js diagrams from your code using AI. This extension analyzes your code and automatically creates visual representations of components, relationships, and data flow.

Features

• 🤖 AI-powered code analysis
• 📊 Automatic diagram generation
• 🔄 Real-time preview
• 🖱️ Interactive diagram viewing with pan and zoom
• 🎨 Theme-aware rendering
• 🔒 Secure API key management

Requirements

• Visual Studio Code 1.80.0 or newer
• SambaNova API key which can be requested from here

Getting Started

1. Install the extension from the VS Code Marketplace
2. Open any code file you want to analyze
3. Click the diagram icon in the editor title bar or use the command palette
4. Enter your SambaNova API key when prompted
5. View the generated diagram in the side panel

Commands

• Generate Mermaid Diagram from Code: Analyze current file and generate a diagram
• Clear API Key: Remove the stored API key

Usage

1. Open any code file in VS Code
2. Click the diagram icon in the editor title bar (or use Command Palette: Generate Mermaid Diagram from Code)
3. The extension will analyze your code and generate a diagram
4. Use the interactive controls to pan and zoom the diagram
5. The diagram updates automatically when you regenerate it

Diagram Features

• Component relationships
• Method calls
• Data flow
• Dependencies
• Events and triggers
• Color-coded components by type

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.