Markmap - Markdown 思维导图编辑器
纯 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 语法支持
使用 # 标题和 - 列表来构建思维导图的层级结构：
# 根节点
## 一级分支
- 二级项目
- 三级项目
- 另一个三级项目
- 另一个二级项目
Frontmatter 配置
在 Markdown 开头使用 YAML frontmatter 配置思维导图选项：
---
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。
许可证
Apache-2.0