timelinev0.9.4
What is a Timeline diagram?
Chronological events grouped by era.
timeline
When to use it
Use a Timeline when…
01
Product release histories
02
Company milestone slides
03
Anything chronological without dependencies
Syntax basics
The minimal syntax
Copy this and you have a working timeline. Build from here.
timeline.mmd
timeline title Mermaid milestones 2014 : Initial release 2018 : Sequence + Gantt 2022 : ELK renderer 2025 : Block, C4, layout API
Common patterns
Patterns worth memorizing
Multiple events per year
`2024 : event A : event B` puts both events in the same column.
Sections
`section Era` groups years and applies a band color.
Mix dates and labels
You can use any string before the `:` — months, quarters, eras.
Common gotchas
The things that will trip you up
Mermaid silently ignores misspellings — these are the failures we see most.
- 01
No dependency arrows; for that, use Gantt.
- 02
Long events overflow vertically; split into multiple rows.
- 03
Date sorting is left-to-right by source order, not by parsed value.
Related diagram types