Hypergraph AI

AI-powered system design diagrams with visual editing and code generation for VS Code.

Features

AI-Powered Design

• Natural Language to Diagrams: Describe your system architecture in plain English and watch it come to life
• Smart Context Awareness: The AI understands your codebase structure, tech stack, and existing patterns
• Real-time Streaming: See AI responses as they're generated

Visual Canvas Editor

• Drag & Drop Components: Build diagrams visually with an intuitive component palette
• Multiple Categories: Generic components, Databases, AWS, GCP icons
• Interactive Editing: Connect nodes, edit labels, and customize your diagrams

Two Modes

• Design Mode: Create and modify system architecture diagrams with AI assistance
• Code Mode: AI-assisted code implementation based on your designs

Getting Started

1. Open a folder in VS Code
2. Create a new diagram: Press Ctrl+Shift+P and select "Hypergraph AI: New Design Diagram"
3. Or open an existing .mmd file: Right-click and select "Open with Design Canvas"

Usage

Creating Diagrams with AI

1. Open the Hypergraph editor
2. Type your request in the chat panel, for example:
   • "Design a REST API with PostgreSQL database"
   • "Create a microservices architecture for an e-commerce platform"
   • "Show me the architecture for a real-time chat application"
3. The AI will generate a Mermaid diagram and display it on the canvas

Visual Editing

• Add Components: Drag icons from the palette onto the canvas
• Connect Nodes: Click and drag from one node's handle to another
• Edit Labels: Double-click on a node to edit its label
• Delete: Select a node or edge and press Delete

Mode Switching

Toggle between Design and Code modes using the mode selector in the chat panel:

• Design Mode: For creating and modifying diagrams
• Code Mode: For implementing code based on your designs

Extension Settings

This extension contributes the following settings:

• hypergraph.aiProvider: AI provider for diagram generation (default: openrouter)
• hypergraph.model: Model to use for generation (default: anthropic/claude-sonnet-4.5)

File Types

• .mmd - Mermaid diagram files (flowcharts)

Requirements

• VS Code 1.85.0 or higher
• Internet connection for AI features

Known Issues

• First-time load may take a few seconds while initializing

Release Notes

0.1.0

Initial release of Hypergraph AI:

• AI-powered diagram generation
• Visual canvas editor
• Design and Code modes
• Streaming AI responses
• Codebase context awareness

Enjoy designing with Hypergraph AI!