FluxDiagram

Flowcharts and diagrams in VS Code, connected to your code

Import and export Mermaid, link nodes to files and symbols, and store diagrams in a format built to be reviewed in a pull request. Works entirely offline.

✨ Features

🔁 Mermaid Round-Trip

Keep your diagrams as code, edit them on a canvas.

• Import a .mmd, .mermaid or Markdown file — fenced ```mermaid blocks are detected automatically, and a file with several diagrams lets you pick one. You can also import straight from the clipboard.
• Export back to Mermaid: copy to the clipboard, save as .mmd, or open in a new editor.
• Supported: all the standard flowchart shapes, --> --- -.-> ==> --o --x <--> links, both label forms (-->|yes| and -- yes -->), link chains, subgraphs, comments and ; separators. Anything unsupported is reported rather than silently dropped.

🔗 Linked to Your Code

Point a node at a file, a line or a symbol, and jump straight there.

• Link by browsing files, searching workspace symbols, or using the cursor's current position.
• Open a link from the properties panel, the context menu, or Ctrl+Enter.
• Symbol links resolve fresh each time, so they keep working after the file is edited above them; a moved file is found by name rather than reported broken.
• Linked nodes carry a badge, so it is obvious which boxes are navigable.

♿ Accessible

• The canvas is keyboard-navigable: Tab between shapes, Enter to edit a label, arrow keys to nudge.
• A live region announces selection and edits to screen readers.
• Dialogs trap focus, close on Escape, and restore focus on close.

🤝 Built for Git

Diagram files sit next to the code they describe, so they are written to be reviewable:

• Coordinates are rounded, so a one-pixel drag is a one-line diff — not a wall of floating-point digits.
• Key order is canonical, so the same diagram always produces identical text.
• Files are validated and repaired on load, so a bad merge never costs you the diagram.

🔒 Fully Offline

The editor makes no network requests. Fonts are local stacks, including one that matches your VS Code editor font.

🎨 Modern & Beautiful UI

• Adaptive Theming: Follows your VS Code light/dark theme.
• Retina Ready: Crisp SVG-based rendering for all shapes and connections.

🛠️ Powerful Editing Tools

• Rich Node Library: Over 15+ standard shapes including flowcharts, decision trees, and process symbols.
• Smart Connections:
  • Bezier Curves: Smooth, elegant lines for organic flows.
  • Orthogonal: Structured, right-angle lines for technical diagrams.
  • Straight: Direct connections for simple graphs.
• Snap-to-Grid and alignment guides for precise placement.
• Minimap: Navigate large diagrams with ease.

⚡ Advanced Productivity

• Auto-Layout: Pick hierarchical, force-directed, radial or grid — and a direction for hierarchical. The layered algorithm breaks cycles, layers by longest path, and reorders each layer to reduce edge crossings. Node sizes are respected, so wide nodes never overlap.
• Export: PNG (2x), SVG, JSON and Mermaid. Every export path renders through the same code as the canvas, so what you see is what you get — no ports, no hitboxes, no selection outlines in the output.
• History Management: Undo/Redo across every movement and edit.
• Keyboard Shortcuts: Designed for power users to speed up workflows.

🚀 Getting Started

Installation

1. Search for FluxDiagram in the VS Code Marketplace.
2. Click Install.

Usage

1. Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P).
2. Type "New Fluxdiagram" and verify the file extension is .fluxdiagram.
3. The editor will open automatically.

Creating Your First Diagram

1. Drag & Drop shapes from the left sidebar onto the infinite canvas.
2. Connect nodes by dragging from one port (dot) to another.
3. Edit Text by double-clicking on any node.
4. Style your diagram in the properties panel on the right, or tidy it with auto-layout (Ctrl+Shift+L).
5. Link a node to a file or symbol from its context menu, so the diagram stays navigable as the code changes.

⌨️ Keyboard Shortcuts

🏗️ Architecture

FluxDiagram is built with a modern stack ensuring performance and maintainability:

• Core: VS Code Webview API & Custom Editor API
• Language: TypeScript, strict mode, with tsc --noEmit enforced in CI — esbuild strips types without checking them, so the build alone proves nothing
• Rendering: a custom SVG engine, no third-party canvas libraries. The same renderers draw the screen and the exports, in interactive and non-interactive modes, so exports cannot drift from what you see
• Bundling: esbuild
• State: snapshot history with coalescing, so one gesture is one undo step
• Dependencies: none at runtime
• Tests: 367 unit and DOM tests; CI runs typecheck, lint, tests, build and VSIX packaging on Linux and Windows across Node 20 and 22

🤝 Contributing

npm ci
npm run check   # typecheck, lint, 367 tests
npm run watch   # rebuild on change, then F5 in VS Code

Release steps live in RELEASING.md.

📄 License

This project is licensed under the Apache 2.0 License - see the LICENSE file for details.