journey
ProgressionTimelineStructure
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.
Variant
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=).
processassessmentwalkthrough
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.
- The poles are a DEFAULT, not an assertion.
PainandDelightare right for a customer journey and wrong for an ops, cost or risk one — a scale's polarity is not something the engine can derive. Write a label set outside the list —[{1, Friction}, {5, Flow}]— and the poles are renamed, on the slide and in the key's accessible name. Only the two poles take words; the steps between carry their number. - Actors share the trail. Use when multiple actors hand off through the sequence — customer, sales, onboarding, support. A second
{who=…}record on a task makes 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
volume=value is meaningful only under theweightedvariant. On the other four it is parsed but invisible — strip it from the markdown or commit to weighted.
Common mistakes
- Keying a middle step in a label set, e.g.
[{3, Neutral}]. Only the two POLES are keyable —1and5. The steps between show their number, which IS the scale; a word on step 3 would compete with the number beside it.lint:decksays so, quoting the manifest's own reason. - Treating the mood scale as if 1 were best instead of worst. The mood scale runs 1 (worst) to 5 (best) — authoring it inverted flips heatmap tinting and the curve variant's trend direction.
- Assuming an omitted
mood=leaves the task unplotted. Omittingmood=silently defaults the task to a neutral mood of 3 — it still plots normally under every variant, just without a deliberate score. Always give an explicitmood=so the chart reflects real affect instead of a silent default.
Authoring
<!-- _class: journey -->
## Walking through my Tuesday morning.
- Wake up
- Hit snooze `{who=me, mood=2}`
- Make coffee `{who=me, mood=4}`
- Commute
- Subway `{who=me, mood=1}`
- Walk `{who=me, mood=5}`
- Work
- Standup `{who=team, mood=3}`
- Deep work `{who=me, mood=5}`Slots
| Slot | Selector | Required | Description |
|---|---|---|---|
key | p > code:only-child | no | OPTIONAL label set renaming the mood scale's two POLES: [{1, Friction}, {5, Flow}], one inline-code span alone in its paragraph, outside the journey list. Only 1 and 5 are keyable — the steps between them show their number, which is the scale itself. The defaults Pain and Delight are declared in this manifest's labelSet; naming one pole leaves the other on its default. The rename reaches the key's accessible name too, so a screen reader and the slide cannot disagree. |
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 one step record, {who=actor, mood=N, volume=N}: who the actor (a second actor is a second record, {who=sales}), mood 1-5, optional volume (used by .weighted). |
Anatomy
┌─────────────────────────────────────────┐
│ header │
│ User journey heading │
│ │
│ [Awar] → [Sign] → [Use ] │
│ │
│ :) :| :) │
│ (satisfaction track) │
│ footer 1/19 │
└─────────────────────────────────────────┘Variant decision rule
- default (no modifier) — The classic Mermaid-style read — the plainest, most familiar rendering of the sequence.
heatmap— The fastest scan matters more than a precise trend — mood-tinted chips let the audience read the emotional contour at a glance.curve— The trend across the journey is the point — a mood polyline with an axis makes the trajectory, not just each moment, legible.swimlane— Actor load and handoff is the story — splits the journey into one row per actor.weighted— Traffic volume through each step matters as much as mood — chip width encodes thevolume=value.
Variants
heatmap — heatmap
Stages shade by score.
<!-- _class: journey heatmap -->
## heatmap shades the stages by score.
- Evaluate
- Read case study `{who=prospect, mood=5}`
- Book demo `{who=prospect, mood=4}`
- Trial
- Trial signup `{who=prospect, mood=3}`
- Workspace setup `{who=user, mood=1}`
- Activate
- First report `{who=user, mood=3}`
- Daily use `{who=user, mood=5}`curve — curve
A sentiment line rides the stages.
<!-- _class: journey curve -->
## curve draws the sentiment line.
- Evaluate
- Read case study `{who=prospect, mood=5}`
- Book demo `{who=prospect, mood=4}`
- Trial
- Trial signup `{who=prospect, mood=3}`
- Workspace setup `{who=user, mood=1}`
- Activate
- First report `{who=user, mood=3}`
- Daily use `{who=user, mood=5}`swimlane — swimlane
One lane per actor.
<!-- _class: journey swimlane -->
## swimlane splits the journey by actor.
- Evaluate
- Read case study `{who=prospect, mood=5}`
- Live demo `{who=prospect, mood=4}` `{who=sales}`
- Trial
- Trial signup `{who=prospect, mood=3}`
- Workspace setup `{who=user, mood=1}` `{who=onboarding}`
- Activate
- First report `{who=user, mood=3}`
- Daily use `{who=user, mood=5}`weighted — weighted
Stage size carries weight.
<!-- _class: journey weighted -->
## weighted sizes the stages by importance.
- Discover
- Search `{who=prospect, mood=4, volume=45}`
- Referral `{who=prospect, mood=5, volume=18}`
- Convert
- Pricing page `{who=prospect, mood=3, volume=12}`
- Checkout `{who=prospect, mood=2, volume=10}`
- Support
- Settings `{who=user, mood=3, volume=8}`
- Help docs `{who=user, mood=4, volume=7}`Related
- list-stepsprocess needs descriptive body per step, no chart
- ganttschedule of overlapping tasks across lanes
- kanbancurrent status by stage rather than sequence over time