# 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 语法支持

使用 `#` 标题和 `-` 列表来构建思维导图的层级结构：

```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