markdown之mermaid流程图

朴灿烈づ我的快乐病毒、 2022-09-03 14:16 230阅读 0赞

### 文章目录 ###

*   *  1. 流程图
     *   *  1. 方向 \`(2)\`
         *  2. 节点 \`(4)\`
         *  3. 连线 \`(2)\`
         *  4. 新姿势 \`(4)\`
     *  2. 甘特图
 *  附录: pandoc导出工具

## 1. 流程图 ##

![image-20200924140817858][]

--------------------

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

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

有

没有

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

房子

YOU

go away

LOVE

**总结特性：**

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

graph TB
    	I-->LOVE-->YOU

--------------------

![image-20200924092903353][]

### 1. 方向 `(2)` ###

**方向：**

> 上：`top`
> 
> 下：`below`
> 
> 左：`left`
> 
> 右：`right`

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: 菱形节点

**节点**

<table> 
 <thead> 
  <tr> 
   <th>表述</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>id[文字]</code></td> 
   <td>矩形节点</td> 
  </tr> 
  <tr> 
   <td><code>id(文字)</code></td> 
   <td>圆角矩形节点</td> 
  </tr> 
  <tr> 
   <td><code>id((文字))</code></td> 
   <td>圆形节点</td> 
  </tr> 
  <tr> 
   <td><code>id&gt;文字]</code></td> 
   <td>右向旗帜状节点</td> 
  </tr> 
  <tr> 
   <td><code>id{文字}</code></td> 
   <td>菱形节点</td> 
  </tr> 
 </tbody> 
</table>

### 3. 连线 `(2)` ###

*  直线连接

graph TB
    	a---d

*  直线+箭头

graph TB
    	a-->b

*  直线+文字

graph TB
    	
    	c-->|文字|d

文字

*  虚线

graph TB
    	a-.->b

*  虚线加文字

graph TB
    	a-.->b

文字

**连线**

<table> 
 <thead> 
  <tr> 
   <th>表述</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>&gt;</code></td> 
   <td>添加尾部箭头</td> 
  </tr> 
  <tr> 
   <td><code>-</code></td> 
   <td>不添加尾部箭头</td> 
  </tr> 
  <tr> 
   <td><code>--</code></td> 
   <td>单线</td> 
  </tr> 
  <tr> 
   <td><code>--text--</code></td> 
   <td>单线上加文字</td> 
  </tr> 
  <tr> 
   <td><code>==</code></td> 
   <td>粗线</td> 
  </tr> 
  <tr> 
   <td><code>==text==</code></td> 
   <td>粗线加文字</td> 
  </tr> 
  <tr> 
   <td><code>-.-</code></td> 
   <td>虚线</td> 
  </tr> 
  <tr> 
   <td><code>-.text.-</code></td> 
   <td>虚线加文字</td> 
  </tr> 
 </tbody> 
</table>

--------------------

**简单小结：**

1.  四个形状

a: 矩形节点

b: 圆角矩形节点

c: 圆形节点

d: 菱形节点

1.  二个方向

1.  二种线条

--------------------

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

要实现这个

展示快捷窗口的动画

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

--------------------

1.  时序图

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!

AliceBobJohnHello John, how are you?Fight against hypochondrialoop\[Healthcheck\]Rational thoughtsprevail!Great!How about you?Jolly good!AliceBobJohn

--------------------

1.  甘特图

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

--------------------

1.  类图

Class01int chimp int gorillasize()AveryLongClassClass03Class04Class05Class06Class07Object\[\] elementDataequals()Class08Class09C2C3CoolWhere 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 06Mon 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 06Mon 13Mon 20T1 T2 T3S1 S2 S3

<table> 
 <thead> 
  <tr> 
   <th align="left">标记</th> 
   <th align="left">简介</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">title</td> 
   <td align="left">标题</td> 
  </tr> 
  <tr> 
   <td align="left">dateFormat</td> 
   <td align="left">标记日期格式</td> 
  </tr> 
  <tr> 
   <td align="left">section</td> 
   <td align="left">模块</td> 
  </tr> 
  <tr> 
   <td align="left">Completed</td> 
   <td align="left">已经完成</td> 
  </tr> 
  <tr> 
   <td align="left">Active</td> 
   <td align="left">当前正在进行</td> 
  </tr> 
  <tr> 
   <td align="left">Future</td> 
   <td align="left">后续待处理</td> 
  </tr> 
  <tr> 
   <td align="left">crit</td> 
   <td align="left">关键阶段</td> 
  </tr> 
  <tr> 
   <td align="left">日期缺失</td> 
   <td align="left">默认从上一项完成后</td> 
  </tr> 
 </tbody> 
</table>

# 附录: pandoc导出工具 #

*  pandoc
    
    >  *  文档格式转换工具
    >  *  [pandoc官网][pandoc]

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

*  `-f`: form
 *  `-t`: to
 *  `-o`: output

[image-20200924140817858]: /images/20220829/f224e96a4bca4a38ad8fd985630eef60.png
[image-20200924092903353]: /images/20220829/80d683bc04a44d8c832699cc7efb1ff9.png
[pandoc]: https://www.pandoc.org/