Skip to main content

Roadmap & Prioritization Charts in Confluence with Mermaid

· 5 min read
NGPilot

The quarter plan is a spreadsheet with thirty rows, color-coded by priority, sorted by a column half the team doesn't trust. The kickoff asks "what are we doing when — and why this first?" and the answer requires parsing three tabs. Planning outputs are shapes: schedules stack as bars, priorities sit on a 2x2, flows bundle as ribbons. The spreadsheet stores them poorly; Mermaid draws them as text.

Quick answer: put the quarter plan in Confluence as Mermaid — gantt for when things happen, quadrantChart for which gets built first, sankey-beta for where the budget goes — rendered by Mermaid Plus for Confluence. Three charts, three planning questions, one editable page. This post gives you three copy-paste examples.

Why planning needs shapes, not sorted rows​

Plans fail in the distribution — where the bars overlap, which item is top-left on effort/impact, how much flow is leaking to overrun. Three questions need three chart shapes:

  • When? → Gantt. Bars, sections, dependencies, milestones. The schedule is the answer.
  • Which first? → Quadrant. Every item plotted on effort vs impact. The top-left block is the shortlist.
  • Where does it go? → Sankey. Quantities flowing from source to use. The leak is the answer.

All three are wrung out of the same planning input — items, dates or effort, and amounts — which means all three live on one roadmap page and update in the same pass.

Copy-paste 1: the quarter's Gantt​

Sections group the workstreams; task lines carry durations; after links the blockers. Dates in the YYYY-MM-DD format Mermaid expects:

gantt
  title Q3 Roadmap
  dateFormat YYYY-MM-DD
  section Platform
    Orders API      :a1, 2026-10-01, 15d
    Payments revamp :after a1, 20d
  section Data
    Reporting dash  :b1, 2026-10-08, 18d
    Export refresh  :after b1, 12d
  section Release
    Q3 launch       :milestone, 2026-11-14, 0d

Q3 Roadmap

The Gantt answers "when" at the planning kickoff: the API bars flow into release, the data track shares the same end-date window, and the milestone marks the drop-dead. When a date moves, the review changes one number and the bar redraws.

Copy-paste 2: which first — effort impact quadrant​

The 2x2 that replaces the color-coded column. Plot each candidate against effort (x) and impact (y); the top-left is the obvious first slice:

quadrantChart
  title Prioritize
  x-axis Low Effort --> High Effort
  y-axis Low Impact --> High Impact
  quadrant-1 Do now
  quadrant-2 Big bets
  quadrant-3 Fill-ins
  quadrant-4 Cut
  "Payment revamp": [0.65, 0.45]
  "Orders API": [0.55, 0.35]
  "Reporting dash": [0.4, 0.25]
  "Export refresh": [0.2, 0.15]

Prioritize

Unread the labels for now — the positions are the decision: two items cluster low-effort (bottom half), one rides the borderline, and "Payment revamp" sits firmly in Do-now territory. The quadrant is the tie-breaker the sorted spreadsheet cannot provide, because it shows the relationship between effort and impact, not a ranking.

Copy-paste 3: where the budget goes — Sankey​

Sankey ribbons show quantities moving from source to use, and the width of a ribbon is the magnitude — the leak is visually loud:

sankey-beta
Budget,Engineering,120
Budget,Infra,80
Budget,Marketing,40
Infra,Hardware,30
Infra,Cloud,50

Rendered Mermaid diagram

Follow the widths: Engineering takes the largest slice, Infra splits into Hardware and Cloud, and the single thin Marketing ribbon is the whole marketing story. Sankey answers "where does the budget go without a legend" — the flow is sized by value, the way a pie chart shows proportion per slice.

Building the roadmap page​

The three charts are one planning cycle rendered three ways:

  1. Gantt from the calendar. Sections = workstreams, bars = items, after = blockers. Update dates in the planning meeting.
  2. Quadrant from the debate. Every item gets coordinates; the argument happens over the plot, not over a ranked list.
  3. Sankey from the ledger. Amounts per line; the ribbons expose where priority-money actually flows.

Keep the roadmap page's siblings close: the decision records behind the priorities as a requirement traceability and the sprint view of the same work as a Kanban board.

FAQ​

Does Confluence have a built-in Gantt or roadmap chart tool? No — Confluence has no native charting of this kind. Mermaid Plus for Confluence renders gantt, quadrantChart and sankey-beta from editable text with a live preview.

Gantt, quadrant or Sankey — which does this decision need? Gantt = when (schedule, dependencies, milestones). Quadrant = which first (effort vs impact). Sankey = where it goes (quantity flows). One roadmap page holds all three.

How do I show dependencies in a Mermaid Gantt? Reference an earlier task with after <column> or mark the critical path with crit. The dependency is drawn, not just implied by dates.

How do I keep the roadmap chart from going stale? Edit it in the same meeting that changes the plan — text means the diff is the plan update, and the chart survives as the wiki's living record.

Render every Mermaid diagram type — gantt, quadrant, sankey, pie, XY 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