MarkDown学习笔记-02

Thu, Feb 18, 2021 2-minute read

MarkDown学习笔记-02

在上次的基础上再增加一点东西

参考文档

流程图

通过mermaid实现

TOP BOTTOM LEFT RIGHT DOWN

graph TB;
A-->B
B-->C
C-->A

graph TB
A 
B(圆角矩形)
A1[矩形]
C{菱形}
D((圆形))
E>右旗帜]
表述 说明 含义
id[文字] 矩形节点 表示过程，也就是整个流程中的一个环节
id(文字) 圆角矩形节点 表示开始和结束
id((文字)) 圆形节点 表示连接。为避免流程过长或有交叉，可将流程切开。成对
id{文字} 菱形节点 表示判断、决策
id>文字] 右向旗帜状节点 
graph TB
  A1-->B1
  A2---B2
  A3--text---B3
  A4--text-->B4
  A5-.-B5
  A6-.->B6
  A7-.text.-B7
  A8-.text.->B8
  A9===B9
  A10==>B10
  A11==text===B11
  A12==text==>B12

序列图

sequenceDiagram
	Title: 吃午饭
    三石->>妈妈: 有午饭吗？
    妈妈-->>三石: 没有
类型 描述
-> 无箭头的实线
–> 无箭头的虚线
-» 有箭头的实线（主动发出消息）
–-» 有箭头的虚线（响应）
-x 末端为叉的实线（表示异步）
–x 末端为叉的虚线（表示异步） 
sequenceDiagram
    participant 99 as 三石
    participant seller as 妈妈
    Note over 99,seller : 我好饿
    Note left of 99 : 男
    Note right of seller : 女
    99 ->> seller: 有饭吗？
    seller -->> 99: 没有。
    99 -x +seller : 给我做一点！
    seller -->> -99: 自己想办法！

循环

sequenceDiagram
    participant 99 as 三石
    participant seller as 妈妈
   
    99 ->> seller: 有午饭吗？
    seller -->> 99: 没有。
    99 ->> +seller:做一点吧！
    loop 三分钟一次
        99 ->> seller : 我好了没？
        seller -->> 99 : 正在做
    end
    seller -->> -99: 好了！

饼图


pie
    title Pie Chart
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 150

甘特图

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