<camel-topology-diagram>

A local verification page for the topology-diagram web component — the inter-route view served by the dev console at ?mode=topology. Each section exercises a different rendering feature or edge case. All data is mocked — no running Camel instance required.

cd components/camel-diagram/src/
python3 -m http.server 8080 && open http://localhost:8080/test/resources/smoke-test-topology.html

Theme Variants

Theming

Auto (OS preference)

Follows prefers-color-scheme. No --ctd-* variables are set — the component picks light or dark based on your OS setting.

Light (forced)

Override via inline style="--ctd-bg:#fff; --ctd-fg:#1e293b; --ctd-edge:#94a3b8" to pin the light palette regardless of OS setting.

Dark (forced)

Override via style="--ctd-bg:#0f172a; --ctd-fg:#e2e8f0; --ctd-edge:#475569" to pin the dark palette regardless of OS setting. The node-box fill tracks --ctd-bg so labels never land light-on-light.

Custom font

Override via style="--ctd-font: 'Courier New', monospace" to verify that text measurement matches the font actually used by the SVG.

Route Pipeline

Multiple Routes

Generator → Processor → Validator, plus a disconnected route

A timer generator (orange trigger node) hands off to processor via direct:process, which forwards to validator via direct:validate. The isolated route has no inbound or outbound links, verifying that disconnected routes still render standalone. Mirrors the topology in TopologyDumperTest.

External Endpoints

external="true"

In/out boundary nodes around the route graph

With external="true" the component reads externalEndpoints and adds dashed gray boundary nodes: an inbound platform-http endpoint feeding orders-api, and an outbound kafka:shipped-orders endpoint that fulfilment publishes to. Verifies the three-band layout (external-in / routes / external-out) and the dashed external edges.

Live Metrics

metric="true"

Per-route exchange counters with long, truncated labels

With metric="true" each route box shows ✓ successes / ✗ failures in the top-right corner (green successes, red failures). The descriptions are deliberately long: they are trimmed to a clean ellipsis that reserves room for the metric badge, and hovering a trimmed box reveals the full text and underlying URI via a native tooltip. Reproduces the route-topology blog screenshot.

Large counters reserve room for the badge

This case keeps the default theme but pushes the exchange counters into multiple digits, so the first-line label must shrink enough to stay out from under the metric badge.