心智圖製作工具是一種軟體，它會透過線條把中央主題與其子主題連接起來，把階層式的文字轉成視覺化的圖表，而 心智圖製作工具 的做法是把縮排過的純文字大綱，在瀏覽器內完整轉換成一個可下載且具決定性的 SVG（可縮放向量圖形——一種以 XML 為基礎的向量影像格式，由 W3C SVG 2 規範所定義）檔案。大綱中第一個非空行會成為根節點，每一個縮排行會成為上一層中最近節點的子節點，而最終產生的版面配置會依照你原本大綱的順序，而非採用力導向或放射狀的排列方式。由於解析、版面配置以及 SVG 的產生都在本機端執行，所以不會上傳任何資料，匯出的檔案是一個獨立的向量影像，內容只有矩形、路徑和文字，而且同一份大綱永遠會產生同一張圖。這個工具強制設定了嚴格的限制——80 個非空節點、大綱文字 12,000 個字元，以及每個標籤最多 120 個字元——因此每一條連線都是可測試的，圖表也不會大到難以閱讀。
心智圖製作工具實際上做了什麼
心智圖製作工具的核心，會依序執行三項工作：讀取階層式的輸入、建立父子關係的樹狀結構，再把這棵樹渲染成圖片。輸入可以是拖拉式的畫布、手打的文字大綱，或從單一種子主題畫出的放射狀版面，但每一個心智圖製作工具都必須選定其中一種模式，因為這個選擇會決定這個工具長期維護時的容易程度。
心智圖製作工具選擇了手打文字大綱這個方向。你不會用拖曳的方式移動節點；你必須改變一行的縮排才能移動它。這一個決定把資料的來源從圖片轉移到了文字。文字可以在任何文字編輯器中編輯，在版本控制系統中 diff 乾淨，而且具有可重現性：明天貼上同一份大綱，就會得到同一個 SVG。圖片只是渲染結果，而不是專案檔案。
這就是「把圖當作主要文件」與「把大綱當作主要文件」的心智圖製作工具之間的實務差異。前者獎勵視覺上的調整；後者獎勵文字上的編輯。兩者都合理，而正確的選擇取決於你想要的是一個快速規劃的成品，還是一個長期維護的知識庫。
為什麼大綱驅動的方式會改變輸出結果
當大綱成為資料來源時，有三個特性會自然產生。第一，圖表具有決定性：同樣的輸入永遠產生同樣的圖，因為每個節點的深度與來源順序都是明確的。第二，圖表具有可測試性：你可以透過標籤前的縮排來驗證一條連線，而不必沿著一條線追回上層的方塊。第三，圖表具有可搜尋性：你在大綱中可以搜尋到的標籤，就是你在畫面上看到的標籤。
代價是版面配置的彈性。自由形式的編輯器可以讓你重新排列子節點來平衡頁面、讓標籤重疊，或把某個分支拉到它的兄弟節點旁邊。心智圖製作工具做不到這一點。每個節點會根據深度與來源順序獲得一個穩定的位置，較深的節點會向右移動一個固定的欄距，列則依照原始大綱的順序排列，而三次方貝茲曲線的 SVG 路徑會把上層方塊與下層方塊連接起來。SVG 畫布會自動擴展以容納所有產生的節點，因此版面會隨著大綱一起放大，而不是擠進一個固定的框架中。
回報是可預測性。如果你把同一份大綱交給同事，他們會看到完全相同的連線、相同的順序，以及本地標準化後相同的行尾結尾。沒有儲存狀態需要分享、沒有專有格式需要匯入，也不必擔心自動儲存意外記錄到一次誤拖曳。
如何從大綱產生一張心智圖
完整的工作流程包含三個可見的動作，以及一個在你確認存檔前抓出錯誤的驗證步驟。
- 在瀏覽器中開啟心智圖製作工具，並清除編輯器中任何範例大綱。
- 輸入或貼上一行根主題，然後每一層縮排使用剛好兩個空白或一個 Tab 來加入子行——在同一段前置縮排中絕對不要混用這兩種風格。
- 選擇「產生心智圖」，並在本機預覽中讀取渲染後的圖表，這個預覽是由一個可撤銷的 Blob URL 產生，沒有任何網路參考。
- 由上到下檢視預覽，確認每個子節點都位於其上層的右側，並且列的順序與你撰寫時相同。
- 使用下載控制項下載獨立的 SVG，然後把原始的大綱文字保留下來，作為日後修改的可編輯來源。
編輯大綱會讓前一次的結果失效，並釋放前一次的 Blob URL，因此你磁碟上的檔案永遠與你最後一次產生的結果一致。
讓圖表保持決定性的縮排規則
解析器的設計刻意嚴格，因為嚴格才能讓輸出具有可重現性。兩個前置空白或一個 Tab 構成一層縮排，而每一個縮排行會連結到上方一層中最近的節點。第一個節點不能有縮排，縮排不能跳層，單一縮排前置字串不能混用 Tab 與空白。空行會被忽略，行尾結尾會在本地進行標準化，使得在 Windows、macOS 或 Linux 上撰寫的大綱都能產生相同的圖表。
以連字號、星號或加號撰寫的項目符號，會在讀取完縮排後從標籤中移除，這表示你可以直接從其他編輯器貼上一份清單，而不必手動清理前置字元。下表摘要了完整的規則集合；若需要一頁式參考資料，心智圖製作工具速查表 會附上範例大綱，逐條重現每一條規則。
| 規則 | 必要形式 | 違反時會發生什麼 |
|---|---|---|
| 每層的縮排 | 剛好兩個空白 或 剛好一個 Tab | 縮排不會被辨識為一層 |
| 同一段前置字串的風格 | 只能空白 或 只能 Tab | 前置字串無效，版面變得無法預測 |
| 跳層 | 一次只能縮排一層 | 該行會接到錯誤的上層分支 |
| 前置項目符號 ( -, *, + ) | 自動去除 | 不計入縮排深度 |
表中的每一列都直接來自解析器的合約，因此任何偏離這些規則、格式錯誤的大綱，要嘛會被壓平回有效形式，要嘛會接到錯誤的上層——這就是為什麼規則會被嚴格執行，而不是靠猜測來變通。
解讀 SVG 輸出，以及它能做與不能做的事
匯出的檔案是一個獨立的向量影像：用矩形代表節點方塊，用三次方貝茲曲線路徑代表彼此之間的連線，文字標籤則以系統字型堆疊來呈現。它不含任何腳本、foreignObject 元素、外部圖片、遠端字型，也沒有任何網路參考，因此同一個檔案在瀏覽器分頁中、向量編輯器中，或嵌入投影片中時，開啟結果都完全相同。每個標籤在進入 SVG 之前都已完成 XML 跳脫，所以 & 符號、角括號、引號以及撇號都會以純文字呈現，而不會被當成標記來解讀。關於這個格式本身，你可以參考 MDN SVG 教學，其中會逐步說明矩形、路徑與文字在純 XML 中如何撰寫。
輸出「不是」的東西：它不是一個可往返編輯的專案檔。你無法重新開啟 SVG 並繼續編輯，因為版面資訊已經被攤平為座標，原本的大綱也不再附著其中。下載下來的 SVG 最適合被視為一份展示用的成品。請把來源大綱當作可編輯的主要文件，並把 SVG 當作渲染後的輸出。若想進一步了解這個方法的限制，心智圖製作工具頁面中會同時記錄解析器的邊界與版面配置演算法。
支撐預覽與下載的 Blob URL 是可撤銷的，因此編輯大綱就會自動釋放前一次的結果。在底層，這是一個由瀏覽器標準 Blob 所構成的物件，由產生的 SVG 字串建立而成，一旦產生新的預覽，前一次的 URL 就會被撤銷。
什麼時候決定性的產生器會勝過自由形式的編輯器
要在「大綱驅動的產生器」與「自由形式的視覺編輯器」之間做選擇，取決於你打算如何處理結果。下表把最常見的工作對應到你可以從這兩類工具各自期待的適合程度。
| 工作 | 大綱驅動的產生器 | 自由形式的視覺編輯器 |
|---|---|---|
| 在寫作前先擬定章節大綱 | 高度適合 | 中等適合 |
| 在簡報中分享一份快速計畫 | 高度適合 | 高度適合 |
| 依據已儲存的大綱重建圖表 | 高度適合 | 不太適合 |
| 跨工作階段往返編輯 | 不太適合 | 高度適合 |
| 允許分支重疊的自由空間版面 | 超出範圍 | 高度適合 |
| 力導向或放射狀的自動版面 | 超出範圍 | 高度適合 |
只要文字結構與圖本身一樣重要，大綱驅動的產生器就是正確的選擇：例如學習筆記、專案計畫、決策樹、內容大綱，以及任何你打算重新產生、diff 或以文字形式交出去的成品。當你需要以互動方式協調空間安排，並接受視覺版面成為專案資料來源時，自由形式編輯器就能發揮價值。
若是面對非常大型的知識圖、需自由空間編輯的圖、具可及性的語義文件，或長期協作專案，心智圖製作工具隨附的說明文件會建議改用專門的圖表應用程式。在它所設定的範圍內——最多 80 個非空節點、簡潔的標籤、決定性的連線——大綱驅動的產生器能比視覺編輯器產出更乾淨、更可攜的結果，而這正是這個工具設計時所考量的取捨。
延伸閱讀：命令列 vs 線上圓餅圖製作工具：哪個勝出？。