From 5e6aac4377429306604abb79a03b946ab34a4135 Mon Sep 17 00:00:00 2001 From: ashishjain0512 Date: Wed, 25 Jan 2023 17:06:30 +0000 Subject: [PATCH] Update docs --- docs/config/setup/modules/defaultConfig.md | 2 +- docs/config/setup/modules/mermaidAPI.md | 22 ++++---- docs/syntax/timeline.md | 66 ++++++++++++---------- 3 files changed, 47 insertions(+), 43 deletions(-) diff --git a/docs/config/setup/modules/defaultConfig.md b/docs/config/setup/modules/defaultConfig.md index 4089ef00d..302bd51e1 100644 --- a/docs/config/setup/modules/defaultConfig.md +++ b/docs/config/setup/modules/defaultConfig.md @@ -14,7 +14,7 @@ #### Defined in -[defaultConfig.ts:1934](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L1934) +[defaultConfig.ts:2084](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L2084) --- diff --git a/docs/config/setup/modules/mermaidAPI.md b/docs/config/setup/modules/mermaidAPI.md index 7f9093a7b..02d0fcf49 100644 --- a/docs/config/setup/modules/mermaidAPI.md +++ b/docs/config/setup/modules/mermaidAPI.md @@ -20,7 +20,7 @@ Renames and re-exports [mermaidAPI](mermaidAPI.md#mermaidapi) #### Defined in -[mermaidAPI.ts:73](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L73) +[mermaidAPI.ts:74](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L74) ## Variables @@ -90,7 +90,7 @@ mermaid.initialize(config); #### Defined in -[mermaidAPI.ts:962](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L962) +[mermaidAPI.ts:886](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L886) ## Functions @@ -121,7 +121,7 @@ Return the last node appended #### Defined in -[mermaidAPI.ts:286](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L286) +[mermaidAPI.ts:287](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L287) --- @@ -147,7 +147,7 @@ the cleaned up svgCode #### Defined in -[mermaidAPI.ts:237](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L237) +[mermaidAPI.ts:238](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L238) --- @@ -173,7 +173,7 @@ the string with all the user styles #### Defined in -[mermaidAPI.ts:166](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L166) +[mermaidAPI.ts:167](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L167) --- @@ -196,7 +196,7 @@ the string with all the user styles #### Defined in -[mermaidAPI.ts:214](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L214) +[mermaidAPI.ts:215](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L215) --- @@ -223,7 +223,7 @@ with an enclosing block that has each of the cssClasses followed by !important; #### Defined in -[mermaidAPI.ts:150](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L150) +[mermaidAPI.ts:151](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L151) --- @@ -243,7 +243,7 @@ with an enclosing block that has each of the cssClasses followed by !important; #### Defined in -[mermaidAPI.ts:130](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L130) +[mermaidAPI.ts:131](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L131) --- @@ -263,7 +263,7 @@ with an enclosing block that has each of the cssClasses followed by !important; #### Defined in -[mermaidAPI.ts:101](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L101) +[mermaidAPI.ts:102](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L102) --- @@ -289,7 +289,7 @@ Put the svgCode into an iFrame. Return the iFrame code #### Defined in -[mermaidAPI.ts:265](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L265) +[mermaidAPI.ts:266](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L266) --- @@ -314,4 +314,4 @@ Remove any existing elements from the given document #### Defined in -[mermaidAPI.ts:336](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L336) +[mermaidAPI.ts:337](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L337) diff --git a/docs/syntax/timeline.md b/docs/syntax/timeline.md index 6e6da49e0..6b659d098 100644 --- a/docs/syntax/timeline.md +++ b/docs/syntax/timeline.md @@ -19,9 +19,6 @@ timeline 2004 : Facebook : Google 2005 : Youtube 2006 : Twitter - 2007 : Tumblr - 2008 : Instagram - 2010 : Pinterest ``` ```mermaid @@ -31,9 +28,6 @@ timeline 2004 : Facebook : Google 2005 : Youtube 2006 : Twitter - 2007 : Tumblr - 2008 : Instagram - 2010 : Pinterest ``` ## Syntax @@ -73,9 +67,6 @@ timeline 2004 : Facebook : Google 2005 : Youtube 2006 : Twitter - 2007 : Tumblr - 2008 : Instagram - 2010 : Pinterest ``` ```mermaid @@ -85,9 +76,6 @@ timeline 2004 : Facebook : Google 2005 : Youtube 2006 : Twitter - 2007 : Tumblr - 2008 : Instagram - 2010 : Pinterest ``` In this way we can use a text outline to generate a timeline diagram. @@ -115,7 +103,6 @@ timeline section 21st century Industry 4.0 : Internet, Robotics, Internet of Things Industry 5.0 : Artificial intelligence, Big data,3D printing - Industry 6.0 : Quantum computing, Nanotechnology : Human-Cyber Interface ``` ```mermaid @@ -128,7 +115,6 @@ timeline section 21st century Industry 4.0 : Internet, Robotics, Internet of Things Industry 5.0 : Artificial intelligence, Big data,3D printing - Industry 6.0 : Quantum computing, Nanotechnology : Human-Cyber Interface ``` As you can see, the time periods are placed in the sections, and the sections are placed in the order they are defined. @@ -171,6 +157,32 @@ timeline ``` +```mermaid-example +timeline + title MermaidChart 2023 Timeline + section 2023 Q1
Release Personal Tier + Buttet 1 : sub-point 1a : sub-point 1b + : sub-point 1c + Bullet 2 : sub-point 2a : sub-point 2b + section 2023 Q2
Release XYZ Tier + Buttet 3 : sub-point
3a : sub-point 3b + : sub-point 3c + Bullet 4 : sub-point 4a : sub-point 4b +``` + +```mermaid +timeline + title MermaidChart 2023 Timeline + section 2023 Q1
Release Personal Tier + Buttet 1 : sub-point 1a : sub-point 1b + : sub-point 1c + Bullet 2 : sub-point 2a : sub-point 2b + section 2023 Q2
Release XYZ Tier + Buttet 3 : sub-point
3a : sub-point 3b + : sub-point 3c + Bullet 4 : sub-point 4a : sub-point 4b +``` + ## Styling of time periods and events As explained earlier, each section has a color scheme, and each time period and event under a section follow the similar color scheme. @@ -186,9 +198,7 @@ However, if there is no section defined, then we have two possibilities: 2004 : Facebook : Google 2005 : Youtube 2006 : Twitter - 2007 : Tumblr - 2008 : Instagram - 2010 : Pinterest + ``` ```mermaid @@ -198,9 +208,7 @@ However, if there is no section defined, then we have two possibilities: 2004 : Facebook : Google 2005 : Youtube 2006 : Twitter - 2007 : Tumblr - 2008 : Instagram - 2010 : Pinterest + ``` Note that this is no, section defined, and each time period and its corresponding events will have its own color scheme. @@ -224,29 +232,25 @@ mermaid.initialize({ let us look at same example, where we have disabled the multiColor option. ```mermaid-example - %%{init: { 'logLevel': 'debug', 'theme': 'base', 'timeline': {'disableMulticolor': true}}%% + %%{init: { 'logLevel': 'debug', 'theme': 'base', 'timeline': {'disableMulticolor': true}}}%% timeline title History of Social Media Platform 2002 : LinkedIn 2004 : Facebook : Google 2005 : Youtube 2006 : Twitter - 2007 : Tumblr - 2008 : Instagram - 2010 : Pinterest + ``` ```mermaid - %%{init: { 'logLevel': 'debug', 'theme': 'base', 'timeline': {'disableMulticolor': true}}%% + %%{init: { 'logLevel': 'debug', 'theme': 'base', 'timeline': {'disableMulticolor': true}}}%% timeline title History of Social Media Platform 2002 : LinkedIn 2004 : Facebook : Google 2005 : Youtube 2006 : Twitter - 2007 : Tumblr - 2008 : Instagram - 2010 : Pinterest + ``` ### Customizing Color scheme @@ -264,7 +268,7 @@ Now let's override the default values for the `cScale0` to `cScale2` variables: %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': { 'cScale0': '#ff0000', 'cScale1': '#00ff00', - 'cScale2': '#0000ff', + 'cScale2': '#0000ff' } } }%% timeline title History of Social Media Platform @@ -282,7 +286,7 @@ Now let's override the default values for the `cScale0` to `cScale2` variables: %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': { 'cScale0': '#ff0000', 'cScale1': '#00ff00', - 'cScale2': '#0000ff', + 'cScale2': '#0000ff' } } }%% timeline title History of Social Media Platform @@ -460,7 +464,7 @@ Timeline uses the experimental lazy loading & async rendering features which cou ```html ```