# 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](/app-help/documentation/dino-ai.md) 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="/files/6WsLdEGuynuxT1vUEGHJ" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}

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

You can create custom, standardized [.dinoprompts](/app-help/documentation/dino-ai/dino-prompts.md) 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/pages/ljlILu3iM7h23T4Pomrb#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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.paradime.io/app-help/documentation/integrations/code-ide/mermaid-js/timeline-diagrams.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.