---
# System prepended metadata

title: 使用 Notion 和 Mermaid 語法生成流程圖
tags: [TPI-TPIU]

---

type:: post
status:: apply
star:: 5
relation:: [gist](https://gist.github.com/wanyutang/faa3fdf6fa9d51a996ffaf91f0c3d835), [notion](https://www.notion.so/Notion-Mermaid-10276e7a7e838029ad6ee0120394a0af?pvs=4),[[TPI/TPIU/使用 AI 快速生成流程圖]],[hackmd↗](https://hackmd.io/oUZbNbc6QMWxcApF_1tzhg)

- # 使用 Notion 和 Mermaid 語法生成流程圖
	- This article is the original draft, published at [[TPIU 昕力大學]][↗](https://www.tpisoftware.com/tpu/articleDetails/3126).
	- ![IMG_0298](https://gist.github.com/user-attachments/assets/b3043c2e-cfc1-4c2b-b8db-ce40d2da11ec){:width 300}
- ## 前言
	- 透過 Notion 和 Mermaid 的結合，我們可以快速、方便地生成流程圖。這對於軟體開發、流程管理、學習筆記等都非常有用。
- ## Mermaid and Notion
	- [[Mermaid]][↗](https://gist.github.com/wanyutang/98aef5575b7c009e5e5e06ef9ff51dc2)是一種用於生成圖表的標記語言，可以嵌入到 Markdown 中。透過簡單的文本描述，就能產生各種專業的圖表，例如流程圖、序列圖、甘特圖等。
	- [[Notion]][↗](https://gist.github.com/wanyutang/5ab9d0a32005177c14137fcc99355bce)是一款功能強大的筆記應用程式，支援多種格式，包括 [[Markdown]][↗](https://gist.github.com/wanyutang/0b06778ee8622c96644f7b574ba09104)。我們可以利用 Notion 的 Markdown 功能，結合 Mermaid 語法，直接在 Notion 中生成流程圖。
- ## 在 Notion 中繪製 Mermaid 流程圖
	- 建立一個新的 Notion 頁面使用 code 並切換成 Mermaid 語法
	  logseq.order-list-type:: number
	  ![img091501](https://gist.github.com/user-attachments/assets/c258f23c-a919-4c71-b944-c1772c01a75d){:width 300}
	- Mermaid 語法範例
	  logseq.order-list-type:: number
	  collapsed:: true
	  ```mermaid
	  graph LR
	  A(Start) --> B{Decision}
	  B -- Yes --> C[Yes]
	  B -- No --> D[No]
	  ```
		- 說明
		  collapsed:: true
			- `graph LR`：定義一個從左到右的流程圖。
			- `A(Start)`：定義一個名為「Start」的節點。
			- `-->`：表示從一個節點到另一個節點的流程。
			- `{}`：定義一個決策節點。
			- `[]`：定義一個普通節點。
	- 在 Notion 中渲染
	  logseq.order-list-type:: number
	  collapsed:: true
		- Notion 會自動識別 Mermaid 語法，並將其渲染成對應的流程圖。
		  ```mermaid
		  graph LR
		    A((開始)) --> B{條件}
		    B -- 是 --> C[通過]
		    B -- 否 --> D[失敗]
		    C --> E((結束))
		    D --> A
		  ```
		  ![IMG_6211](https://gist.github.com/user-attachments/assets/82ffd699-c201-498d-94c2-1e7fbf7ac60c){:width 300, :height 361}
		  上述範例會在 Notion 中生成一個簡單的流程圖，包含「開始」、「條件」、「通過」、「失敗」等節點，以及它們之間的關係。
	- ##
- ## 使用 AI 快速生成流程圖
	- 程式的整體結構和流程，可以利用流程圖提供更直觀的理解方式，以提升文檔的可讀性和專案的清晰度，以下示範若手邊只有程式原碼， 要反推出程式的流程， 將如何利用 AI 協助快速產生流程圖。
	- ### 待解析JAVA 程式碼
		- ```java
		  import java.util.HashMap;
		  import java.util.Map;
		  
		  public class UserService {
		  
		      private static Map<String, String> userDatabase = new HashMap<>();
		  
		      static {
		          // 初始化示範用的用戶數據
		          userDatabase.put("user1", "password1");
		          userDatabase.put("user2", "password2");
		      }
		  
		      public String login(String username, String password) {
		          if (!userDatabase.containsKey(username)) {
		              return "錯誤: 該用戶不存在";
		          }
		          if (!userDatabase.get(username).equals(password)) {
		              return "錯誤: 密碼不正確";
		          }
		          return "登入成功";
		      }
		  
		      public static void main(String[] args) {
		          UserService userService = new UserService();
		          
		          // 示範登入測試
		          System.out.println(userService.login("user1", "password1")); // 登入成功
		          System.out.println(userService.login("user3", "password3")); // 錯誤: 該用戶不存在
		          System.out.println(userService.login("user1", "wrongPassword")); // 錯誤: 密碼不正確
		      }
		  }
		  ```
	- ### 提供 AI 指令取得 Mermaid 語法
		- AI Prompt: `用以下程式給我mermaid程式流程圖語法 {JAVA Code}`  
		  ![IMG_6212](https://gist.github.com/user-attachments/assets/3ba7a3ba-58a1-47c1-9318-5ede0d00b82f){:width 300}
		- 接下來等 AI 回應時就可以快速的取得 流程圖 Mermaid 語法
			- ![IMG_6213](https://gist.github.com/user-attachments/assets/7199b3dd-4415-4eb9-b83f-36c764f978a3){:width 300}
		- 以下為 AI 提供的語法， 可以試看看利用 Notion 取得流程圖截圖
			- ```mermaid
			  graph TD
			      A[開始] --> B[用戶輸入用戶名和密碼]
			      B --> C{用戶名存在？}
			      C -- 否 --> D[返回 錯誤: 該用戶不存在]
			      C -- 是 --> E{密碼正確？}
			      E -- 否 --> F[返回 錯誤: 密碼不正確]
			      E -- 是 --> G[返回 登入成功]
			      D --> H[結束]
			      F --> H
			      G --> H
			  ```
	- ##
	- ## 進階技巧：客製化你的流程圖
		- **更多圖形：** Mermaid 支援多種圖形，如序列圖、甘特圖、類圖等。
		- **樣式設定：** 可以透過 CSS 類似的方式，自定義圖形的樣式，如顏色、字體、大小等。
		- **子圖：** 可以建立子圖，將複雜的流程圖分解成更小的部分。
	- ## 建議
		- **從簡單開始：** 剛開始學習時，可以從簡單的流程圖開始練習。
		- **多加練習：** 透過不斷的練習，可以掌握 Mermaid 語法的更多用法。
		- **善用線上工具：** 可以利用一些線上工具，幫助你快速生成 Mermaid 程式碼。
	- ## 總結
		- 透過 Notion 和 Mermaid 的結合，我們可以快速、方便地生成流程圖。這對於軟體開發、流程管理、學習筆記等都非常有用。
		- 使用自動生成的 Mermaid 語法和 Notion 渲染功能，可以迅速為你的程式碼創建流程圖，不僅提升 README 文檔的可讀性，還能幫助協作者更快地理解程式的運行流程。
		- 這種方法適合任何開發者，無論是處理簡單專案還是複雜系統，都能大大節省時間和精力。
- ## 參考來源
	- Mermaid Wiki: https://en.wikipedia.org/wiki/Mermaid
	- Notion Wiki: https://en.wikipedia.org/wiki/Notion_(productivity_software)
	- Markdown Wiki: https://zh.m.wikipedia.org/zh-tw/Markdown
	- Markdown Wiki: https://zh.m.wikipedia.org/zh-tw/Markdown
	- Markdown 指南: https://www.markdownguide.org
- ## 外部連結
	- [[Notion]]官網: https://www.notion.so/
	- [[Mermaid]]官網: https://mermaid-js.github.io/mermaid/
	- [[Winny Post]] : https://hackmd.io/@VxulnppPQHuOEDANOU92EQ/SymfrcyRA/%2FoUZbNbc6QMWxcApF_1tzhg

## 轉載清單

- https://www.tpisoftware.com/tpu/articleDetails/3126?isPin=false
- https://hackmd.io/@VxulnppPQHuOEDANOU92EQ/SymfrcyRA/%2FoUZbNbc6QMWxcApF_1tzhg
- https://gist.github.com/wanyutang/faa3fdf6fa9d51a996ffaf91f0c3d835
- [使用 Notion 和 Mermaid 語法生成流程圖](https://www.notion.so/Notion-Mermaid-14e76e7a7e838047b54bc6a6a4bf28c7?pvs=21)
