Timeline
A timeline is a type of diagram used to illustrate events, dates, or time periods. It is usually rendered graphically to show the passage of time, and is usually organized in chronological order. A basic timeline lists events in chronological order, usually using dates as markers. A timeline can also be used to show the relationships between events, such as the relationships between the life events of a person.
Copy
Embed
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook
: Google
2005 : YouTube
2006 : Twitter
Syntax
The syntax for creating a timeline is simple. It needs to begin with the timeline syntax to let mermaid know that you want to create a timeline.
Afterwards, a title can be added to the timeline. This is done by adding the title syntax followed by the title text.
Then add the timeline data, which always starts with a time period, followed by a colon, and then the event text. You can optionally add another colon, followed by the event text. Therefore, each period can have one or more events.
Copy
Embed
{time period} : {event}
Or
Copy
Embed
{time period} : {event} : {event}
Or
Copy
Embed
{time period} : {event}
: {event}
: {event}
Note: both periods and events are simple text and are not limited to numbers.
mermaid.grammar_timeline_note_see_up_exemport_s
Copy
Embed
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
This way we can use a text outline to generate a timeline. The order of the periods and events is important, because it will be used to draw the timeline. The first period will be placed on the left side of the timeline, and the last period will be placed on the right side of the timeline.
When multiple events occur in the same period, the first event will be at the top of that particular period, and the last event will be placed at the bottom of that particular period.
Grouping time periods
You can group time periods into different sections/eras. This can be done by adding the section syntax followed by the section name.
All subsequent periods will be placed in this section until a new section is defined.
If no section is defined, all periods will be placed in the default section.
mermaid.grammar_timeline_default_see_one_some_part
Copy
Embed
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
As you can see, periods are placed in sections, and the sections are arranged in the order in which they were defined.
All periods and events under a given section follow a similar color scheme; this is done to make it easier to see the relationships between periods and events.
Line wrapping for long periods or long events
By default, if the text of periods and events is too long, it wraps automatically.
You can also use a forced line break.
mermaid.grammar_timeline_force_one_this_time_long
Copy
Embed
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.
Copy
Embed
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
Styling of periods and events
As mentioned earlier, each section has a color scheme, and every period and event under each section follows the same color scheme.
Style the periods individually, that is, each period (and its corresponding events) has its own color scheme.
Copy
Embed
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
Note: no section is defined, and each period and its corresponding events have their own color scheme.
Custom color scheme
You can customize the color scheme using the cScale0 to cScale11 theme variables, which will change the background color. Mermaid allows you to set unique colors for up to 12 sections, where the cScale0 variable controls the color of the first section or period, the cScale1 variable controls the color of the second section, and so on. If there are more than 12 sections, the color scheme will start to cycle.
If you also want to change the foreground color of a section, you can use the theme variables corresponding to the cScaleLabel0 to cScaleLabel11 variables.
Note: the default values of these theme variables are taken from the selected theme. If you want to override the defaults, you can use the initialize syntax to add custom theme variable values.
Example:
Now let's override the default values of the cScale0 to cScale2 variables:
Copy
Embed
---
config:
logLevel: 'debug'
theme: 'default'
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
Themes
Mermaid supports many predefined themes that you can use to match a theme that suits you. Note: you can actually override the variables of an existing theme to create your own custom theme.
mermaid.grammar_timeline_theme_pre_no_same
- redux-color
- redux-dark-color
- redux
- redux-dark
- default
- neutral
- dark
- forest
- neo
- neo-dark
- base
Note: to change the theme, you can use the initialize syntax.
Base theme
Copy
Embed
---
config:
logLevel: 'debug'
theme: 'base'
---
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
2007 : Tumblr
2008 : Instagram
2010 : Pinterest
Forest theme
Copy
Embed
---
config:
logLevel: 'debug'
theme: 'forest'
---
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
2007 : Tumblr
2008 : Instagram
2010 : Pinterest
Dark theme
Copy
Embed
---
config:
logLevel: 'debug'
theme: 'dark'
---
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
2007 : Tumblr
2008 : Instagram
2010 : Pinterest
Default theme
Copy
Embed
---
config:
logLevel: 'debug'
theme: 'default'
---
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
2007 : Tumblr
2008 : Instagram
2010 : Pinterest
Neutral theme
Copy
Embed
---
config:
logLevel: 'debug'
theme: 'neutral'
---
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
2007 : Tumblr
2008 : Instagram
2010 : Pinterest
