心智圖製作工具將最多 80 行非空行、12,000 字元的縮排純文字大綱,轉換成一個具確定性、可下載的 SVG 心智圖,並完全在當前的瀏覽器分頁中執行,無需上傳大綱或將其傳送到伺服器。兩個前導空格或一個前導 Tab 字元標記每一層的巢狀層級,第一個非空行會成為根節點,而每個縮排行則會附加到上一層中最近的節點上。由於解析器的設計是嚴格的,同一份大綱在任何電腦上永遠會產生相同的圖表,這讓輸出結果在多個版本之間易於比較。標籤在進入 SVG 之前會經過 XML 跳脫處理,因此 & 符號、角括號、引號與撇號都會以純文字呈現,而不是當作標記來解讀,而匯出的檔案中不含任何腳本、遠端字體或外部圖片。這種結構讓 SVG 保持可攜性:將它放入文件、投影片或網頁中,只要該環境支援 SVG 就能正常呈現,並保留完整的父子連線。
為什麼純文字大綱是最快的起點
大多數筆記已經以縮排文字的形式存在:會議記錄、學習清單、專案簡報、章節摘要,甚至貼上的 Markdown。從這類文字而非空白畫布開始,可以省去心智圖製作中最困難的部分——也就是規劃結構,並讓你重複利用已經寫好的內容。如果一句話作為條列項目讀起來順暢,通常作為節點讀起來也會順暢。心智圖製作工具正是利用這一點,直接接受大綱:貼上最多 80 行非空行,每一層使用兩個空格或一個 Tab 字元,然後點擊 Generate。
由於大綱是唯一的事實來源,每次對文字進行的編輯,只要再點一次,就會流入新產生的圖表中。你完全不需要手動搬移方塊或還原拖曳操作來修正父子關係的錯誤。同一段文字永遠會產生同一份 SVG,這讓輸出結果易於分享、版本控管,以及在不同草稿間進行比較,完全不必擔心隊友或不同工作階段之間的版面漂移問題。
大綱轉 SVG 的運作方式
解析器以三個小階段來讀取你的大綱。首先,統一換行格式並移除空行,讓輸入在 Windows、macOS 與 Linux 上行為一致。其次,測量每一行剩餘內容的縮排:兩個前導空格或一個前導 Tab 字元代表一層巢狀,第一個非空行則成為根節點。以連字號、星號或加號撰寫的項目符號,會在讀取縮排後自標籤中移除,因此「- 研究」和「 * 研究」都會呈現為乾淨的「研究」節點。第三,每個縮排行都會附加到上一層中最近的節點上,確保產生的是固定的父子樹狀結構,而不是每次重新載入頁面都會漂移的版面。
一旦樹狀結構建立,版面也就固定了。較深的節點以固定的欄距向右移動,列的順序依照原始大綱,而父節點與子節點之間以三次貝茲 SVG 路徑連接。畫布會自動擴展以容納最大的分支,而每個標籤在進入 SVG 之前都會進行 XML 跳脫,因此 & 符號、角括號、引號和撇號都會以純文字呈現,而不是當作標記。如果你想要以手繪風格或拖曳控制點的方式檢視同一結構,無需設計技能的優質心智圖指南會逐步介紹視覺上的其他選擇。
三個步驟免費在線上製作心智圖
只要大綱準備好了,完整流程不到一分鐘就能完成。
- 開啟 心智圖製作工具,輸入或貼上你的大綱。將核心主題放在第一個非空行,然後每個子節點以兩個空格或一個 Tab 字元進行縮排。
- 選擇 Generate mind map 並查看本地預覽。確認每個分支都位於你預期的父節點之下;如果有任何錯誤,請在大綱輸入框中調整縮排,然後再次點擊 Generate。
- 選擇 Download SVG 以儲存獨立的向量檔,並將你的大綱保存在文字檔中,這樣日後就能修改結構而不必重新輸入。
你可以視需要重複步驟 2 與步驟 3 任意次數。編輯大綱會讓先前的結果失效並釋放其 Blob URL,因此瀏覽器會在每次循環後清理資源,而不是在記憶體中保留過時的預覽。
讓樹狀結構保持確定性的大綱規則
解析器的設計是嚴格的:嚴格的解析器意味著錯誤的大綱會明確失敗,而不是默默地把節點附加到錯誤的分支上。下方所列的限制由工具強制執行,反映單次執行能接受的最大值。
| 屬性 | 上限 | 超出時的行為 |
|---|---|---|
| 非空行 | 最多 80 行 | 解析器會將輸入上限設定為 80 行非空行 |
| 總字元數 | 最多 12,000 字元 | 解析器會將輸入上限設定為 12,000 字元 |
| 每個標籤的字元數 | 最多 120 字元 | 過長的標籤可能會超出方框範圍 |
| 縮排單位 | 每層兩個空格或一個 Tab 字元 | 同一前綴中混用 Tab 與空格將會被拒絕 |
| 縮排深度 | 不可跳過層級 | 子節點必須剛好位於其父節點下方一層 |
| 根節點 | 第一個非空行,不縮排 | 縮排的第一行將會被拒絕 |
| 項目符號 | 連字號、星號、加號 | 在讀取深度後自標籤中移除 |
| 空行 | 輸入中的任何位置 | 忽略 |
這些規則讓輸出可預測且易於測試。一個有用的副作用是,由章節大綱建立的心智圖在你的筆電與同事的螢幕上看起來會一模一樣,因為兩端的用戶端會將同一份文字解析為同一份 SVG,中間不會產生任何版面漂移。
匯出的 SVG 包含哪些內容(以及不含哪些)
下載的檔案是真正的獨立 SVG:僅包含矩形、路徑與文字,不含任何腳本、foreignObject 元素、外部圖片、遠端字體,或任何形式的網路參照。這讓檔案體積小、可安全以電子郵件寄送,並可安全地嵌入投影片、PDF 或 HTML 頁面中。瀏覽器與支援 SVG 的應用程式會以與預覽相同的方式呈現它,而版面之所以穩定,是因為每個節點的位置都根據深度與來源順序固定下來。
預覽本身來自於在你的分頁中本地建立的、可撤銷的 Blob URL,這是瀏覽器將產生的檔案交回頁面的標準模式。當你編輯大綱並重新產生時,先前的 URL 會被釋放,舊的預覽也隨之消失。由於 Blob URL 指向的是記憶體中的資料而非遠端伺服器,因此大綱從未離開瀏覽器,這正符合任何免費線上心智圖的簡單承諾:貼上、產生、下載、完成。
心智圖製作工具適合的場景,以及何時該選擇更強大的工具
純文字心智圖在以下三種任務中表現出色。它非常適合:根據書面簡報起草計畫、將筆記轉為學習用的圖表,以及產出一個可放入報告中的單一視覺成品。在這些任務中,具確定性且不上傳的工作流程消除了摩擦,而 SVG 是自包含且可嵌入的,因此匯出檔案依然具有實用價值。
它在另外三種任務中則不適合。如果你需要可重新開啟並以圖形方式編輯的持久專案檔,如果你的團隊需要在同一畫布上即時共同編輯,如果你需要由編輯器以力導向方式自動為你安排的自由空間佈局,或者如果最終成品必須是帶有標籤化結構的可存取語意文件,那麼專門的圖表應用程式會是更好的選擇。在這種情況下,你在這裡擬定的大綱仍然可以隨身帶著走:它是個乾淨的來源,你可以貼到更完整的工具中,作為更複雜專案的結構骨架來使用。
至於介於兩者之間的所有情況——範圍小、需要快速視覺化的輪廓式思考——心智圖製作工具把門檻壓得很低:開啟頁面、貼上文字、點擊一次、儲存 SVG。這種做法也與 MDN SVG 教學中介紹的基礎觀念一致,該教學說明了為什麼由形狀與路徑構成的簡單 SVG 是你能夠提供的可攜性最高的圖形格式。