Preview Updated 2026-05-10

Connection graph

Node-and-edge relationship graph. Nodes without explicit coordinates are evenly placed around a circle.

Basic usage

Data is passed in via props. Pure SVG rendering, no third-party chart library dependency. Colors come from the --viz-1..8 tokens and are colorblind-friendly.

src/App.vue vue

<CfConnectionGraph ... />

src/App.tsx tsx

<CfConnectionGraph ... />

Microservice topology

Seven services and seven edges showing a typical gateway dispatch pattern.

src/App.vue vue

<CfConnectionGraph :nodes="nodes" :edges="edges" />

src/App.tsx tsx

<CfConnectionGraph nodes={nodes} edges={edges} />

API

Prop	Type	Default	Description
`nodes`	`GraphNode[]`	`—`	{ id, label, x?, y?, colorIndex?, size? }[]
`edges`	`GraphEdge[]`	`—`	{ source, target, weight?, colorIndex? }[]
`showLabels`	`boolean`	`true`