要想學習Mermaid語法，可以點擊：

https://mermaid.nodejs.cn/syntax/flowchart.html

本文針對上面第三步提到所需要的渲染工具或代碼轉換工具做一個介紹

本文導航

一、工具網站合集
二、工具使用介紹：包括登錄、格式導入、調整樣式、導出幾部分

一、工具網站合集

推薦的工具：

免費、使用方便（能在線無需下載）、好看、下載無水印、支持格式多
Xmind： https://xmind.cn/
GitMind：https://gitmind.cn/app/recents
百度腦圖：https://naotu.baidu.com/
幕布：https://mubu.com/app/edit/
Mermaid在線編輯器：https://mermaid.nodejs.cn/
draw.io：https://www.drawio.com/
iodraw：https://www.iodraw.com/

二、工具使用介紹

（一）XMind

登錄

登錄網址：https://xmind.cn/

點擊【在線導圖】-【創建在線導圖】

導入

采用【Markdown格式】導入路徑
選擇【新建導圖】

左上角點擊【三條橫杠】【文件】【導入】【Markdown】
如果是其他格式，可以選擇其他格式類型即可，如OPML

調整樣式

畫布的右上角、下方有優化樣式的選項，如下圖

導出路徑

左上角點擊【三個橫杠】【導出】，可以保存為PNJ、JPEG格式

（二）GitMind

登錄

登錄網址：https://gitmind.cn/app/recents
點擊登錄/注冊

導入

采用Markdown格式導入路徑：
點擊【更多操作】【本地導入】

點擊【本地導入】后【選擇文件】，按要求上傳符合格式的文件，點擊【確定】

調整樣式

畫布的上方可以修改節點、調樣式

樣式要選擇【熒光筆】處

下方【思維導圖】也可以切換為【大綱視圖】【大綱+導圖】樣式

導出

導出路徑：右上角

根據個人需要導出相應格式即可

如果導出的是word格式，出來的是大綱樣式

（三）百度腦圖

登錄

登錄網址：https://naotu.baidu.com/
點擊【馬上開啟】或使用【百度賬號登錄

導入

采用Markdown格式導入路徑：
點擊【新建腦圖】

左上角點擊【百度腦圖】

點擊【打開】【打開本地文件】

選擇需要上傳的文件，需要匹配相應的格式

調整樣式

可以選擇左上方的【思路】【外觀】【視圖】

導出

和打開在一個位置選擇，然后點擊【另存為】【導出】

導出的格式：

（四）幕布

登錄

登錄網址：https://mubu.com

導入

導入路徑：【導入】【導入OPML】

示例導入OPML格式
讓Deepseek導出OPML格式即可

復制粘貼后，顯示的是【大綱筆記】模式
可以切換到右上角的【思維導圖】模式

調整樣式

右側的選項可以調樣式

導出

點擊右上角的三個點，點擊【導出/下載】

導出格式

（五）Mermaid在線編輯器

登錄

登錄網址：https://mermaid.nodejs.cn/
點擊【在線編輯器】

導入

以Mermaid格式插入的路徑：
將Mermai內容在【代碼】區域復制，右側即可顯示出相應的圖表

左下角有【示例圖表】

調整樣式

右上角的【主題】可以設置是白板，還是黑板

其實mermaid的樣式是通過代碼這是的，這個時候需要學習【文檔】
如下：左圖我標出的是代碼，右側是圖表樣式

敲重點！點擊【文檔】

這里可以學習各類圖表的Mermaid語法，個人覺得還是很不錯的

導出

可以點擊【歷史記錄】查看以往圖表

（六）Draw.io

登錄

登錄網址：https://www.drawio.com/
點擊【Start】即可

點擊【創建新繪圖】或【打開現有繪圖】

命名【文件名】，一般默認【空白框圖】，然后點擊【創建】

導入

以Mermaid格式插入的路徑：
點擊左上角【插入】【高級】【Mermaid】

把Mermaid內容復制到文本框，點擊【插入】

調整樣式

點擊左上角【格式】，會在右側彈出具體選項【樣式】【繪圖】

導出

左上角【繪圖】【導出為】

導出為【PNG】（圖片）

導出為PDF

【頁面視圖】為導出前頁面看到的部分
【裁剪】一般為只有圖片大小
【適應】一般為尺寸下的文件，一般為A4大小
可以設置邊框寬度等

（七）ioDraw

登錄

登錄網址：https://www.iodraw.com/

點擊【開始】和點擊右上角【產品】所出來的頁面不一樣。
路徑1：點擊【開始】后的操作和【Mermaid在線編輯器】類似
路徑2：點擊右上角的【產品】【代碼繪圖】后的操作【Drawio】類似

路徑1：點擊開始

導入

以Mermaid格式插入的路徑

導出

右上角【導出】，有三種格式

這兩個地方留意下【示例】【教程】

路徑2：點擊右上角【產品】【代碼繪圖】

導入

以Mermaid格式插入的路徑

【插入加號】→【高級】→【Mermaid】

復制內容，點擊【插入】

即可生成

調整樣式

導出

點擊【文件】【導出為】，選擇相應格式即可

本文轉載自公眾號@普羅米AI