JAVA Mermaid Notion Markdown AI 流程圖

使用 Notion 和 Mermaid 語法生成流程圖

湯菀鈺 2024/10/01 10:01:37

0 1221

使用 Notion 和 Mermaid 語法生成流程圖
前言
- 透過 Notion 和 Mermaid 的結合，我們可以快速、方便地生成流程圖。這對於軟體開發、流程管理、學習筆記等都非常有用。
Mermaid and Notion
- [[Mermaid]]↗是一種用於生成圖表的標記語言，可以嵌入到 Markdown 中。透過簡單的文本描述，就能產生各種專業的圖表，例如流程圖、序列圖、甘特圖等。
- [[Notion]]↗是一款功能強大的筆記應用程式，支援多種格式，包括 [[Markdown]]↗。我們可以利用 Notion 的 Markdown 功能，結合 Mermaid 語法，直接在 Notion 中生成流程圖。
在 Notion 中繪製 Mermaid 流程圖
- 建立一個新的 Notion 頁面使用 code 並切換成 Mermaid 語法
- Mermaid 語法範例
```
 
```
```
graph LR
A(Start) --> B{Decision}
B -- Yes --> C[Yes]
B -- No --> D[No]
```
  - 說明 collapsed:: true
    - graph LR：定義一個從左到右的流程圖。
    - A(Start)：定義一個名為「Start」的節點。
    - -->：表示從一個節點到另一個節點的流程。
    - {}：定義一個決策節點。
    - []：定義一個普通節點。
- 在 Notion 中渲染
  - Notion 會自動識別 Mermaid 語法，並將其渲染成對應的流程圖。
```
graph LR
A(Start) --> B{Decision}
B -- Yes --> C[Yes]
B -- No --> D[No]
```
  - 上述範例會在 Notion 中生成一個簡單的流程圖，包含「開始」、「條件」、「通過」、「失敗」等節點，以及它們之間的關係。

使用 AI 快速生成流程圖

程式的整體結構和流程，可以利用流程圖提供更直觀的理解方式，以提升文檔的可讀性和專案的清晰度，以下示範若手邊只有程式原碼，要反推出程式的流程，將如何利用 AI 協助快速產生流程圖。

待解析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}
接下來等 AI 回應時就可以快速的取得流程圖 Mermaid 語法

以下為 AI 提供的語法，可以試看看利用 Notion 取得流程圖截圖

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