最近在编写一个在线协同的文档编辑器 DocFlow 想给编辑器添加一个脑图的功能。
主要的实现逻辑就是前端输入 B 站或者 YouTube 的视频链接，会通过后端处理再返回特定格式的内容给前端渲染成脑图的样式。最终找到了 Markmap。
Markmap 是一个开源工具，它可以将 Markdown 文件（.md）实时渲染为 交互式思维导图。它特别适合用来：
-
快速整理知识结构
-
做读书笔记、会议笔记
-
进行头脑风暴或项目规划
-
将复杂的 Markdown 笔记可视化展示
相比传统的思维导图工具（如 XMind、MindManager），Markmap 更轻量、可控且更适合开发者。
Markmap 是一个工具集，包括多个组件：
| 组件 | 作用 |
|---|---|
markmap-cli | 命令行工具，将 Markdown 转换为 HTML |
markmap-lib | 提供 Markdown → 结构树 → SVG 的渲染能力 |
markmap-view | 用于嵌入思维导图的前端组件 |
Markmap VSCode 插件 | 在 VSCode 中实时预览思维导图 |
VSCode 中使用 Markmap
首先我们需要打开 vscode 的插件商场，搜索 markmap，选择 Markmap：
安装完成后，选择一个 Markdown 文件，你会在顶部看到这样的按钮：
点击之后，这样他就给我们生成了相对应的思维脑图了：
如何在 React 中集成
要想在 React 中集成，首先我们需要安装相关的依赖库：
pnpm add markmap-view markmap-toolbar markmap-common markmap-lib
然后再定义一个 Ts 文件，用来定义相关导出：
import { loadCSS, loadJS } from "markmap-common";
import { Transformer } from "markmap-lib";
import * as markmap from "markmap-view";
export const transformer = new Transformer();
const { scripts, styles } = transformer.getAssets();
loadCSS(styles);
loadJS(scripts, { getMarkmap: () => markmap });
然后再编写相关 React 代码：
import React, { useState, useRef, useEffect } from "react";
import { Markmap } from "markmap-view";
import { transformer } from "./markmap";
import { Toolbar } from "markmap-toolbar";
import "markmap-toolbar/dist/style.css";
const initValue = `# markmap
- beautiful
- useful
- easy
- interactive
`;
function renderToolbar(mm: Markmap, wrapper: HTMLElement) {
while (wrapper?.firstChild) wrapper.firstChild.remove();
if (mm && wrapper) {
const toolbar = new Toolbar();
toolbar.attach(mm);
// Register custom buttons
toolbar.register({
id: "alert",
title: "Click to show an alert",
content: "Alert",
onClick: () => alert("You made it!"),
});
toolbar.setItems([...Toolbar.defaultItems, "alert"]);
wrapper.append(toolbar.render());
}
}
export default function MarkmapHooks() {
const [value, setValue] = useState(initValue);
// Ref for SVG element
const refSvg = useRef<SVGSVGElement>();
// Ref for markmap object
const refMm = useRef<Markmap>();
// Ref for toolbar wrapper
const refToolbar = useRef<HTMLDivElement>();
useEffect(() => {
// Create markmap and save to refMm
if (refMm.current) return;
const mm = Markmap.create(refSvg.current);
console.log("create", refSvg.current);
refMm.current = mm;
renderToolbar(refMm.current, refToolbar.current);
}, [refSvg.current]);
useEffect(() => {
// Update data for markmap once value is changed
const mm = refMm.current;
if (!mm) return;
const { root } = transformer.transform(value);
mm.setData(root).then(() => {
mm.fit();
});
}, [refMm.current, value]);
const handleChange = (e) => {
setValue(e.target.value);
};
return (
<React.Fragment>
<div className="flex-1">
<textarea
className="w-full h-full border border-gray-400"
value={value}
onChange={handleChange}
/>
</div>
<svg className="flex-1" ref={refSvg} />
<div className="absolute bottom-1 right-1" ref={refToolbar}></div>
</React.Fragment>
);
}
最终输出结果如下图所示：
它会有一个带控制按钮的工具栏，主要支持 Zoom、center，Alert 等。
编写如下 md 内容会有如下输出：
# 我的学习路线图
## 前端
### HTML
### CSS
### JavaScript
#### 框架
##### React
##### Vue
## 后端
### Node.js
### NestJS
## 数据库
### MySQL
### MongoDB
总结
Markmap 是一个将 Markdown 文本实时渲染为交互式思维导图的可视化工具。它支持标题结构自动生成层级关系，适合知识梳理、读书笔记和项目规划等场景。开发者可以通过 CLI、VSCode 插件或 Web 组件轻松集成使用，并可自定义样式与交互。它轻量、高效、兼容性强，是 Markdown 用户构建结构化知识图谱的利器。
