markdown之mermaid流程图

1. 流程图

---

• 听我讲一个关于爱情的故事

graph TB
	subgraph 1
	A(隔壁老王家阿姨的四姨父家的翠花)-->B((LOVE))-->YOU-.->A
	end
	
	subgraph 2
		YOU-->house{房子}-->|有|A
		house-->|没有|xx[go away]
	end

总结特性：

1. 节点连线
   1. 实线
   2. 虚线
   3. 线注释
2. 节点形状
   1. 直角矩形
   2. 圆角矩形
   3. 圆形
   4. 菱形
3. 方向

graph TB
	I-->LOVE-->YOU

---

1. 方向 (2)

方向：

上：top

下：below

左：left

右：right

用词	含义
TB	从上到下
BT	从下到上
RL	从右到左
LR	从左到右

graph TB
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]

2. 节点 (4)

graph TB

	a[a: 矩形节点]
	
	b(b: 圆角矩形节点)
	
	c((c: 圆形节点))
	
	d{d: 菱形节点}

节点

表述	说明
id[文字]	矩形节点
id(文字)	圆角矩形节点
id((文字))	圆形节点
id>文字]	右向旗帜状节点
id{文字}	菱形节点

3. 连线 (2)

• 直线连接

graph TB
	a---d

• 直线+箭头

graph TB
	a-->b

• 直线+文字

graph TB
	
	c-->|文字|d

• 虚线

graph TB
	a-.->b

• 虚线加文字

graph TB
	a-.->b

连线

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

---

简单小结：

1. 四个形状

2. 二个方向

用词	含义
TB	从上到下
LR	从左到右

3. 二种线条

---

4. 新姿势 (4)

1. 流程图

 graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

graph LR
	subgraph 1. 
        main[app_quick_qanel] --> b[delete_panel_win-删除原本主窗口-并将传入的窗口置为主窗口]
        main --> app_qp_statebar --- 将状态栏给拉出来
        main --> app_qp_create_page --- 页面
        main --> app_qp_guide_win --- 导航菜单
        main --> call[app_quickpanel_show] -.要实现这个.-> 展示快捷窗口的动画
    end
	subgraph 2. 动画
		call -->  create_anim --> anim_quickpanel_down --> 展示快捷窗口的动画
	end

---

2. 时序图

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

---

3. 甘特图

gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10

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

---

4. 类图

---

2. 甘特图

甘特图将每个计划任务记录为一个从左向右延伸的连续条。x 轴代表时间，y 轴记录不同的任务及其完成的顺序。

Mermaid 可以将甘特图呈现为 SVG、PNG 或可以粘贴到文档中的 MarkDown 链接。

title     | 	标题
----------|-------
dateFormat	|日期格式
section	   |模块
Completed	| 已经完成
Active	   | 当前正在进行
Future	   | 后续待处理
crit	      | 关键阶段
日期缺失    |	默认从上一项完成后

• gantt开始
• dateFormat 数据类型

Input       Example             Description:
YYYY        2014                4 digit year
YY          14                  2 digit year
Q           1..4                Quarter of year. Sets month to first month in quarter.
M MM        1..12               Month number
MMM MMMM    January..Dec        Month name in locale set by moment.locale()
D DD        1..31               Day of month
Do          1st..31st           Day of month with ordinal
DDD DDDD    1..365              Day of year
X           1410715640.579      Unix timestamp
x           1410715640579       Unix ms timestamp
H HH        0..23               24 hour time
h hh        1..12               12 hour time used with a A.
a A         am pm               Post or ante meridiem
m mm        0..59               Minutes
s ss        0..59               Seconds
S           0..9                Tenths of a second
SS          0..99               Hundreds of a second
SSS         0..999              Thousandths of a second
Z ZZ        +12:00              Offset from UTC as +-HH:mm, +-HHmm, or Z

• 请以section 关键字开始一行并为其命名。
• %%是注释

gantt
    dateFormat  YYYY-MM-DD
    title       甘特图名称
    
    section 类别A
    已经完成的任务    :         done,     des1,   2014-01-06,  2014-01-08
    进行中的任务      :         active,   des2,   2014-01-09,  3d
    未来的任务        :                   des3,   after des2,  5d

    section 类别B
    完成的关键任务    :crit,    done,             2014-01-06,  24h
    进行中的关键任务  :crit,    active,                        3d
    将来的关键任务    :crit,                                   5d

• 任务名称: 是否关键(crit/缺省),
• 状态(done/active/缺省),
• 任务代号(代号/缺省),
• 开始时间(YYYY-MM-DD/after 其他代号/缺省),
• 结束时间(YYYY-MM-DD/持续时长/缺省)

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

标记	简介
title	标题
dateFormat	标记日期格式
section	模块
Completed	已经完成
Active	当前正在进行
Future	后续待处理
crit	关键阶段
日期缺失	默认从上一项完成后

附录: pandoc导出工具

• pandoc

  • 文档格式转换工具

  • pandoc官网

  pandoc test1.md -f markdown -t html  -o test1.html

• -f: form
• -t: to
• -o: output