使用Mermaid畫圖


很多時候,你想解釋自己的想法/代碼,但是用語言來表達會很啰嗦,並且讀者也不易理解。一般這種情況下,我們都會想使用圖解來解釋。但是,我們也不會想下載那些繁重的工具,比如Visio。

Mermaid 是一個用來畫流程圖,甘特圖等圖形的工具。它是一個Javascript庫,但是它也是一種語言,一種類似markdown的語言。

任何時候,你想要測試Mermaid語法,都可以使用這個在線編輯器

流程圖的示例

graph TD
    A --> B
    A --> C
    B --> D
    C --> D

1554405977808

時序圖的示例

sequenceDiagram
    participant 小明
    participant 小紅
    小明 -> 小強: 小強,最近怎么樣?
    loop 健康檢查
        小強 -> 小強: 和疾病做斗爭
    end
    Note right of 小強: 理性的思考: <br/> 怎么回答呢...
    小強 --> 小明: 挺好的!
    小強 -> 小紅: 你怎么樣?
    小紅 --> 小強: 非常好!

WechatIMG6380

甘特圖的示例

gantt
    dateFormat  YYYY-MM-DD
    title 為mermaid加入甘特圖功能
    section A部分
    完成任務        :done, des1,2019-01-06,2019-01-08
    正進行任務      :active, des2,2019-01-09,3d
    待開始任務      :des3, after des2, 5d
    待開始任務2     :des4, after des3, 5d
    section 緊急任務
    完成任務        :crit,done,2019-01-06,24h
    實現parser     :crit,done,after des1, 2d
    為parser編寫test :crit, active, 3d
    待完成任務      :crit,5d
    為rendere編寫test: 2d
    將功能加入到mermaid: 1d

1554407104297

FAQ


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM