Docker Compose Visualizer

A VS Code extension that turns Docker Compose YAML into an interactive dependency graph (Cytoscape + Dagre: pan, wheel zoom, draggable nodes) plus a HUD-style roster.

Features

• Editor title button: When the active file looks like Compose (YAML + filename / services: probe), a circuit-board icon appears in the editor toolbar—same idea as Markdown preview—running Compose Visualizer: Open Preview.
• Activity Bar — Compose Viz: Sidebar Compose Hub with:
  • Preview: open the visualizer for the current editor (when detection matches).
  • Open file: file picker + recent opens (last 15 per workspace): short label, relative time, hover for full path and timestamp.
  • Compare: pick two files at once or one-by-one + recent compares with hover details.
• Compare two compose files: BLUE (left) vs RED (right) columns in the graph, Dagre layout per side then shifted so graphs face each other; dashed pair edges link services that exist in both files by name. Dual roster columns with Reveal in YAML targeting the correct file.
• Single file: resolve compose at workspace root (common filenames or dockerComposeVisualizer.composeFile), or Command Palette / picker.
• Live refresh when watched compose file(s) change on disk.
• Copy Mermaid to Clipboard: copies Mermaid diagram text for the current single-file dependency view (useful for READMEs, wikis, or other tools that render Mermaid).

Commands

Settings

Development

npm install
npm run bundle-graph  # builds media/graph-vendor.js (Cytoscape + dagre)
npm run compile

vscode:prepublish runs compile and bundle-graph.

Press F5, then use the Compose Viz activity bar view or Compose Visualizer: Open.

Example compose files

Try compare: Command Palette → Compose Visualizer: Compare Two Files → select sample-compose.yml then sample-compose.compare-b.yml (or pick both in one dialog).

Publishing

Telemetry: This extension does not collect telemetry.

One-time setup

1. Publisher — Create a publisher at Visual Studio Marketplace — Manage Publishers. Set "publisher" in package.json to that exact id (replace "local").
2. Git repository — Push this project to GitHub (or another host). Replace every your-username segment in repository, bugs, and homepage in package.json so README links resolve when vsce packages the extension.
3. Optional rename — The extension id is publisher.name. To ship as your-publisher.docker-compose-visualizer, change the "name" field once before the first public release (later renames are treated as a new extension).

Build a .vsix (local or CI)

@vscode/vsce is a dev dependency. vsce package runs vscode:prepublish for you (compile + bundle-graph).

npm install
npm run vsix

After a fresh clone, media/graph-vendor.js is missing until prepublish runs (it is gitignored). Do not ship without running prepublish or the graph webview will break.

Publish to the Marketplace

1. Create a Personal Access Token with Marketplace (Manage) scope (Azure DevOps account linked to your publisher).
2. Log in and publish:

npx vsce login <your-publisher-id>
npx vsce publish

Use vsce publish patch (or minor / major) to bump version and publish in one step.

Pre-flight checklist