DockerComposeVisualizer

Created by Hadi Hajihosseini.

See your docker compose stack boot in dependency order — live health, ports, and logs — inside VS Code and Cursor.

> > *Live dependency tiers, per-service health and ports, status-bar progress, and auto-tracked `docker compose up` in the integrated terminal.*

Stop guessing which service is blocking the rest. DockerComposeVisualizer parses your compose file, lays out services by dependency tier, and updates each card as containers move through creating → starting → healthcheck → healthy. Dependencies light up when their parents are ready, so you can see why something is still waiting.

Works in Visual Studio Code (1.93+) and Cursor.

Table of contents

• Features
• Requirements
• Getting started
• How it works
• Commands
• Configuration
• Workspace data
• Development
• Feedback

Features

• Live dependency tree — Services grouped by depends_on tiers with color-coded states and optional tier dividers.

• Per-service dependency list — See which upstream services each card is waiting on, with running / in-progress / not-started indicators.
• Auto-track on compose up — Detects docker compose up (and custom patterns) in integrated terminals and starts tracking automatically.
• Auto-discover running stacks — Polls docker compose ls and attaches when a stack for your workspace is already up.
• Status bar progress — Segmented bar showing how many services have reached your configured “up” state.

Status bar while running up command

Status bar when the containers are running correctly

• One-click logs — Open docker logs -f for a service in a dedicated terminal (reused per service by default).

• Port & link buttons — Open published ports on localhost; configure custom URLs per service.

Custom service links

Auto-detected port links

- **Boot timer** — Optional per-card timer from “deps ready” until healthy. - **Run / Stop (optional)** — Start or stop the stack from the sidebar without leaving the editor. - **Sidebar settings** — Grid columns, legend, logs button, dependency list, and more — saved per workspace.

Requirements

Getting started

1. Install the extension (from the marketplace when published, or see Development to run from source).
2. Open a workspace that contains your compose YAML.
3. Open the DockerComposeVisualizer view on the activity bar (graph icon).
4. Pick a compose file if prompted, or run your stack:

   docker compose -f docker-compose.yml up
   

5. Tracking starts automatically when dockerComposeFlow.autoTrackOnComposeUp is enabled (default), or use DockerComposeVisualizer: Track Running Stack from the Command Palette.

Click the status bar item to open the sidebar or choose a compose file. Click a service’s logs icon to stream container logs.

How it works

compose.yaml  →  parse depends_on tiers  →  poll docker inspect
                      ↓
              webview cards + status bar
                      ↓
         terminal sniffer (compose up) / compose ls discovery

1. Parse — Reads services and depends_on (including conditions where present) and builds a tiered layout.
2. Track — Matches containers by Compose project + service labels (com.docker.compose.*).
3. Reconcile — Polls health on an interval; optional immediate reconcile when the compose terminal closes.
4. Unlock — A service’s “can run” state reflects whether dependency conditions are met, so cards pulse when they become runnable.

Service states (legend)

Commands

Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P) and search for DockerComposeVisualizer.

Configuration

All settings live under dockerComposeFlow.*. Open Settings and search for DockerComposeVisualizer, or edit settings.json.

Tracking & discovery

Sidebar UI

Logs & links

Example — custom service links in settings.json:

{
  "dockerComposeFlow.serviceLinks": {
    "frontend": [
      { "label": "App", "url": "http://localhost:3000" }
    ],
    "api": "http://localhost:8000/docs"
  }
}

Per-project links can also be edited from each card’s settings icon; they are stored in .dockerComposeFlow/service-links.json.

Workspace data

The extension stores workspace-specific data under .dockerComposeFlow/ (gitignored by default):

Development

Build & run

npm install
npm run compile

Press F5 in VS Code/Cursor to launch an Extension Development Host with this folder as extensionDevelopmentPath.

Scripts

Package

npm install -g @vscode/vsce
vsce package

Produces a .vsix for local install. out/ must be compiled first; src/ is excluded via .vscodeignore.

License

Copyright © 2026 Hadi Hajihosseini. DockerComposeVisualizer Source License (see LICENSE).

• You may use, modify, and run this project for yourself or your team.
• Contributions are welcome via pull requests to the official repository.
• You may not publish this code (or derivatives) as an extension or plugin for any editor or IDE (VS Code, Cursor, JetBrains, Vim/Neovim, etc.) on any marketplace or registry without permission from the copyright holder.

Feedback

Found a bug or have an idea? Open an issue or pull request on the project repository.

DockerComposeVisualizer — created by Hadi Hajihosseini. Clarity for multi-service local development, without leaving the editor.