# 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. **Launch DinoAI:** From Code IDE, access [DinoAI](https://docs.paradime.io/app-help/documentation/dino-ai) to start creating diagrams.
2. **Use a Simple Prompt:** Tell DinoAI what kind of Timeline Diagram you want to create. For example:

```
- "Create a mermaid timeline showing my data platform evolution and major milestones"

- "Generate a mermaid timeline diagram for my dbt™ project development phases and releases"

- "Build a mermaid timeline showing data migration project phases with key events"
```

1. **Get Your Diagram:** DinoAI will generate a complete `.mmd` file with proper Mermaid syntax.
2. **Preview Your Work:** Click the eye icon (👁️) to preview your diagram in real-time as you edit.
3. **Iterate and Refine:** Modify the generated `.mmd` file directly, or ask DinoAI to make specific changes.

#### Example: 

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

<figure><img src="https://2337193041-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHET0AD04uHMgdeLAjptq%2Fuploads%2F3XgagMlOrvQRB7xptkym%2Fimage.png?alt=media&#x26;token=87c3936f-5977-42b3-b7a8-84bc3b50a1c6" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}

#### Reusable Timeline Diagram prompts for you and your team

You can create custom, standardized [.dinoprompts](https://docs.paradime.io/app-help/documentation/dino-ai/dino-prompts) for Mermaid's Timeline Diagram that ensure consistency across your data team. See [step-by-step guide.](https://docs.paradime.io/app-help/documentation/integrations/code-ide/mermaid-js/..#creating-mermaid-diagrams-with-.dinoprompts)
{% endhint %}

***

### 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:

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

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

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

***

### Examples

#### Basic Timeline

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

#### Grouping Time Periods

```mermaid
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:

```mermaid
%%{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:

```mermaid
%%{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.

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

***

{% hint style="info" %}

### Additional Resources

For more advanced configurations and examples, refer to the [Mermaid documentation](https://mermaid.js.org/syntax/timeline.html).
{% endhint %}