Chris Collins

Tools · containers

Compose visualiser

Paste a docker-compose.yml and see its services, networks, volumes, ports and depends_on as a diagram, the start-up order, the effective config after ${VAR} interpolation and profiles, and a kompose-style Kubernetes translation.

Added

Works with

How to use it

Paste a docker-compose.yml (or open one) and, if it uses ${VARIABLES}, the .env next to it. The diagram, start-up order, effective config and Kubernetes manifests follow as you type. YAML is parsed in the browser with js-yaml, as in the other YAML tools; nothing is uploaded.

How to use it

⛶ Full screen (or F) gives the diagram the whole screen — the browser’s full screen where it is allowed, otherwise a full-window layer (iPhone). Fit to width scales the diagram into the space, 100% keeps its size and scrolls; on a wide screen the docker-compose.yml editor sits in a column beside it, and ◫ Panels hides it. Escape leaves.

  • Diagram — services laid out by start-up order (what a service depends on sits to its left), with their image or build context, published ports (amber when on all interfaces), bind mounts, healthcheck and profiles; coloured squares for the networks each is on; named volumes as cylinders wired to where they’re mounted; depends_on arrows labelled with their condition — started, healthy (green) or completed (purple). Click a service for its effective settings.

  • Start-up order — the levels Compose starts in parallel, with what each waits for. Dependency cycles are found (as strongly connected components) and flagged; Compose refuses to start them.

  • Profiles — tick profiles to enable the services that carry them; services without profiles always run. A service that depends on one disabled by profiles is reported, since docker compose up fails on it.

  • Effective config — what docker compose config would print: values interpolated from the .env (${VAR}, ${VAR:-default}, ${VAR-default}, ${VAR:?error}, ${VAR:+alt}, $$), filtered by profiles, with long-form ports, depends_on and environment and the default network and project-prefixed names filled in; plus a table of every variable used and where its value came from. Unset variables and :? errors appear above.

  • Kubernetes — a translation modelled on kompose: a Deployment per service (or a Pod for restart: "no"), a Service for its ports (ClusterIP, or NodePort or LoadBalancer for published ports), a PersistentVolumeClaim per named volume, ConfigMaps for env_file and bind-mounted files, Secrets for secret-looking variables (placeholders), probes from healthchecks, resources from deploy.resources, and a list of everything that doesn’t translate: depends_on ordering, bind-mounted directories, networks, the Docker socket, container_name, logging drivers, ulimits and more. Check it in the Kubernetes linter opens the result in the Compose and Kubernetes checker.

Limits

  • The layout is automatic and aims for readable, not perfect: large files make a wide diagram that scrolls sideways.

  • Variables come only from the .env box — not your shell — and include:, extends: and multiple -f files are not merged.

  • The healthcheck in an image (not in the Compose file) can’t be seen, so service_healthy on such a service is reported as missing a healthcheck.

  • The Kubernetes output is a starting point, as kompose’s is: review it, replace placeholders, and run kubectl apply --dry-run=server before using it.

Related: Compose and Kubernetes checker (lint the same file), docker run builder (Compose → docker run commands), Dockerfile explainer, YAML/JSON converter.

Linking to an example

Share link copies a link to what you have: a preset by name, otherwise the Compose file and .env packed into ?s=, with secret-looking values replaced (an environment entry like DB_PASSWORD: hunter2 becomes DB_PASSWORD: "${DB_PASSWORD}", and secret .env values are emptied). Tabs: #diagram, #config, #k8s.

Parameter Meaning Example

preset

One of the presets below

preset=healthy

profiles

Profiles to enable, comma-separated

profiles=debug
preset= Shows

wordpress

WordPress and MySQL with two named volumes, a port from ${WP_PORT:-8000}

stack

A web front end, API (two replicas), worker, Redis and Postgres on two networks, .env interpolation with ${VAR:?…}, and an Adminer service behind the debug profile

healthy

A database with a healthcheck, a migration that must complete, an app that waits for both and a proxy that waits for the app to be healthy

For example ?preset=stack&profiles=debug#diagram.

Runs entirely in your browser; nothing you type leaves this page.