[轉(zhuǎn)帖]Mermaid 使用教程：從入門到精通
當前位置：點晴教程→知識管理交流
→『 技術文檔交流 』
 ：Mermaid 使用教程：從入門到精通 Mermaid 使用教程：從入門到精通——流程圖、時序圖、甘特圖、類圖等圖形繪制輕松搞定 已認證賬號 17 人贊同了該文章 Mermaid 使用教程：從入門到精通——流程圖、時序圖、甘特圖、類圖等圖形繪制輕松搞定什么是 Mermaid 語法？mermaid是一種Javascript庫, 可以用于生成流程圖、序列圖、甘特圖等各種圖表。由于其簡單易用、功能強大,越來越多的人開始使用它來創(chuàng)建圖表。 如何使用 Mermaid 語法？
你可以在FlowUs中直接使用mermaid語法來創(chuàng)建各種類型的圖表，還支持將直接將圖片直接保存下來！  Mermaid 語法不會寫？推薦閱讀 此外，也使用 AI 工具輔助一鍵生成。  圖表類型支持
餅圖Pie Chart,中文也稱之為“餅狀圖”,是一種常用的數(shù)據(jù)可視化工具,可以用于展示不同部分之間的占比關系。使用Mermaid 繪制餅形圖也十分簡單,只需要按照以下格式編寫即可: pie title 數(shù)據(jù)比例圖 "選項1" : 25 "選項2" : 50 "選項3" : 25 其中, 除此之外,還有一些可選的參數(shù)可以進行設置:
在繪制完餅形圖之后,你可以將它嵌入到你的文章或者報告中,這樣就能夠清晰直觀地展示數(shù)據(jù)的占比關系了。 流程圖除了餅形圖之外,Mermaid還支持多種圖表類型,其中最常用的就是流程圖了。 流程圖可以用于展示某個過程中各個步驟的順序和關系,例如軟件開發(fā)過程中的各個階段、某個業(yè)務流程中的各個環(huán)節(jié)等等。 使用Mermaid繪制流程圖同樣也是非常簡單的: graph LR A-->B B-->C C-->D D-->E  其中,每個人物或狀態(tài)都用一個大寫字母表示。箭頭表示流程中的方向,可以是兩個人物之間直接的連線,也可以是虛擬的線。 例如,上面的流程圖中,大寫字母A表示流程的初始狀態(tài),箭頭指向B表示從狀態(tài)A到狀態(tài)B的流程方向。  節(jié)點還可以調(diào)用修飾函數(shù),對節(jié)點進行顏色、邊框、虛線等方面的設置,如下所示: graph LR A --> B --> C --> D style A fill:#F0F0F0,stroke:#333,stroke-width:2px; style B fill:#FFF,stroke:#333,stroke-width:2px,stroke-dasharray: 5 5; style C fill:#FFA500,stroke:#333,stroke-width:2px; style D fill:#FFF,stroke:#333,stroke-width:2px,stroke-dasharray: 5 5;  其中, 時序圖時序圖可以用于展示系統(tǒng)交互、程序控制流程等。在 Mermaid 中,時序圖的渲染方式也是非常簡便的。 sequenceDiagram participant User participant System User->>System: 發(fā)送請求 System->>User: 返回響應  狀態(tài)圖狀態(tài)圖用于展示對象的狀態(tài)和狀態(tài)間的轉(zhuǎn)移過程。在mermaid中,狀態(tài)圖的語法也是非常簡單的。狀態(tài)圖可以用于展示對象的生命周期、狀態(tài)轉(zhuǎn)移等。 stateDiagram [*] --> 暫停 暫停 --> 播放 暫停 --> 停止 播放 --> 暫停 播放 --> 停止 停止 --> [*]  甘特圖甘特圖用于展示項目進度安排、任務分配等信息,也是mermaid支持的一種圖表類型。 gantt title 甘特圖示例 dateFormat YYYY-MM-DD section 項目A 任務1 :a1, 2023-05-01, 10d 任務2 :after a1 , 20d section 項目B 任務3 :2023-05-15 , 12d 任務4 :2023-05-20 , 10d   甘特圖也支持更多的屬性設定,如顏色、進度等,可以參考官方文檔進行進一步學習。 類圖類圖用于展示類之間的關系,屬性和方法。在mermaid中,類圖的語法也是非常常用的。 classDiagram
class Animal {
+name: string
+age: int
+eat(food: string): void
}
class Dog {
+sound: string
+bark(): void
}
class Cat {
+climb(): void
}
Animal <|-- Dog
Animal <|-- Cat  class類圖中還有更多的屬性設定,如抽象類、接口、關聯(lián)關系等,可以參考官方文檔進行更多學習。 用戶旅程用戶旅程圖主要分為多個階段或步驟,描述了用戶在使用產(chǎn)品或服務時的流程和情感反應。 在每個步驟中,可以進一步描述用戶的行為和反饋,可以幫助產(chǎn)品團隊更好地理解用戶需求和體驗,進而進行產(chǎn)品優(yōu)化和改進。 在mermaid中,用戶旅程圖的語法如下: journey title 用戶旅程圖 section 登錄 已有賬號 : 已有賬號頁面 點擊登錄 : 登錄操作 登錄成功 : 登錄成功頁面 section 注冊 沒有賬號 : 注冊頁面 點擊注冊 : 注冊操作 注冊成功 : 注冊成功頁面  以上是mermaid中常用的幾種圖表類型以及它們的語法和關鍵詞,它們可以幫助我們更好地理解數(shù)據(jù)和信息,以及進行溝通和展示。 參考文獻最后，推薦在使用 Mermaid 過程中使用 FlowUs AI 輔助制圖。即便是你對 Mermaid 一無所知，你可以制作出精美、強大、好看的圖形。 FlowUs AI視頻圖文 除了以上幾種圖表類型,mermaid還支持思維導圖、時間線等多種圖表類型,可以根據(jù)不同需求選擇適合的圖表類型進行使用。 該文章在 2023/12/2 16:45:31 編輯過 |
關鍵字查詢
相關文章
正在查詢... 
|
400 186 1886
