Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updates Timeline Documentation #5315

Merged
merged 3 commits into from
Feb 26, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
16 changes: 8 additions & 8 deletions docs/syntax/timeline.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@

> Timeline: This is an experimental diagram for now. The syntax and properties can change in future releases. The syntax is stable except for the icon integration which is the experimental part.

"A timeline is a type of diagram used to illustrate a chronology of events, dates, or periods of time. It is usually presented graphically to indicate the passing of time, and it is usually organized chronologically. A basic timeline presents a list of events in chronological order, usually using dates as markers. A timeline can also be used to show the relationship between events, such as the relationship between the events of a person's life." Wikipedia
"A timeline is a type of diagram used to illustrate a chronology of events, dates, or periods of time. It is usually presented graphically to indicate the passing of time, and it is usually organized chronologically. A basic timeline presents a list of events in chronological order, usually using dates as markers. A timeline can also be used to show the relationship between events, such as the relationship between the events of a person's life" [(Wikipedia)](https://en.wikipedia.org/wiki/Timeline).

### An example of a timeline.
### An example of a timeline

```mermaid-example
timeline
Expand Down Expand Up @@ -58,7 +58,7 @@ or
: {event}
```

NOTE: Both time period and event are simple text, and not limited to numbers.
**NOTE**: Both time period and event are simple text, and not limited to numbers.

Let us look at the syntax for the example above.

Expand Down Expand Up @@ -104,7 +104,7 @@ timeline
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
Industry 5.0 : Artificial intelligence, Big data, 3D printing
```

```mermaid
Expand All @@ -116,7 +116,7 @@ timeline
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
Industry 5.0 : Artificial intelligence, Big data, 3D printing
```

As you can see, the time periods are placed in the sections, and the sections are placed in the order they are defined.
Expand Down Expand Up @@ -213,7 +213,7 @@ However, if there is no section defined, then we have two possibilities:

```

Note that there are no sections defined, and each time period and its corresponding events will have its own color scheme.
**NOTE**: that there are no sections defined, and each time period and its corresponding events will have its own color scheme.

2. Disable the multiColor option using the `disableMultiColor` option. This will make all time periods and events follow the same color scheme.

Expand Down Expand Up @@ -262,7 +262,7 @@ In case you have more than 12 sections, the color scheme will start to repeat.

If you also want to change the foreground color of a section, you can do so use theme variables corresponding `cScaleLabel0` to `cScaleLabel11` variables.

NOTE: Default values for these theme variables are picked from the selected theme. If you want to override the default values, you can use the `initialize` call to add your custom theme variable values.
**NOTE**: Default values for these theme variables are picked from the selected theme. If you want to override the default values, you can use the `initialize` call to add your custom theme variable values.

Example:

Expand Down Expand Up @@ -461,7 +461,7 @@ Let's put them to use, and see how our sample diagram looks in different themes:
2010 : Pinterest
```

## Integrating with your library/website.
## Integrating with your library/website

Timeline uses experimental lazy loading & async rendering features which could change in the future.The lazy loading is important in order to be able to add additional diagrams going forward.

Expand Down
14 changes: 7 additions & 7 deletions packages/mermaid/src/docs/syntax/timeline.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@

> Timeline: This is an experimental diagram for now. The syntax and properties can change in future releases. The syntax is stable except for the icon integration which is the experimental part.

"A timeline is a type of diagram used to illustrate a chronology of events, dates, or periods of time. It is usually presented graphically to indicate the passing of time, and it is usually organized chronologically. A basic timeline presents a list of events in chronological order, usually using dates as markers. A timeline can also be used to show the relationship between events, such as the relationship between the events of a person's life." Wikipedia
"A timeline is a type of diagram used to illustrate a chronology of events, dates, or periods of time. It is usually presented graphically to indicate the passing of time, and it is usually organized chronologically. A basic timeline presents a list of events in chronological order, usually using dates as markers. A timeline can also be used to show the relationship between events, such as the relationship between the events of a person's life" [(Wikipedia)](https://en.wikipedia.org/wiki/Timeline).

### An example of a timeline.
### An example of a timeline

```mermaid
timeline
Expand Down Expand Up @@ -42,7 +42,7 @@ or
: {event}
```

NOTE: Both time period and event are simple text, and not limited to numbers.
**NOTE**: Both time period and event are simple text, and not limited to numbers.

Let us look at the syntax for the example above.

Expand Down Expand Up @@ -79,7 +79,7 @@ timeline
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
Industry 5.0 : Artificial intelligence, Big data, 3D printing
```

As you can see, the time periods are placed in the sections, and the sections are placed in the order they are defined.
Expand Down Expand Up @@ -139,7 +139,7 @@ However, if there is no section defined, then we have two possibilities:

```

Note that there are no sections defined, and each time period and its corresponding events will have its own color scheme.
**NOTE**: that there are no sections defined, and each time period and its corresponding events will have its own color scheme.

2. Disable the multiColor option using the `disableMultiColor` option. This will make all time periods and events follow the same color scheme.

Expand Down Expand Up @@ -177,7 +177,7 @@ In case you have more than 12 sections, the color scheme will start to repeat.

If you also want to change the foreground color of a section, you can do so use theme variables corresponding `cScaleLabel0` to `cScaleLabel11` variables.

NOTE: Default values for these theme variables are picked from the selected theme. If you want to override the default values, you can use the `initialize` call to add your custom theme variable values.
**NOTE**: Default values for these theme variables are picked from the selected theme. If you want to override the default values, you can use the `initialize` call to add your custom theme variable values.

Example:

Expand Down Expand Up @@ -293,7 +293,7 @@ Let's put them to use, and see how our sample diagram looks in different themes:
2010 : Pinterest
```

## Integrating with your library/website.
## Integrating with your library/website

Timeline uses experimental lazy loading & async rendering features which could change in the future.The lazy loading is important in order to be able to add additional diagrams going forward.

Expand Down