Mermaid知识点总结10 - User Journey & Gantt & Pie Chart

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
Go to work
Me
Make tea
Make tea
Me
Go upstairs
Go upstairs
Me Cat
Do work
Do work
Go home
Go home
Me
Go downstairs
Go downstairs
Me
Sit down
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

教程作者犯懒明没有给出具体解释,这里我就自己总结下吧:

  • 第一个部分展示了不同任务状态的样式,分别为:

    • 已完成任务:灰色
    • 正在进行任务:蓝色
    • 未来的任务:深蓝色
    • 同时也说明了可以为任务添加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放置于符号""
    • 使用:分隔
    • 使用正数值作为该项数据的值
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值