Markmap：纯文本思维导图

简介

Markmap 是一个开源工具，允许用户使用纯文本（Markdown格式）创建和可视化思维导图。由markmap团队开发，它将简单的Markdown语法转换为交互式的、可视化的思维导图，让用户能够专注于内容创作而不是复杂的图形设计工具。

🔗 GitHub地址：

https://github.com/markmap/markmap

🚀 核心价值：

文本思维导图 · 实时可视化 · 开源免费 · 跨平台

项目背景：

思维可视化：响应思维导图在知识管理和创意激发中的重要性
文本优先：遵循开发者喜欢的文本编辑工作流
简化流程：消除图形化思维导图工具的复杂性
开放标准：基于开放的Markdown标准

技术特色：

📝 Markdown基础：使用熟悉的Markdown语法
🎨 实时渲染：输入时实时更新可视化
🔄 双向同步：文本和可视化视图同步
🌐 Web技术：基于现代Web技术栈
📱 多端支持：支持各种编辑器和环境

设计理念：

简洁高效：最小化学习曲线，最大化效率
专注内容：让用户专注于内容而不是样式
开放格式：使用开放标准确保兼容性
开发者友好：为开发者工作流程优化
可扩展性：支持插件和自定义扩展

主要功能

1. 核心功能体系

Markmap提供了一套完整的文本到思维导图转换解决方案，专注于易用性和功能深度。

Markdown解析：

标题层级：使用#符号表示不同层级
列表结构：无序列表和有序列表支持
富文本支持：粗体、斜体、代码块等格式
链接嵌入：超链接和参考链接
内联HTML：支持内联HTML内容

可视化渲染：

交互式导图：可缩放、平移的交互式导图
动态布局：自动调整布局和大小
颜色主题：多种颜色主题和样式
节点样式：自定义节点颜色和样式
动画效果：平滑的展开/折叠动画

导出分享：

图像导出：PNG、SVG等图像格式导出
HTML导出：独立HTML文件导出
在线分享：通过URL分享思维导图
嵌入支持：嵌入到网页和文档中
打印支持：高质量打印输出

集成扩展：

编辑器集成：VS Code、Vim等编辑器插件
命令行工具：命令行界面批量处理
API接口：编程接口集成到其他应用
自定义插件：扩展功能和样式
主题系统：自定义主题和样式

2. 功能详情

Markdown语法支持：

标题层级:
# 一级标题        -> 根节点
## 二级标题       -> 子节点
### 三级标题      -> 孙子节点
#### 四级标题     -> 曾孙节点

列表结构:
- 无序列表项      -> 同级节点
  - 子项         -> 子节点
  - 另一个子项    -> 同级子节点

有序列表:
1. 第一项        -> 有序节点
2. 第二项        -> 同级节点
   1. 子项      -> 有序子节点

格式支持:
**粗体文本**      -> 粗体显示
*斜体文本*       -> 斜体显示
`代码块`         -> 等宽字体
[链接](url)      -> 可点击链接

交互功能：

导航控制:
- 缩放: 鼠标滚轮或触摸板缩放
- 平移: 拖拽画布移动
- 重置: 一键重置视图
- 聚焦: 聚焦到特定节点

节点操作:
- 展开/折叠: 点击节点切换展开状态
- 多选: 选择多个节点进行操作
- 搜索: 关键词搜索和高亮
- 过滤: 基于条件过滤节点

视图选项:
- 主题切换: 明暗主题切换
- 布局调整: 不同布局算法
- 缩放级别: 控制缩放灵敏度
- 动画速度: 调整动画效果速度

导出格式：

图像格式:
- SVG: 矢量格式，无限缩放
- PNG: 位图格式，通用兼容
- JPEG: 压缩格式，文件较小
- PDF: 文档格式，打印优化

数据格式:
- HTML: 完整交互式网页
- JSON: 结构化数据导出
- Markdown: 原始文本备份
- 文本大纲: 纯文本大纲格式

分享选项:
- 在线链接: 生成可分享的URL
- 嵌入代码: 获取嵌入iframe代码
- 社交媒体: 直接分享到社交平台
- 邮件发送: 通过邮件发送导图

集成支持：

编辑器支持:
- VS Code: 官方Markmap扩展
- Vim/Neovim: 通过插件支持
- Sublime Text: 插件支持
- Atom: 社区插件支持
- WebStorm: 内置支持

命令行工具:
- 批量转换: 批量处理Markdown文件
- 监视模式: 自动监视文件变化
- 配置管理: 配置文件管理选项
- 脚本集成: 集成到自动化脚本

API接口:
- JavaScript: 浏览器和Node.js API
- REST API: HTTP接口服务
- Web组件: 自定义HTML元素
- 编程接口: 各种语言绑定

3. 技术规格

系统架构：

核心库: markmap-lib  - 核心转换逻辑
视图层: markmap-view - 可视化渲染
工具链: markmap-cli  - 命令行接口
插件系统: 扩展和自定义支持

技术栈:
- 语言: TypeScript
- 渲染: SVG + D3.js
- 构建: Vite + Rollup
- 测试: Vitest
- 包管理: pnpm

性能指标：

渲染性能: 支持1000+节点流畅渲染
加载时间: <100ms初始加载
内存使用: 高效内存管理
文件大小: 轻量级库大小
兼容性: 现代浏览器支持

兼容性：

浏览器支持:
- Chrome 60+
- Firefox 60+
- Safari 12+
- Edge 79+
- 移动浏览器

环境支持:
- Node.js 14+
- Deno 1.0+
- Bun 0.5+
- 各种JavaScript环境

编辑器支持:
- VS Code 1.60+
- Vim 8.0+/Neovim 0.5+
- 其他现代编辑器

安装与配置

1. 环境准备

系统要求：

Node.js: 14.0+ (推荐16.0+)
内存: 512MB+ RAM
存储: 100MB+ 可用空间
浏览器: 现代Web浏览器

可选工具：

代码编辑器：VS Code、Vim等
Git：版本控制（可选）
包管理器：npm、yarn或pnpm

2. 安装步骤

命令行安装（推荐）：

# 全局安装markmap-cli
npm install -g markmap-cli

# 或使用yarn
yarn global add markmap-cli

# 或使用pnpm
pnpm add -g markmap-cli

VS Code扩展：

# 在VS Code中安装Markmap扩展
1. 打开VS Code
2. 进入Extensions视图 (Ctrl+Shift+X)
3. 搜索 "markmap"
4. 安装 "Markmap" 扩展
5. 重启VS Code生效

浏览器使用：

<!-- 直接在HTML中使用 -->
<script src="https://unpkg.com/markmap-lib"></script>
<script src="https://unpkg.com/markmap-view"></script>

<div id="markmap"></div>
<script>
const { Markmap } = window.markmap;
const mm = Markmap.create('#markmap');
// 使用mm.load()加载Markdown内容
</script>

NPM包使用：

# 在项目中安装
npm install markmap-lib

# 或安装完整包
npm install markmap

Docker使用：

# 使用Docker运行
docker run -it --rm -v $(pwd):/data -p 8080:8080 markmap/markmap

# 或自行构建
git clone https://github.com/markmap/markmap.git
cd markmap
docker build -t markmap .
docker run -p 8080:8080 markmap

3. 配置说明

基本配置：

// markmap配置选项
const options = {
  duration: 500,          // 动画持续时间
  maxWidth: 500,          // 最大节点宽度
  nodeMinHeight: 16,      // 节点最小高度
  spacingVertical: 10,     // 垂直间距
  spacingHorizontal: 80,  // 水平间距
  autoFit: true,          // 自动适应视图
  fitRatio: 0.95,         // 适应比例
  color: function() {     // 颜色函数
    return '#000';
  },
  paddingX: 10            // X轴内边距
};

主题配置：

// 自定义主题
const theme = {
  colors: ['#ff6b6b', '#4ecdc4', '#45b7d1', '#f9c80e', '#ff6b6b'],
  fontFamily: 'BlinkMacSystemFont, "Segoe UI", sans-serif',
  fontSize: 16,
  lineHeight: 1.5
};

// 或使用内置主题
import { darkTheme } from 'markmap-view/themes';

导出配置：

// 导出选项
const exportOptions = {
  format: 'svg',          // 导出格式: svg, png, jpeg
  scale: 2,               // 缩放比例
  quality: 0.92,          // 质量(JPEG)
  backgroundColor: '#fff', // 背景颜色
  width: 800,             // 宽度
  height: 600             // 高度
};

CLI配置：

# 命令行选项
markmap [options] [input]

选项:
  -o, --output <file>    输出文件
  -w, --watch            监视模式
  -t, --theme <theme>    主题: light, dark
  -f, --format <format>  格式: html, svg, png
  --no-open              不自动打开
  --no-toolbar           隐藏工具栏
  -h, --help             显示帮助

使用指南

1. 基本工作流

使用Markmap的基本流程包括：编写Markdown → 实时预览 → 交互调整 → 导出分享。整个过程设计为简单直观，用户只需关注内容创作。

2. 基本使用

创建思维导图：

# 项目计划

## 需求分析
- 用户需求收集
- 竞品分析
- 功能规划

## 设计阶段
- UI/UX设计
- 技术架构
- 数据库设计

## 开发阶段
- 前端开发
- 后端开发
- 测试计划

## 发布阶段
- 部署上线
- 用户培训
- 维护计划

实时预览：

