> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/mermaid-js/mermaid/llms.txt
> Use this file to discover all available pages before exploring further.

# Timeline diagrams

> Create chronological timelines to visualize events and periods with Mermaid.

A timeline is a type of diagram used to illustrate a chronology of events, dates, or periods of time. It shows the passing of time and the relationship between events.

<Note>
  Timelines are experimental. The syntax is stable except for icon integration.
</Note>

## Basic example

```mermaid theme={null}
timeline
    title History of Social Media Platform
    2002 : LinkedIn
    2004 : Facebook
         : Google
    2005 : YouTube
    2006 : Twitter
```

## Syntax overview

Timelines start with the `timeline` keyword, followed by an optional title and time periods with events:

```
timeline
    title [Title text]
    {time period} : {event}
```

### Multiple events per period

You can add multiple events to a single time period:

```
{time period} : {event} : {event}
```

or on separate lines:

```
{time period} : {event}
              : {event}
              : {event}
```

### Example

```mermaid theme={null}
timeline
    title History of Social Media Platform
    2002 : LinkedIn
    2004 : Facebook : Google
    2005 : YouTube
    2006 : Twitter
```

<Note>
  Both time periods and events are simple text, not limited to numbers.
</Note>

## Sections and ages

Group time periods into sections using the `section` keyword:

```mermaid theme={null}
timeline
    title Timeline of Industrial Revolution
    section 17th-20th century
        Industry 1.0 : Machinery, Water power, Steam <br>power
        Industry 2.0 : Electricity, Internal combustion engine, Mass production
        Industry 3.0 : Electronics, Computers, Automation
    section 21st century
        Industry 4.0 : Internet, Robotics, Internet of Things
        Industry 5.0 : Artificial intelligence, Big data, 3D printing
```

<Tip>
  All time periods and events under a section follow a similar color scheme, making relationships easier to see.
</Tip>

## Text wrapping

Long text is automatically wrapped. You can also force line breaks with `<br>`:

```mermaid theme={null}
timeline
        title England's History Timeline
        section Stone Age
          7600 BC : Britain's oldest known house was built in Orkney, Scotland
          6000 BC : Sea levels rise and Britain becomes an island.<br> The people who live here are hunter-gatherers.
        section Bronze Age
          2300 BC : People arrive from Europe and settle in Britain. <br>They bring farming and metalworking.
                  : New styles of pottery and ways of burying the dead appear.
          2200 BC : The last major building works are completed at Stonehenge.<br> People now bury their dead in stone circles.
                  : The first metal objects are made in Britain.Some other nice things happen. it is a good time to be alive.
```

## Styling options

### Individual time period styling (default)

By default, each time period has its own color scheme:

```mermaid theme={null}
timeline
    title History of Social Media Platform
      2002 : LinkedIn
      2004 : Facebook : Google
      2005 : YouTube
      2006 : Twitter
```

### Unified color scheme

Disable multi-color with the `disableMultiColor` option:

```mermaid theme={null}
---
config:
  timeline:
    disableMulticolor: true
---
timeline
    title History of Social Media Platform
      2002 : LinkedIn
      2004 : Facebook : Google
      2005 : YouTube
      2006 : Twitter
```

## Customizing colors

<Accordion title="Theme variables">
  Customize colors using `cScale0` to `cScale11` theme variables:

  ```mermaid theme={null}
  ---
  config:
    themeVariables:
      cScale0: '#ff0000'
      cScaleLabel0: '#ffffff'
      cScale1: '#00ff00'
      cScale2: '#0000ff'
      cScaleLabel2: '#ffffff'
  ---
  timeline
      title History of Social Media Platform
        2002 : LinkedIn
        2004 : Facebook : Google
        2005 : YouTube
        2006 : Twitter
        2007 : Tumblr
        2008 : Instagram
        2010 : Pinterest
  ```
</Accordion>

<Note>
  Mermaid supports up to 12 sections with unique colors. After 12 sections, the color scheme repeats.
</Note>

## Complete example

Here's a comprehensive timeline with multiple sections:

```mermaid theme={null}
timeline
    title MermaidChart 2023 Timeline
    section 2023 Q1 <br> Release Personal Tier
      Bullet 1 : sub-point 1a : sub-point 1b
           : sub-point 1c
      Bullet 2 : sub-point 2a : sub-point 2b
    section 2023 Q2 <br> Release XYZ Tier
      Bullet 3 : sub-point <br> 3a : sub-point 3b
           : sub-point 3c
      Bullet 4 : sub-point 4a : sub-point 4b
```

<Tip>
  Use timelines to visualize project milestones, historical events, or any chronological sequence of events.
</Tip>