看看實際效果
技能樹範例
同一款工具，四種需求。下方每張圖都是實際產生的成果。
輸入內容
建立網頁開發入門技能樹，從 HTML、CSS 和 JavaScript 基礎開始，延伸到響應式網頁、資料、Git 和部署。
接著試試在基礎技能下加入 TypeScript。在建立網頁後加入 React 分支。
心智圖 · Buzan radial + markmap-compat tree · schematex-mindmap
產生的圖表
什麼是技能樹？
技能樹是能力的地圖，從基礎知識開始，逐步分支到更專業的技能。它能清楚呈現先備條件，讓你看出哪些基礎能力有助於學習後續技能。
遊戲會用技能樹呈現角色成長，但同樣的架構也適用於課程、職務或興趣。當你想知道接下來該學什麼，而不是工作該何時進行時，就可以使用技能樹。
- Standard
- Buzan radial + markmap-compat tree
- Engine
- schematex-mindmap
- Editable
- Double-click text, drag nodes
- Export
- SVG · PNG · PDF
適用對象
誰會用到技能樹？
將角色能力整理為戰鬥、魔法、潛行等不同的成長路徑。
規劃學習路徑，呈現學習資料、工具和發表實作之前應先掌握的基礎主題。
有系統地整理初學者學習創作或實用技能時，可以逐步培養的能力。
運作方式
三個步驟製作技能樹
01
描述需求
寫一段話就能開始。
“建立網頁開發入門技能樹，從 HTML、CSS 和 JavaScript 基礎開始，延伸到響應式網頁、資料、Git 和部署。”
02
查看圖表
由合適的繪圖引擎產生。
03
提出修改
每次修改都會保留版本。
在基礎技能下加入 TypeScript。
V2 · DRAWN FROM V1, NOTHING RETYPED常見問題
常見問題
什麼是技能樹？
技能樹是呈現能力或主題分支的圖表，通常從基礎開始，逐步延伸到更專業的技能，讓你看出接下來該學習或解鎖什麼。
如何製作技能樹？
先確定整體目標，再列出主要技能領域，以及各領域下的小項能力。將先備條件放在靠近中心的位置，進階技能則放在較外側。
技能樹和心智圖有什麼不同？
心智圖可以整理各種相關想法；技能樹則是以進展、相依關係或能力等級為架構的心智圖。
誰會用到技能樹？
遊戲設計師會用技能樹規劃玩家的成長路徑；教師、經理和自主學習者則會用它來規劃發展方向。
相關工具
