Datamart Fleet VSCode Extension

VSCode extension for DM Fleet Manager - visualize and edit components. This extension allows you to work with Decision Flow JSON files exported from the Fleet Manager.

Features

Flow Visualization

Renders Decision Flow diagrams with all node types
Custom edge styling for conditions (green) and errors (red)
Interactive edge labels - click condition labels to view details
VSCode theme integration (light/dark)

Auto-Arrange Nodes

Rearrange button in canvas controls for automatic layout
Dagre-based hierarchical positioning algorithm
Cycle detection with user confirmation to break cyclic paths
Persists rearranged positions back to flow file

Data Map Panel

Bottom panel showing input/output data mappings
Interactive origin badges - hover to highlight, click to navigate
Condition tabs for Choice nodes (INPUT DATA MAP + CONDITION 1, 2, etc.)
If/Or block visualization in condition tree viewer
Resizable with auto-fit content option

Component Discovery

Auto-discovery of referenced component files in workspace
Manual file selection via "Select File" button
Auto-sync - automatically reloads when component files change
Displays component schemas and metadata

Multi-Instance Support

Open multiple flow files simultaneously in separate tabs
Each tab maintains its own state and viewport

Supported Node Types

Node Type	Description
Input	Flow entry point
Output	Flow exit point
Component	Reference to another component
Choice	Conditional branching with multiple conditions
Parallel	Parallel execution paths
Map	Iterate over array items
Distributed Map	Distributed iteration
Quick Access	Quick access node
Action	Execute an action
Notification	Send notification
Widget Output	Widget output data
Abstract	Abstract placeholder
Template	Template reference

Usage

Getting data from the Fleet Manager

To get the data from the Fleet Manager, you have two options:

Use the getComponentVersion2 API response. For this, go to Fleet Manager in the web, in the list of component open the Chrome DevTools and go to the Network tab, get back to the list of components, enter in the component you want to edit and copy the entire response of the getComponentVersion2 query.
Use the Fleet CLI and execute the command fleet init, that will sync an entire workspace and you can open the flow you want to edit in the VSCode extension.

Opening a Flow File

Editor Toolbar: Click the flow viewer icon in the editor toolbar when viewing a JSON file
Context Menu: Right-click a .json file in Explorer → "Open in Datamart Fleet"
Command Palette: Cmd+Shift+P → "DM Fleet: Open in Datamart Fleet"
Editor Context: Right-click in a JSON file editor → "Open in Datamart Fleet"

Canvas Controls

Located in the bottom-left corner:

Control	Description
+ / -	Zoom in/out
Fit	Fit flow to viewport
Rearrange	Auto-arrange nodes (Dagre layout)
Minimap	Toggle minimap visibility

Right-click on the canvas to access:

Reveal Flow in Explorer - Show the flow file in the Explorer sidebar
Open Flow in Editor - Open the flow JSON file in the editor

Action	How
Pan	Click and drag on canvas
Zoom	Mouse wheel or trackpad pinch
Select Node	Click on a node
Deselect	Click on empty canvas
Navigate to Node	Click origin badge in DataMapPanel

Node Details Panel

Click a node to open the details panel (right sidebar):

Properties: Name, global variable, type
Component Info: ID, version, variant, file path
Input/Output Schemas: Expandable JSON schema viewer
Data Mappings: Click "Data map" button to open DataMapPanel
Conditions: For Choice nodes, click condition badges to view details
Actions/Notifications: View configured actions

DataMapPanel (Bottom Panel)

Click the "Data map" button on any node to open the bottom panel:

Input Data Map tab: Shows source → target mappings
Output Data Map tab: Shows output mappings (if applicable)
Condition tabs (Choice nodes only): View If/Or condition trees
Interactive badges: Hover to highlight node on canvas, click to navigate

Loading Component Data

Select a component node in the flow
View auto-discovered file path in the details panel
Click "Select File" to manually choose a different file
Component schemas and metadata will load automatically

Keyboard Shortcuts

Shortcut	Action
`Ctrl/Cmd + 0`	Reset zoom
`Ctrl/Cmd + +`	Zoom in
`Ctrl/Cmd + -`	Zoom out

File Format

The extension supports JSON files in the getComponentVersion2 API response format:

{
  "data": {
    "getComponentVersion2": {
      "component_id": "uuid",
      "type": "flow",
      "name": "Flow Name",
      "variants": [{
        "version": 1,
        "definition": "{\"nodes\":[...],\"edges\":[...]}"
      }]
    }
  }
}

Also supports direct component format (single variant):

{
  "component_id": "uuid",
  "type": "flow",
  "name": "Flow Name",
  "definition": "{\"nodes\":[...],\"edges\":[...]}"
}

Requirements

VSCode 1.85.0 or higher

Known Limitations

Component discovery limited to workspace folders
Large flows (100+ nodes) may have reduced performance
Auto-arrange works best with acyclic flows

Development

# Install dependencies
pnpm install

# Build
pnpm build

# Watch mode
pnpm watch

# Run tests
pnpm test

# Type check
pnpm typecheck

# Package VSIX
pnpm package

Version History

See CHANGELOG.md for detailed release notes.

Current Version: 0.1.5

License

Proprietary - Datamart

Datamart Fleet

Datamart