一、背景

随着大语言模型的普及，越来越多的应用开始集成 AI 自动生成思维导图的功能。用户上传文档后，AI 解析内容并实时生成可视化的思维导图，这一场景对前端技术选型提出了特殊要求。

本文将从 AI 生成场景出发，深入对比 Markmap 和 React Flow 两种主流方案的优劣，帮助开发者做出合理的技术选型。

二、核心需求分析

AI 生成思维导图的典型需求包括：

需求	优先级	说明
SSE 流式渲染	高	AI 逐步输出，前端实时展示生成过程
自动布局	高	无需手动调整节点位置
缩放/平移	高	大型思维导图需要导航
节点编辑	中	用户修改 AI 生成的内容
导出 Markdown	中	将思维导图转为文本格式
拖拽调整结构	低	改变节点层级关系

三、方案概述

3.1 Markmap

Markmap 是一个将 Markdown 转换为交互式思维导图的开源库。其核心理念是：Markdown 即数据源。

Markdown 文本 → 解析 → 树形结构 → SVG 渲染

3.2 React Flow

React Flow 是一个通用的节点式图形编辑器库，需要开发者自行构建思维导图功能。

节点数组 + 边数组 → 布局计算 → React 组件渲染

四、详细对比

4.1 SSE 流式渲染

这是 AI 生成场景的核心需求，两者差异显著。

Markmap 方案：

let markdown = '';
const transformer = new Transformer();
const markmap = Markmap.create(svgElement);

eventSource.onmessage = (event) => {
  markdown += event.data;
  const { root } = transformer.transform(markdown);
  markmap.setData(root);
};

优势：

• AI 直接输出 Markdown 格式，无需转换
• 追加文本即可触发更新
• 自动处理增量渲染

React Flow 方案：

eventSource.onmessage = (event) => {
  const chunk = event.data;
  // 1. 解析 chunk，判断是新节点还是内容更新
  // 2. 构建节点对象 { id, data, position }
  // 3. 构建边对象 { source, target }
  // 4. 调用 dagre 计算布局
  // 5. 更新 React 状态
  setNodes(layoutedNodes);
  setEdges(layoutedEdges);
};

劣势：

• 需要自行解析 AI 输出并转换为节点/边结构
• 每次更新需重新计算布局
• 实现复杂度高

对比结论：

维度	Markmap	React Flow
实现复杂度	⭐ 低	⭐⭐⭐⭐ 高
代码量	~20 行	~200 行
AI 输出格式	Markdown（天然适配）	需自定义协议
增量更新	自动处理	需手动实现 diff

4.2 自动布局

Markmap：

• 内置树形布局算法
• 自动计算节点位置
• 支持水平/垂直方向
• 零配置开箱即用

React Flow：

• 无内置布局，需引入第三方库
• 常用方案：dagre、elkjs、d3-hierarchy
• 需要手动调用布局函数
• 可定制性更强

// React Flow 需要额外引入 dagre
import dagre from 'dagre';

function getLayoutedElements(nodes, edges) {
  const g = new dagre.graphlib.Graph();
  g.setGraph({ rankdir: 'LR' });
  g.setDefaultEdgeLabel(() => ({}));
  
  nodes.forEach(node => g.setNode(node.id, { width: 150, height: 40 }));
  edges.forEach(edge => g.setEdge(edge.source, edge.target));
  
  dagre.layout(g);
  
  return nodes.map(node => ({
    ...node,
    position: { x: g.node(node.id).x, y: g.node(node.id).y }
  }));
}

4.3 交互能力

功能	Markmap	React Flow
缩放/平移	✅ 内置	✅ 内置
节点折叠	✅ 内置	⚠️ 需实现
节点拖拽	❌ 不支持	✅ 内置
节点编辑	❌ 不支持	✅ 可实现
添加节点	❌ 不支持	✅ 可实现
删除节点	❌ 不支持	✅ 可实现
连线操作	❌ 不支持	✅ 内置
框选多选	❌ 不支持	✅ 内置

核心差异：Markmap 是只读渲染器，React Flow 是可编辑画布。

