User Journey
展示了不同用户要做的步骤信息，可以展示当前的工作流
语法结构如下所示：
Task name: <score>: <comma separated list of actors>
这里貌似会根据score给出一个表情，分数越高表情越开心，下面给出一个User Journey的例子：
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
Cat
Me
Go to work
Me
Make tea
Me
Go upstairs
Me
Cat
Do work
Go home
Me
Go downstairs
Me
Sit down
My working day
Gantt
甘特图是一种条形图，可以用来列举任务和所需时间、先后顺序等关系
绘制甘特图时候，将会记录任务的时间和任务序号，其中将时间作为X轴，序号作为Y轴，从左到右进行扩展下面给出一个例子：
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
another task : 24d
Mon 06
Mon 13
Mon 20
Mon 27
Mon 03
Mon 10
Mon 17
A task
Another task
Task in sec
another task
Section
Another
A Gantt Diagram
基本语法
老实说原教程中讲Gantt图的部分真的很乱，我怀疑他教程写到后面烦了，在语法部分直接给出了个例子
下面给出一个甘特图的例子：
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
excludes weekends
%% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h
Add another diagram to demo page :48h
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
excludes weekends
%% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h
Add another diagram to demo page :48h
教程作者犯懒明没有给出具体解释，这里我就自己总结下吧：
-
第一个部分展示了不同任务状态的样式，分别为：
- 已完成任务：灰色
- 正在进行任务：蓝色
- 未来的任务：深蓝色
- 同时也说明了可以为任务添加ID信息，用来方便之后排序任务
-
接下来展示了强调任务的样式，使用关键词crit，将会在上述几种任务状态上添加红色边框，而对于未来任务则会直接变成红色 -
下面一个部分展示了任务的并列，指定了相同的开始时间 -
最后一个部分展示了如果不指定开始时间，将会默认从上一个任务的结束时间开始
设置标题
使用可选的title可以设置字符串为标题
设置部分描述
可以将图像分割为不同的部分（section），使用section关键词，并为部分起名，这个名称是必要的
设置日期
使用关键词dataFormat设置日期格式，日期的展示形式可以通过关键词axisFormat进行设置。
输入日期格式
默认的输入日期格式为YYYY-MM-DD，当然也可以设置其他类型，下面给出了不同日期格式的描述信息：
Input Example Description:
YYYY 2014 4位年份
YY 14 2位年份
Q 1..4 3个月，从1月份开始，一年有四个
M MM 1..12 月份
MMM MMMM January..Dec 月份简写
D DD 1..31 日期
Do 1st..31st 日期，数字为th格式（如7th）
DDD DDDD 1..365 一年的某天
X 1410715640.579 Unix的s时间戳
x 1410715640579 Unix的ms时间戳
H HH 0..23 24小时制时间
h hh 1..12 12小时制时间，和下面一项一起使用
a A am pm 上下午
m mm 0..59 分钟
s ss 0..59 秒
S 0..9 十分之一秒
SS 0..99 百分之一秒
SSS 0..999 毫秒
Z ZZ +12:00 UTC偏移
输出日期格式
默认的输出日期格式为YYYY-MM-DD，当然也可以设置其他类型，语法格式如下所示：
axisFormat %Y-%m-%d
下面给出了不同日期格式的描述信息：
%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.
懒得翻译了
Pie Chart
饼状图，十分熟悉的东西，下面给出一个mermaid饼状图的例子：
pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 15
79%
17%
3%
Pets adopted by volunteers
Dogs
Cats
Rats
基本语法
下面是绘制饼状图时候的一些注意事项：
- 使用
pie开始饼状图的绘制 - 使用
title指定饼状图的标题，注意这一项是可选的 - 使用下面的方法规定数据：
label放置于符号""内- 使用
:分隔 - 使用正数值作为该项数据的值
|