Components Chart
journey
Native user-journey chart — sections of tasks, each tagged with actor(s) and a 1-5 mood. Renders as section bars, task chips, plumb lines, and mood faces.
Use when a process or experience needs charting as a horizontal sequence of moments, each scored for affect. Five variants reshape the same source list: default (Mermaid-style classic), heatmap (mood-tinted chips), curve (mood polyline with axis), swimlane (per-actor rows), weighted (chip widths proportional to +volume).
When to use
- Affect is part of the story. When a process matters not just for its steps but for how each step feels. The 1-5 mood score makes the emotional contour part of the chart instead of buried in narration.
- Actors share the trail. Use when multiple actors hand off through the sequence — customer, sales, onboarding, support. The
@actortokens make the handoff visible on every task chip. - One source, five lenses. Author the journey once and re-render under any variant. Heatmap for fastest scan, curve for trend, swimlane for actor load, weighted for traffic-mix — same data, different argument.
When not to use
- Process without affect. If the mood scores are all the same or arbitrary, the chart is doing less work than
timelineorlist-steps. Reserve journey for sequences where the affect changes meaningfully. - More than ten tasks. Past ten tasks the chips compress and the labels become unreadable. Group into fewer sections, or split the journey at a natural break.
- Volume tokens without weighted. The
+Nvolume token is meaningful only under theweightedvariant. On the other four it is parsed but invisible — strip it from the markdown or commit to weighted.
Slots
| Slot | Selector | Required | Description |
|---|---|---|---|
heading | h1, h2 | yes | Slide heading naming the journey or process. |
sections | ul > li | yes | Top-level li per section. Lead with the section name; nested ul carries tasks. Each task carries inline-code tokens: @actor (one or more), :N mood 1-5, optional +N volume (used by .weighted). |
Anatomy
┌─────────────────────────────────────────┐
│ header │
│ User journey heading │
│ │
│ [Awar] → [Sign] → [Use ] │
│ │
│ :) :| :) │
│ (satisfaction track) │
│ footer 1/19 │
└─────────────────────────────────────────┘Variants
heatmap — Heatmap — mood-tinted chips
Task chips are tinted by their mood score; plumb lines and faces are suppressed. The fastest variant to scan when the audience only needs to see which moments hurt.
<!-- _class: journey heatmap -->
## Heatmap · where the trial drops off.
- Evaluate
- Read case study `@prospect` `:5`
- Book demo `@prospect` `:4`
- Trial
- Trial signup `@prospect` `:3`
- Workspace setup `@user` `:1`
- Activate
- First report `@user` `:3`
- Daily use `@user` `:5` curve — Curve — mood polyline with axis
Renders the mood scores as a polyline over the task sequence with a y-axis scale and section bands behind. Use when the trend across the journey is the headline.
<!-- _class: journey curve -->
## Curve · the affect contour.
- Evaluate
- Read case study `@prospect` `:5`
- Book demo `@prospect` `:4`
- Trial
- Trial signup `@prospect` `:3`
- Workspace setup `@user` `:1`
- Activate
- First report `@user` `:3`
- Daily use `@user` `:5` swimlane — Swimlane — per-actor rows
One row per actor; a dot marks every task that actor participates in, sized by that task's mood. Use when the question is who carries the journey and where the handoffs land.
<!-- _class: journey swimlane -->
## Swimlane · who owns each moment.
- Evaluate
- Read case study `@prospect` `:5`
- Live demo `@prospect` `@sales` `:4`
- Trial
- Trial signup `@prospect` `:3`
- Workspace setup `@user` `@onboarding` `:1`
- Activate
- First report `@user` `:3`
- Daily use `@user` `:5` weighted — Weighted — chip widths by volume
Chip widths scale to the +volume token; chip colour still encodes mood. Two dimensions at once — schedule shape and traffic-mix — for journeys with skewed loads.
<!-- _class: journey weighted -->
## Weighted · where the traffic actually lands.
- Discover
- Search `@prospect` `:4` `+45`
- Referral `@prospect` `:5` `+18`
- Convert
- Pricing page `@prospect` `:3` `+12`
- Checkout `@prospect` `:2` `+10`
- Support
- Settings `@user` `:3` `+8`
- Help docs `@user` `:4` `+7`