FluxDiagram

Create beautiful flowcharts without leaving VS Code.

Comment 2

Inspiration

Developers constantly need to visualize their logic — whether it's documenting an algorithm, planning a system architecture, or explaining a workflow to teammates. But the current options are frustrating: switch to a browser-based tool like Lucidchart, lose context, and break your flow. Or use clunky desktop apps that don't integrate with your dev environment.

We asked ourselves: Why can't we build flowcharts where we already spend most of our time — inside VS Code?

FluxDiagram was born from the belief that diagramming should be as seamless as writing code. No context switching. No exports to manage. Just open a file and start creating.

What it does

FluxDiagram is a native VS Code extension that transforms your editor into a powerful flowchart builder.

Core Features: 🎨 Intuitive Canvas — Drag-and-drop nodes with smooth pan & zoom 🔗 Smart Connections — Create edges between nodes with automatic path routing 📐 Auto Layout — Automatically organize messy diagrams with one click 🗺️ Minimap Navigation — Navigate large diagrams effortlessly 🌗 Theme Aware — Automatically adapts to your VS Code light/dark theme 📤 Multi-format Export — PNG, SVG, and JSON export for any use case ↩️ Full Undo/Redo — Configurable history up to 200 steps ⌨️ Keyboard First — Power-user shortcuts for every action Diagrams are saved as .fluxdiagram files that live alongside your code and can be version-controlled with Git.

How we built it

FluxDiagram is built entirely with TypeScript and leverages the VS Code Custom Editor API for deep integration. Architecture Highlights: Layer Technology Extension Host VS Code Extension API State Management Custom EventBus + StateManager pattern Canvas Rendering HTML5 Canvas with custom renderers Layout Engine Graph-based auto-layout algorithm Build System esbuild for fast bundling Testing Jest with TypeScript support

Key Design Decisions: Separation of concerns — Core graph logic is decoupled from VS Code APIs, making it testable and portable Event-driven architecture — All state changes flow through a central EventBus for predictability Modular renderers — NodeRenderer and EdgeRenderer are independent, enabling easy customization Webview communication — Bidirectional messaging between extension and canvas for real-time updates

Challenges we ran into

  1. VS Code Webview Sandboxing Webviews run in an isolated context with strict CSP policies. We had to carefully architect the communication bridge between the extension host and the canvas without compromising security.

  2. Canvas Performance at Scale Rendering hundreds of nodes with smooth 60fps panning required implementing viewport culling — only drawing elements visible on screen — and optimizing our render loop.

  3. Undo/Redo with Graph State Implementing reliable undo/redo for a mutable graph structure was tricky. We solved it with immutable state snapshots and a custom StateManager that handles deep cloning efficiently.

  4. Auto-Layout Algorithm Creating a layout engine that produces visually pleasing results for any graph topology took multiple iterations. We implemented a layered approach inspired by Sugiyama's algorithm.

  5. Theme Synchronization Keeping the canvas theme in sync with VS Code's theme (including when users switch mid-session) required listening to configuration changes and dynamically updating CSS variables.

Accomplishments that we're proud of

✅ Zero external runtime dependencies — The extension is lightweight and fast to load

✅ Seamless UX — Opening a .fluxdiagram file feels as natural as opening a code file

✅ Production-ready code quality — Full TypeScript, ESLint, Prettier, and Jest test coverage

✅ Minimap implementation — A fully functional minimap that mirrors the main canvas in real-time

✅ Export flexibility — Users can export diagrams as PNG (for docs), SVG (for web), or JSON (for processing)

✅ First-class keyboard support — Every action has a shortcut, making it accessible and efficient

What we learned

VS Code's Extension API is incredibly powerful — Custom editors open up possibilities far beyond text editing State management matters — Investing early in a clean EventBus pattern saved us from countless bugs Performance requires intention — Canvas rendering at scale doesn't "just work" — you have to design for it Developer experience is UX — Small touches like grid snapping and keyboard shortcuts dramatically improve usability Testing graph logic is non-trivial — We developed patterns for testing stateful, interconnected data structures

What's next for FluxDiagram

🚀 Roadmap: Feature Description Collaboration Real-time multi-user editing via VS Code Live Share AI-Powered Diagrams Generate flowcharts from natural language or code analysis Swimlanes Organize nodes into lanes for process diagrams Import Support Import from Mermaid, Draw.io, and other formats Code Integration Link nodes to specific lines of code for documentation

We believe FluxDiagram can become the go-to diagramming tool for developers who live in VS Code. The journey is just beginning! 🎯

Built With

Share this project:

Updates