資訊專欄INFORMATION COLUMN
摘要：學(xué)習(xí)筆記是一個(gè)庫。通過設(shè)計(jì)一些語法規(guī)則，實(shí)現(xiàn)將符合該語法的語句轉(zhuǎn)化成相應(yīng)的說明圖，例如流程圖通訊圖和甘特圖。不過我目前的主要目的是用它在一個(gè)的文本編輯器中輔助做筆記，內(nèi)置這個(gè)庫，故暫時(shí)忽略其的使用。
mermaid 學(xué)習(xí)筆記 mermaid
mermaid 是一個(gè) JS 庫。
Generation of diagram and flowchart from text in a similar manner as markdown
通過設(shè)計(jì)一些語法規(guī)則，實(shí)現(xiàn)將符合該語法的語句轉(zhuǎn)化成相應(yīng)的說明圖，例如流程圖、通訊圖和甘特圖。
盜其 git-book 的圖，如下
一篇文章中，通過文字的大小，是否加粗，是否為斜體，來表現(xiàn)相應(yīng)內(nèi)容在整篇文章中的層次，結(jié)構(gòu)以及重要與否。Markdown 就通過定義好一系列的標(biāo)示，對應(yīng)著文字不同的樣式，從而使作者將更多精力放在內(nèi)容上，而不是文字的樣式上。例如
# 代表文章標(biāo)題 ## 代表大標(biāo)題 ### 代表中標(biāo)題 #### 代表小標(biāo)題
mermaid 和 Markdown 類似，其通過定義了一系列規(guī)則，符合這些規(guī)則的語句，最后會(huì)呈現(xiàn)為相應(yīng)的說明圖。
同時(shí) mermaid 作為一個(gè) JS 庫，它有一系列的 API ，例如 init() 等。不過我目前的主要目的是用它在 typora（一個(gè) Markdown 的文本編輯器）中輔助做筆記， typora 內(nèi)置這個(gè) JS 庫，故暫時(shí)忽略其 API 的使用。
繪制流程圖聲明進(jìn)行流程圖繪制的語法是：
graph TB
其中 graph 代表后面的內(nèi)容表達(dá)的是一個(gè)流程圖， TB 代表的是流向，流向有四種
TB 意味著 Top-bottom
BT 意味著 Bottom-top
RL 意味著 Right-left
LR 意味著 Left-right
繪制一個(gè)包含開始，過程和結(jié)束的流程圖的語法如下
graph TB
start[開始]-->process[過程]
process-->end[結(jié)束]
from[源節(jié)點(diǎn)的樣式]-->to[目的節(jié)點(diǎn)的樣式]
在一次信息流的傳遞過程中，有以下幾個(gè)參數(shù)可選
源節(jié)點(diǎn)的內(nèi)容
源節(jié)點(diǎn)的樣式，不同的樣式，代表不用的含義，例如用菱形代表?xiàng)l件選擇（if-else）
傳遞的方式
目的節(jié)點(diǎn)的內(nèi)容
目的節(jié)點(diǎn)的樣式
其中源節(jié)點(diǎn)的內(nèi)容就是框中所要表現(xiàn)的文字，而源節(jié)點(diǎn)的樣式就是只包裹文字的框的樣式，有默認(rèn)的方形方框、圓角方框、圓、不對稱方框以及菱形，用說明圖表示如下
對應(yīng)源碼
graph LR
C[節(jié)點(diǎn)的樣式]
C-->F1[默認(rèn)方框]
C-->F2(圓角方框)
C-->F3((圓形節(jié)點(diǎn)))
C-->F4>不對稱節(jié)點(diǎn)]
C-->F5{菱形節(jié)點(diǎn)}
傳遞的方式用流程圖表示如下：
對應(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
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/90392.html
摘要：在搜索了一些資料后我把我的工作分成了兩個(gè)部分第一個(gè)部分就是時(shí)間的獲取第二個(gè)部分是燈光的控制。模塊聯(lián)網(wǎng)的方式是通過其與分別與串口的端和端相連通過串口通信發(fā)送指令來控制實(shí)現(xiàn)聯(lián)網(wǎng)。通過了解我發(fā)現(xiàn)可以通過芯片內(nèi)部的時(shí)鐘來實(shí)現(xiàn)時(shí)間的自走功能。 ...
摘要：當(dāng)你完成了一篇文章的寫作在上方工具欄找到文章導(dǎo)出，生成一個(gè)文件或者文件進(jìn)行本地保存。導(dǎo)入如果你想加載一篇你寫過的文件或者文件，在上方工具欄可以選擇導(dǎo)入功能進(jìn)行對應(yīng)擴(kuò)展名的文件導(dǎo)入，繼續(xù)你的創(chuàng)作。 @TOC 歡迎使用Markdown編輯器 你好！ 這是你第一次使用 Markdown編輯器 所展示的歡迎頁。如果你想學(xué)習(xí)如何使用Markdown編輯器, 可以仔細(xì)閱讀這篇文章，了解一下Mark...
摘要：背景最近在分析一些框架源碼，在寫筆記的時(shí)候，一些函數(shù)的調(diào)用棧希望用流程圖的形式記錄下來，打開就是一頓操作，畫了幾個(gè)調(diào)用棧之后，感覺很麻煩。 背景 最近在分析一些框架源碼，在寫筆記的時(shí)候，一些函數(shù)的調(diào)用棧希望用流程圖的形式記錄下來，打開 http://draw.io 就是一頓操作，畫了幾個(gè)調(diào)用棧之后，感覺很麻煩。于是蹲在廁所里的我開始思考了，調(diào)用棧既然可以用 console.trace(...
閱讀 886·2023-04-25 21:21
閱讀 3254·2021-11-24 09:39
閱讀 3102·2021-09-02 15:41
閱讀 2039·2021-08-26 14:13
閱讀 1856·2019-08-30 11:18
閱讀 2822·2019-08-29 16:25
閱讀 535·2019-08-28 18:27
閱讀 1614·2019-08-28 18:17
