如何在 NoteRich 中使用 Mermaid.js 繪製流程圖 – 完整教學

需要啟用 JavaScript

# 如何使用Mermaid.js在NoteRich中創建流程圖 – 完整指南僅用文字來呈現複雜的流程、系統結構或決策樹可能會很困難。**Mermaid.js**是一種功能強大的基於JavaScript的圖表工具，它讓你使用簡單的文字定義來創建圖表。在**NoteRich**中，我們將Mermaid.js直接整合到編輯器中，這樣你就可以在不離開筆記界面的情況下，創造出專業的流程圖、序列圖等圖表。本指南將為你講述在NoteRich中掌握Mermaid圖表所需的全部知識，包括如何使用AI和OCR功能來即時生成圖表。 --- ## 🚀 為何要在NoteRich中使用Mermaid？ * **以文字為基礎：** 使用代碼來定義圖表，這樣可以方便版本控制與編輯。 * **即時預覽：** 在輸入文字時就能即時看到修改後的圖表效果。 * **多功能性：** 支援流程圖、序列圖、類圖、狀態圖、甘特圖等各種圖表。 * **AI與OCR功能：** 能夠根據自然語言描述或通過掃描現有圖像來生成圖表。 * **本地儲存：** 圖表的定義會儲存在筆記文件中，這樣就可以保護您的隱私並在離線情況下使用圖表。 --- ## 📝 入門：插入Mermaid圖表在NoteRich中有三種主要方式可以插入Mermaid圖表： ### 方法1：使用斜線命令(`/`) 1. 將游標放在想要插入圖表的位置。 2. 輸入`/`來開啟元件選擇器。 3. 搜尋**"Mermaid"**或**"Diagram"**。 4. 從列表中选择**Mermaid Diagram**。 ### 方法2：使用工具列 1. 點擊工具列中的**插入**按鈕。 2. 轉到**視覺化**或**圖表**區域。 3. 點擊**Mermaid**。 ### 方法3：使用AI助手 1. 打開**AI助手**（通過 `/ai` 或工具列）。 2. 描述你想要的圖表（例如：“創建用於用戶登錄流程的流程圖”）。 3. AI會為你生成Mermaid代碼，你可以直接將其插入到你的筆記中。插入後，會出現一個配置模式，其中包含編輯器和即時預覽窗口。 --- ## 🛠️ Mermaid編輯器界面 NoteRich中的Mermaid編輯器是為了效率而設計的： * **代碼區域：** 一個單 spaceless的文字區域，你可以在此處編寫Mermaid語法。 * **即時預覽：** 實時渲染圖表的效果。如果有語法錯誤，會出現錯誤提示以幫助你修復。 * **說明圖標：** 點擊“Diagram Code”旁的`?`圖標，可以打開官方[Mermaid.js說明書](https://mermaid.js.org/intro/)，獲得詳細的語法參考。 * **確認按鈕：** 保存圖表並將其插入到筆記中。 > **提示：** 你可以雙擊筆記中的任何Mermaid圖表，重新打開編輯器並進行修改。 --- ## 📊 基礎流程圖語法流程圖是Mermaid最常用的用途。以下是如何建立流程圖的步驟。 ### 1. 定義流程方向首先定義流程的方向： * `graph TD`：自上而下的流程 * `graph LR`：左右方向的流程 * `graph BT`：上下方向的流程 * `graph RL`：左右方向的流程 ### 2. 添加節點節點由ID和標籤定義。 ```mermaid graph TD A[開始] --> B[處理] B --> C{決策} C -->|是| D[結束] C -->|否| B ``` * `[文本]`：矩形節點 * `(文本)`：圓角矩形節點 * `((文本))`：圓形節點 * `{文本}`：菱形節點（用於表示決策） * `[[文本]]`：子程序節點 ### 3. 連接節點 * `-->`: 實線箭頭 * `-.->`: 虛線箭頭 * `==>`: 粗箭頭 * `-- 文本 -->`: 帶有標籤的箭頭 --- ## 🤖 由AI生成的圖表不想寫代碼？讓NoteRich的AI幫你完成吧。 1. 打開**AI助手**。 2. 輸入提示語句，例如：“生成一個用於描述用戶在線下單流程的Mermaid序列圖。” 3. AI會返回如下代碼： ```mermaid sequenceDiagram participant 用戶 participant 網站 participant 數據庫用戶->>網站: 下單網站->>數據庫: 查詢庫存數據庫-->>網站: 庫存有貨網站-->>用戶: 下單確認 ``` 4. 複製代碼或使用AI界面中的“插入”按鈕，將代碼添加到你的筆記中。 --- ## 📸 OCR：掃描手寫或打印的圖表有白板照片或打印出的流程圖嗎？NoteRich的**Note Scanner (OCR)**可以將其轉換成可編輯的Mermaid代碼。 1. 打開**AI助手**，然後選擇**Note Scanner (OCR)**。 2. 上傳手寫或打印出的圖表照片。 3. 在提示語句中指定：“將這張圖片轉換成Mermaid.js流程圖代碼。” 4. AI會分析圖片結構並生成相應的Mermaid語法。 5. 在編輯器中查看生成的代碼，並調整任何微小的識別錯誤。 > **注意：** 為了獲得最佳效果，請確保圖片清晰且文字可讀。複雜的手寫草圖在轉換後可能需要一些手動調整。 --- ## 🎨 進階功能 ### 自訂節點外觀你可以使用CSS類或內嵌樣式來自訂特定節點的外觀。 ```mermaid graph LR A[開始] --> B[處理] style A fill:#f9f,stroke:#333,stroke-width:4px style B fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5 ``` ### 子圖表將相關的節點組合成一個子圖表，以方便組織。 ```mermaid graph TD subgraph Frontend A[React App] --> B[UI Components] end subgraph Backend C[API Server] --> D[Database] end B --> C ``` ### 序列圖表 Mermaid不僅適用於流程圖。你還可以創造序列圖表來展示系統之間的互動關係。 ```mermaid sequenceDiagram participant 用戶 participant 筆記 Rich participant 服務器用戶->>筆記 Rich: 編輯筆記筆記 Rich->>服務器: 保存數據服務器-->>筆記 Rich: 確認保存筆記 Rich-->>用戶: 更新UI ``` --- ## 💡 對NoteRich用戶的建議 1. **轉換特殊字符：** 如果節點文本中包含`[]`或`()`等特殊字符，請將文本包在引號中。 ```mermaid graph TD A["Node with [brackets]"] --> B["Node with (parentheses)"] ``` 2. **複製圖表：** 當圖表呈現出來後，點擊它會顯示浮動的工具列。使用**複製圖表**按鈕將圖表貼送到其他應用程序中，如Slack、Notion或電郵。 3. **下載SVG：** 專業用戶可以下載圖表作為高品質的SVG文件，用於演示或出版物。 --- ## ❓ 故障排除 * **圖表無法呈現？** 檢查預覽窗口中的錯誤提示。常見的問題包括缺少終點符號`]`或錯誤的箭頭語法。 * **語法錯誤？** 確保你使用的是正確的Mermaid版本語法。NoteRich使用最新的穩定版本Mermaid.js。如果你不確定，請參考[官方說明書](https://mermaid.js.org/intro/)。 * **OCR的準確度？** 如果OCR結果不夠精確，可以使用AI助手來修正代碼。你可以將粗略的OCR輸出貼上，然後請AI“修正Mermaid語法”。 --- ## 🏁 結論 Mermaid.js在NoteRich中改變了您記錄流程和系統的方式。通過將圖表作為代碼保存，您可以確保圖表始終保持最新狀態，且容易修改，並與您的知識庫完美整合。有了AI生成和OCR掃描功能，創造複雜的視覺效果變得更加簡單了。立即開始將你的想法形象化吧！ --- <div class="flex flex-wrap gap-2 mt-8 mb-12"> Mermaid 流程圖 AI助手 OCR 視覺化 NoteRich </div>

如何在 NoteRich 中使用 Mermaid.js 繪製流程圖 – 完整教學

您的私密、AI 驅動
筆記中心已準備就緒

資源與指南

如何在 NoteRich 中使用 Mermaid.js 繪製流程圖 – 完整教學

您的私密、AI 驅動筆記中心已準備就緒

資源與指南

您的私密、AI 驅動
筆記中心已準備就緒