JAVA Mermaid Notion Markdown AI 流程圖

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

湯菀鈺 2024/10/01 10:01:37
1137
  • 使用 Notion 和 Mermaid 語法生成流程圖

  • 前言

    • 透過 Notion 和 Mermaid 的結合,我們可以快速、方便地生成流程圖。這對於軟體開發、流程管理、學習筆記等都非常有用。
  • Mermaid and Notion

    • [[Mermaid]]是一種用於生成圖表的標記語言,可以嵌入到 Markdown 中。透過簡單的文本描述,就能產生各種專業的圖表,例如流程圖、序列圖、甘特圖等。
    • [[Notion]]是一款功能強大的筆記應用程式,支援多種格式,包括 [[Markdown]]。我們可以利用 Notion 的 Markdown 功能,結合 Mermaid 語法,直接在 Notion 中生成流程圖。
  • 在 Notion 中繪製 Mermaid 流程圖

    • 建立一個新的 Notion 頁面使用 code 並切換成 Mermaid 語法
    • img091501
    • 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]
        IMG_6211
      • 上述範例會在 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}
        IMG_6212
      • 接下來等 AI 回應時就可以快速的取得 流程圖 Mermaid 語法
        • IMG_6213
      • 以下為 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 文檔的可讀性,還能幫助協作者更快地理解程式的運行流程。
      • 這種方法適合任何開發者,無論是處理簡單專案還是複雜系統,都能大大節省時間和精力。
  • 參考來源

  • 外部連結

湯菀鈺