4

MD: Mermaid for charts

 2 years ago
source link: https://mingzhi198.github.io/p/md-mermaid-for-charts/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Li. Mingzhi

I am a Backend Software Engineer focusing on system design and algorithm(^_^). Progress one percent per day...

This passage is my learn notes for markdown.

1. 图标方向

Mermaid支持多种图表方向,语法如下:

graph 方向描述
  图表语句
标示 含义
TB 从上到下
BT 从下到上
RL 从右到左
LR 从左到右

2. 节点定义

即流程图中每个文本块，包括开始、结束、处理、判断等。Mermaid 中每个节点都有一个 id，以及节点的文字。

表述 说明
id[文字] 矩形节点
id(文字) 圆角矩形节点
id((文字)) 圆形节点
id>文字] 右向旗帜状节点
id{文字} 菱形节点
需要注意的是，如果节点的文字中包含标点符号，需要时用双引号包裹起来。

3. 节点连线

表述 说明
> 添加尾部箭头
- 不添加尾部箭头
– 单线
–text– 单线上加文字
== 粗线
==text== 粗线加文字
-.- 虚线
-.text.- 虚线加文字

4. 子图表

使用下面语法添加子图表

subgraph 子图表名称
  子图表中的描述语句...
end

5. 对fontawesome的支持

使用 fa: #图表名称# 的语法添加 fontawesome。

graph TB
    id1(圆形矩形)--普通线-->id2[矩形]
    subgraph 子图表
        id2==粗线==>id3{菱形}
        id3-.虚线.-id4>右向旗帜]
        id3--无箭头---id5((圆形))
    end

####　6. 序列图
使用以下语法开始序列图

sequenceDiagram
  [参与者１][消息线][参与者２]:消息体
  ...

sequenceDiagram
  张三->>李四: 吃了吗
  李四->>张三:　吃了

####　7. 参与者
上例中的张三、李四都是参与者，上例中的语法是最简单的，也可以明显表明参与者有哪些:

sequenceDiagram
    participant 参与者 1
    participant 参与者 2
    ...
    participant 简称 as 参与者 3 #该语法可以在接下来的描述中使用简称来代替参与者 3

8. 消息线

类型 描述
-> 无箭头的实线
–> 无箭头的虚线
-» 有箭头的实线
–» 有箭头的虚线
-x 末端为叉的实线（表示异步）
–x 末端为叉的虚线（表示异步）

9. 处理中

在消息线末尾增加 + ，则消息接收者进入当前消息的“处理中”状态；
在消息线末尾增加 - ，则消息接收者离开当前消息的“处理中”状态。

或者使用以下语法直接说明某个参与者进入“处理中”状态:

activate 参与者

10. 标注

Note 位置表述 参与者: 标注文字

其中位置表述可以为

表述 含义
right of 右侧
left of 左侧
over 在当中，可以横跨多个参与者

####　11. 循环
语法:

loop 循环条件
  循环语句...
end

12. 判断

alt cond1
  branch1 statements
else cond2        # else branch is optional
  branch2 statements
else ...
  ...
end

如果遇到无可选的情况，即没有 else 分支的情况，使用如下语法：

opt cond
  branch statements
end

demo:

sequenceDiagram
  participant z as 张三
  participant l as 李四
  loop 日复一日
    z->>l: 吃了吗您呐?
    l-->>z: 吃了,您呢?
    activate z
    Note left of z: 想了一下
    alt 还没吃
      z-xl: 还没呢,正准备回去吃
    else 已经吃了
      z-xl: 我也吃过了,哈哈
    end
    opt 大过年的
      l-->z: 祝您新年好!
    end
  end

13. 甘特图(gantt)

甘特图是一类条形图，由Karol Adamiechi在1896年提出, 而在1910年Henry Gantt也独立的提出了此种图形表示。通常用在对项目终端元素和总结元素的开始及完成时间进行的描述。

gantt
dateFormat YYYY-MM-DD

section S1
T1: 2014-01-01, 9d

section S2
T2: 2014-01-11, 9d

section S3
T3: 2014-01-02, 9d

一个复杂的甘特图：

gantt
    dateFormat  YYYY-MM-DD
    title Adding GANTT diagram functionality to mermaid
    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
标记 简介
title 标题
dateFormat 日期格式
section 模块
Completed 已经完成
Active 当前正在进行
Future 后续待处理
crit 关键阶段
日期缺失 默认从上一项完成后 
gantt
    title 项目开发流程
    section 项目确定
        需求分析       :a1, 2016-06-22, 3d
        可行性报告     :after a1, 5d
        概念验证       : 5d
    section 项目实施
        概要设计      :2016-07-05, 5d
        详细设计      :2016-07-08, 10d
        编码          :2016-07-15, 10d
        测试          :2016-07-22, 5d
    section 发布验收
        发布: 2d
        验收: 3d

gantt
　　　dateFormat　YYYY-MM-DD
　　　title Adding GANTT diagram functionality to mermaid
　　　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 json　　　　　　: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

14. 更多示例

graph TD
A[Hard edge] --> |Link text| B(Round edge)
B --> C{Decision}
C --> |One| D[Result One]
C --> |Two| E[Result Two]

graph TB
    main --> parse --> execute;
    main --> init;
    main --> cleanup;
    execute --> make_string;
    execute --> printf
    init --> make_string;
    main --> printf;
    execute --> compare

sequenceDiagram
客户 ->> 银行柜台: 我要存钱
银行柜台 ->> 后台: 改一下这个账户数字哦
后台 ->> 银行柜台: 账户的数字改完了，明天起息
银行柜台 ->> 客户: 好了，给你回单，下一位
银行柜台 ->> Hello:what can I help you?

只要通过 ->> 和冒号 这种简单的文本标记，就能把各种关系和方向清晰的表达出来了。

graph TD
  A(起床) --> B[洗漱]
  B --> C{扔硬币}
  C -->|正面朝上| D[喝牛奶]
  C -->|反面朝上| E[喝果汁]
  C -->|刷牙| F[(看情况)]
  A -->|穿衣服| G([跳绳])
  A --> H{{洗澡}}

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK