mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-21 00:09:51 +02:00
Merge develop in timeline branch
This commit is contained in:
ashishj
@@ -206,7 +206,7 @@ class BankAccount{
|
||||
|
||||
#### Generic Types
|
||||
|
||||
Members can be defined using generic types, such as `List<int>`, for fields, parameters, and return types by enclosing the type within `~` (**tilde**). Note: **nested** type declarations such as `List<List<int>>` are not currently supported.
|
||||
Members can be defined using generic types, such as `List<int>`, for fields, parameters, and return types by enclosing the type within `~` (**tilde**). **Nested** type declarations such as `List<List<int>>` are supported.
|
||||
|
||||
Generics can be represented as part of a class definition and also in the parameters or the return value of a method/function:
|
||||
|
||||
@@ -222,6 +222,7 @@ class Square~Shape~{
|
||||
Square : -List~string~ messages
|
||||
Square : +setMessages(List~string~ messages)
|
||||
Square : +getMessages() List~string~
|
||||
Square : +getDistanceMatrix() List~List~int~~
|
||||
```
|
||||
|
||||
```mermaid
|
||||
@@ -236,6 +237,7 @@ class Square~Shape~{
|
||||
Square : -List~string~ messages
|
||||
Square : +setMessages(List~string~ messages)
|
||||
Square : +getMessages() List~string~
|
||||
Square : +getDistanceMatrix() List~List~int~~
|
||||
```
|
||||
|
||||
#### Visibility
|
||||
@@ -267,7 +269,7 @@ There are eight different types of relations defined for classes under UML which
|
||||
| Type | Description |
|
||||
| ------- | ------------- |
|
||||
| `<\|--` | Inheritance |
|
||||
| `\*--` | Composition |
|
||||
| `*--` | Composition |
|
||||
| `o--` | Aggregation |
|
||||
| `-->` | Association |
|
||||
| `--` | Link (Solid) |
|
||||
|
||||
@@ -162,7 +162,7 @@ erDiagram
|
||||
|
||||
### Attributes
|
||||
|
||||
Attributes can be defined for entities by specifying the entity name followed by a block containing multiple `type name` pairs, where a block is delimited by an opening `{` and a closing `}`. For example:
|
||||
Attributes can be defined for entities by specifying the entity name followed by a block containing multiple `type name` pairs, where a block is delimited by an opening `{` and a closing `}`. The attributes are rendered inside the entity boxes. For example:
|
||||
|
||||
```mermaid-example
|
||||
erDiagram
|
||||
@@ -196,59 +196,26 @@ erDiagram
|
||||
}
|
||||
```
|
||||
|
||||
The attributes are rendered inside the entity boxes:
|
||||
|
||||
```mermaid-example
|
||||
erDiagram
|
||||
CAR ||--o{ NAMED-DRIVER : allows
|
||||
CAR {
|
||||
string registrationNumber
|
||||
string make
|
||||
string model
|
||||
}
|
||||
PERSON ||--o{ NAMED-DRIVER : is
|
||||
PERSON {
|
||||
string firstName
|
||||
string lastName
|
||||
int age
|
||||
}
|
||||
```
|
||||
|
||||
```mermaid
|
||||
erDiagram
|
||||
CAR ||--o{ NAMED-DRIVER : allows
|
||||
CAR {
|
||||
string registrationNumber
|
||||
string make
|
||||
string model
|
||||
}
|
||||
PERSON ||--o{ NAMED-DRIVER : is
|
||||
PERSON {
|
||||
string firstName
|
||||
string lastName
|
||||
int age
|
||||
}
|
||||
```
|
||||
|
||||
The `type` and `name` values must begin with an alphabetic character and may contain digits, hyphens or underscores. Other than that, there are no restrictions, and there is no implicit set of valid data types.
|
||||
The `type` and `name` values must begin with an alphabetic character and may contain digits, hyphens, underscores, parentheses and square brackets. Other than that, there are no restrictions, and there is no implicit set of valid data types.
|
||||
|
||||
#### Attribute Keys and Comments
|
||||
|
||||
Attributes may also have a `key` or comment defined. Keys can be "PK" or "FK", for Primary Key or Foreign Key. And a `comment` is defined by double quotes at the end of an attribute. Comments themselves cannot have double-quote characters in them.
|
||||
Attributes may also have a `key` or comment defined. Keys can be "PK", "FK" or "UK", for Primary Key, Foreign Key or Unique Key. And a `comment` is defined by double quotes at the end of an attribute. Comments themselves cannot have double-quote characters in them.
|
||||
|
||||
```mermaid-example
|
||||
erDiagram
|
||||
CAR ||--o{ NAMED-DRIVER : allows
|
||||
CAR {
|
||||
string allowedDriver FK "The license of the allowed driver"
|
||||
string registrationNumber
|
||||
string registrationNumber UK
|
||||
string make
|
||||
string model
|
||||
string[] parts
|
||||
}
|
||||
PERSON ||--o{ NAMED-DRIVER : is
|
||||
PERSON {
|
||||
string driversLicense PK "The license #"
|
||||
string firstName
|
||||
string(99) firstName "Only 99 characters are allowed"
|
||||
string lastName
|
||||
int age
|
||||
}
|
||||
@@ -260,14 +227,15 @@ erDiagram
|
||||
CAR ||--o{ NAMED-DRIVER : allows
|
||||
CAR {
|
||||
string allowedDriver FK "The license of the allowed driver"
|
||||
string registrationNumber
|
||||
string registrationNumber UK
|
||||
string make
|
||||
string model
|
||||
string[] parts
|
||||
}
|
||||
PERSON ||--o{ NAMED-DRIVER : is
|
||||
PERSON {
|
||||
string driversLicense PK "The license #"
|
||||
string firstName
|
||||
string(99) firstName "Only 99 characters are allowed"
|
||||
string lastName
|
||||
int age
|
||||
}
|
||||
|
||||
@@ -172,30 +172,33 @@ Final milestone : milestone, m2, 18:14, 2min
|
||||
|
||||
The default input date format is `YYYY-MM-DD`. You can define your custom `dateFormat`.
|
||||
|
||||
dateFormat YYYY-MM-DD
|
||||
```markdown
|
||||
dateFormat YYYY-MM-DD
|
||||
```
|
||||
|
||||
The following formatting options are supported:
|
||||
|
||||
Input Example Description:
|
||||
YYYY 2014 4 digit year
|
||||
YY 14 2 digit year
|
||||
Q 1..4 Quarter of year. Sets month to first month in quarter.
|
||||
M MM 1..12 Month number
|
||||
MMM MMMM January..Dec Month name in locale set by moment.locale()
|
||||
D DD 1..31 Day of month
|
||||
Do 1st..31st Day of month with ordinal
|
||||
DDD DDDD 1..365 Day of year
|
||||
X 1410715640.579 Unix timestamp
|
||||
x 1410715640579 Unix ms timestamp
|
||||
H HH 0..23 24 hour time
|
||||
h hh 1..12 12 hour time used with a A.
|
||||
a A am pm Post or ante meridiem
|
||||
m mm 0..59 Minutes
|
||||
s ss 0..59 Seconds
|
||||
S 0..9 Tenths of a second
|
||||
SS 0..99 Hundreds of a second
|
||||
SSS 0..999 Thousandths of a second
|
||||
Z ZZ +12:00 Offset from UTC as +-HH:mm, +-HHmm, or Z
|
||||
| Input | Example | Description |
|
||||
| ---------- | -------------- | ------------------------------------------------------ |
|
||||
| `YYYY` | 2014 | 4 digit year |
|
||||
| `YY` | 14 | 2 digit year |
|
||||
| `Q` | 1..4 | Quarter of year. Sets month to first month in quarter. |
|
||||
| `M MM` | 1..12 | Month number |
|
||||
| `MMM MMMM` | January..Dec | Month name in locale set by `moment.locale()` |
|
||||
| `D DD` | 1..31 | Day of month |
|
||||
| `Do` | 1st..31st | Day of month with ordinal |
|
||||
| `DDD DDDD` | 1..365 | Day of year |
|
||||
| `X` | 1410715640.579 | Unix timestamp |
|
||||
| `x` | 1410715640579 | Unix ms timestamp |
|
||||
| `H HH` | 0..23 | 24 hour time |
|
||||
| `h hh` | 1..12 | 12 hour time used with `a A`. |
|
||||
| `a A` | am pm | Post or ante meridiem |
|
||||
| `m mm` | 0..59 | Minutes |
|
||||
| `s ss` | 0..59 | Seconds |
|
||||
| `S` | 0..9 | Tenths of a second |
|
||||
| `SS` | 0..99 | Hundreds of a second |
|
||||
| `SSS` | 0..999 | Thousandths of a second |
|
||||
| `Z ZZ` | +12:00 | Offset from UTC as +-HH:mm, +-HHmm, or Z |
|
||||
|
||||
More info in: https://momentjs.com/docs/#/parsing/string-format/
|
||||
|
||||
@@ -203,34 +206,38 @@ More info in: https://momentjs.com/docs/#/parsing/string-format/
|
||||
|
||||
The default output date format is `YYYY-MM-DD`. You can define your custom `axisFormat`, like `2020-Q1` for the first quarter of the year 2020.
|
||||
|
||||
axisFormat %Y-%m-%d
|
||||
```markdown
|
||||
axisFormat %Y-%m-%d
|
||||
```
|
||||
|
||||
The following formatting strings are supported:
|
||||
|
||||
%a - abbreviated weekday name.
|
||||
%A - full weekday name.
|
||||
%b - abbreviated month name.
|
||||
%B - full month name.
|
||||
%c - date and time, as "%a %b %e %H:%M:%S %Y".
|
||||
%d - zero-padded day of the month as a decimal number [01,31].
|
||||
%e - space-padded day of the month as a decimal number [ 1,31]; equivalent to %_d.
|
||||
%H - hour (24-hour clock) as a decimal number [00,23].
|
||||
%I - hour (12-hour clock) as a decimal number [01,12].
|
||||
%j - day of the year as a decimal number [001,366].
|
||||
%m - month as a decimal number [01,12].
|
||||
%M - minute as a decimal number [00,59].
|
||||
%L - milliseconds as a decimal number [000, 999].
|
||||
%p - either AM or PM.
|
||||
%S - second as a decimal number [00,61].
|
||||
%U - week number of the year (Sunday as the first day of the week) as a decimal number [00,53].
|
||||
%w - weekday as a decimal number [0(Sunday),6].
|
||||
%W - week number of the year (Monday as the first day of the week) as a decimal number [00,53].
|
||||
%x - date, as "%m/%d/%Y".
|
||||
%X - time, as "%H:%M:%S".
|
||||
%y - year without century as a decimal number [00,99].
|
||||
%Y - year with century as a decimal number.
|
||||
%Z - time zone offset, such as "-0700".
|
||||
%% - a literal "%" character.
|
||||
| Format | Definition |
|
||||
| ------ | ------------------------------------------------------------------------------------------ |
|
||||
| %a | abbreviated weekday name |
|
||||
| %A | full weekday name |
|
||||
| %b | abbreviated month name |
|
||||
| %B | full month name |
|
||||
| %c | date and time, as "%a %b %e %H:%M:%S %Y" |
|
||||
| %d | zero-padded day of the month as a decimal number \[01,31] |
|
||||
| %e | space-padded day of the month as a decimal number \[ 1,31]; equivalent to %\_d |
|
||||
| %H | hour (24-hour clock) as a decimal number \[00,23] |
|
||||
| %I | hour (12-hour clock) as a decimal number \[01,12] |
|
||||
| %j | day of the year as a decimal number \[001,366] |
|
||||
| %m | month as a decimal number \[01,12] |
|
||||
| %M | minute as a decimal number \[00,59] |
|
||||
| %L | milliseconds as a decimal number \[000, 999] |
|
||||
| %p | either AM or PM |
|
||||
| %S | second as a decimal number \[00,61] |
|
||||
| %U | week number of the year (Sunday as the first day of the week) as a decimal number \[00,53] |
|
||||
| %w | weekday as a decimal number \[0(Sunday),6] |
|
||||
| %W | week number of the year (Monday as the first day of the week) as a decimal number \[00,53] |
|
||||
| %x | date, as "%m/%d/%Y" |
|
||||
| %X | time, as "%H:%M:%S" |
|
||||
| %y | year without century as a decimal number \[00,99] |
|
||||
| %Y | year with century as a decimal number |
|
||||
| %Z | time zone offset, such as "-0700" |
|
||||
| %% | a literal "%" character |
|
||||
|
||||
More info in: <https://github.com/d3/d3-time-format/tree/v4.0.0#locale_format>
|
||||
|
||||
@@ -238,11 +245,15 @@ More info in: <https://github.com/d3/d3-time-format/tree/v4.0.0#locale_format>
|
||||
|
||||
The default output ticks are auto. You can custom your `tickInterval`, like `1day` or `1week`.
|
||||
|
||||
tickInterval 1day
|
||||
```markdown
|
||||
tickInterval 1day
|
||||
```
|
||||
|
||||
The pattern is:
|
||||
|
||||
/^([1-9][0-9]*)(minute|hour|day|week|month)$/
|
||||
```javascript
|
||||
/^([1-9][0-9]*)(minute|hour|day|week|month)$/;
|
||||
```
|
||||
|
||||
More info in: <https://github.com/d3/d3-time#interval_every>
|
||||
|
||||
|
||||
@@ -180,7 +180,7 @@ More shapes will be added, beginning with the shapes available in flowcharts.
|
||||
|
||||
# Icons and classes
|
||||
|
||||
## icons
|
||||
## Icons
|
||||
|
||||
As with flowcharts you can add icons to your nodes but with an updated syntax. The styling for the font based icons are added during the integration so that they are available for the web page. _This is not something a diagram author can do but has to be done with the site administrator or the integrator_. Once the icon fonts are in place you add them to the mind map nodes using the `::icon()` syntax. You place the classes for the icon within the parenthesis like in the following example where icons for material design and fontawesome 4 are displayed. The intention is that this approach should be used for all diagrams supporting icons. **Experimental feature:** This wider scope is also the reason Mindmaps are experimental as this syntax and approach could change.
|
||||
|
||||
|
||||
@@ -198,6 +198,20 @@ sequenceDiagram
|
||||
Note over Alice,John: A typical interaction
|
||||
```
|
||||
|
||||
It is also possible to add a line break (applies to text input in general):
|
||||
|
||||
```mermaid-example
|
||||
sequenceDiagram
|
||||
Alice->John: Hello John, how are you?
|
||||
Note over Alice,John: A typical interaction<br/>But now in two lines
|
||||
```
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
Alice->John: Hello John, how are you?
|
||||
Note over Alice,John: A typical interaction<br/>But now in two lines
|
||||
```
|
||||
|
||||
## Loops
|
||||
|
||||
It is possible to express loops in a sequence diagram. This is done by the notation
|
||||
|
||||
468
docs/syntax/timeline.md
Normal file
468
docs/syntax/timeline.md
Normal file
@@ -0,0 +1,468 @@
|
||||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/timeline.md](../../packages/mermaid/src/docs/syntax/timeline.md).
|
||||
|
||||
# Timeline Diagram
|
||||
|
||||
> 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. 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
|
||||
|
||||
### An example of a timeline.
|
||||
|
||||
```mermaid-example
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
2004 : Facebook : Google
|
||||
2005 : Youtube
|
||||
2006 : Twitter
|
||||
2007 : Tumblr
|
||||
2008 : Instagram
|
||||
2010 : Pinterest
|
||||
```
|
||||
|
||||
```mermaid
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
2004 : Facebook : Google
|
||||
2005 : Youtube
|
||||
2006 : Twitter
|
||||
2007 : Tumblr
|
||||
2008 : Instagram
|
||||
2010 : Pinterest
|
||||
```
|
||||
|
||||
## Syntax
|
||||
|
||||
The syntax for creating Timeline diagram is simple. You always start with the `timeline` keyword to let mermaid know that you want to create a timeline diagram.
|
||||
|
||||
After that there is a possibility to add a title to the timeline. This is done by adding a line with the keyword `title` followed by the title text.
|
||||
|
||||
Then you add the timeline data, where you always start with a time period, followed by a colon and then the text for the event. Optionally you can add a second colon and then the text for the event. So, you can have one or more events per time period.
|
||||
|
||||
```json
|
||||
{time period} : {event}
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```json
|
||||
{time period} : {event} : {event}
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```json
|
||||
{time period} : {event}
|
||||
: {event}
|
||||
: {event}
|
||||
```
|
||||
|
||||
NOTE: Both time period and event are simple text, and not limited to numbers.
|
||||
|
||||
Let us look at the syntax for the example above.
|
||||
|
||||
```mermaid-example
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
2004 : Facebook : Google
|
||||
2005 : Youtube
|
||||
2006 : Twitter
|
||||
2007 : Tumblr
|
||||
2008 : Instagram
|
||||
2010 : Pinterest
|
||||
```
|
||||
|
||||
```mermaid
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
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.
|
||||
The sequence of time period and events is important, as it will be used to draw the timeline. The first time period will be placed at the left side of the timeline, and the last time period will be placed at the right side of the timeline.
|
||||
|
||||
Similarly, the first event will be placed at the top for that specific time period, and the last event will be placed at the bottom.
|
||||
|
||||
## Grouping of time periods in sections/ages
|
||||
|
||||
You can group time periods in sections/ages. This is done by adding a line with the keyword `section` followed by the section name.
|
||||
|
||||
All subsequent time periods will be placed in this section until a new section is defined.
|
||||
|
||||
If no section is defined, all time periods will be placed in the default section.
|
||||
|
||||
Let us look at an example, where we have grouped the time periods in sections.
|
||||
|
||||
```mermaid-example
|
||||
timeline
|
||||
title Timeline of Industrial Revolution
|
||||
section 17th-20th century
|
||||
Industry 1.0 : Machinery, Water power, Steam <br>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
|
||||
Industry 6.0 : Quantum computing, Nanotechnology : Human-Cyber Interface
|
||||
```
|
||||
|
||||
```mermaid
|
||||
timeline
|
||||
title Timeline of Industrial Revolution
|
||||
section 17th-20th century
|
||||
Industry 1.0 : Machinery, Water power, Steam <br>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
|
||||
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.
|
||||
|
||||
All time periods and events under a given section follow a similar color scheme. This is done to make it easier to see the relationship between time periods and events.
|
||||
|
||||
## Wrapping of text for long time-periods or events
|
||||
|
||||
By default, the text for time-periods and events will be wrapped if it is too long. This is done to avoid that the text is drawn outside the diagram.
|
||||
|
||||
You can also use `<br>` to force a line break.
|
||||
|
||||
Let us look at another example, where we have a long time period, and a long event.
|
||||
|
||||
```mermaid-example
|
||||
timeline
|
||||
title England's History Timeline
|
||||
section Stone Age
|
||||
7600 BC : Britain's oldest known house was built in Orkney, Scotland
|
||||
6000 BC : Sea levels rise and Britain becomes an island.<br> The people who live here are hunter-gatherers.
|
||||
section Broze Age
|
||||
2300 BC : People arrive from Europe and settle in Britain. <br>They bring farming and metalworking.
|
||||
: New styles of pottery and ways of burying the dead appear.
|
||||
2200 BC : The last major building works are completed at Stonehenge.<br> People now bury their dead in stone circles.
|
||||
: The first metal objects are made in Britain.Some other nice things happen. it is a good time to be alive.
|
||||
|
||||
```
|
||||
|
||||
```mermaid
|
||||
timeline
|
||||
title England's History Timeline
|
||||
section Stone Age
|
||||
7600 BC : Britain's oldest known house was built in Orkney, Scotland
|
||||
6000 BC : Sea levels rise and Britain becomes an island.<br> The people who live here are hunter-gatherers.
|
||||
section Broze Age
|
||||
2300 BC : People arrive from Europe and settle in Britain. <br>They bring farming and metalworking.
|
||||
: New styles of pottery and ways of burying the dead appear.
|
||||
2200 BC : The last major building works are completed at Stonehenge.<br> People now bury their dead in stone circles.
|
||||
: The first metal objects are made in Britain.Some other nice things happen. it is a good time to be alive.
|
||||
|
||||
```
|
||||
|
||||
## 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.
|
||||
|
||||
However, if there is no section defined, then we have two possibilities:
|
||||
|
||||
1. Style time periods individually, i.e. each time period(and its coressponding events) will have its own color scheme. This is the DEFAULT behavior.
|
||||
|
||||
```mermaid-example
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
2004 : Facebook : Google
|
||||
2005 : Youtube
|
||||
2006 : Twitter
|
||||
2007 : Tumblr
|
||||
2008 : Instagram
|
||||
2010 : Pinterest
|
||||
```
|
||||
|
||||
```mermaid
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
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.
|
||||
|
||||
2. Disable the multiColor option using the `disableMultiColor` option. This will make all time periods and events follow the same color scheme.
|
||||
|
||||
You will need to add this option either via mermaid.intialize function or directives.
|
||||
|
||||
```javascript
|
||||
mermaid.initialize({
|
||||
theme: 'base',
|
||||
startOnLoad: true,
|
||||
logLevel: 0,
|
||||
timeline: {
|
||||
disableMulticolor: false,
|
||||
},
|
||||
...
|
||||
...
|
||||
```
|
||||
|
||||
let us look at same example, where we have disabled the multiColor option.
|
||||
|
||||
```mermaid-example
|
||||
%%{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}}%%
|
||||
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
|
||||
|
||||
You can customize the color scheme using the `cScale0` to `cScale11` theme variables. Mermaid allows you to set unique colors for up-to 12, where `cScale0` variable will drive the value of the first section or time-period, `cScale1` will drive the value of the second section and so on.
|
||||
In case you have more than 12 sections, the color scheme will start to repeat.
|
||||
|
||||
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:
|
||||
|
||||
Now let's override the default values for the `cScale0` to `cScale2` variables:
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
|
||||
'cScale0': '#ff0000',
|
||||
'cScale1': '#00ff00',
|
||||
'cScale2': '#0000ff',
|
||||
} } }%%
|
||||
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': 'default' , 'themeVariables': {
|
||||
'cScale0': '#ff0000',
|
||||
'cScale1': '#00ff00',
|
||||
'cScale2': '#0000ff',
|
||||
} } }%%
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
2004 : Facebook : Google
|
||||
2005 : Youtube
|
||||
2006 : Twitter
|
||||
2007 : Tumblr
|
||||
2008 : Instagram
|
||||
2010 : Pinterest
|
||||
|
||||
```
|
||||
|
||||
See how the colors are changed to the values specified in the theme variables.
|
||||
|
||||
## Themes
|
||||
|
||||
Mermaid supports a bunch of pre-defined themes which you can use to find the right one for you. PS: you can actually override an existing theme's variable to get your own custom theme going. Learn more about theming your diagram [here](../config/theming.md).
|
||||
|
||||
The following are the different pre-defined theme options:
|
||||
|
||||
- `base`
|
||||
- `forest`
|
||||
- `dark`
|
||||
- `default`
|
||||
- `neutral`
|
||||
|
||||
**NOTE**: To change theme you can either use the `initialize` call or _directives_. Learn more about [directives](../config/directives.md)
|
||||
Let's put them to use, and see how our sample diagram looks in different themes:
|
||||
|
||||
### Base Theme
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'base' } }%%
|
||||
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
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
2004 : Facebook : Google
|
||||
2005 : Youtube
|
||||
2006 : Twitter
|
||||
2007 : Tumblr
|
||||
2008 : Instagram
|
||||
2010 : Pinterest
|
||||
```
|
||||
|
||||
### Forest Theme
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
|
||||
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': 'forest' } }%%
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
2004 : Facebook : Google
|
||||
2005 : Youtube
|
||||
2006 : Twitter
|
||||
2007 : Tumblr
|
||||
2008 : Instagram
|
||||
2010 : Pinterest
|
||||
```
|
||||
|
||||
### Dark Theme
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
|
||||
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': 'dark' } }%%
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
2004 : Facebook : Google
|
||||
2005 : Youtube
|
||||
2006 : Twitter
|
||||
2007 : Tumblr
|
||||
2008 : Instagram
|
||||
2010 : Pinterest
|
||||
```
|
||||
|
||||
### Default Theme
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'default' } }%%
|
||||
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': 'default' } }%%
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
2004 : Facebook : Google
|
||||
2005 : Youtube
|
||||
2006 : Twitter
|
||||
2007 : Tumblr
|
||||
2008 : Instagram
|
||||
2010 : Pinterest
|
||||
```
|
||||
|
||||
### Neutral Theme
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'neutral' } }%%
|
||||
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': 'neutral' } }%%
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
2004 : Facebook : Google
|
||||
2005 : Youtube
|
||||
2006 : Twitter
|
||||
2007 : Tumblr
|
||||
2008 : Instagram
|
||||
2010 : Pinterest
|
||||
```
|
||||
|
||||
## Integrating with your library/website.
|
||||
|
||||
Timeline uses the experimental lazy loading & async rendering features which could change in the future.
|
||||
|
||||
```html
|
||||
<script type="module">
|
||||
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';
|
||||
await mermaid.registerExternalDiagrams([timeline]);
|
||||
</script>
|
||||
```
|
||||
|
||||
You can also refer the implementation in the live editor [here](https://github.com/mermaid-js/mermaid-live-editor/blob/fcf53c98c25604c90a218104268c339be53035a6/src/lib/util/mermaid.ts) to see how the async loading is done.
|
||||
Reference in New Issue
Block a user