心智圖製作範例將一段純文字大綱與一個確定性的 SVG 圖配成一對，其中第一個非空行是根節點，每兩個前置空格（或單一 tab）增加一層巢狀層級，每個縮排行會連接到前方最近的、深度少一層的節點。心智圖製作工具會在瀏覽器中把這個大綱轉成由左至右的樹狀圖：列依照原始大綱順序排列，深度把節點向右移動固定的欄距，並以三次貝茲曲線 SVG 路徑把父節點方框連到子節點方框。解析器上限為 80 個非空節點、每個標籤 120 個字元、總計最多 12,000 個字元的大綱文字，並會拒絕混合縮排的前綴或跳層，因此格式錯誤的大綱不會悄悄掛到錯誤的分支上。每個標籤在進入 SVG 之前都會進行 XML escape，因此 &、角括號、引號和撇號都會以字元呈現而非標記。下載的檔案只包含矩形、路徑和文字 — 沒有腳本、foreignObject 元素、外部圖片或遠端參照。
看範例的重點很少是圖本身。重點在於輸入到輸出的對應關係：大綱中哪些字元會變成方框、每個方框放在哪裡、解析器會拒絕哪些行。一旦這個對應關係清楚了，這個範例就同時是一份可調整的範本，可用於專案規劃、學習筆記或競品分析，而不必重新閱讀規則。
心智圖製作範例的結構剖析
這個工具產生的每個範例都包含三個部分，且順序永遠相同：
- 大綱文字。一個純文字區塊，第一個非空行是根節點，後續每一行前置的空白字元決定其深度。空行會被忽略，行尾會在本地標準化，這樣同一份大綱在 Windows、macOS 或 Linux 上的行為一致。
- 本機預覽。透過可撤銷的 Blob URL 在瀏覽器分頁中渲染的 SVG。每次重新產生時都會重建預覽，因此編輯大綱會立刻讓先前的預覽失效並釋放其 URL。
- 下載的 SVG。與預覽版配置相同的獨立向量檔，副檔名為 .svg，可以放心用瀏覽器開啟、貼到文件裡或附加到訊息中。
比較範例時，這個結構有兩個重點。第一，什麼都不會上傳 — 解析、配置、預覽、下載全部都在目前的瀏覽器分頁中進行，因此大綱從未離開當初輸入的機器。第二，配置是確定性的：同一份大綱文字一定會產生相同的節點位置和相同的三次貝茲曲線路徑，這讓輸出易於測試，當同事各自重新產生時也易於比對差異。
一份範例專案大綱與其圖
考慮以下這份小型產品上市的大綱：
Product Launch Q3 Goals Revenue target User signups Press mentions Channels Email Social Partnerships Risks Slip in engineering Compliance review delay
使用預設設定貼到心智圖製作工具後，這份大綱會產生一張由左至右的圖，內含一個根節點方框（「Product Launch Q3」）、三個第 1 層子方框（「Goals」、「Channels」、「Risks」），以及八個第 2 層孫代方框，分別掛在距離最近的第 1 層父節點上。「Goals」依原始順序接收「Revenue target」、「User signups」和「Press mentions」；「Channels」接收「Email」、「Social」和「Partnerships」；「Risks」接收「Slip in engineering」和「Compliance review delay」。由於此範例只到第 2 層，不會出現更深的節點，而畫布高度完全由第 1 層與第 2 層節點的數量決定。
兩個小調整可以讓同一個範例明顯更實用。在每個通路的戰術前多加一個 tab 縮排（讓「Newsletter」掛在「Email」下、「Onboarding sequence」掛在「Email」下，以此類推），可以把樹狀圖向右延伸一層，卻不改變任何第 1 層的位置。在任何標籤前面加上連字號、星號或加號是無害的 — 解析器讀完縮排後會把這些項目符號去除，因此「- Revenue target」與「Revenue target」會產生同一個節點。
如何重現這個範例
- 貼上大綱。開啟心智圖製作工具，把上面的產品上市大綱貼到文字區，確認第一個非空行（「Product Launch Q3」）靠左對齊且沒有前置空白。
- 檢查縮排。確認每個第 2 層行恰好有兩個前置空格、每個第 3 層行恰好有四個（或分別為一個和兩個 tab），且沒有任何縮排前綴混用 tab 和空格。
- 選擇產生心智圖。點擊產生控制項。預覽會立刻出現在同一頁面，從本地 Blob URL 繪製，以三次貝茲曲線路徑連接每個父節點方框與子節點方框。
- 檢視父子連線。在預覽中，把每個第 1 層方框追溯回「Product Launch Q3」，把每個第 2 層方框追溯回其第 1 層父節點。由於跳層縮排與混合縮排前綴會直接被拒絕，格式錯誤的大綱不會產生任何圖 — 修正空白後重新產生即可。
- 下載 SVG。使用下載控制項儲存獨立 SVG 檔。在瀏覽器分頁中開啟它，確認配置與預覽一致；該檔案不含腳本、字型或遠端參照。
- 保留大綱。把原始大綱留在 SVG 旁邊的文字檔中。當結構變動時，編輯文字後重新產生 — 比重畫這張圖快得多。
這個範例展示的輸出規則
這份產品上市大綱短到可以一眼讀完所有規則。同一套規則適用於任何在解析器硬性上限內的大綱。
| 大綱元素 | 範例的處理方式 |
|---|---|
| 第一個非空行 | 成為根節點（「Product Launch Q3」）。解析器會拒絕第一行的任何前置空白。 |
| 兩個前置空格 | 增加一層巢狀層級，因此「Revenue target」比「Goals」深一層。 |
| 一個 tab | 同樣增加一層巢狀層級。同一個前綴不能同時混用 tab 與空格。 |
| 跳層 | 直接拒絕。第 1 層父節點下出現第 3 層縮排的行不會產生。 |
| 前置連字號、星號或加號 | 讀完縮排後從標籤中去除，因此項目符號只是裝飾。 |
| 空行 | 完全忽略，這樣可以在原始檔中以視覺方式分組各個段落。 |
| &、<、>、"、' 等字元 | 在進入 SVG 之前進行 XML escape，因此它們會以純文字呈現，而非當成標記。 |
| 大綱長度 | 總計上限 12,000 個字元，且最多 80 個非空節點。 |
| 標籤長度 | 上限 120 個字元。 |
另外還有兩個行為值得了解，因為它們會決定下載的 SVG 長什麼樣子。節點位置依深度與原始順序決定，而非以力導向配置（force-directed layout）安排，因此當一份大綱頂部寬、末端深時，輸出會依大綱順序由上至下讀，而不是重新平衡。SVG 畫布會擴展到包含所有產生的節點，因此匯出的檔案是一張自足的圖 — 適合作為規劃產物，卻不適合當作要再回轉成大綱的專案檔。
什麼時候這類範例是合適的選擇
當來源已經是文字形式、目標是一張乾淨、可分享的圖時，心智圖製作範例模式就是正確的選擇。會議議程、章節大綱、競品態勢或風險登錄表都能在一分鐘內重新縮排送進這個工具，產生的 SVG 足夠輕量，可以放進投影片、Wiki 頁面或電子郵件。同一份大綱也能兼當文件：隊友可以直接閱讀縮排過的文字、想像出那張圖，而不必打開 SVG。
當圖本身就是事實來源（source of truth）時，它就是錯誤的選擇。匯出的 SVG 是展示用的產物，並非可回轉的專案檔，因此沒有節點拖曳、沒有可收合的分支，也沒有辦法再匯入回大綱。若需要自由形式的空間編輯、持續性的專案、可存取的語意文件，或即時協作繪製，專用的繪圖應用程式會是更合適的選擇。把大綱當作可編輯的來源、SVG 當作渲染後的輸出，這個工具就會留在它被設計的角色：從文字到圖的快速、本機橋樑。
想深入了解語法並取得可列印的限制摘要，可以參考心智圖製作工具的語法、限制與 SVG 輸出速查表，它以參考格式彙整了相同的規則。獨立向量格式本身則記錄於 MDN SVG 教學，對想了解為何下載的檔案能在任何現代瀏覽器中乾淨開啟、不需外部依賴的人來說，是很有用的參考。
想進一步了解，請參閱圓餅圖製作工具速查表：格式、訣竅與限制。