大貓咪的新玩具用 Markdown 打造心智圖: 讓你的筆記更有條理
目錄
Markdown + Mindmap = Markmap
Markmap
Mindmap 是一款可以透過心智圖 (Mindmap) 來視覺化你的 Markdown，而我則是把它當作使用 Markdown 產生心智圖的 library。
Usage
如果是單純要自己使用的話可以使用 Vsocde 的 extension markmap-vscode
或是在網頁上使用也是一個不錯的選擇，以下我們介紹使用 CDN 的方法，如果要使用 npm 安裝的可以到官網去查看。
markmap-lib
首先我們使用 markmap-lib，使用 window.markmap.Transformer 建立一個 markdown 的轉換器，然後將 markdown 的字串輸入進去，我們可以得到轉換後的 root 和 asset。
<script src="https://cdn.jsdelivr.net/npm/markmap-lib"></script>
<script>
const markdown = "# Test \n## Test II \n## Test III";
// transform Markdown
const Markmap = window.markmap;
const transformer = new Markmap.Transformer();
const { root, features } = transformer.transform(markdown);
// get assets
const assets = transformer.getAssets();
</script>markmap-view
接著我們可以透過 markmap-view 來建立互動的元件，底層因為使用 d3 的套件，因此我們也要引入 d3。最後透過 windows.Markmap.Markmap.create 將元件建立到 id 為 markmap 的 svg 元素底下。
<div id="container">
<svg id="markmap" style="width: 100vw; height: 100vh;"></svg>
</div>
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<script src="https://cdn.jsdelivr.net/npm/markmap-view"></script>
<script>
const { loadCSS, loadJS } = Markmap;
if (assets.styles) loadCSS(assets.styles);
if (assets.scripts) loadJS(assets.scripts, { getMarkmap: () => Markmap });
let mm = Markmap.Markmap.create('#markmap', undefined, root);
</script>markmap-tool
最後我們可以加上 tool 來方便跟元件互動，一樣先引入 markmap-toolbar 和它的 css，接著使用 Markmap.Toolbar.create 創立一個 tool 元件，設定位置為右下方，接著與顯示的 view 放在一起即可。
<script src="https://cdn.jsdelivr.net/npm/markmap-toolbar"></script>
<link href="https://cdn.jsdelivr.net/npm/markmap-toolbar/dist/style.min.css" rel="stylesheet">
<script>
const { el } = Markmap.Toolbar.create(mm);
el.style.position = 'absolute';
el.style.bottom = '0.5rem';
el.style.right = '0.5rem';
const container = document.getElementById("container");
container.append(el);
</script>Dark Mode
如果要使用深色介面的話，可以在 html tag 上面加上 markmap-dark 的 class，像下面這樣。
<html class="markmap-dark">Playground
如果大家要試玩的話可以到官網的這個連結 Link，或是在下方測試。
Reference
如果你覺得這篇文章有用 可以考慮贊助飲料給大貓咪