Azure Blueprints

A VS Code extension that provides a node-based graph editor for Azure DevOps YAML pipelines — like Unreal Engine Blueprints, but for CI/CD.

Open any .yml / .yaml pipeline file with the Azure Blueprints custom editor and see your pipeline as an interactive visual graph. All edits sync bi-directionally with the raw YAML, and YAML comments are preserved on every save.

Features

Visual Graph Editor

• Node canvas — Infinite pan/zoom canvas (#1e1e1e background, dot grid). Space+drag to pan, scroll to zoom, Delete to remove selected nodes/edges.
• Node types — Trigger, Stage, Job, Task, Script, Bash, PowerShell, Checkout, Publish Artifact, Download Artifact, Template.
• Per-kind colour coding — Each node type has a distinct header strip and border colour (trigger: purple, stage: azure, job: green, task: orange-red, scripts: purple, template: dashed violet, etc.).
• Edge types — Structural edges (blue dashed, #0078d4) connect trigger→stage→job→task. Dependency edges (amber dashed, #f5a623) represent dependsOn relationships between stages/jobs.
• Edge legend — Bottom-left overlay shows Structural vs Dependency line styles.
• MiniMap — 164×96 dark minimap (rgba(20,20,20,0.92)) in the bottom-right corner with per-kind node colour mapping.

Header Bar

• App header (40px, #252526) with icon, title, separator, filename/breadcrumb trail, hint text, and a Save YAML button (amber accent).
• YAML export modal — clicking Save YAML opens a centred modal with the current pipeline YAML, a Copy to Clipboard button, and a slideUp entry animation.
• Toast notifications — brief bottom-right slide-in toasts (auto-dismiss after 2.8s) confirm node insertion actions.

Left Palette Panel

• 210px searchable sidebar showing all node types grouped by category (Structure, Steps, Advanced).
• Click any item to insert a new node of that type into the current graph.

Properties Panel

• 272px right-side panel that shows the full property form for the currently selected node.
• Editable fields for every property of every node type (display name, pool, condition, dependsOn, task inputs, trigger filters, cron schedule, etc.).
• Delete Node button in the panel footer (danger red #f85149) removes the selected node and its edges.
• YAML preview rendered in monospaced #1a1a1a code block.

Context Menus

• Right-click empty canvas — if no trigger exists: shows trigger type picker. Otherwise: shows task search menu (195px, dark #2d2d30, grouped header).
• Drag edge from job to empty space — shows an edge-drop menu to create a new Job or Task node, pre-wired.
• Drag edge from stage to empty space — shows edge-drop menu to create a new Stage (with dependsOn set).
• Right-click template node — Expand template inline / Collapse back to template.

Template Support

• Template navigation — double-click a template node to navigate into the referenced .yaml template file. A breadcrumb trail in the header allows navigation back.
• Inline expansion — expand a template node to see its internal nodes and edges directly in the canvas. Expanded nodes are shown with a dashed purple border and a ⇒ <path> badge.
• Inline collapse — right-click any expanded node to collapse the sub-graph back to the template placeholder.

YAML Comment Preservation

• All YAML comments are preserved when saving from the graph editor. The extension host uses a comment-aware YAML merge (yaml v2 library) that matches map keys by identity and merges changes while keeping all # … annotations intact.

Keyboard Shortcuts

Architecture

Key files

Development

# Install dependencies
npm install

# Run tests (299 tests)
npm test

# Build both extension + webview bundles
npm run build

# Watch mode (rebuilds on save)
npm run watch

Press F5 in VS Code to launch the Extension Development Host.

Design Tokens

The UI is built on a consistent set of CSS custom properties defined in App.css: