MindFlow

MindFlow 是一个零依赖、纯前端的在线思维导图编辑器。它使用原生 HTML、CSS 和 JavaScript 构建，无需安装依赖或执行构建命令，打开浏览器即可使用。

导图数据默认保存在当前浏览器的 localStorage 中，不会自动上传到服务器。

功能特性

• 单向右侧线条树，支持彩色曲线分支和自动排版
• 节点末端蓝色加号，可直接添加子节点
• 红色概要括号，可概括多个同级节点
• 添加子节点、同级节点、复制分支、删除、清空与折叠
• 节点拖动、画布平移、缩放、适应画布和小地图
• 文字大纲、节点搜索和属性检查器
• 分支颜色、线段长度、字号、粗体、斜体和主题配置
• 备注、标记、优先级、链接、图片引用和附件名称记录
• 节点联系线与标签
• 撤销、重做和浏览器本地自动保存
• 导入、导出 MindFlow 文件
• 导出 PNG、SVG，支持打印和演示模式
• 浅色、深色主题以及移动端布局

快速开始

项目没有运行时依赖，可以直接打开 index.html。

推荐使用本地静态服务器运行：

git clone <repository-url>
cd mindflow
python -m http.server 4173

然后访问 http://127.0.0.1:4173。

也可以使用其他静态服务器，例如：

npx serve .

常用操作

操作	鼠标或快捷键
添加子节点	点击节点末端的蓝色加号，或按 Tab
添加同级节点	点击“同级”，或按 Enter
编辑节点文字	双击节点，或按 F2
删除节点	点击红色“删除”，或按 Delete / Backspace
清空导图	点击工具栏中的“清空”，确认后执行
撤销 / 重做	Ctrl + Z / Ctrl + Y
复制分支	Ctrl + D
保存到本地	Ctrl + S
打开导图文件	Ctrl + O
适应画布	Ctrl + 0
导出	Ctrl + Shift + E

删除和清空操作都可以通过撤销恢复。中心主题不能单独删除，清空导图时会保留一个可编辑的中心主题。

数据与文件

MindFlow 使用浏览器的 localStorage 自动保存工作区，存储键为：

mindflow-line-workspace-v2

清理浏览器站点数据会删除本地工作区。重要导图建议定期导出为 .mindflow 文件。

支持的导出格式：

• .mindflow：包含节点、联系和概要的数据文件，可重新导入编辑
• .svg：适合无损缩放和排版
• .png：适合分享和插入文档

项目结构

mindflow/
├── .gitignore   # 本地导出物与验收文件忽略规则
├── index.html   # 页面结构与 SVG 图标
├── styles.css   # 视觉样式与响应式布局
├── app.js       # 数据模型、渲染、交互、存储和导入导出
└── README.md

部署到 GitHub Pages

1. 将项目推送到 GitHub 仓库的 main 分支。
2. 打开仓库的 Settings > Pages。
3. 在 Build and deployment 中选择 Deploy from a branch。
4. 选择 main 分支和 / (root) 目录并保存。

项目使用相对路径引用资源，不需要修改即可部署在 GitHub Pages 的仓库子路径下。

浏览器支持

建议使用最新版本的 Chrome、Edge、Firefox 或 Safari。导出 PNG、剪贴板和本地文件能力可能因浏览器安全策略而略有差异。

参与贡献

欢迎通过 Issue 提交问题或建议，也欢迎提交 Pull Request。提交代码前请确认：

• 页面在桌面端和移动端均可正常使用
• 浏览器控制台没有新增错误
• 新增交互支持撤销并能正确保存
• PNG、SVG 和 MindFlow 文件导出保持可用

开源许可

当前仓库尚未附带开源许可证。公开发布前请根据使用需求添加 LICENSE 文件，例如 MIT、Apache-2.0 或 GPL-3.0。未添加许可证时，其他人默认没有复制、修改或分发代码的授权。