通過 Markdown 來編寫思維導圖的神器 - Markmap
Markmap 是一個可以將 markdown 通過思維導圖的方式進行可視化的開源工具，是 markdown 和 mindmap 的結合，它解析 markdown 內容並提取其層次結構並呈現交互式思維導圖。
試用
我們可以直接通過 markmap 的在線網站直接使用該工具，試用地址：https://markmap.js.org/repl/。我們可以直接根據官網的語法來進行學習：
# Markmap
## 鏈接
- <https://markmap.js.org/>
- [GitHub](https://github.com/gera2ld/markmap)
## 相關
- [coc-markmap](https://github.com/gera2ld/coc-markmap)
- [gatsby-remark-markmap](https://github.com/gera2ld/gatsby-remark-markmap)
## 特性
- links
- **inline** ~~text~~ *styles*
- multiline
text
- `inline code`
-
```js
console.log('code block');
```
- Katex - $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$感覺就是 Markdown 語法換了種表現形式，#表示一級標題，##表示二級標題，###表示三級標題。編寫完成後可以將可視化的思維導圖導出成交互式的 HTML 或者 svg 圖片。
VSCode 插件
更讓人喜歡的是該工具還提供了 VSCode 插件，在 VSCode 中搜索 markmap 即可安裝該插件，可以直接在 VSCode 中預覽 markmap：
markup 要求思維導圖的後綴名爲 .mm.md，然後用 VSCode 打開就能編輯啦：
命令行工具
此外我們還可以使用 markmap 命令行工具，比如在本地終端中使用 markmap 命令行，使用如下所示的命令即可：
$ npx markmap-cli markmap.md當然也可以全局安裝它：
$ yarn global add markmap-cli
$ markmap markmap.md還可以使用 -w 參數來 watch 文件，以便可以編輯 markdown 文件並即時獲取更新：
$ markmap -w markmap.md前端代碼
如果你想在前端代碼中自行控制使用 markmap，可以先安裝 markmap-lib 這個庫來轉換 markdown 數據：
$ yarn add markmap-lib使用如下代碼可以將 markdown 轉換成 markmap 數據對象：
import { Transformer } from 'markmap-lib';
const transformer = new Transformer();
// 1. 轉換 makrdown
const { root, features } = transformer.transform(markdown);
// 2. 獲取 assets 數據
// either get assets required by used features
const { styles, scripts } = transformer.getUsedAssets(features);
// or get all possible assets that could be used later
const { styles, scripts } = transformer.getAssets(features);有了 markmap 的數據後我們可以使用 markmap-view 庫來進行渲染：
$ yarn add markmap-view首先創建一個確定寬高的 SVG 元素：
<script src="https://cdn.jsdelivr.net/npm/d3@6"></script>
<script src="https://cdn.jsdelivr.net/npm/markmap-view"></script>
<svg id="markmap" style="width: 800px; height: 800px"></svg>然後渲染 markmap 數據到 SVG 元素：
// load with <script>
const { markmap } = window;
// or with ESM
import * as markmap from 'markmap-view';
const { Markmap, loadCSS, loadJS } = markmap;
// 1. load assets
if (styles) loadCSS(styles);
if (scripts) loadJS(scripts, { getMarkmap: () => markmap });
// 2. create markmap
// `options` is optional, i.e. `undefined` can be passed here
Markmap.create('#markmap', options, root);
The first argument of Markmap.create can also be an actual SVG element, for example:
const svgEl = document.querySelector('#markmap');
Markmap.create(svgEl, options, data);倉庫地址：https://github.com/gera2ld/markmap
Github 愛好者 我們是一羣 Github 愛好者，專注分享有價值、有趣的開源項目和學習資料，包括 Python、Golang、Java、Rust、AI、前端、運維、數據分析、大數據、雲計算、Kubernetes、Service Mesh 等領域資源。
本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/bPz9q6uDDV21G1Hxkgfe4Q