树形图 
括号图 
思维笔记 
时间轴
时间轴是一种用于说明事件、日期或时间段的图表。它通常以图形方式渲染以显示时间的流逝，并且通常按时间顺序组织。基本的时间轴按时间顺序列出事件，通常使用日期作为标记。时间轴也可以用来显示事件之间的关系，例如一个人生活事件之间的关系。
复制
嵌入
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
正如你所看到的，时间段放置在各个部分中，而各个部分按照它们被定义的顺序排列。
在指定部分下的所有时间段和事件都遵循类似的配色方案，这样做是为了更容易看到时间段和事件之间的关系。
长时间段或长事件的换行
默认情况下，如果时间段和事件的文本过长，则会自动换行。
你还可以使用 <br> 强制换行。
让我们看另一个例子，在这个例子中，有一个很长的时间段和一个很长的事件。
复制
嵌入
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
