Example timeline code
This is the Mermaid source loaded in the editor above. Copy it into a Markdown file inside a ```mermaid block and GitHub, GitLab, Notion or Obsidian will render it.
timeline
title History of the Web
section Early web
1991 : First website goes live
1993 : Mosaic browser
1995 : JavaScript : PHP
section Web 2.0
2004 : Facebook
2005 : YouTube : Google Maps API
section Modern web
2010 : Responsive design
2015 : ES2015 modules
2020 : Core Web VitalsTimeline syntax cheat sheet
| Syntax | What it does |
|---|---|
| timeline | Start a timeline diagram. |
| title Text | Timeline title. |
| 2020 : Event | A time period followed by an event. |
| 2020 : Event A : Event B | Several events in the same period. |
| section Name | Group periods under a coloured heading. |
How to make a Mermaid timeline
- 1Start the code with timeline and an optional title line.
- 2Add one period per line followed by a colon and an event.
- 3Add more events to a period with extra colons.
- 4Group periods into sections such as eras or project phases.
- 5Export as SVG or PNG, or copy a share link.
Periods and events
Each line has the form period : event, for example 2024 : Beta launch. The period is free text, so it can be a year, a quarter such as Q3 2025, or a phase name.
Add several events to one period on the same line, as in 2025 : Series A : New office, or put each extra event on its own line starting with a colon.
Sections
Write section Early days to group the periods below it under a heading, until the next section starts. Sections are useful for eras, product versions or project phases.
Periods are drawn in the order you write them, not sorted by date, so list them chronologically yourself.