VS Claude.

Inspiration

Navigating and understanding large codebases can be daunting, especially for new team members or during rapid development cycles. Traditional documentation often lags behind code changes, leading to outdated or missing architectural overviews. We envisioned a tool that could automatically generate up-to-date visual representations of a codebase's structure, aiding in comprehension and collaboration. Leveraging the capabilities of AI, specifically Anthropic's Claude models, we set out to create an extension that brings this vision to life within Visual Studio Code.

What it does

Codebase Mermaid Generator is a Visual Studio Code extension that:

Analyzes the code within your current workspace.

Utilizes the Anthropic API (Claude models) to interpret code structures and relationships.

Generates Mermaid JS syntax for various diagram types (e.g., class diagrams, flowcharts) based on the analysis.

Displays the generated Mermaid diagram in a preview panel within VS Code.

Integrates seamlessly with the command palette and the explorer context menu for easy access.

How we built it

We developed the extension using TypeScript, integrating with the Visual Studio Code Extension API to interact with the user's workspace. The extension collects relevant code files, filters out unnecessary directories (like node_modules and .git), and sends the code context to the Anthropic API. The Claude model processes this context and returns Mermaid-compatible syntax, which we render in a dedicated preview panel within VS Code. We ensured that the extension respects API usage limits by processing up to 100 files or a maximum context length.

Challenges we ran into

Context Limitations: Managing the amount of code sent to the Claude model without exceeding token limits required careful selection and summarization of code files.

Diagram Accuracy: Ensuring the generated diagrams accurately reflected the codebase's structure was challenging, especially for complex or unconventional code patterns.

User Experience: Integrating the extension smoothly into VS Code's interface and providing intuitive commands for users required iterative design and testing.

Accomplishments that we're proud of Seamless Integration: Achieved a smooth user experience by integrating the extension into both the command palette and the explorer context menu.

Dynamic Diagram Generation: Enabled real-time generation and preview of Mermaid diagrams directly within VS Code.

AI-Powered Analysis: Successfully leveraged Anthropic's Claude models to interpret and visualize code structures across multiple programming languages.

What we learned

AI Capabilities: Gained insights into the strengths and limitations of using AI models for code analysis and the importance of prompt engineering.

User Needs: Understood the necessity of providing clear instructions and feedback within the extension to guide users through the diagram generation process.

Extension Development: Learned best practices for developing and publishing VS Code extensions, including handling settings, permissions, and updates.

What's next for Codebase Mermaid Generator

Enhanced Language Support: Expand support for additional programming languages and frameworks.

Customization Options: Allow users to customize the types of diagrams generated and the level of detail included.

Collaboration Features: Introduce features for sharing and exporting diagrams to facilitate team collaboration.

Performance Optimization: Improve processing efficiency for larger codebases and optimize API usage.

We're also planning to introduce a Comic Strip Visualization feature that transforms code structures and logic flows into sequential, illustrated narratives.

Built With

• claude
• typescript