Mesh Graph

Design, visualize, and ship your microservice API architecture — without leaving VS Code.

Mesh Graph scans your workspace, discovers services and endpoints across multiple frameworks, and lets you design your entire architecture on a visual canvas. Then use the built-in AI Agent to generate production-ready code or comprehensive technical documentation — all from the same place you write code.

Key Features

Workspace Scanner — Auto-Discovery

Mesh Graph automatically scans your workspace and detects projects and their API endpoints. Supported frameworks:

Event-driven endpoints (Kafka, RabbitMQ, NATS, etc.) and real-time protocols (WebSocket, SignalR, Socket.IO) are also detected.

Projects auto-refresh when you add, remove, or change files — no manual rescan needed.

Visual Canvas — Drag, Connect, Annotate

• Drag & drop projects from the sidebar onto a React Flow canvas
• Draw connections between endpoints to map inter-service communication (REST, gRPC, GraphQL, Events, Realtime)
• Add notes to edges to describe implementation details, contracts, or requirements
• Create projects manually — model services that don't exist yet or external APIs you depend on
• Mark endpoints as Created or Assumed — distinguish between what you're building vs. what's external
• Auto Arrange — one-click layout organization
• Color-coded by project type for instant visual clarity

AI Agent — Start Coding

Select any AI model available in your VS Code (GitHub Copilot, etc.) and generate implementation code directly from your architecture.

The AI Agent understands the context of your architecture:

• Existing services (scanned from your workspace) → AI follows your existing project standards, patterns, and naming conventions
• Created services (manually added, new) → AI generates clean, professional, production-ready code with best practices
• Assumed services (external/third-party) → AI does not implement these — instead generates client interfaces, DTOs, and integration contracts on the caller side

Additional features:

• Model picker with search — choose any available AI model or use Auto mode
• Additional Instructions — guide the AI with specific coding guidelines or requirements
• Prompt Preview — inspect the exact prompt before sending
• Streaming output with live preview and Stop button
• Copy output with one click

AI Agent — Tech Document

Generate comprehensive technical documentation from your architecture:

• Multiple output formats — Markdown, HTML, Confluence Wiki, Plain Text
• Template support — upload or paste an existing document as a structural template
• Document language — generate in any language (English, German, Turkish, Spanish, etc.)
• Custom instructions — specify topics, sections, or details to include or exclude
• Live preview — toggle between raw output and rendered preview (Markdown & HTML)
• Download — save the generated document to your file system
• Save to .mgx — persist the generated document alongside your architecture diagram

Diagrams — Sequence, Flowchart, Dependencies

Automatically generated diagrams from your canvas:

• Sequence Diagram — visualize the request flow between services
• Flowchart — see the high-level architecture flow
• Dependency Graph — understand which services depend on each other
• Copy diagram code or preview rendered output

Project Detail & Save/Load

• Project Name & Description — document your architecture context
• Save / Load as .mgx — save your entire architecture (canvas, connections, AI output, instructions) into a single portable file
• Save / Load as JSON — backward-compatible diagram persistence
• Created & Last Saved timestamps — track your work history

Internationalization

Full UI translation in 4 languages: English, Deutsch, Türkçe, Español.

Follows your VS Code language setting automatically, or set it manually in extension settings.

Theme Support

Follows your VS Code theme — Light, Dark, and High Contrast are fully supported. All colors adapt to your current theme.

Getting Started

1. Install Mesh Graph from the VS Code Marketplace
2. Open the command palette (Cmd+Shift+P / Ctrl+Shift+P)
3. Run Mesh Graph: Designer
4. Or press Cmd+Shift+M (macOS) / Ctrl+Shift+M (Windows/Linux)
5. Or click the Mesh Graph button in the status bar

Your workspace projects will appear in the sidebar automatically. Drag them onto the canvas to start designing.

Privacy & Disclaimer

Mesh Graph does not collect, store, or transmit any data. All processing happens locally on your machine within VS Code.

AI-generated code and documentation are produced by the AI language models available in your VS Code environment (e.g., GitHub Copilot). All generated content — including code, documentation, and architecture designs — is the sole responsibility of the user who created it. The extension acts only as a bridge between your architecture and the AI model; it does not host, store, or process AI requests on any external server.

Your architecture files (.mgx, .json) are saved locally to paths you choose. No telemetry, analytics, or usage data is collected by this extension.

Requirements

• VS Code 1.90.0 or later
• For AI features: an AI language model extension (e.g., GitHub Copilot)

Extension Settings

Feedback & Issues

Found a bug or have a feature request? Reach out via the VS Code Marketplace Q&A section or contact the author directly.

Made with precision by barisozgenn