From 6d58c7504d6d8efa9ecee74219d738ac74530e5b Mon Sep 17 00:00:00 2001 From: futzmonitor Date: Sun, 25 Feb 2024 11:33:01 -0500 Subject: [PATCH 1/2] Changes to timeline.md 1. Updates the Wikipedia citation to include a link. 2. Removed periods from documentation sections to be consistent (some had periods, some didn't) 3. Added a space to a coding example for spacing consistency. --- docs/syntax/timeline.md | 16 ++++++++-------- packages/mermaid/src/docs/syntax/timeline.md | 14 +++++++------- 2 files changed, 15 insertions(+), 15 deletions(-) diff --git a/docs/syntax/timeline.md b/docs/syntax/timeline.md index 3e3c6ad5b..77f5eb5cb 100644 --- a/docs/syntax/timeline.md +++ b/docs/syntax/timeline.md @@ -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 @@ -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. @@ -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 @@ -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. @@ -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. @@ -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: @@ -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. diff --git a/packages/mermaid/src/docs/syntax/timeline.md b/packages/mermaid/src/docs/syntax/timeline.md index 1d590c144..eb308c793 100644 --- a/packages/mermaid/src/docs/syntax/timeline.md +++ b/packages/mermaid/src/docs/syntax/timeline.md @@ -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 @@ -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. @@ -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. @@ -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. @@ -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: @@ -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. From 15b3647514e897085507ea1a93894069f41008a1 Mon Sep 17 00:00:00 2001 From: futzmonitor Date: Sun, 25 Feb 2024 11:38:11 -0500 Subject: [PATCH 2/2] Changes to timeline.md 1. Added colons to all 'NOTES' for consistency. --- docs/syntax/timeline.md | 2 +- packages/mermaid/src/docs/syntax/timeline.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/syntax/timeline.md b/docs/syntax/timeline.md index 77f5eb5cb..288b8992c 100644 --- a/docs/syntax/timeline.md +++ b/docs/syntax/timeline.md @@ -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. diff --git a/packages/mermaid/src/docs/syntax/timeline.md b/packages/mermaid/src/docs/syntax/timeline.md index eb308c793..165fd6260 100644 --- a/packages/mermaid/src/docs/syntax/timeline.md +++ b/packages/mermaid/src/docs/syntax/timeline.md @@ -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.