外观

MindFlow - 视觉化灵感与资源管理工具

约 1014 字大约 3 分钟

2025-12-17

MindFlow 是一个专为创作者、设计师和开发者打造的本地优先 (Local-First) 视觉化思维导图工具。它摒弃了传统的树状结构，采用基于物理引擎的网状布局，帮助你以更直观、更有生命力的方式整理图片、代码、文档和灵感碎片。

🚀 现已全面支持 PWA (Progressive Web App)，可安装至桌面离线使用！

🌟 核心特性

🧠 物理仿真的无限画布

  • 自动排布：基于 D3.js 力导向算法，节点之间具有物理斥力与牵引力，自动避让不重叠，拖拽手感顺滑自然。
  • 无限层级：支持创建无限的子节点，子节点自动环绕父节点分布，形成有机的思维网络。
  • 自由视图：支持画布无限平移与缩放，既能俯瞰全局，又能通过滚轮缩放关注微小细节。

📂 强大的资源管理系统

MindFlow 不仅仅是导图，更是一个私有的灵感素材库。支持多种格式的资源管理：

  • 🖼️ 图片 (Image)：支持高清大图上传与预览，悬浮即现缩略图。
  • 📝 文档 (Markdown)：内置 Markdown 渲染引擎，悬浮即可预览排版后的富文本内容。
  • 💻 代码 (Code)：专为开发者设计的代码块存储，保留代码格式，悬浮预览。
  • 🎨 色卡 (Palette)：设计师必备工具，直观展示色块，支持 Hex 色值复制。
  • 🎤 音频 (Audio)：支持语音备忘录或音效素材的存储与播放。
  • 🔗 链接 (Link)：快速收藏并跳转外部参考网页。

🖱️ 流畅的交互体验

  • 拖拽归档：支持在侧边栏通过拖拽整理资源，将文件拖入文件夹即可归档，拖入空白处即可移出。
  • 拖放关联：直接将侧边栏的资源拖拽到画布上的节点，即可瞬间完成关联。
  • 文件夹系统：支持创建文件夹，通过树状视图高效管理海量资源。
  • 即时预览：鼠标悬浮在节点或列表项上，即可通过 Tooltip 快速查看资源内容，无需打开。

🔒 极致的数据隐私与安全

  • 本地存储 (Local-First)：使用浏览器 IndexedDB 技术，所有数据（包括高达数百MB的图片文件）均存储在您的本地设备中，绝不上传任何服务器，彻底杜绝隐私泄露风险。
  • 直接读写磁盘：集成 File System Access API (Chrome/Edge)，支持直接打开和保存本地的 .mindflow.json 文件。
  • 无缝云同步：将文件保存在 OneDrive/Dropbox/iCloud 目录中，利用网盘自身的同步功能实现跨设备协作。
  • 离线可用：基于 Service Worker 技术，断网状态下依然可以全功能使用。

🚀 快速开始

在线体验

访问部署地址：MindFlow 在线版

安装为桌面应用：

  1. 在 Chrome 或 Edge 浏览器中打开链接。
  2. 点击地址栏右侧出现的“安装 MindFlow”图标。
  3. 即可获得独立的桌面应用体验，启动速度更快，且无浏览器干扰。

本地部署 (开发者)

如果您希望在本地环境运行或二次开发：

  1. 克隆仓库：
git clone https://github.com/Astroite/MindFlowPro.git
  1. 确保 js/lib/ 目录下包含依赖库 (D3.js, LocalForage, Marked.js)。
  2. 由于使用了 ES Modules 和 Service Worker，请使用静态服务器启动：
# Python 3
python -m http.server 8000

# 或者使用 VS Code 的 "Live Server" 插件
# 或者使用WebStrom，在index.html页面使用调试

浏览器访问 http://localhost:8000。

📖 使用说明书

想要了解更详细的操作指南、快捷键列表以及进阶技巧？ 请查阅：👉 MindFlow 电子说明书

🛠️ 技术栈

  • 核心框架：原生 HTML5 / CSS3 / JavaScript (ES6+) - 无重型框架依赖，极致轻量。
  • 可视化引擎：D3.js (v7) - 强大的数据驱动文档库。
  • 本地存储：LocalForage - 简化的 IndexedDB 操作库。
  • Markdown 渲染：Marked.js - 高效的 Markdown 解析器。

📄 许可证

MIT License © 2023 MindFlow

贡献者: Astroite