15.4 KB541 lines
Blame
1> **Warning**
2>
3> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
4>
5> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/timeline.md](../../packages/mermaid/src/docs/syntax/timeline.md).
6
7# Timeline Diagram
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.
10
11"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).
12
13### An example of a timeline
14
15```mermaid-example
16timeline
17 title History of Social Media Platform
18 2002 : LinkedIn
19 2004 : Facebook
20 : Google
21 2005 : YouTube
22 2006 : Twitter
23```
24
25```mermaid
26timeline
27 title History of Social Media Platform
28 2002 : LinkedIn
29 2004 : Facebook
30 : Google
31 2005 : YouTube
32 2006 : Twitter
33```
34
35## Syntax
36
37The 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.
38
39After 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.
40
41Then 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.
42
43```json
44{time period} : {event}
45```
46
47or
48
49```json
50{time period} : {event} : {event}
51```
52
53or
54
55```json
56{time period} : {event}
57 : {event}
58 : {event}
59```
60
61**NOTE**: Both time period and event are simple text, and not limited to numbers.
62
63Let us look at the syntax for the example above.
64
65```mermaid-example
66timeline
67 title History of Social Media Platform
68 2002 : LinkedIn
69 2004 : Facebook : Google
70 2005 : YouTube
71 2006 : Twitter
72```
73
74```mermaid
75timeline
76 title History of Social Media Platform
77 2002 : LinkedIn
78 2004 : Facebook : Google
79 2005 : YouTube
80 2006 : Twitter
81```
82
83In this way we can use a text outline to generate a timeline diagram.
84The 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.
85
86Similarly, the first event will be placed at the top for that specific time period, and the last event will be placed at the bottom.
87
88## Grouping of time periods in sections/ages
89
90You can group time periods in sections/ages. This is done by adding a line with the keyword `section` followed by the section name.
91
92All subsequent time periods will be placed in this section until a new section is defined.
93
94If no section is defined, all time periods will be placed in the default section.
95
96Let us look at an example, where we have grouped the time periods in sections.
97
98```mermaid-example
99timeline
100 title Timeline of Industrial Revolution
101 section 17th-20th century
102 Industry 1.0 : Machinery, Water power, Steam <br>power
103 Industry 2.0 : Electricity, Internal combustion engine, Mass production
104 Industry 3.0 : Electronics, Computers, Automation
105 section 21st century
106 Industry 4.0 : Internet, Robotics, Internet of Things
107 Industry 5.0 : Artificial intelligence, Big data, 3D printing
108```
109
110```mermaid
111timeline
112 title Timeline of Industrial Revolution
113 section 17th-20th century
114 Industry 1.0 : Machinery, Water power, Steam <br>power
115 Industry 2.0 : Electricity, Internal combustion engine, Mass production
116 Industry 3.0 : Electronics, Computers, Automation
117 section 21st century
118 Industry 4.0 : Internet, Robotics, Internet of Things
119 Industry 5.0 : Artificial intelligence, Big data, 3D printing
120```
121
122As you can see, the time periods are placed in the sections, and the sections are placed in the order they are defined.
123
124All 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.
125
126## Wrapping of text for long time-periods or events
127
128By 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.
129
130You can also use `<br>` to force a line break.
131
132Let us look at another example, where we have a long time period, and a long event.
133
134```mermaid-example
135timeline
136 title England's History Timeline
137 section Stone Age
138 7600 BC : Britain's oldest known house was built in Orkney, Scotland
139 6000 BC : Sea levels rise and Britain becomes an island.<br> The people who live here are hunter-gatherers.
140 section Bronze Age
141 2300 BC : People arrive from Europe and settle in Britain. <br>They bring farming and metalworking.
142 : New styles of pottery and ways of burying the dead appear.
143 2200 BC : The last major building works are completed at Stonehenge.<br> People now bury their dead in stone circles.
144 : The first metal objects are made in Britain.Some other nice things happen. it is a good time to be alive.
145
146```
147
148```mermaid
149timeline
150 title England's History Timeline
151 section Stone Age
152 7600 BC : Britain's oldest known house was built in Orkney, Scotland
153 6000 BC : Sea levels rise and Britain becomes an island.<br> The people who live here are hunter-gatherers.
154 section Bronze Age
155 2300 BC : People arrive from Europe and settle in Britain. <br>They bring farming and metalworking.
156 : New styles of pottery and ways of burying the dead appear.
157 2200 BC : The last major building works are completed at Stonehenge.<br> People now bury their dead in stone circles.
158 : The first metal objects are made in Britain.Some other nice things happen. it is a good time to be alive.
159
160```
161
162```mermaid-example
163timeline
164 title MermaidChart 2023 Timeline
165 section 2023 Q1 <br> Release Personal Tier
166 Bullet 1 : sub-point 1a : sub-point 1b
167 : sub-point 1c
168 Bullet 2 : sub-point 2a : sub-point 2b
169 section 2023 Q2 <br> Release XYZ Tier
170 Bullet 3 : sub-point <br> 3a : sub-point 3b
171 : sub-point 3c
172 Bullet 4 : sub-point 4a : sub-point 4b
173```
174
175```mermaid
176timeline
177 title MermaidChart 2023 Timeline
178 section 2023 Q1 <br> Release Personal Tier
179 Bullet 1 : sub-point 1a : sub-point 1b
180 : sub-point 1c
181 Bullet 2 : sub-point 2a : sub-point 2b
182 section 2023 Q2 <br> Release XYZ Tier
183 Bullet 3 : sub-point <br> 3a : sub-point 3b
184 : sub-point 3c
185 Bullet 4 : sub-point 4a : sub-point 4b
186```
187
188## Styling of time periods and events
189
190As explained earlier, each section has a color scheme, and each time period and event under a section follow the similar color scheme.
191
192However, if there is no section defined, then we have two possibilities:
193
1941. Style time periods individually, i.e. each time period(and its corresponding events) will have its own color scheme. This is the DEFAULT behavior.
195
196```mermaid-example
197 timeline
198 title History of Social Media Platform
199 2002 : LinkedIn
200 2004 : Facebook : Google
201 2005 : YouTube
202 2006 : Twitter
203
204```
205
206```mermaid
207 timeline
208 title History of Social Media Platform
209 2002 : LinkedIn
210 2004 : Facebook : Google
211 2005 : YouTube
212 2006 : Twitter
213
214```
215
216**NOTE**: that there are no sections defined, and each time period and its corresponding events will have its own color scheme.
217
2182. Disable the multiColor option using the `disableMultiColor` option. This will make all time periods and events follow the same color scheme.
219
220You will need to add this option either via mermaid.initialize function or directives.
221
222```javascript
223mermaid.initialize({
224 theme: 'base',
225 startOnLoad: true,
226 logLevel: 0,
227 timeline: {
228 disableMulticolor: false,
229 },
230 ...
231 ...
232```
233
234let us look at same example, where we have disabled the multiColor option.
235
236```mermaid-example
237---
238config:
239 logLevel: 'debug'
240 theme: 'base'
241 timeline:
242 disableMulticolor: true
243---
244 timeline
245 title History of Social Media Platform
246 2002 : LinkedIn
247 2004 : Facebook : Google
248 2005 : YouTube
249 2006 : Twitter
250
251```
252
253```mermaid
254---
255config:
256 logLevel: 'debug'
257 theme: 'base'
258 timeline:
259 disableMulticolor: true
260---
261 timeline
262 title History of Social Media Platform
263 2002 : LinkedIn
264 2004 : Facebook : Google
265 2005 : YouTube
266 2006 : Twitter
267
268```
269
270### Customizing Color scheme
271
272You can customize the color scheme using the `cScale0` to `cScale11` theme variables, which will change the background colors. Mermaid allows you to set unique colors for up-to 12 sections, 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.
273In case you have more than 12 sections, the color scheme will start to repeat.
274
275If you also want to change the foreground color of a section, you can do so use theme variables corresponding `cScaleLabel0` to `cScaleLabel11` variables.
276
277**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.
278
279Example:
280
281Now let's override the default values for the `cScale0` to `cScale2` variables:
282
283```mermaid-example
284---
285config:
286 logLevel: 'debug'
287 theme: 'default'
288 themeVariables:
289 cScale0: '#ff0000'
290 cScaleLabel0: '#ffffff'
291 cScale1: '#00ff00'
292 cScale2: '#0000ff'
293 cScaleLabel2: '#ffffff'
294---
295 timeline
296 title History of Social Media Platform
297 2002 : LinkedIn
298 2004 : Facebook : Google
299 2005 : YouTube
300 2006 : Twitter
301 2007 : Tumblr
302 2008 : Instagram
303 2010 : Pinterest
304
305```
306
307```mermaid
308---
309config:
310 logLevel: 'debug'
311 theme: 'default'
312 themeVariables:
313 cScale0: '#ff0000'
314 cScaleLabel0: '#ffffff'
315 cScale1: '#00ff00'
316 cScale2: '#0000ff'
317 cScaleLabel2: '#ffffff'
318---
319 timeline
320 title History of Social Media Platform
321 2002 : LinkedIn
322 2004 : Facebook : Google
323 2005 : YouTube
324 2006 : Twitter
325 2007 : Tumblr
326 2008 : Instagram
327 2010 : Pinterest
328
329```
330
331See how the colors are changed to the values specified in the theme variables.
332
333## Themes
334
335Mermaid 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](../config/theming.md).
336
337The following are the different pre-defined theme options:
338
339- `base`
340- `forest`
341- `dark`
342- `default`
343- `neutral`
344
345**NOTE**: To change theme you can either use the `initialize` call or _directives_. Learn more about [directives](../config/directives.md)
346Let's put them to use, and see how our sample diagram looks in different themes:
347
348### Base Theme
349
350```mermaid-example
351---
352config:
353 logLevel: 'debug'
354 theme: 'base'
355---
356 timeline
357 title History of Social Media Platform
358 2002 : LinkedIn
359 2004 : Facebook : Google
360 2005 : YouTube
361 2006 : Twitter
362 2007 : Tumblr
363 2008 : Instagram
364 2010 : Pinterest
365```
366
367```mermaid
368---
369config:
370 logLevel: 'debug'
371 theme: 'base'
372---
373 timeline
374 title History of Social Media Platform
375 2002 : LinkedIn
376 2004 : Facebook : Google
377 2005 : YouTube
378 2006 : Twitter
379 2007 : Tumblr
380 2008 : Instagram
381 2010 : Pinterest
382```
383
384### Forest Theme
385
386```mermaid-example
387---
388config:
389 logLevel: 'debug'
390 theme: 'forest'
391---
392 timeline
393 title History of Social Media Platform
394 2002 : LinkedIn
395 2004 : Facebook : Google
396 2005 : YouTube
397 2006 : Twitter
398 2007 : Tumblr
399 2008 : Instagram
400 2010 : Pinterest
401```
402
403```mermaid
404---
405config:
406 logLevel: 'debug'
407 theme: 'forest'
408---
409 timeline
410 title History of Social Media Platform
411 2002 : LinkedIn
412 2004 : Facebook : Google
413 2005 : YouTube
414 2006 : Twitter
415 2007 : Tumblr
416 2008 : Instagram
417 2010 : Pinterest
418```
419
420### Dark Theme
421
422```mermaid-example
423---
424config:
425 logLevel: 'debug'
426 theme: 'dark'
427---
428 timeline
429 title History of Social Media Platform
430 2002 : LinkedIn
431 2004 : Facebook : Google
432 2005 : YouTube
433 2006 : Twitter
434 2007 : Tumblr
435 2008 : Instagram
436 2010 : Pinterest
437```
438
439```mermaid
440---
441config:
442 logLevel: 'debug'
443 theme: 'dark'
444---
445 timeline
446 title History of Social Media Platform
447 2002 : LinkedIn
448 2004 : Facebook : Google
449 2005 : YouTube
450 2006 : Twitter
451 2007 : Tumblr
452 2008 : Instagram
453 2010 : Pinterest
454```
455
456### Default Theme
457
458```mermaid-example
459---
460config:
461 logLevel: 'debug'
462 theme: 'default'
463---
464 timeline
465 title History of Social Media Platform
466 2002 : LinkedIn
467 2004 : Facebook : Google
468 2005 : YouTube
469 2006 : Twitter
470 2007 : Tumblr
471 2008 : Instagram
472 2010 : Pinterest
473```
474
475```mermaid
476---
477config:
478 logLevel: 'debug'
479 theme: 'default'
480---
481 timeline
482 title History of Social Media Platform
483 2002 : LinkedIn
484 2004 : Facebook : Google
485 2005 : YouTube
486 2006 : Twitter
487 2007 : Tumblr
488 2008 : Instagram
489 2010 : Pinterest
490```
491
492### Neutral Theme
493
494```mermaid-example
495---
496config:
497 logLevel: 'debug'
498 theme: 'neutral'
499---
500 timeline
501 title History of Social Media Platform
502 2002 : LinkedIn
503 2004 : Facebook : Google
504 2005 : YouTube
505 2006 : Twitter
506 2007 : Tumblr
507 2008 : Instagram
508 2010 : Pinterest
509```
510
511```mermaid
512---
513config:
514 logLevel: 'debug'
515 theme: 'neutral'
516---
517 timeline
518 title History of Social Media Platform
519 2002 : LinkedIn
520 2004 : Facebook : Google
521 2005 : YouTube
522 2006 : Twitter
523 2007 : Tumblr
524 2008 : Instagram
525 2010 : Pinterest
526```
527
528## Integrating with your library/website
529
530Timeline 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.
531
532You can use this method to add mermaid including the timeline diagram to a web page:
533
534```html
535<script type="module">
536 import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
537</script>
538```
539
540You can also refer the [implementation in the live editor](https://github.com/mermaid-js/mermaid-live-editor/blob/develop/src/lib/util/mermaid.ts) to see how the async loading is done.
541