# 使用命令行实时预览
markmap plan.md --watch

# 或在VS Code中
1. 打开Markdown文件
2. 点击右上角Markmap图标
3. 在侧边栏查看实时预览
4. 编辑时自动更新

交互操作：

# 导图交互
1. 缩放: 使用鼠标滚轮缩放
2. 平移: 拖拽画布移动视图
3. 节点操作:
   - 点击节点: 展开/折叠
   - 右键节点: 上下文菜单
   - 悬停节点: 显示详细信息
4. 搜索: Ctrl+F搜索内容
5. 重置: 点击主页图标重置视图

导出分享：

# 命令行导出
markmap plan.md -o plan.svg
markmap plan.md -o plan.html
markmap plan.md -o plan.png

# 或从Web界面导出
1. 点击导出按钮
2. 选择导出格式
3. 调整导出选项
4. 下载导出文件

3. 高级用法

自定义样式：

/* 自定义CSS样式 */
.markmap-node {
  font-family: 'Comic Sans MS', cursive;
  border-radius: 8px;
  padding: 8px;
}

.markmap-node:hover {
  background-color: #f0f8ff;
  transform: scale(1.05);
}

.markmap-link {
  stroke: #666;
  stroke-width: 2px;
}

编程集成：

// 在Web应用中使用
import { Markmap } from 'markmap-view';

const container = document.getElementById('markmap');
const mm = Markmap.create(container);

// 加载Markdown内容
mm.load(`
# 动态思维导图

## 实时更新内容
- 项目进度
- 任务状态
- 问题跟踪
`);

// 实时更新
function updateContent(content) {
  mm.load(content);
}

批量处理：

# 批量转换Markdown文件
for file in *.md; do
  markmap "$file" -o "${file%.md}.html"
done

# 或使用脚本
const { transform } = require('markmap-lib');
const fs = require('fs');

const md = fs.readFileSync('input.md', 'utf8');
const { root, features } = transform(md);
fs.writeFileSync('output.json', JSON.stringify(root, null, 2));

自动化工作流：

// 集成到构建流程
const { execSync } = require('child_process');

// 在构建过程中生成思维导图
execSync('markmap docs/**/*.md --output public/mindmaps/');

// 或使用API
const { transform } = require('markmap-lib');
const markdownFiles = glob.sync('content/**/*.md');

markdownFiles.forEach(file => {
  const content = fs.readFileSync(file, 'utf8');
  const { root } = transform(content);
  // 处理生成的内容
});

应用场景实例

案例1：项目规划和任务管理

场景：项目经理需要可视化项目结构和任务分配

解决方案：使用Markmap创建项目规划思维导图。

项目导图：

# 网站重构项目

## 项目目标
- 提升性能
- 改善用户体验
- 现代化技术栈

## 团队分工
### 前端团队
- UI组件开发
- 响应式设计
- 性能优化

### 后端团队
- API重构
- 数据库优化
- 部署流水线

### 测试团队
- 单元测试
- 集成测试
- 性能测试

## 时间计划
- 阶段一: 需求分析 (2周)
- 阶段二: 设计开发 (6周)
- 阶段三: 测试部署 (2周)

项目管理功能：

任务分解：可视化任务层级和依赖关系
责任分配：清晰显示团队分工
进度跟踪：标记完成状态和进度
优先级排序：视觉化任务优先级
资源规划：关联资源和时间信息

管理价值：

清晰沟通：直观展示项目结构，减少误解
全面视图：一览项目全貌和细节
灵活调整：轻松调整计划和任务
团队协作：共享视图促进团队协作
进度透明：透明化项目进度和状态

案例2：知识管理和学习笔记

场景：学生需要整理课程知识和学习笔记

解决方案：使用Markmap创建知识体系思维导图。

学习导图：

# 机器学习知识体系

## 基础数学
### 线性代数
- 矩阵运算
- 特征值分解
- 奇异值分解

### 概率统计
- 概率分布
- 贝叶斯定理
- 假设检验

## 核心算法
### 监督学习
- 线性回归
- 逻辑回归
- 支持向量机

### 无监督学习
- K均值聚类
- 主成分分析
- 关联规则

## 实践应用
### 计算机视觉
- 图像分类
- 目标检测
- 图像分割

### 自然语言处理
- 文本分类
- 情感分析
- 机器翻译

学习功能：

知识结构化：系统化组织知识体系
概念关联：显示概念间关系和联系
记忆辅助：视觉记忆增强学习效果
复习工具：快速复习和知识检索
知识扩展：轻松添加新知识和链接

学习价值：

高效学习：提高知识吸收和理解效率
系统掌握：建立完整的知识体系
长期记忆：通过视觉化增强记忆
知识连接：理解知识点间的关系
学习规划：规划学习路径和重点

