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.
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.jsonopen in the DAG editor by default. - Any
.jsonfile: 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.) andrankSpacing. - 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.