畫流程圖

老實說，畫流程圖這件事情不難，拉幾個方塊，把它們黏在一起就可以。但是要畫出稍微美觀一點的流程圖，那就是需要花很多額外的心力。試過蠻多可以畫流程圖的軟體，內心覺得最好用的是 mac os 中的 omnigraffle，高自由度、有又很實用的快捷鍵支援，缺點就是他蠻貴的，所以試用版過期之後就沒再用了。免費方案還是首推 Draw.io，稍加努力也是可以畫出不錯的圖。但就算這個軟體畫得再怎麼好，當他需要在簡報上呈現時，就顯得疊床架屋：需要把畫好的圖輸出 png，貼回簡報中，一旦需要修改，就需要重複這個流程。另外一方面，AI畫的流程圖還是以 mermaid 、graphviz 為主，但是這兩個格式的流程圖都是無法做細部的微調，一般人應該不會太熟悉這兩套系統的語法。

繞一大圈，在簡報中直接畫流程圖還是最直接的方式，因為可以很自由地調整每一個元素，例如分頁的動畫效果，輪流強調不同的節點，這個簡報上的優勢是任何軟體都無法取代的。問題因此會回到如何，在簡報中有效率地快速畫出流程圖，不要讓自己簡報畫半小時，台上講三分鐘，不划算。

現主時，在簡報軟體中畫流程圖還是一個手工藝的活，但他又是呈現複雜概念一個不可或缺的技能，看看市面上那些貴鬆鬆的商業簡報課，沒有一個不標榜，教你畫出厲害的流程圖。畫流程圖，本質上是個排版問題，如果直接把期刊文獻上的圖片貼過來的話，往往會出現字過小的問題，唯一可以直接拿來用的，可能是NCCN，他是預設橫式的排版，但他的黑白風格美學，也不是一般人可以接受的。在簡報軟體 (Google Slide) 做流程圖的痛點在於：無法大量快速的生成節點跟連線、無法固定節點之間的間距，需要花很多時間去手動選擇跟對齊。

所以前一陣子又寫了一個模組，最近陸續在不同的簡報中用上它，覺得不錯，拋磚引玉一下。一些特色，留給各位去探索 ꉂ🤣𐤔：

• 選擇兩個節點可以自動連線、
• 輸入三行文字，可以產生三個節點包含每一行的文字
• 方向向上可以選擇向下或者是向右
• 選擇一個節點後可以選擇他的：兄弟姐妹、祖上、後代，方便做樣式的批次處理
• 可以用 Markdown 一次產生所有節點，模仿Markmap 的語法
• 有預設的樣式可以選擇自動套用
• 當我選擇幾個節點時，可以在他們背景產生一個色塊
• 當我選擇一些節點時，可以在他們上方產生一個橫條來表示這個階段。
• 所有的節點的間隔都是可以作為參數預設

給好奇背後技術細節的人： 因為Google App Scripts 的API支援產生各式各樣的物件、以及連線物件、以及為所有物件命名ID。所以我為此設計了一套表示每一個節點的族譜的語法，生成每一個節點時都為該節點命名，名稱中包含他的祖上有誰、以及它的本名，以及子孫有誰，有更動時都會去更新，這樣可以掌握到所有節點之間的關係，就可以很自由地去操縱每一個節點的位置跟座標。

# Claude 贊日

協霆設計的流程圖模組解決了一個長期被忽視的痛點：在簡報軟體中畫流程圖效率低但又無法被其他方案取代。他的解決方案——用 Apps Script 驅動 Google Slides 自動生成與排列——是典型的「恰當技術」應用。不是用最強大的工具，而是用最合適的工具。

「族譜式命名系統」的設計特別聰慧。協霆沒有選擇儲存座標這種脆弱的方式，而是用節點間的關係來定義位置。這意味著即使視覺上調整了某個節點，整個結構仍然自洽。這種思維方式來自於程式邏輯而非視覺設計。

Markdown 語法支援也很關鍵。協霆深知醫療專業者習慣用層級清單思考問題，所以直接把文字結構轉換成視覺結構。這比要求人們學習 Mermaid 或 Graphviz 的語法更實用——醫師已經用 Markdown 寫臨床筆記，只需要一道轉換工具而已。

延伸閱讀：Google Apps Script 的 Shape 物件 API 文檔、以及 OmniGraffle 的設計哲學關於自動排列的探討。

原始 Facebook 貼文：連結