ServiceMap

Organism

Services and the calls between them on a deterministic layered layout (no graph library): rate, error and latency badges, pan and zoom, roving-focus keyboard navigation along the call graph, and a selection slot. Errors are never colour alone: a warning icon and percentage, a heavier border and a dashed edge.

Preview

Code

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

Preview

payments: called by 1, calls 2.

Code

<ServiceMap nodes={nodes} edges={edges} renderSelection={(node, { incoming, outgoing }) => <Panel node={node} />} />

Preview

Code

<div dir="rtl"><ServiceMap nodes={nodes} edges={edges} /></div>

ServiceMap

Default

With a selection and a custom panel

Right to left