Traffic sources (pie)
Share of visits by acquisition channel.
When someone asks "where does our traffic come from?", the honest answer is a five-slice pie chart, not a forty-row spreadsheet. This template breaks visits down by the standard acquisition channels — organic search, direct, referral, social, and paid — using percentage shares you can swap for your own numbers in under a minute.
The reason to build this in Mermaid rather than a screenshot from your analytics tool is longevity: the chart is plain text, so it lives in your monthly report template, renders in GitHub and Notion, diffs cleanly in version control, and updates by editing five numbers instead of re-cropping an image every month.
When to use this template
- Monthly marketing reports — lead the traffic section with the channel mix, then let the tables carry the detail; the pie is what people remember.
- Channel strategy discussions — a slide showing paid at 9% of traffic reframes a budget conversation faster than any spreadsheet.
- Stakeholder and investor updates — communicate acquisition mix to people who will never log into your analytics, without exporting dashboard screenshots.
How to adapt it
Replace the five values with this month's numbers — raw session counts work, since Mermaid normalizes them to proportions. Worthwhile variations:
- Switch to
pie showDataso the legend prints the underlying numbers alongside the computed percentages. - Re-cut the same chart by a different dimension: signups or revenue by channel usually tells a different story than traffic, and the comparison is the insight.
- Split Social into organic and paid (and add Email) if you mirror GA4's default channel groups, keeping the total slice count under seven.
You can also adjust labels and values in the visual editor, which regenerates clean Mermaid code — handy when a teammate who doesn't write Mermaid owns the monthly update.
Mermaid code
Copy it anywhere Mermaid is supported — GitHub, Notion, or your docs.
pie title Traffic by channel
"Organic search" : 42
"Direct" : 23
"Referral" : 14
"Social" : 12
"Paid" : 9
Frequently asked questions
- How do I make a pie chart in Mermaid?
- Start with the `pie` keyword, optionally followed by `title` and your chart heading on the same line. Then list one slice per line as a double-quoted label, a colon, and a number — `"Organic search" : 42`. Mermaid sizes the slices, assigns colors, and renders a legend automatically; there is no positioning or styling boilerplate to write.
- Do the values in a Mermaid pie chart need to add up to 100?
- No. Mermaid treats the numbers as relative weights and computes each slice's share itself, so you can paste raw counts straight from your analytics tool — 42,180 sessions versus 9,034 — without converting to percentages first. This template happens to sum to 100 because it uses percentage shares, but that's a readability choice, not a requirement.
- Can I display the actual numbers on the chart?
- Yes. Write `pie showData` instead of `pie` and Mermaid prints each value next to its legend entry, while the slices themselves are labeled with computed percentages. That combination works well for reports: readers see both the proportion at a glance and the underlying number for anyone who wants to check the math.
- What traffic channels should this chart include?
- Match the channel groupings your analytics tool reports so the chart reconciles with your dashboards. The standard set is organic search, direct, referral, social, and paid — GA4's default channel groups split further into organic social versus paid social and add email. Keep it to six or seven slices at most; beyond that a pie chart stops communicating.