Skip to main content

​
Capability Dashboards: Show Hierarchy, Not Just Lists

​
The Problem

MERIDIAN’s capability detail pages listed agents, skills, and councils as flat grids. For the first power given to every council agent, this undersold the concept. Capabilities are the connective tissue between councils (parent) and skills (child) — but the page showed none of that structure.

​
What Changed

Transformed capability pages from flat listings into analysis dashboards with three Mermaid diagrams generated at build time:
  1. Hierarchy flowchart (TD) — Councils at top, capability node in centre, skills at bottom. Agent designations on the edges. Shows at a glance who has this capability and what enhances it.
  2. Invocation sequence — How a capability flows at runtime: Council dispatches → Chain assigns → Agent invokes → Skill enhances. Makes the abstract concrete.
  3. Entity relationship diagram — Cardinality of Council ⊢ Agent ⊣ Capability ⊣ Skill. Structural reference.
Plus: council links upgraded from plain text (“athena . docs”) to rich cards with coverage percentages, martian references, and capability penetration bars.

​
Why It Matters

Capabilities are the atomic unit of agent competency. When a user asks “what can the Analysis capability do?”, showing 27 agents in a flat grid answers “who has it” but not “how it fits.” The hierarchy diagram answers both questions instantly. The sequence diagram answers “how it works.” The ERD answers “what connects to what.”

​
The Pattern

Build-time diagram generation — pure functions that return Mermaid strings from data already loaded for the page. Zero runtime cost, zero client-side data fetching. CDN script in <head>, mermaid.run() renders the pre-computed strings. This pattern scales to any entity-with-relationships in a documentation site: show the graph, not just the list.