Simple DAG Editor

A VS Code extension that opens JSON files of the shape { id: [prereqIds] } as a visual node-and-arrow editor. Drag from a node's edge handle to another node to create dependencies. Edits write straight back to the JSON.

Simple DAT Editor

Data format

{
  "Mining": [],
  "Refining": ["Mining"],
  "Tin": ["Refining"],
  "Zinc": ["Refining"],
  "Lead": ["Tin"],
  "Silver": ["Refining", "Zinc"],
  "Mercury": ["Lead", "Silver"]
}

Keys are node IDs.
Values are arrays of prerequisite IDs (must reference existing keys).
The graph must be acyclic — the editor refuses edits that would create a cycle.

Activation

Files ending in .dag.json open in the DAG editor by default.
Any .json file: right-click → Open With… → DAG Editor.
Command palette: DAG Editor: Open Current File.

Editing

Drag nodes with left click
Connect nodes with ⤡
Rename nodes with ✎
Delete nodes with ✕

Action	How
Add node	Toolbar + Add Node → modal opens → type id → Enter.
Select a node	Click the card body (a short click that doesn't move).
Move a node	Click and drag the card. (Transient — Auto-layout resets it.)
Add edge	Drag from the ⤡ button on the source card; drop on the target card. Targets light green if valid, red if they'd create a cycle.
Rename a node	Click the ✎ button. The label becomes an input. Enter commits, Esc cancels. The rename cascades through every other node's prereq list.
Delete a node	Click the ✕ button → confirm. Removes the node and any incident edges.
Delete an edge	Click the edge line to select; press `Delete` / `Backspace`.
Pan	Drag the empty canvas.
Zoom	Mouse wheel (zooms toward the cursor). Toolbar Fit resets the view.
Re-layout	Toolbar Auto-layout.
Customize layout	Toolbar ⚙ Layout → adjust direction, spacing, edge style. Save as workspace default persists.

Layout settings

All settings live under simpleDagEditor.* in your VS Code workspace/user settings.json. See Preferences: Open Workspace Settings and filter for "simpleDagEditor".

Defaults are sensible; tweak when:

The graph wraps awkwardly → adjust direction (TB / LR / etc.) and rankSpacing.
Nodes overlap horizontally → increase nodeSpacing.
Edges cross messily → try edgeStyle: "taxi" for orthogonal routing.

Notes

Node positions are not persisted. The graph is auto-laid-out every time the file opens.
Saving re-formats the JSON with 2-space indentation.

Simple DAG Editor

Miguel Fêo e Torres

Simple DAG Editor

Data format

Activation

Editing

Layout settings

Notes