Floe for Visual Studio Code
Provides first-class support for the Floe diagram language — a lightweight, human-readable, AI-friendly DSL for directed graphs.
Features
This extension brings the complete Floe toolchain directly into VS Code:
- Live Preview: Split the editor to see your diagrams rendered in real-time as you type. Includes dark mode support and interactive pan/zoom.
- Syntax Highlighting: Beautiful and accurate TextMate grammars for
.floe files.
- Language Server Features:
- Diagnostics: Real-time syntax and semantic validation.
- Auto-completion: Smart suggestions for nodes, node types, and keywords.
- Hover Information: Peek into node details and metadata.
- Formatting: Auto-format your diagrams (supports
Format Document).
- Document Symbols: Navigate complex diagrams easily via the Outline view or breadcrumbs.
Usage
- Open any
.floe file.
- Click the Open Preview to the Side icon
[]|[] in the top right of the editor, or use Ctrl+Shift+V (Cmd+Shift+V on Mac).
- Type your diagram code and watch it update live.
Quick Example
direction LR
User [person] "End User"
API [service] "API Gateway"
User -> API : request
API -> Database : query
Extension Settings
You can customize the extension via settings.json:
floe.preview.autoUpdate: Automatically update the preview when the source file changes (default: true).floe.languageServer.enabled: Enable or disable the Floe Language Server features (default: true).floe.languageServer.path: Custom path to a specific Floe language server executable (optional).
Requirements
No external dependencies are required! The extension comes bundled with the @fazelstudio/floe compiler engine.
(Note: If you have @fazelstudio/floe installed locally in your workspace's node_modules, the extension will intelligently use your workspace version instead of the bundled one. Bundled engine: @fazelstudio/floe@^1.2.0.)
Requirements
@fazelstudio/floe@^1.2.0 for chaining (A -> B -> C), fan-out (A -> B, C), <-> / ==> edges, named edges (E1: A -> B), and scoped styles (meta API.fill). Older engines report these as errors.
Known Issues
None currently. Long labels wrap, meta/note/link render in SVG output (titles, footers, tooltips, clickable nodes and edges).
Release Notes
0.2.0
- Compatible with
@fazelstudio/floe@^1.2.0 (bundled engine refreshed from npmjs).
- TextMate grammar covers
<->, ==>, =>, ,, ., and E1: named-edge prefixes.
- Preview and diagnostics support chaining, fan-out/fan-in, bidirectional/emphasis edges, edge notes/links, and scoped styles.
0.1.0
- Initial release of Floe VS Code extension.
- Syntax highlighting and LSP integration.
- Live SVG Preview with dark mode support.
