Mermaid code
timeline
title Product launch plan
section Three months before
Private beta with 20 customers : Collect pricing feedback
section Two months before
Freeze scope : Write launch blog post : Brief sales team
section One month before
Press and partner outreach : Load test at 10x traffic
section Launch week
Flip feature flag for all accounts : Publish announcement : Monitor dashboards
section One month after
Retro on launch metrics : Plan follow-up releasePaste this into any tool that renders Mermaid, or into the editor to change the theme and export PNG or SVG. Syntax reference: Timeline guide.
What this diagram shows
Each section is a period relative to launch day, and the indented line under it lists the events for that period separated by colons. Two months before carries three events on one line, which Mermaid stacks vertically under the period label. The final section, One month after, is the part most launch plans omit and the reason this diagram reads as a plan rather than a countdown.
A timeline suits this better than a Gantt chart because the periods are coarse and the point is sequence, not duration.
How to adapt it
- Replace relative section names with actual months when the launch date is fixed.
- Add a
section Launch daywith hour-level events if the day itself has a run-of-show. - Limit each section to three events; more than that and the column grows taller than the page.
- Move engineering-only tasks to a separate timeline and keep this one for cross-team visibility.
FAQ
How are multiple events in one period written?
On the same line, separated by : . The first text is the period label and each following segment becomes an event stacked below it. Avoid colons inside the event text itself.
Can I color one section differently to mark launch week?
Sections already alternate colors automatically. For a specific highlight, override the theme variables cScale0 through cScale11 in an init directive at the top of the diagram.