我的更多相關(guān)文章：

• 【系統(tǒng)學(xué)習(xí)Markdown1】基礎(chǔ)語法入門
• 【系統(tǒng)學(xué)習(xí)Markdown2】mermaid等語法插入時序圖、流程圖蛔屹、甘特圖等高級插圖
• 【系統(tǒng)學(xué)習(xí)Markdown3】編寫插入Latex數(shù)學(xué)公式

Markdown圖表語法

本文介紹如何用Markdown的mermaid等語法插入時序圖哩治、流程圖泽谨、甘特圖

• 如果是想學(xué)習(xí)Markdown基本語法组哩，請看：系統(tǒng)學(xué)習(xí)GitHub Flavored Markdown（GFM）
• 如果想學(xué)習(xí)如何在Markdown中輸入數(shù)學(xué)符號和公式瑟匆，請看:小白入門LaTex編寫數(shù)學(xué)公式

內(nèi)容整合了：

• 印象筆記 Markdown 入門指南
• 【進階版】有道云筆記Markdown指南
• markdown繪圖插件----mermaid簡介
• 我的思考總結(jié)

目錄

目錄

幾款支持Markdown編輯器的比較

1.有道云筆記不能加mermaid字段，不然會顯示不出, 有道云筆記省略了mermaid字段聲明

2.在移動端支持上有道云筆記支持的語法和功能也更多一些眼刃，能夠在手機端編輯和查看流程圖绕辖。而印象筆記既無法編輯更無法查看流程圖

3.只有印象筆記增加了一個chart聲明的語法功能摇肌，可以畫圖表擂红，類似Echart效果

4.在Markdown功能支持豐富度比較：GitHub > 有道云筆記 > 印象筆記 > 簡書 & Jupyter notebook

插入圖表(chart語法)

目前支持餅狀圖、折線圖围小、柱狀圖和條形圖昵骤，只需將 type 改為對應(yīng)的pie、line肯适、column 和 bar变秦。（默認柱形圖））
目前好像只有印象筆記能夠?qū)崿F(xiàn)，其他都不行

印象筆記chart語法得到的文件

```chart    
,預(yù)算,收入,花費,債務(wù)          # 前面逗號不能省
June,5000,8000,4000,6000
July,3000,1000,4000,3000
Aug,5000,7000,6000,3000
Sep,7000,2000,3000,1000
Oct,6000,5000,4000,2000
Nov,4000,3000,5000,


type: column
title:每月收益
x.title: Amount
y.title: Month
y.prefix: $                     #  后綴是：y.suffix: $
```

flowchart語法畫流程圖

目前筆記APP都不支持這個語法,暫時不用管框舔，出來類似于Visio效果

flowchart流程圖

原文鏈接：markdown流程圖

插入數(shù)學(xué)公式

支持絕大多數(shù)的 LaTeX 數(shù)學(xué)公式

```math
e^{i\pi} + 1 = 0
```

$$y = k x + b \tag{1}$$ 

其中$$ $$代表單獨一行的公式蹦玫，\tag{1}才是公式右邊的{1}赎婚。印象筆記暫時支持不完善。

插入流程圖（mermaid語法）

書寫graph XX樱溉，用以確定將要繪制的流程圖及其類型（XX表示流程圖類型）挣输。

方向控制

流程圖分為豎向和橫向兩大類，豎向包括自上而下和自下而上兩種順序福贞，橫向包括從右到左和從左到右兩種順序撩嚼。
其對應(yīng)語法分別為：graph TB/graph BT/graph RL/graph LR。

TB - top bottom（自上而下）
BT - bottom top（自下而上）
RL - right left（從右到左）
LR - left right（從左到右）
TD: 默認方向挖帘，從上到下

連接線與箭頭

此語法有道云筆記支持完丽，印象筆記目前不支持
一個箭頭 -> 只能表示一條線
要表示箭頭，需要兩個箭頭 ->>
虛線用兩個虛線表示 -->>

有道云筆記的線條樣式

