時間軸
時間軸是一種用於說明事件、日期或時間段的圖表。它通常以圖形方式渲染以顯示時間的流逝，並且通常按時間順序組織。基本的時間軸按時間順序列出事件，通常使用日期作為標記。時間軸也可以用來顯示事件之間的關係，例如一個人生活事件之間的關係。
複製
嵌入
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook
: Google
2005 : YouTube
2006 : Twitter
語法
建立時間軸的語法很簡單。需要以 timeline 語法開頭，讓 mermaid 知道你想要建立時間軸。
之後，可以向時間軸新增標題。這是透過新增 title 語法，跟標題文字來完成的。
然後新增時間軸資料，總是以一個時間段開始，後面跟一個冒號，然後是事件的文字。你可以選擇再加一個冒號，然後是事件的文字。因此，每個時間段可以有一個或多個事件。
複製
嵌入
{time period} : {event}
或者
複製
嵌入
{time period} : {event} : {event}
或者
複製
嵌入
{time period} : {event}
: {event}
: {event}
注意：時間段和事件都是簡單的文字，不限於數字。
註：具體用法可參考範例
複製
嵌入
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
這樣我們就可以利用文字大綱來產生時間軸。時間段和事件的順序很重要，因為它將用於繪製時間軸。第一個時間段將放置在時間軸的左側，最後一個時間段將放置在時間軸的右側。
當同一時間段發生多個事件，第一個事件將在該特定時間段的頂部，而最後一個事件將放在該特定時間段的底部。
將時間段分組
你可以將時間段分組到不同的部分/時代中。這可以透過新增 section 語法，後跟部分名稱的方式來實現。
所有後續時間段都將放置在此部分中，直到定義新部分。
如果未定義任何部分，所有時間段都將放置在預設部分中。
從下方範例可以看到各部分的劃分效果
複製
嵌入
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
正如你所看到的，時間段放置在各個部分中，而各個部分按照它們被定義的順序排列。
在指定部分下的所有時間段和事件都遵循類似的配色方案，這樣做是為了更容易看到時間段和事件之間的關係。
長時間段或長事件的換行
預設情況下，如果時間段和事件的文字過長，則會自動換行。
你還可以使用 強制換行。
當某個時間段或事件的文字過長時，可使用強制換行優化展示
複製
嵌入
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 Bronze 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.
複製
嵌入
timeline
title MermaidChart 2023 Timeline
section 2023 Q1 <br> Release Personal Tier
Bullet 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
Bullet 3 : sub-point <br> 3a : sub-point 3b
: sub-point 3c
Bullet 4 : sub-point 4a : sub-point 4b
時間段和事件的樣式
如前所述，每個部分都有一個配色方案，每個部分下的每個時間段和事件都遵循相同的配色方案。
單獨設定時間段的樣式，即每個時間段（及其相應的事件）都有自己的配色方案。
複製
嵌入
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
注意：沒有定義任何部分，每個時間段及其相應的事件都有自己的配色方案。
自訂配色方案
你可以使用 cScale0 到 cScale11 主題變數自訂配色方案，這將變更背景顏色。Mermaid 允許你為最多 12 個部分設定獨特的顏色，其中 cScale0 變數控制第一個部分或時間段的顏色，cScale1 變數控制第二個部分的顏色，依此類推。如果部分超過 12 個，配色方案將開始循環。
如果你還想變更某個部分的前景色，可以使用與 cScaleLabel0 到 cScaleLabel11 變數相對應的主題變數來實現。
注意：這些主題變數的預設值取自所選主題。如果你想覆寫預設值，可以使用 initialize 語法來新增自訂主題變數值。
範例：
現在讓我們覆寫 cScale0 到 cScale2 變數的預設值：
複製
嵌入
---
config:
logLevel: 'debug'
theme: 'default'
themeVariables:
cScale0: '#ff0000'
cScaleLabel0: '#ffffff'
cScale1: '#00ff00'
cScale2: '#0000ff'
cScaleLabel2: '#ffffff'
---
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
2007 : Tumblr
2008 : Instagram
2010 : Pinterest
主題
Mermaid 支援許多預先定義的主題，你可以使用它們來符合適合自己的主題。備註：你實際上可以覆寫現有主題的變數來建立自己的自訂主題。
不同預定義主題的視覺效果各不相同，你可以按需選擇：
- redux-color
- redux-dark-color
- redux
- redux-dark
- default
- neutral
- dark
- forest
- neo
- neo-dark
- base
注意：要變更主題，你可以使用 initialize 語法。
基礎主題
複製
嵌入
---
config:
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
森林主題
複製
嵌入
---
config:
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
深色主題
複製
嵌入
---
config:
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
預設主題
複製
嵌入
---
config:
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
中性主題
複製
嵌入
---
config:
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
