Azure Blueprints – Pipeline Graph Editor

Azure Blueprints is a visual graph editor for Azure DevOps YAML pipelines. Open a pipeline file, view triggers, stages, jobs, and tasks as connected nodes, and edit the graph with live synchronization back to YAML.

Features

How It Works

  1. Open a supported Azure DevOps pipeline YAML file such as azure-pipelines.yml.
  2. Run Open as Pipeline Graph Editor from the Explorer context menu or command palette.
  3. Edit the graph and keep the YAML synchronized as you make changes.

Walkthrough

Open the graph editor

Open the graph editor

Add the first trigger node

Add the first trigger node

Add a stage

Add a stage node

Add a stage dependency

Add a stage dependency

Add a job

Add a job node

Add a job dependency

Add a job dependency

Add a task

Add a task node

Architecture

Module Responsibility
src/extension.ts VS Code extension entry point; registers the editor and command
src/PipelineEditorProvider.ts Custom text editor provider; owns the webview and document↔webview message bus
src/taskCatalog.ts Fetches and caches the Azure DevOps task catalog via OAuth
webview-ui/src/pipelineConverter.ts YAML ↔ ReactFlow graph conversion logic
webview-ui/src/App.tsx Root React component; wires graph canvas, panels, and menus
webview-ui/src/components/PipelineGraph.tsx ReactFlow canvas with node/edge rendering
webview-ui/src/components/PropertiesPanel.tsx Sidebar panel for selected node properties
webview-ui/src/components/ContextTaskMenu.tsx Right-click menu for inserting pipeline tasks
webview-ui/src/components/ContextEdgeMenu.tsx Edge-drop context menu shown when dragging from a stage or job node
webview-ui/src/components/ContextTriggerMenu.tsx Right-click menu shown on empty canvas to select a trigger type

API / Exports

pipelineToGraph(yaml: string): { nodes, edges }

Parses an Azure DevOps YAML pipeline string and returns ReactFlow nodes and edges representing the trigger → stage → job → task hierarchy.

graphToPipeline(nodes, edges): string

Serialises a ReactFlow graph back to Azure DevOps YAML.

insertTaskNode(input: InsertTaskInput, nodes, edges): { nodes, edges }

Appends a new task node to the graph, auto-connecting it to the deepest leaf, and returns the updated nodes and edges.

insertTriggerNode(nodes, edges, triggerType: TriggerType): { nodes, edges }

Adds (or replaces) the trigger node in the graph with the given trigger type, preserving all other nodes and edges.

class PipelineEditorProvider

VS Code CustomTextEditorProvider implementation. Use PipelineEditorProvider.register(context) to activate.

fetchTaskCatalog(): Promise<TaskCatalogItem[]>

Returns the full Azure DevOps task catalog for the configured organisation. Results are cached for the lifetime of the extension host.

clearTaskCatalogCache(): void

Clears the in-memory task catalog cache, forcing the next fetchTaskCatalog() call to re-fetch.

findTaskInputs(taskRef: string): TaskInputDefinition[]

Looks up the cached input schema for a task reference (e.g. DotNetCoreCLI@2). Returns an empty array if the catalog has not yet been fetched or the task was not found.

parseInputsRaw(raw: string | undefined): Record<string, string>

Parses a YAML map string (the inputsRaw field stored on task nodes) into a plain Record<string, string>. All values are coerced to strings. Returns {} for undefined, malformed YAML, or YAML that is not a mapping.

Template node architecture

Template references in Azure DevOps YAML (- template: path.yml) are parsed at all three pipeline levels:

Level YAML context Graph column Node templateLevel
Stage stages: list Stage (col 0) 'stage'
Job jobs: list (inside a stage or top-level) Job (col 1) 'job'
Step steps: list Task (col 2) 'step'

Template nodes store details.templatePath (the file path string) and details.parametersRaw (YAML-encoded parameters). Editing either field in the Properties panel immediately re-serializes the YAML.

Double-click a template node to navigate into the referenced file. The editor switches to the template’s graph and displays a breadcrumb trail at the top. Click any breadcrumb entry to navigate back.

Expanding a template inline

Right-click a template node and choose Expand template inline. The extension reads the referenced file and inserts its internal nodes (stages, jobs, or tasks) directly into the current graph in place of the template node. Expanded nodes are visually distinguished with:

To collapse the sub-graph back to the template placeholder, right-click any expanded node and choose Collapse back to template. All expanded nodes are removed and the original template node is restored, including its external connections.

Note: Expand/collapse is a view-only operation. It does not modify the pipeline YAML.

Getting Started

Prerequisites

Install & Build

npm install
npm run build

Press F5 in VS Code to launch the extension in a new Extension Development Host window.

Running Tests

npm test

Coverage

npm run test:coverage

Configuration

Changelog

Changelog