TryMermaid

Mermaid Timeline Maker

Write timelines in Mermaid code and watch them render as you type. Start from the example below, then export PNG or SVG, share a link or embed the diagram.

Updated · Code editor with live preview

Timeline example

Rendering preview…

timeline
    title History of the web
    1991 : First website goes live
    1995 : JavaScript is created
    2004 : Web 2.0 era begins
    2008 : Google Chrome is released
Open this example in the editor Start a blank diagram

What is a timeline?

A timeline diagram lists events in chronological order, with one or more events under each date or period. It is a simple way to tell the story of a product, a project or a stretch of history. In Mermaid a timeline starts with the timeline keyword.

When to use a timeline

  • Company or product history pages
  • Release and version histories
  • Project retrospectives
  • Explaining how something changed over time

How to make a timeline in Mermaid

  1. Step 1

    Open the editor

    Open TryMermaid with the example on this page, or start a new diagram with timeline on the first line.

  2. Step 2

    Add periods and events

    Write one period per line followed by its events, separated by colons, such as 2008 : Google Chrome is released.

  3. Step 3

    Group into sections

    Add section lines, such as section 1990s, to group periods into eras that share a color.

  4. Step 4

    Export or share

    Check the live preview, then export the timeline as PNG or SVG or copy a share link.

Timeline syntax cheat sheet

ElementSyntaxWhat it does
Titletitle History of the webHeading above the timeline
Event2004 : EventPeriod and one event
Several events2004 : Event one : Event twoMore events for one period
Event on its own line: Another eventContinues the period above
Sectionsection 1990sGroups periods into an era

Timeline FAQ

Can one date have more than one event?

Yes. Either chain events on the same line, such as 2004 : Event one : Event two, or put each extra event on its own line, starting with a colon, directly below the period.

What is the difference between a timeline and a Gantt chart?

A timeline lists events in order without durations, which suits histories and changelogs. A Gantt chart places tasks on a real calendar with start dates, durations and dependencies, which suits planning future work.

Other Mermaid diagram types