2026-08-12 16:54:48 +08:00
|
|
|
|
# Markmap - Markdown 思维导图编辑器
|
2026-08-12 08:52:52 +00:00
|
|
|
|
|
2026-08-12 16:54:48 +08:00
|
|
|
|
纯 HTML + CSS + JavaScript 实现的 Markdown 思维导图工具，无需 Node.js、无需编译，开箱即用。
|
|
|
|
|
|
|
|
|
|
|
|
## 快速开始
|
|
|
|
|
|
|
|
|
|
|
|
### 方式一：本地服务器（推荐）
|
|
|
|
|
|
|
|
|
|
|
|
双击 `start.bat` 即可启动（需要 Python 3）：
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
start.bat
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
或手动运行：
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
python serve.py # 默认端口 8080
|
|
|
|
|
|
python serve.py 3000 # 指定端口
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
启动后浏览器会自动打开 `http://127.0.0.1:8080`。
|
|
|
|
|
|
|
|
|
|
|
|
### 方式二：直接打开
|
|
|
|
|
|
|
|
|
|
|
|
直接双击 `index.html` 用浏览器打开。
|
|
|
|
|
|
|
|
|
|
|
|
> 注意：直接打开时 `content.md` 加载会失败，编辑器会自动使用内置示例内容。分享链接功能在 `file://` 协议下不可用。
|
|
|
|
|
|
|
|
|
|
|
|
## 功能
|
|
|
|
|
|
|
|
|
|
|
|
| 功能 | 说明 |
|
|
|
|
|
|
|------|------|
|
|
|
|
|
|
| 实时预览 | 左侧输入 Markdown，右侧实时生成思维导图 |
|
|
|
|
|
|
| 文件操作 | 新建、加载 `.md` 文件、保存为 `.md` 文件 |
|
|
|
|
|
|
| 插入图片 | 点击"图片"按钮选择本地图片，自动转 Base64 插入到光标位置 |
|
|
|
|
|
|
| 历史文档 | 左侧侧边栏管理历史文档，自动缓存到浏览器，刷新不丢失 |
|
|
|
|
|
|
| 主题切换 | 7 种节点配色主题（默认、柔和、深色、森林、单色、极简、彩色） |
|
|
|
|
|
|
| 日间/夜间模式 | 一键切换浅色/深色背景，夜间模式适合暗光环境 |
|
|
|
|
|
|
| 可拖动分割线 | 拖动中间分割线调整编辑区与预览区的占比 |
|
|
|
|
|
|
| 导出 | 支持导出 SVG / PNG / PDF |
|
|
|
|
|
|
| 分享链接 | 将内容压缩编码到 URL 中，一键分享 |
|
|
|
|
|
|
| 缩放控制 | 放大、缩小、适应窗口 |
|
|
|
|
|
|
| 全屏模式 | 隐藏编辑器，全屏展示思维导图 |
|
|
|
|
|
|
| 节点折叠 | 点击节点圆点折叠/展开子树 |
|
|
|
|
|
|
| 代码高亮 | 支持 JavaScript、Python 等语法高亮 |
|
|
|
|
|
|
| 数学公式 | 支持 KaTeX 行内和块级公式 |
|
|
|
|
|
|
| 快捷键 | Ctrl+S 保存文件 |
|
|
|
|
|
|
|
|
|
|
|
|
## Markdown 语法支持
|
|
|
|
|
|
|
|
|
|
|
|
使用 `#` 标题和 `-` 列表来构建思维导图的层级结构：
|
|
|
|
|
|
|
|
|
|
|
|
```markdown
|
|
|
|
|
|
# 根节点
|
|
|
|
|
|
|
|
|
|
|
|
## 一级分支
|
|
|
|
|
|
|
|
|
|
|
|
- 二级项目
|
|
|
|
|
|
- 三级项目
|
|
|
|
|
|
- 另一个三级项目
|
|
|
|
|
|
- 另一个二级项目
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
### Frontmatter 配置
|
|
|
|
|
|
|
|
|
|
|
|
在 Markdown 开头使用 YAML frontmatter 配置思维导图选项：
|
|
|
|
|
|
|
|
|
|
|
|
```yaml
|
|
|
|
|
|
---
|
|
|
|
|
|
title: 我的思维导图
|
|
|
|
|
|
markmap:
|
|
|
|
|
|
colorFreezeLevel: 2
|
|
|
|
|
|
theme: soft
|
|
|
|
|
|
---
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
#### 配色主题
|
|
|
|
|
|
|
|
|
|
|
|
控制思维导图节点和连线的颜色、节点背景、连线弧度、线宽及悬停效果，不影响页面背景（除 `dark` 主题自带画布底色，已自动移除以保持与日/夜间模式独立）：
|
|
|
|
|
|
|
|
|
|
|
|
| 主题值 | 名称 | 说明 |
|
|
|
|
|
|
|--------|------|------|
|
|
|
|
|
|
| （留空） | 默认 | markmap 原始配色（schemeCategory10） |
|
|
|
|
|
|
| `soft` | 柔和 | 柔和暖色调，带节点背景和悬停变暗 |
|
|
|
|
|
|
| `dark` | 深色 | 深色系配色，适合夜间模式 |
|
|
|
|
|
|
| `forest` | 森林 | 绿色系自然色调，带节点背景 |
|
|
|
|
|
|
| `monochrome` | 单色 | 灰度配色，简约连线 |
|
|
|
|
|
|
| `minimal` | 极简 | 透明背景，按层级不同字号 |
|
|
|
|
|
|
| `colorful` | 彩色 | 鲜艳多彩，每条分支不同颜色 |
|
|
|
|
|
|
|
|
|
|
|
|
通过工具栏"主题"按钮可快速切换，切换会自动更新 frontmatter 中的 `theme` 字段。
|
|
|
|
|
|
|
|
|
|
|
|
#### 日间/夜间模式
|
|
|
|
|
|
|
|
|
|
|
|
通过工具栏"日间/夜间"按钮切换整个页面的浅色/深色背景。夜间模式会将背景、编辑器、预览区全部切换为深色配色，模式选择会保存在浏览器本地，下次打开自动恢复。
|
|
|
|
|
|
|
|
|
|
|
|
#### 历史文档
|
|
|
|
|
|
|
|
|
|
|
|
左侧侧边栏自动记录所有编辑过的文档，缓存在浏览器 `localStorage` 中，刷新页面不会丢失。每次输入内容后自动保存（防抖 1 秒），最多保留 50 条记录。
|
|
|
|
|
|
|
|
|
|
|
|
- 点击侧边栏文档可切换查看
|
|
|
|
|
|
- 鼠标悬停显示删除按钮
|
|
|
|
|
|
- 点击侧边栏顶部 `+` 或工具栏"新建"创建新文档
|
|
|
|
|
|
- 侧边栏可通过左上角菜单按钮收起/展开，状态自动记忆
|
|
|
|
|
|
|
|
|
|
|
|
## 项目结构
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
markmap/
|
|
|
|
|
|
├── index.html # 主页面
|
|
|
|
|
|
├── content.md # 默认加载的示例内容
|
|
|
|
|
|
├── serve.py # Python 本地服务器
|
|
|
|
|
|
├── start.bat # Windows 启动脚本
|
|
|
|
|
|
├── README.md # 本文档
|
|
|
|
|
|
├── LICENSE # MIT 许可证
|
|
|
|
|
|
├── css/
|
|
|
|
|
|
│ └── styles.css # 样式表
|
|
|
|
|
|
├── javascript/
|
|
|
|
|
|
│ ├── markmap_editor.js # 编辑器核心逻辑
|
|
|
|
|
|
│ └── export_utils.js # 导出功能（SVG/PNG/PDF）
|
|
|
|
|
|
└── libs/ # 预构建依赖库（无需安装）
|
|
|
|
|
|
├── d3/ # D3 可视化库
|
|
|
|
|
|
├── markmap_view/ # 思维导图渲染
|
|
|
|
|
|
├── markmap_lib/ # Markdown 转换
|
|
|
|
|
|
├── katex/ # 数学公式渲染
|
|
|
|
|
|
├── prismjs/ # 代码语法高亮
|
|
|
|
|
|
├── highlightjs/ # 代码高亮备选
|
|
|
|
|
|
├── webfontloader/ # 字体加载
|
|
|
|
|
|
├── jspdf.js # PDF 生成
|
|
|
|
|
|
├── html2canvas.js # HTML 转图片
|
|
|
|
|
|
└── pako.js # 压缩/解压
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## 技术栈
|
|
|
|
|
|
|
|
|
|
|
|
- **HTML5** - 页面结构
|
|
|
|
|
|
- **CSS3** - 样式（使用 CSS 变量，支持主题定制）
|
|
|
|
|
|
- **JavaScript (ES6+)** - 所有应用逻辑，无框架依赖
|
|
|
|
|
|
- **D3.js** - 数据可视化
|
|
|
|
|
|
- **markmap-lib / markmap-view** - Markdown 解析与思维导图渲染
|
|
|
|
|
|
- **KaTeX** - 数学公式
|
|
|
|
|
|
- **Prism.js / highlight.js** - 代码高亮
|
|
|
|
|
|
- **jsPDF + html2canvas** - 导出功能
|
|
|
|
|
|
- **pako** - URL 分享压缩
|
|
|
|
|
|
|
|
|
|
|
|
## 浏览器兼容性
|
|
|
|
|
|
|
|
|
|
|
|
支持所有现代浏览器：Chrome、Firefox、Edge、Safari。
|
|
|
|
|
|
|
|
|
|
|
|
## 许可证
|
|
|
|
|
|
|
|
|
|
|
|
MIT
|
