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).
- {: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
{:width 300}
- Mermaid 語法範例
logseq.order-list-type:: number
collapsed:: true

	  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 語法，並將其渲染成對應的流程圖。

		  graph LR
		    A((開始)) --> B{條件}
		    B -- 是 --> C[通過]
		    B -- 否 --> D[失敗]
		    C --> E((結束))
		    D --> A

{: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)