案例3：会议记录和头脑风暴

场景：团队需要记录会议内容和进行头脑风暴

解决方案：使用Markmap进行实时会议记录和创意整理。

会议导图：

# 产品创意会议 - 2024

## 市场分析
### 用户需求
- 痛点: 现有产品问题
- 机会: 未满足需求
- 趋势: 市场发展方向

### 竞争分析
- 主要竞争对手
- 差异化机会
- 市场空白点

## 产品创意
### 核心功能
- 关键功能1
- 关键功能2
- 创新点

### 技术可行性
- 技术挑战
- 资源需求
- 时间估算

## 行动计划
### 下一步
- 市场调研
- 原型开发
- 用户测试

### 责任分配
- 负责人: 张三
- 协助人: 李四
- 时间节点: 下周

会议功能：

实时记录：会议过程中实时记录和整理
视觉引导：视觉化引导讨论和思考
想法组织：结构化组织和分类想法
行动跟踪：明确行动项和责任分配
会议存档：完整的会议记录和回溯

协作价值：

提高效率：更高效的会议和讨论
全员参与：促进团队成员参与和贡献
创意激发：视觉化激发更多创意和想法
明确责任：清晰的任务分配和跟踪
知识保存：完整保存会议内容和决策

总结

Markmap作为一个强大的文本到思维导图转换工具，通过其简单的Markdown语法、实时可视化能力和丰富的功能特性，为用户提供了完美的思维导图解决方案。其开源特性和多平台支持，使其成为各种用户的理想选择。

核心优势：

📝 文本优先：使用熟悉的Markdown语法
🎨 实时可视化：输入时实时渲染思维导图
🔄 双向同步：文本和可视化视图同步更新
🌐 多平台支持：命令行、Web、编辑器集成
🆓 开源免费：完全开源，免费使用

适用场景：

项目规划和管理
知识管理和学习笔记
会议记录和头脑风暴
内容规划和创作
个人思考和创意整理

技术特色：

现代技术栈：基于TypeScript和现代Web技术
高性能渲染：高效的SVG渲染和交互
丰富API：完整的编程接口和扩展能力
主题定制：可定制的主题和样式
格式支持：多种导入导出格式支持

🌟 GitHub地址：

https://github.com/markmap/markmap

🚀 快速开始：

npm安装或VS Code扩展

📚 学习资源：

示例文件和文档

立即使用Markmap，体验文本思维导图的强大功能！

最佳实践建议：

💡 内容结构：合理使用标题层级组织内容
🎨 适度样式：保持简洁，避免过度样式化
🔄 版本控制：Markdown文件适合版本控制
🤝 团队协作：共享Markdown文件协同编辑
📱 多端使用：利用多平台支持随时随地使用

注意事项：

⚠️ 复杂内容：极复杂导图可能需要性能优化
💾 文件备份：定期备份重要Markdown文件
🔍 浏览器兼容：注意旧浏览器兼容性问题
📋 学习曲线：熟悉Markdown语法和工具使用
🛠️ 高级功能：逐步学习高级功能和使用技巧

Markmap持续演进和发展，欢迎用户反馈和贡献，共同打造更好的思维导图工具！

通过Markmap，您可以：

提高效率：快速创建和修改思维导图
专注内容：专注于内容而不是工具操作
无缝协作：基于文本的协作和版本控制
多场景应用：适用于各种工作和学习场景
技术集成：轻松集成到开发工作流

Markmap都能提供强大的思维导图能力释放思维潜力！

Markmap：纯文本思维导图

简介

主要功能

1. 核心功能体系

2. 功能详情

3. 技术规格

安装与配置

1. 环境准备

2. 安装步骤

3. 配置说明

使用指南

1. 基本工作流

2. 基本使用

3. 高级用法

应用场景实例

案例1：项目规划和任务管理

案例2：知识管理和学习笔记

案例3：会议记录和头脑风暴

总结

推荐产品

热门文章

产品分类

热门产品

联系方式

扫码联系

Markmap：纯文本 思维导图

简介

主要功能

1. ​核心功能体系​

2. ​功能详情​

3. ​技术规格​

安装与配置

1. ​环境准备​

2. ​安装步骤​

3. ​配置说明​

使用指南

1. ​基本工作流​

2. ​基本使用​

3. ​高级用法​

应用场景实例

案例1：项目规划和任务管理

案例2：知识管理和学习笔记

案例3：会议记录和头脑风暴

总结

推荐产品

热门文章

产品分类

热门产品

联系方式

扫码联系

Markmap：纯文本思维导图

1. 核心功能体系

2. 功能详情

3. 技术规格

1. 环境准备

2. 安装步骤

3. 配置说明

1. 基本工作流

2. 基本使用

3. 高级用法