markdown之mermaid流程图

1. 流程图

---

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

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

1

2

有

没有

隔壁老王家阿姨的四姨父家的翠花

房子

YOU

go away

LOVE

总结特性：

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	从左到右

I

LOVE

YOU

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]

Get money

One

Two

Three

Christmas

Go shopping

Let me think

Laptop

iPhone

Car

2. 节点 (4)

graph TB

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

a: 矩形节点

b: 圆角矩形节点

c: 圆形节点

d: 菱形节点

节点

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

3. 连线 (2)

• 直线连接

graph TB
	a---d

a

d

• 直线+箭头

graph TB
	a-->b

a

b

• 直线+文字

graph TB
	
	c-->|文字|d

文字

c

d

• 虚线

graph TB
	a-.->b

a

b

• 虚线加文字

graph TB
	a-.->b

文字

c

b

连线

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

a

b

c

d

---

简单小结：

1. 四个形状

a: 矩形节点

b: 圆角矩形节点

c: 圆形节点

d: 菱形节点

2. 二个方向

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

3. 二种线条

a

b

c

d

---

4. 新姿势 (4)

1. 流程图

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

A

B

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. 动画

1.

要实现这个

展示快捷窗口的动画

anim_quickpanel_down

create_anim

app_quickpanel_show

delete_panel_win-删除原本主窗口-并将传入的窗口置为主窗口

app_quick_qanel

将状态栏给拉出来

app_qp_statebar

页面

app_qp_create_page

导航菜单

app_qp_guide_win

---

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 
prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

Alice Bob John Hello John, how are you? Fight against hypochondria loop [Healthcheck] Rational thoughts prevail! Great! How about you? Jolly good! Alice Bob John

---

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. 类图

Class01 int chimp int gorilla size() AveryLongClass Class03 Class04 Class05 Class06 Class07 Object[] elementData equals() Class08 Class09 C2 C3 Cool Where am i? Cool label

---

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/持续时长/缺省)

Mon 06 Mon 13 已经完成的任务 进行中的任务 未来的任务 完成的关键任务 进行中的关键任务 将来的关键任务 类别A 类别B 甘特图名称

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

Mon 06 Mon 13 Mon 20 T1 T2 T3 S1 S2 S3

标记	简介
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