marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-10-04 06:39:40 +02:00
Code Issues Packages Projects Releases Wiki Activity

Update docs

Browse Source
This commit is contained in:
ashishjain0512
2023-01-25 17:06:30 +00:00
parent 52bd5181f9
commit 5e6aac4377
3 changed files with 47 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/config/setup/modules/defaultConfig.md
View File

@@ -14,7 +14,7 @@
#### Defined in #### 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)
--- ---

22
docs/config/setup/modules/mermaidAPI.md
View File

@@ -20,7 +20,7 @@ Renames and re-exports [mermaidAPI](mermaidAPI.md#mermaidapi)
#### Defined in #### 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 ## Variables
@@ -90,7 +90,7 @@ mermaid.initialize(config);
#### Defined in #### 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 ## Functions
@@ -121,7 +121,7 @@ Return the last node appended
#### Defined in #### 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 #### 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 #### 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 #### 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 #### 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 #### 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 #### 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 #### 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 #### 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)

66
docs/syntax/timeline.md
View File

@@ -19,9 +19,6 @@ timeline
2004 : Facebook : Google 2004 : Facebook : Google
2005 : Youtube 2005 : Youtube
2006 : Twitter 2006 : Twitter
2007 : Tumblr
2008 : Instagram
2010 : Pinterest
``` ```
```mermaid ```mermaid
@@ -31,9 +28,6 @@ timeline
2004 : Facebook : Google 2004 : Facebook : Google
2005 : Youtube 2005 : Youtube
2006 : Twitter 2006 : Twitter
2007 : Tumblr
2008 : Instagram
2010 : Pinterest
``` ```
## Syntax ## Syntax
@@ -73,9 +67,6 @@ timeline
2004 : Facebook : Google 2004 : Facebook : Google
2005 : Youtube 2005 : Youtube
2006 : Twitter 2006 : Twitter
2007 : Tumblr
2008 : Instagram
2010 : Pinterest
``` ```
```mermaid ```mermaid
@@ -85,9 +76,6 @@ timeline
2004 : Facebook : Google 2004 : Facebook : Google
2005 : Youtube 2005 : Youtube
2006 : Twitter 2006 : Twitter
2007 : Tumblr
2008 : Instagram
2010 : Pinterest
``` ```
In this way we can use a text outline to generate a timeline diagram. In this way we can use a text outline to generate a timeline diagram.
@@ -115,7 +103,6 @@ timeline
section 21st century section 21st century
Industry 4.0 : Internet, Robotics, Internet of Things 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
Industry 6.0 : Quantum computing, Nanotechnology : Human-Cyber Interface
``` ```
```mermaid ```mermaid
@@ -128,7 +115,6 @@ timeline
section 21st century section 21st century
Industry 4.0 : Internet, Robotics, Internet of Things 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
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. 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 <br> 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 <br> Release XYZ Tier
Buttet 3 : sub-point <br> 3a : sub-point 3b
: sub-point 3c
Bullet 4 : sub-point 4a : sub-point 4b
```
```mermaid
timeline
title MermaidChart 2023 Timeline
section 2023 Q1 <br> 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 <br> Release XYZ Tier
Buttet 3 : sub-point <br> 3a : sub-point 3b
: sub-point 3c
Bullet 4 : sub-point 4a : sub-point 4b
```
## Styling of time periods and events ## 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. 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 2004 : Facebook : Google
2005 : Youtube 2005 : Youtube
2006 : Twitter 2006 : Twitter
2007 : Tumblr
2008 : Instagram
2010 : Pinterest
``` ```
```mermaid ```mermaid
@@ -198,9 +208,7 @@ However, if there is no section defined, then we have two possibilities:
2004 : Facebook : Google 2004 : Facebook : Google
2005 : Youtube 2005 : Youtube
2006 : Twitter 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. 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. let us look at same example, where we have disabled the multiColor option.
```mermaid-example ```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'timeline': {'disableMulticolor': true}}%% %%{init: { 'logLevel': 'debug', 'theme': 'base', 'timeline': {'disableMulticolor': true}}}%%
timeline timeline
title History of Social Media Platform title History of Social Media Platform
2002 : LinkedIn 2002 : LinkedIn
2004 : Facebook : Google 2004 : Facebook : Google
2005 : Youtube 2005 : Youtube
2006 : Twitter 2006 : Twitter
2007 : Tumblr
2008 : Instagram
2010 : Pinterest
``` ```
```mermaid ```mermaid
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'timeline': {'disableMulticolor': true}}%% %%{init: { 'logLevel': 'debug', 'theme': 'base', 'timeline': {'disableMulticolor': true}}}%%
timeline timeline
title History of Social Media Platform title History of Social Media Platform
2002 : LinkedIn 2002 : LinkedIn
2004 : Facebook : Google 2004 : Facebook : Google
2005 : Youtube 2005 : Youtube
2006 : Twitter 2006 : Twitter
2007 : Tumblr
2008 : Instagram
2010 : Pinterest
``` ```
### Customizing Color scheme ### 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': { %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
'cScale0': '#ff0000', 'cScale0': '#ff0000',
'cScale1': '#00ff00', 'cScale1': '#00ff00',
'cScale2': '#0000ff', 'cScale2': '#0000ff'
} } }%% } } }%%
timeline timeline
title History of Social Media Platform 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': { %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
'cScale0': '#ff0000', 'cScale0': '#ff0000',
'cScale1': '#00ff00', 'cScale1': '#00ff00',
'cScale2': '#0000ff', 'cScale2': '#0000ff'
} } }%% } } }%%
timeline timeline
title History of Social Media Platform title History of Social Media Platform
@@ -460,7 +464,7 @@ Timeline uses the experimental lazy loading & async rendering features which cou
```html ```html
<script type="module"> <script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs'; import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
import mindmap from 'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-mindmap@9/dist/mermaid-timeline.esm.min.mjs'; import timeline from 'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-timeline@9/dist/mermaid-timeline.esm.min.mjs';
await mermaid.registerExternalDiagrams([timeline]); await mermaid.registerExternalDiagrams([timeline]);
</script> </script>
``` ```