```mermaid
graph TD
A[模塊A] -->|A1| B(模塊B)
B --> C{判斷條件C}
C -->|條件C1| D>模塊D]
C -->|條件C2| E((模塊E))
C -->|條件C3| F["模塊F(引號可轉(zhuǎn)義特殊字符)"]
```

印象筆記流程圖示例

高級語法（比較少用到）

html字符的轉(zhuǎn)義字符

html字符的轉(zhuǎn)義字符

```mermaid
graph LR 
A["A double quote:#quot;"]-->B["A dec char:#9829;"]
```

CSS樣式

CSS樣式

```mermaid

graph LR
     id1(Start)-->id2(Stop)
     style id1 fill:#f9f,stroke:#333,stroke-width:4px;
     style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray:5,5;

```

樣式類

樣式類

子圖(Subgraphs)

subgraph title
graph definition
end

子圖

插入時序圖

```mermaid
sequenceDiagram
A->>B: 是否已收到消息拇舀？
B-->>A: 已收到消息
```

時序圖

mermaid通過設(shè)定參與者(participants)的順序控制二者的順序逻族。上面的圖可以做如下修改：

mermaid的participant不支持直接聲明顏色，只能聲明個名字了
線條樣式如下

```mermaid
sequenceDiagram
　　participant John
　　participant Alice
　　Alice->>John:Hello John,how are you?
　　John-->>Alice:Great!
     Alice->John: dont borther me ! 
     John-->Alice:Great! 
     Alice-xJohn: wait! 
     John--xAlice: Ok!
```

線條樣式

高級用法(比較少用）

便簽

語法：[right of | left of | over][Actor]:Text

便簽的用法

```mermaid
sequenceDiagram
participant John
Note left of John:左邊的文本

Alice->>John:Hello John, how are you?
Note over Alice,John:跨越兩個Actor的便簽
```

循環(huán)Loops

語法：

loop 循環(huán)的文本
... statements... 
end

loop循環(huán)

```mermaid
sequenceDiagram
    Alice->>John: Hello!
    loop Reply every minute
        John->>Alice: Great!
    end
```

選擇ALT

在時序圖中選擇性表達

alt Describing text
    …statements…
else
     …statements…
 end

或者使用opt(推薦在沒有else的情況下使用)

opt 描述文本
    ...statements... 
end

選擇ALT與OPT

```mermaid
sequenceDiagram
    Alice->>Bob: Hello Bob, How are you?
    alt is sick
        Bob->>Alice: not so good :(
    else is well
        Bob->>Alice: Feeling fresh like a daisy :)
    end
    opt Extra response
        Bob->>Alice: Thanks for asking
    end
```

舉個大栗子 :)

綜合大例子

識別不了換行</br>

```mermaid
graph TB
    sq[Square shape] --> ci((Circle shape))

    subgraph A subgraph
        di{Diamond with  line break} -.-> ro(Rounded)
        di==>ro2(Rounded square shape)
    end

    e --> od3>Really long text with linebreak<br>in an Odd shape]

    cyr[Cyrillic]-->cyr2((Circle shape Начало));

    classDef green fill:#9f6,stroke:#333,stroke-width:2px;
    classDef orange fill:#f96,stroke:#333,stroke-width:4px;
    class sq,e green
    class di orange
```

插入甘特圖

mermaid字段可以不寫骄崩，也不會影響圖片顯示（有點奇怪）
一個section和另一個section之間要空行

```mermaid
gantt
title 甘特圖
dateFormat YYYY-MM-DD

section 項目A
任務(wù)1 :a1, 2018-06-06, 30d
任務(wù)2 :after a1 , 20d

section 項目B
任務(wù)3 :2018-06-12 , 12d
任務(wù)4 : 24d
```

甘特圖示例

語法說明

語法：

section 項目名稱
分任務(wù)名稱 : [狀態(tài)], [當(dāng)前節(jié)點名稱], [開始時間], 結(jié)束時間/持續(xù)時間

舉個大栗子 :)

甘特圖綜合大例子

```mermaid
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

```

印象筆記Markdown快捷鍵