Timeline Diagrams

What Are Timeline Diagrams?

Marmaid's Timeline diagrams provide a graphical representation of events or periods over time. They help illustrate the sequence and relationship between events, making them a powerful tool for visualizing histories, schedules, and project timelines.

---

Creating Your First Timeline Diagram

1. Open the Code IDE and click Apps and Agents from the left-hand panel.

2. Select Mermaid. Paradime will automatically start a new Mermaid project.

3. In the terminal that appears, use the arrow keys to select "Timeline Diagram".

4. A new timeline.mmd file will be created in your editor with this starter template:

   timeline
       title History of Social Media Platform
       2002 : LinkedIn
       2004 : Facebook
            : Google
       2005 : Youtube
       2006 : Twitter

5. Click the eye icon (👁️) in the top-right corner of the Mermaid file to preview your diagram.

1. Modify the .mmd file as needed. The preview will update automatically.

---

Syntax and Components

The syntax for creating Timeline diagrams in Mermaid is straightforward:

• Start with the timeline keyword.

• Optionally add a title with the title keyword.

• Define time periods followed by their events in the format:

{time period} : {event}

You can include multiple events for a single time period using the same format:

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

---

Examples

Basic Timeline

timeline
    title History of Social Media Platform
    2002 : LinkedIn
    2004 : Facebook : Google
    2005 : Youtube
    2006 : Twitter

Grouping Time Periods

timeline
    title Timeline of Industrial Revolution
    section 17th-20th century
        Industry 1.0 : Machinery, Water power, Steam 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

---

Styling Options

Using Themes

Mermaid offers several themes such as base, forest, dark, neutral, and default. To apply a theme, use the %%{init} directive:

%%{init: { 'theme': 'forest' }}%%
timeline
    title Thematic Example
    2020 : Event A
    2021 : Event B : Event C

Custom Colors

You can customize colors using cScale and cScaleLabel variables:

%%{init: { 'themeVariables': {
    'cScale0': '#ff0000', 'cScaleLabel0': '#ffffff',
    'cScale1': '#00ff00',
    'cScale2': '#0000ff', 'cScaleLabel2': '#ffffff'
}}}%%
timeline
    title Custom Colored Timeline
    2020 : Event A
    2021 : Event B : Event C
    2022 : Event D

---

Best Practices

1. Keep it Chronological: Ensure events are listed in proper order.

2. Use Sections for Clarity: Group related events into sections for better organization.

3. Customize Colors: Use distinct colors for sections to enhance readability.

---

Advanced Features

• Line Breaks: Use <br> to add line breaks in event text.

• Disable Multi-Color: Use the disableMulticolor option for uniform colors.

%%{init: { 'timeline': { 'disableMulticolor': true }}}%%
timeline
    title Uniform Colors Timeline
    2020 : Event A
    2021 : Event B : Event C
    2022 : Event D

---

Additional Resources

For more advanced configurations and examples, refer to the Mermaid documentation.