4.4 Markdown 双向转换

Markmap：

• Markdown → 思维导图：✅ 核心功能
• 思维导图 → Markdown：⚠️ 需遍历内部数据结构实现

React Flow：

• Markdown → 思维导图：⚠️ 需自行实现解析器
• 思维导图 → Markdown：⚠️ 需自行实现序列化

两者都需要一定的开发工作，但 Markmap 的数据结构更接近 Markdown，转换更直观。

4.5 样式定制

Markmap：

• 通过 CSS 变量定制颜色
• 节点样式相对固定
• 支持 Markdown 内的 HTML/数学公式

React Flow：

• 完全自定义节点组件
• 可实现任意复杂的节点 UI
• 支持在节点内嵌入表单、按钮等

4.6 性能表现

场景	Markmap	React Flow
100 节点	流畅	流畅
500 节点	流畅	流畅
1000+ 节点	可能卡顿	支持虚拟化渲染
频繁更新	SVG 重绘开销	React 批量更新优化

React Flow 在大规模数据场景下有优势，支持 onlyRenderVisibleElements 虚拟化。

4.7 生态与维护

维度	Markmap	React Flow
GitHub Stars	~8k	~26k
npm 周下载量	~15k	~500k
维护活跃度	中等	活跃
文档完善度	一般	优秀
TypeScript	支持	支持
社区插件	较少	丰富

五、选型决策树

                    需要节点编辑功能？
                         │
              ┌──────────┴──────────┐
              │                     │
             否                    是
              │                     │
              ▼                     ▼
    优先考虑 Markmap          必须用 React Flow
              │                     │
              │                     │
      ┌───────┴───────┐             │
      │               │             │
  纯展示场景     需要简单编辑        │
      │               │             │
      ▼               ▼             ▼
   Markmap    Markdown 编辑器    React Flow
              + Markmap 预览    + dagre 布局

六、推荐方案

场景一：MVP 快速验证

推荐：Markmap

适用于：

• 快速上线 AI 生成思维导图功能
• 用户只需查看，无编辑需求
• 开发资源有限

优势：

• 3 天内可完成核心功能
• AI 输出 Markdown 即可，无需额外处理
• 维护成本低

场景二：完整产品功能

推荐：React Flow + dagre

适用于：

• 产品需要节点编辑功能
• 用户需要调整 AI 生成的结果
• 有足够的开发周期

优势：

• 功能完整，可扩展性强
• 用户体验更好
• 长期维护更灵活

场景三：折中方案

推荐：分屏模式（Markdown 编辑器 + Markmap 预览）

┌─────────────────────────────────────────┐
│  Markdown 编辑器    │   Markmap 预览    │
│  # 主题             │                   │
│  ## 节点1           │    [思维导图]     │
│  ## 节点2           │                   │
└─────────────────────────────────────────┘

适用于：

• 需要编辑功能但开发资源有限
• 用户熟悉 Markdown 语法
• 类似 Typora 的使用体验

七、总结

对比维度	Markmap	React Flow
定位	Markdown 思维导图渲染器	通用节点编辑器
SSE 流式渲染	⭐⭐⭐⭐⭐ 天然适配	⭐⭐ 需大量开发
自动布局	⭐⭐⭐⭐⭐ 内置	⭐⭐⭐ 需引入 dagre
编辑能力	⭐ 只读	⭐⭐⭐⭐⭐ 完整
开发成本	⭐⭐⭐⭐⭐ 极低	⭐⭐ 较高
可扩展性	⭐⭐ 有限	⭐⭐⭐⭐⭐ 强
适用场景	AI 生成 + 只读展示	完整编辑器产品

最终建议：

• 如果核心需求是 AI 生成 + 实时展示，选择 Markmap
• 如果需要 用户编辑思维导图，选择 React Flow
• 如果两者都需要且资源有限，先用 Markmap 上线 MVP，后续根据用户反馈决定是否迁移

---

本文基于 Markmap 和 React Flow 源码分析及实际项目经验撰写，技术选型需结合具体业务场景综合考量。