Start a directed graph
Open a .dgml file, drop one here, or double-click the canvas to add your first node.
Drop a .dgml file to open it
DGML source
Open a .dgml file, drop one here, or double-click the canvas to add your first node.
A browser-based editor for DGML (Directed Graph Markup Language), the graph format used by Visual Studio. Everything runs locally in your browser — files never leave your machine.
| Drag canvas | Pan |
| Wheel / pinch | Zoom |
| Shift + drag canvas | Box-select |
| Double-click canvas | Add node |
| Double-click node / link | Edit label |
| Alt + drag from node (or Link tool) | Draw a link |
| Click group +/− button | Expand / collapse group |
| Right-click | Context menu |
| N | Add node (linked from selection) |
| F2 | Rename selected |
| Del | Delete selection |
| Ctrl+G | Group selection |
| Ctrl+Z / Ctrl+Y | Undo / redo |
| Ctrl+S / Ctrl+O | Save / open |
| Ctrl+L | Re-run layout |
| Ctrl+E | Toggle DGML source |
| F · + · − | Fit · zoom in · zoom out |
| V / L | Select tool / link tool |
| Arrow keys | Nudge selected nodes |
Nodes, Links, Categories (incl. BasedOn, IsContainment), groups (Group="Expanded|Collapsed" with Contains links), Background/Stroke/Foreground/StrokeThickness/StrokeDashArray/Shape, conditional Styles (HasCategory, HasValue, comparisons), Bounds, GraphDirection and Layout. Unknown sections are preserved on save.
Add ?src=diagram.dgml to load a file hosted next to this page, and &view=1 for a read-only viewer.