Skip to main content

Radar & Skill Matrix Charts in Confluence with Mermaid (Copy-Paste)

· 4 min read
NGPilot

The team page says "we own the checkout" and the skills tab lists four words nobody updated. When the sprint needs a React engineer, the wiki can't say who is nearest. Meanwhile, the contributor guide links to a repo whose shape is a mystery ship in a fog of folders. Structure and capability both want drawing — and both draw from plain text.

Quick answer: track capabilities and structure in Confluence as Mermaid — radar-beta for multi-axis comparison across profiles, treeView-beta for repo and structure maps, railroad-ebnf-beta for syntax and grammar diagrams — rendered by Mermaid Plus for Confluence. Each chart answers a different "what's the shape": of the team, of the repo, of the language. This post gives you three copy-paste examples.

Why capability and structure want drawing​

Two kinds of knowledge docs die as lists but survive as shapes:

  • A radar curve is a profile. One curve per person, team, or option, scored across the same axes — the multi-dimensional comparison a bullet list blurs.
  • A tree is a map. Repo structure teaches by neighbors: what lives next to what, where the entry points are.
  • A railroad track is a language. Grammar reads best as a track with terminals and choices — legal input, drawn.

All three are text under the hood, so each stays editable exactly where the wiki keeps the narrative that explains it.

Copy-paste 1: the team's capability snapshot as radar​

Axes once, then one curve per profile, max 100 so scores mean the same thing across curves:

radar-beta
  axis Frontend, Backend, Data, DevOps
  curve Platform{80, 70, 55, 60}
  curve Data{45, 80, 90, 65}
  curve SRE{55, 70, 60, 90}
  max 100

Rendered Mermaid diagram

Three curves, four axes, one glance: Platform owns the frontend rim, Data owns the data axis, SRE owns the ops corner — and the middle (Backend) is where everyone overlaps. The radar turns the "who is nearest to React" question into a spatial read, not a tab-search.

Copy-paste 2: the repo as treeView​

Structure maps for contributor guides and architecture pages — indented and readable at a glance:

treeView-beta
  "checkout-service"
    "src"
      "http"
        "orders"
        "payments"
      "domain"
        "models"
      "infra"
        "db"
    "deploy"
      "helm"

Rendered Mermaid diagram

The tree is a map — where the HTTP handlers live, where the domain models sit, where the Helm charts deploy from — without a single import line. Onboarding reads the structure before the code, and the tree is the first page of that reading.

Copy-paste 3: a grammar as railroad​

Syntax and grammar documentation reads best as tracks — terminals in quotes, | for choice, */+ for repetition:

railroad-ebnf-beta
  title "Order Request"
  order = "POST" path ( "?q=" query )? ;
  path = "/orders" ;
  query = [A-Za-z0-9]+ ;

Order Request

The track shows the legal sentence: POST /orders optionally followed by a query parameter. Language designers and API authors put this next to the reference — a grammar that parses by eye beats a regex nobody dares to edit.

Choosing the structure-and-capability shape​

The 'shape' of the docDiagramMermaid keyword
Compare profiles along axesRadarradar-beta
Show a tree / folder structureTreeViewtreeView-beta
Show syntax / grammarRailroadrailroad-ebnf-beta
Show quantity flowingSankeysankey-beta

Radar answers "how capable, across axes," treeView answers "what lives where," railroad answers "what is legal input." The docs neighbors are on the same wiki: the capabilities behind the roadmap as prioritization charts and the team processes the skills feed as workflow swimlanes.

FAQ​

Does Confluence have a built-in radar or skill matrix tool? No — Confluence has no native charting of this kind. Mermaid Plus for Confluence renders radar-beta, treeView-beta and railroad-ebnf-beta from editable text with a live preview.

Radar, treeView or railroad — which does this doc need? Radar for multi-axis comparison, treeView for structure, railroad for grammar. The material's shape chooses the tool.

How do I represent team skills in a radar chart? Define axis dimensions, then one curve per profile with same-order scores and a fixed max.

When should I document a repo as treeView? When the structure teaches the codebase — entry points, folder roles, client boundaries. Keep it a map, not a file dump.

Render every Mermaid diagram type — radar, treeView, railroad, sankey, venn and 24 more — in Mermaid Plus for Confluence, free for up to 10 users.

Try Mermaid Plus for Confluence

All 29 Mermaid diagram types with live preview and one-click templates — free for up to 10 users.

Get it on the Atlassian Marketplace

Related guides