Process Map

Turn any ordered sequence into a clean, connected diagram learners can actually engage with. Process Map lays out color-coded stages—each with its own icon and label—linked by a gradient rail, and stacks to a vertical layout on phones.

Reach for it whenever order matters: a workflow, project phases, a customer journey, a timeline, or the steps of a model. Show the full map at a glance, let learners click each stage to reveal its details in a card below (with completion held until they've explored every one), or spotlight a single stage to show exactly where they are. Shape colors, icons, corner rounding, and connector thickness are all author-controlled, and it's keyboard navigable and screen-reader friendly out of the box.

All four presets start with five stages. You can add or remove stages.

• Pick Full Process when learners need the whole sequence at a glance.
• Pick Full Process (Click-to-Reveal) when each stage needs a detail card below the map.
• Pick Single Stage Highlight when you want to show one current stage.
• Pick Single Stage with Details when the current stage also needs supporting text.

Add the stage label and the text learners see in the card. Then choose the stage icon and colors.

You can also set card color and adjust icon position. Use the author controls for corner rounding and connector thickness when the map needs a different shape.

Learners see the stages connected by a gradient rail. Each stage has its own icon, label and color.

In the detail presets, learners click a stage to open its card below the map. Completion is held until they have explored every stage.

• Pick Process Steps when learners should move through a horizontal step navigator.
• Pick Interactive flow chart when learners explore choices, consequences and branching outcomes.
• Pick Horizontal timeline when change over time or milestone progress is the main point.