DEV Community

Khoa.Vo
Khoa.Vo

Posted on

SysVis.AI: Running Architecture Diagramming AI 100% Locally in the Browser with WebGPU

#ai #webgpu #javascript #opensource

SysVis.AI: Running Architecture Diagramming AI 100% Locally in the Browser with WebGPU

Creating clear, accurate system architecture diagrams is one of the most important—and tedious—parts of software engineering.

Typically, engineers find themselves choosing between:

  1. Manual Canvas Editors (Draw.io, Lucidchart): Endless nudging of boxes, misaligned connector arrows, and zero semantic awareness of system design.
  2. Text-to-Diagram Tools (Mermaid, PlantUML): Great for code versioning, but rigid to lay out visually and painful to iterate on with non-technical stakeholders.
  3. Cloud AI SaaS Platforms (Eraser.io): Beautiful, but requires uploading sensitive infrastructure topologies, internal microservice names, and proprietary IPs to third-party cloud servers.

To combine the fluidity of AI diagram generation with complete privacy, I built SysVis.AI (kv-graph): an open-source, local-first system architecture visualizer that runs 100% privately in your browser using WebGPU.

🔮 The Core Concept: Local-First In-Browser AI

SysVis.AI leverages the browser's WebGPU standard to execute modern compact neural networks directly on your client GPU:

  • Text-to-Diagram: Runs a fine-tuned Qwen3 language model compiled via WebLLM to translate natural language prompts ("Design a real-time event streaming pipeline with Kafka, ClickHouse, and Grafana") into structured diagram graphs.
  • Vision-to-Diagram: Runs an in-browser vision transformer (ViT-GPT2) to analyze uploaded whiteboard sketches, hand-drawn paper designs, or AWS architecture screenshots and convert them into live editable nodes.
  • Zero Cloud Leakage: All inference happens directly inside your browser tab. No prompts, architecture data, or uploaded sketches ever leave your machine.

(Note: For users without WebGPU-capable hardware, optional cloud backends such as Google Gemini, OpenAI, or a self-hosted Ollama server can be connected with a single toggle.)

🎨 Bidirectional Code & Canvas Synchronization

One of the biggest frustrations with visual diagram tools is vendor lock-in. SysVis.AI solves this by keeping a live bidirectional link between code and canvas:

┌──────────────────────────────────────┬─────────────────────────────────────────────────┐
│ 📝 Monaco Editor (Bidirectional)     │ 🎨 Interactive Canvas (XY Flow + Dagre)         │
│                                      │                                                 │
│ graph TD                             │     ┌──────────────┐                            │
│   Client[API Gateway]                │     │ API Gateway  │                            │
│   Client --> Auth[Auth Service]      │     └──────┬───────┘                            │
│   Client --> Cache[(Redis Cluster)]  │            │                                    │
│   Client --> DB[(PostgreSQL)]        │     ┌──────▼───────┐      ┌─────────────────┐   │
│                                      │     │ Auth Service │ ───▶ │ Redis (In-Mem)  │   │
│                                      │     └──────────────┘      └─────────────────┘   │
│                                      │            │                                    │
│                                      │     ┌──────▼───────┐                            │
│                                      │     │  PostgreSQL  │                            │
│                                      │     └──────────────┘                            │
└──────────────────────────────────────┴─────────────────────────────────────────────────┘
Enter fullscreen mode Exit fullscreen mode
  • Edit Code: Update your Mermaid syntax in the embedded Monaco editor, and the visual canvas updates in real time.
  • Drag & Rewire: Drag nodes, rewire edge connectors, or resize components on the XY Flow canvas, and the Monaco text updates automatically.
  • Self-Healing Auto-Layout: Powered by the Dagre layout engine, automatically resolving collision detection, orthogonal wire routing, and proper hierarchy layering with one click.

📤 Rich Export Options

When your architecture diagram is ready, you can export it in multiple developer-friendly formats:

  • Mermaid Markdown: Ready to paste into GitHub READMEs, Notion, or internal wikis.
  • React Flow Component: Export the diagram as standalone, fully typed React code with components and CSS that can be dropped straight into your web app.
  • Vector SVG & 3x High-Res PNG: Crisp, transparent renders perfect for slide decks and enterprise documentation.
  • Full JSON State: Import and resume your canvas state at any time.

🚀 Quick Start with Docker

You can run SysVis.AI locally or self-host it on your homelab with Docker:

docker run -d \
  --name sys-arc-visl \
  -p 5173:5173 \
  vndangkhoa/sys-arc-visl:latest
Enter fullscreen mode Exit fullscreen mode

Navigate to http://localhost:5173 and start creating production-grade system diagrams right away.

🔗 Check it Out on GitHub

SysVis.AI is open-source under the MIT license:

⭐ GitHub Repository: https://github.com/vndangkhoa/Sys-Arc-Visl

🐳 Docker Hub: vndangkhoa/sys-arc-visl

Try it out with your next system design or whiteboard session!

Top comments (0)