Timeline diagrams

Best for “how we got here” — a sequence of events on a horizontal time axis, grouped into eras. Unlike a Gantt chart (which is about durations and dependencies), a timeline is about moments: what happened, and in what order.

timeline
  title Product history
  section Founding
    2018 : Idea : First commit
    2019 : Seed round
  section Scale
    2021 : Series A : 10k users
    2023 : Series B : 100k users : Enterprise tier

The first keyword is timeline. title is optional. section <Name> groups the periods beneath it into a band, so related events read as one era.

Each period is a row: <time> : <event> [ : <event> … ].

• time — the label on the axis (a year, a quarter, a date — any short string).
• event — what happened at that time. Add more events under the same period by chaining them with : — each becomes its own card in that column.

Unrecognized lines are ignored, so a timeline never fails to render.

Annotations

In a vizzy fence after the diagram, target a period by its time label:

desc 2021: hit product-market fit
hint 2023: [Series B]("$40M led by BigVC")
style 2021 fill:green
note over 2023: hiring spree begins

• desc <time>: text — a caption under the period.
• hint <time>: … — a click-to-open info badge at the period’s top-right.
• style <time> fill:… — tint a single period with a palette colour.
• note over <time>: text — pin a sticky note to the period’s column.

See the directives reference for the full list.