心智圖製作工具會依照兩條簡單規則,把任何縮排文字大綱轉成確定性的獨立 SVG 圖表:大綱頂端只有一行根節點,每往下一層就縮排兩個空格或一個定位字元 —— 最多 80 個非空節點、總計 12,000 個字元,每個標籤最多 120 個字元。每個標籤在進入 SVG 之前都會經過 XML 跳脫處理,因此 & 符號、角括號、引號與撇號都會以純文字呈現,而不是當成標記。輸出是由簡單矩形、文字與三次貝茲曲線繪成的由左至右樹狀圖,下載的檔案中不含腳本、foreignObject 元素、外部圖片或遠端字型。由於解析、排版、預覽與下載全部都在目前的瀏覽器分頁中進行,原始大綱永遠不會離開你的電腦。這份速查表整理了剖析器接受的確切語法、強制執行的硬性限制,以及匯出檔案的內容,讓你只要貼上大綱就能第一次就得到乾淨的圖表。

心智圖製作工具速查表:快速參考
描述這個工具最快的方式,就是把它當成一套對輸入規則非常嚴格的「大綱轉 SVG」轉換器。你寫一份純文字大綱,剖析器讀取縮排來判斷誰歸在誰下面,一個確定性的排版引擎再根據深度把每個節點放到固定的欄位,再依據在原始檔中的順序決定列數。沒有 force-directed 物理模擬、沒有拖曳把手、沒有吸附啟發式 —— 同一份大綱永遠會產生同一張圖,這也是為什麼一頁速查表就足以讓你安心使用它。
請把原始大綱與匯出的 SVG 放在一起管理,並把大綱視為唯一可編輯的真相來源。SVG 是展示用的成品,而不是可以往返編輯的專案檔,所以要修改圖表唯一的辦法就是修改文字並重新產生。這種區分正是速查表方法能夠實用的關鍵:你的文字規則與剖析器的規則完全一致,因此一張簡明的參考卡就足以涵蓋大多數情境。
你必須遵守的大綱語法規則
剖析器刻意設計得非常嚴格,目的是讓父子關係保持明確,避免大綱悄悄掛錯分支。五條規則就能涵蓋幾乎所有合法的輸入。
- 第一個非空行就是根節點。含有文字的第一行會成為中央主題,不能縮排。
- 縮排決定深度。每往下一層縮排,必須剛好是兩個前置空格或剛好一個前置定位字元。四個空格等於兩層,六個空格等於三層,兩個定位字元等於兩層。
- 同一個前置字串中絕對不能混用定位字元與空格。一行如果以定位字元開頭再接空格,剖析器無法處理;反過來也不行。請選定一種風格,並在整份大綱中保持一致。
- 縮排不能跳層。深度 3 的子節點,必須在它正上方有一個深度 2 的祖先節點;從深度 1 直接跳到深度 3,會讓剖析器找不到可以掛載的父節點。
- 項目前綴符號會從標籤中移除。位於縮排行開頭的連字號、星號、加號,在讀完縮排後都會被移除,因此「- Budget」與「Budget」最後會變成同一個標籤。
空行會被忽略,換行字元也會在本地進行正規化,因此 Windows 的 CRLF、macOS 的 CR、以及 Unix 的 LF 大綱都會以相同方式解析。每個縮排行都會掛到「正上方、最近、且剛好深一層」的節點上,這也是為什麼大綱中的原始順序會決定畫布上由左至右的分支。這個確定性的父子指派,正是這份速查表能放進一頁的最大原因。
合法的大綱看起來是什麼樣子
一份正確的大綱從上往下讀就像一份目錄。根節點靠左對齊,子節點往內縮兩個空格,孫節點再縮四個空格,依此類推。如果你把大綱在心裡重新排版成巢狀項目符號,點選「Generate」之前階層就應該已經一目了然;如果不是,那幾乎一定是縮排出問題。
剖析器強制執行的硬性限制
每一條限制都是用來擋掉格式錯誤的輸入與過大的輸出。80 個非空節點的上限能保持排版可讀,並讓 SVG 檔案保持精簡。12,000 字元的大綱上限涵蓋縮排、項目符號與所有標籤的總和。每個標籤 120 字元的上限則是展示上的限制;由於本工具不會計算文字換行,過長的詞組可能會超出它們的方框。
| 限制 | 存在的理由 |
|---|---|
| 80 個非空行 | 讓圖表保持緊湊,避免產生失控的樹狀結構 |
| 總計 12,000 個字元 | 限制剖析器的工作量與產生的 SVG 檔案大小 |
| 每個標籤 120 個字元 | 標籤不會自動換行;過長的文字可能會超出方框寬度 |
| 根節點不能縮排 | 確保只有一個、且明確的中央主題 |
| 不能跳層 | 避免子節點掛到錯誤的父節點 |
| 不能混用定位字元與空格 | 讓縮排解析保持確定性 |
編輯大綱會使先前的結果失效,並釋放它的 Blob URL,因此預覽永遠會對應到目前的文字。如果你貼上一份很長的大綱,之後又縮短它,重新產生的 SVG 會反映新的結構,不會快取到舊一次執行所留下的殘留分支。
如何把大綱轉成 SVG 心智圖
開啟 心智圖製作工具,貼上或輸入你的大綱,然後依照下面的步驟操作。整個流程都在你的瀏覽器中本地執行,任何階段都不會上傳到伺服器。
- 先輸入一行根節點,再用每層兩個空格或一個定位字元來縮排子節點。把中央主題靠左對齊寫下來。子節點按兩下空格(或按一下 Tab),孫節點按四下空格,依此類推。所有前置字串請保持一致 —— 全部用空格或全部用定位字元 —— 而且絕對不要跳層。
- 選擇 Generate mind map,並在本地預覽中檢查父子連線。剖析器會正規化換行字元、移除空行、剝除前綴項目符號、為 XML 跳脫標籤,然後在每個父子方框之間畫出三次貝茲 SVG 路徑。請由上往下、由左至右閱讀預覽,確認每個分支都落在你預期的位置。
- 下載獨立的 SVG 檔案,並保留原始大綱以便日後編輯結構。點擊下載控制項來儲存一份不含腳本、foreignObject 元素、外部圖片、遠端字型或網路參考的單一 SVG 檔案。預覽與下載都來自本地 Blob URL;當你編輯大綱時,先前的 URL 會被撤銷。
如果預覽看起來不對,第一個要檢查的地方就是縮排。一個節點掛到錯誤的分支,幾乎一定可以追溯到少了一層、前置字串混用了定位字元與空格,或是項目符號沒有如預期被移除。修正文字、重新產生,圖表就會確定性地更新,不會再要求任何額外的操作。
匯出的 SVG 包含什麼(以及不含什麼)
下載的檔案是一份由矩形、路徑與文字組成的純 SVG 文件。每個標籤在進入標記之前都會經過 XML 跳脫處理,因此原本會被當成 SVG 或 HTML 解讀的字元 —— & 符號、小於、大於、雙引號、單引號 —— 都會以字面文字呈現。SVG 畫布會自動擴展以容納所有產生的節點,因此不會有任何東西在 viewBox 邊緣被裁切。
| SVG 中包含的內容 | 刻意排除的內容 |
|---|---|
| 節點方框用的矩形 | JavaScript 或事件處理器 |
| 標籤用的文字元素(已做 XML 跳脫) | foreignObject 元素 |
| 父子節點之間的三次貝茲曲線連接線 | 外部圖片與遠端字型 |
| 放大到可容納整棵樹的 viewBox | 網路參考(不發出 http/https 請求) |
| 確定性的由左至右排版 | Force-directed 物理模擬或動畫 |
用於預覽與下載的 Blob URL 是可以撤銷的。一旦你編輯大綱,先前的結果就會失效,並釋放它的 URL。SVG 檔案本身具有可攜性:可以在任何瀏覽器中開啟、放入簡報、或當成向量圖貼進文件。關於瀏覽器如何暴露 Blob URL 以便在本機產生檔案的底層機制,MDN 的 Blob 參考文件 介紹了本工具內部使用的同一套 API。
速查表派不上用場的時候
這條確定性的大綱轉 SVG 路徑,是為了快速規劃、學習筆記、輕量溝通成品而設計的。它並不能取代完整的繪圖應用程式。當你需要以下任何一項功能時,請改用專門的繪圖工具。
- 產出後仍能用拖放方式重新排列節點
- 在圖表中直接收合與展開分支
- 匯入 XMIND、MindManager、FreeMind 等專屬心智圖格式
- 對同一份大綱進行即時多人協作
- 長期的專案儲存、版本歷史或保存的工作階段
- 在無限畫布上進行自由形式的空間編輯
- 無障礙語意文件(本工具產生的 SVG 僅供視覺使用)
針對這類工作流程,請把 SVG 匯出成靜態插圖來使用,並繼續用原始大綱來處理本工具擅長的事情。想要把教科書章節轉成學習用結構化圖表的學生,可以把這份速查表與 章節轉心智圖學習指南 搭配使用,再把產生的 SVG 放進筆記中作為快速的視覺回顧。
如果你正在權衡各種選項,快速產生 PNG 的圓餅圖製作工具 API 替代方案 對此有詳細說明。