注水：mermaid 學(xué)習(xí)筆記

cheukyin 發(fā)布于2019-08-21 18:22 / 1584人閱讀

摘要：學(xué)習(xí)筆記是一個庫。通過設(shè)計一些語法規(guī)則，實現(xiàn)將符合該語法的語句轉(zhuǎn)化成相應(yīng)的說明圖，例如流程圖通訊圖和甘特圖。不過我目前的主要目的是用它在一個的文本編輯器中輔助做筆記，內(nèi)置這個庫，故暫時忽略其的使用。

mermaid 學(xué)習(xí)筆記 mermaid

mermaid 是一個 JS 庫。

Generation of diagram and flowchart from text in a similar manner as markdown

通過設(shè)計一些語法規(guī)則，實現(xiàn)將符合該語法的語句轉(zhuǎn)化成相應(yīng)的說明圖，例如流程圖、通訊圖和甘特圖。

盜其 git-book 的圖，如下

一篇文章中，通過文字的大小，是否加粗，是否為斜體，來表現(xiàn)相應(yīng)內(nèi)容在整篇文章中的層次，結(jié)構(gòu)以及重要與否。Markdown 就通過定義好一系列的標示，對應(yīng)著文字不同的樣式，從而使作者將更多精力放在內(nèi)容上，而不是文字的樣式上。例如

# 代表文章標題

## 代表大標題

### 代表中標題

#### 代表小標題

mermaid 和 Markdown 類似，其通過定義了一系列規(guī)則，符合這些規(guī)則的語句，最后會呈現(xiàn)為相應(yīng)的說明圖。

同時 mermaid 作為一個 JS 庫，它有一系列的 API ，例如 init() 等。不過我目前的主要目的是用它在 typora（一個 Markdown 的文本編輯器）中輔助做筆記， typora 內(nèi)置這個 JS 庫，故暫時忽略其 API 的使用。

繪制流程圖

聲明進行流程圖繪制的語法是：

graph TB

其中 graph 代表后面的內(nèi)容表達的是一個流程圖， TB 代表的是流向，流向有四種

TB 意味著 Top-bottom

BT 意味著 Bottom-top

RL 意味著 Right-left

LR 意味著 Left-right

繪制一個包含開始，過程和結(jié)束的流程圖的語法如下

graph TB
    start[開始]-->process[過程]
    process-->end[結(jié)束]

from[源節(jié)點的樣式]-->to[目的節(jié)點的樣式]

在一次信息流的傳遞過程中，有以下幾個參數(shù)可選

源節(jié)點的內(nèi)容

源節(jié)點的樣式，不同的樣式，代表不用的含義，例如用菱形代表條件選擇（if-else）

傳遞的方式

目的節(jié)點的內(nèi)容

目的節(jié)點的樣式

其中源節(jié)點的內(nèi)容就是框中所要表現(xiàn)的文字，而源節(jié)點的樣式就是只包裹文字的框的樣式，有默認的方形方框、圓角方框、圓、不對稱方框以及菱形，用說明圖表示如下

對應(yīng)源碼

graph LR
    C[節(jié)點的樣式]
    C-->F1[默認方框]
    C-->F2(圓角方框)
    C-->F3((圓形節(jié)點))
    C-->F4>不對稱節(jié)點]
    C-->F5{菱形節(jié)點}

傳遞的方式用流程圖表示如下：

對應(yīng)源碼如下

graph LR
    subgraph 例子
    B-->B1[箭頭]
    C---C1[無箭頭]
    D-->|文字|D1[文字]
    E-.->E1[虛線]
    F==>F1[粗線]
    end
    subgraph 傳遞的方式
    A[分類]
    A-->A1[有無箭頭]
    A-->A2[有無文字]
    A-->A3[線的形狀]
    end