shiyue/ThinkFlowAI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: 更新README文件并统一为英文版本

Browse Source 
- 删除README.zh-CN.md文件
- 重命名README.md为README.en.md
- 更新README.en.md内容为更详细的英文文档
- 创建新的README.md作为中文文档入口
This commit is contained in:
liuziting
2026-01-22 08:55:43 +08:00
parent e442296757
commit ae06b087c8
3 changed files with 206 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
README.en.md Normal file
View File

@@ -0,0 +1,119 @@
# ThinkFlow AI
[中文](./README.md) | English
**ThinkFlow AI** is a next-generation, local-first, AI-driven mind mapping tool built with Vue 3 and VueFlow. More than just a drawing app, it serves as a "brain augmentor" that thinks with you. By combining the divergent capabilities of LLMs (Large Language Models) with structured visualization, ThinkFlow AI rapidly transforms fuzzy ideas into clear, deep knowledge systems.
---
## 🔗 Live Demo
Experience it now: [https://thinkflow-ai.lz-t.top/](https://thinkflow-ai.lz-t.top/)
---
## 🌟 Why ThinkFlow AI?
Traditional mind mapping tools often require manual entry of every branch, which can become a bottleneck during a burst of inspiration. ThinkFlow AI redefines this process:
1. **AI-Driven Automated Divergence**: Enter a core keyword, and the AI automatically expands outward based on logical chains, helping you break through "blank page anxiety."
2. **Context-Aware Deep Dialogue**: Every node carries its full path context within the thinking tree. This means the AI understands _why_ you moved from A to B, generating more precise follow-up suggestions.
3. **Multi-Dimensional Sensory Presentation**: Gain textual knowledge through deep "Answers," visual imagery through AI Image Generation, and macro insights through "Session Summaries."
4. **Ultimate Privacy & Freedom**: Adopts a local-first architecture. Configurations are stored locally in your browser. Supports any OpenAI-compatible interface with no platform lock-in.
---
## 🚀 Core Functional Architecture
### 1. Intelligent Expansion System
- **Core Idea Activation**: Generate the foundation of your thinking tree with one click.
- **Path Contextual Follow-up**: Perform follow-ups on nodes; the AI reasons using the full logical path from the root to the current node.
- **Node Management**: Supports subtree collapsing for large-scale graphs to keep the workspace clean.
### 2. Deep Dive & Summarization
- **Deep Answer (Deep Dive)**: Generates 300-500 words of professional analysis for specific concepts, supporting rich Markdown formatting.
- **Visual Generation (Image Gen)**: Utilizes CogView or DALL-E to generate photorealistic visuals for nodes, reinforcing visual memory.
- **Global Summary**: Automatically analyzes the entire graph's logic to extract core insights and conclusions.
### 3. Canvas Interaction & Layout
- **Smart Tree Layout**: Built-in algorithm based on dynamic subtree height calculations to solve overlap issues after node expansion.
- **Linked Dragging**: When a parent node moves, child nodes move synchronously to maintain relative positions.
- **Versatile Export**: Perfectly supports exporting to structured Markdown, preserving all deep answer content.
---
## 🛠️ Tech Stack
| Dimension | Technology Choice |
| :----------------------- | :----------------------------------------------------- |
| **Frontend Framework** | Vue 3 (Composition API) |
| **Build Tool** | Vite 5 + TypeScript |
| **Graph Engine** | @vue-flow/core (High performance, highly customizable) |
| **UI/Styling** | Tailwind CSS + Lucide Icons |
| **Internationalization** | Vue-I18n (Seamless English/Chinese switching) |
| **Markdown** | Markdown-it (Node content rendering) |
---
## 📂 Source Structure
```text
src/
├── components/ # UI Component Layer
│ ├── WindowNode.vue # Logic Carrier: Custom node with Image/Answer/Follow-up capabilities
│ ├── TopNav.vue # Global Controls: Layout triggers, export, summary, fullscreen, etc.
│ ├── SideNav.vue # View Config: MiniMap, edge styles, background, settings entry
│ ├── BottomBar.vue # Idea Entry: The spark of inspiration
│ └── ...Modals # Modal Logic: Settings, Preview, Reset confirmation, etc.
├── composables/ # Domain Logic Layer
│ └── useThinkFlow.ts # Business Heart: State management, API scheduling, layout algorithm
├── i18n/ # Language Assets
│ └── locales/ # zh.json / en.json translation files
├── App.vue # App Skeleton: VueFlow container config and assembly
└── main.ts # Entry Point
```
---
## ⚙️ API Service Description (Important)
To provide an out-of-the-box experience, this project includes a default set of demo endpoints.
### 1. Demo Endpoint Details
- **Service Proxying**: Default requests are proxied and controlled via **Cloudflare Workers & Pages**.
- **Model Support**: Currently connected to Zhipu Bigmodel (glm-4-flash / cogview-3-flash) using free tiers.
- **Limitations**: As these are public demo endpoints, you may encounter rate limits or exhausted quotas.
### 2. Advanced Usage (Custom Endpoints)
For more stable and higher-quality generation (e.g., using GPT-4o, Claude 3.5 Sonnet, etc.), we strongly recommend configuring your own API endpoints in **Settings**:
- **Base URL**: Your API proxy address (must support CORS).
- **Model**: Target model name.
- **API Key**: Your private key.
_Note: In custom mode, requests are sent directly from your browser to the target endpoint, bypassing any intermediaries for maximum security and efficiency._
---
## 📦 Quick Deployment
```bash
# Clone the repo
git clone https://github.com/your-repo/ThinkFlowAI.git
# Install dependencies
npm install
# Start development
npm run dev
# Build for production
npm run build
```
---

170
README.md
View File

@@ -1,116 +1,120 @@
# ThinkFlow AI
English | [中文](./README.zh-CN.md)
中文 | [English](./README.en.md)
ThinkFlow AI is a lightweight, local-first, AI-driven mind mapping workspace. It automatically transforms a simple idea into a structured and highly visual mind map using the divergent thinking power of AI.
This project aims to provide a smooth, zero-backend-config thinking assistant that offers deep analytical capabilities, supporting users during brainstorming, knowledge organization, and creative expansion.
**ThinkFlow AI** 是一款基于 Vue 3 和 VueFlow 构建的次世代、本地优先（Local-first）AI 驱动思维导图工具。它不仅仅是一个绘图软件，更是一个能够与你共同思考的“脑力增幅器”。通过将 LLM（大语言模型）的发散性能力与结构化可视化相结合，ThinkFlow AI 能将模糊的想法迅速转化为清晰、深度的知识体系。
---
## 🌟 Key Highlights
## 🔗 在线预览
- **🚀 Idea to Graph**: Just enter a core concept, and the AI will automatically generate a root node and expand into multiple insightful child nodes.
- **🧠 Context-Aware Follow-up**: Support for follow-up questions on any node. The AI considers the "thinking path" from root to the current node to ensure logical consistency.
- **📖 Deep Answer (Deep Dive)**: More than just keywords—click "Answer" to have the AI generate detailed analysis, background, and applications for a node, rendered in Markdown.
- **🎨 Intelligent Visual Aid**: Integrated AI image generation creates realistic visuals based on node content, enhancing the visual impact and memory retention of your mind map.
- **📊 Session Summary**: One-click summary of the entire canvas, extracting core logic, main dimensions, and final insights.
- **📂 Structured Export**: Export the entire mind map as a standard Markdown outline, including node descriptions, answers, and hierarchical structure.
- **🔐 Local-First Configuration**: All API configurations (Key, Base URL, etc.) and language preferences are stored in the browser's `localStorage`, ensuring privacy and security.
立即体验：[https://thinkflow-ai.lz-t.top/](https://thinkflow-ai.lz-t.top/)
---
## 🛠️ Tech Stack
## 🌟 为什么选择 ThinkFlow AI？
- **Framework**: [Vue 3](https://vuejs.org/) (Composition API)
- **Build Tool**: [Vite 5](https://vitejs.dev/)
- **Language**: [TypeScript](https://www.typescriptlang.org/)
- **Styling**: [Tailwind CSS](https://tailwindcss.com/)
- **Graph Engine**: [@vue-flow/core](https://vueflow.dev/)
- **I18n**: [vue-i18n](https://vue-i18n.intlify.dev/)
- **Icon Library**: [lucide-vue-next](https://lucide.dev/)
- **Markdown Rendering**: [markdown-it](https://github.com/markdown-it/markdown-it)
传统的思维导图工具往往需要手动录入每一个分支，这在灵感爆发时往往会成为阻碍。ThinkFlow AI 重新定义了这一过程：
1. **AI 驱动的自动化发散**：输入一个核心词，AI 会基于逻辑链路自动向外扩展，帮助你打破“白纸焦虑”。
2. **上下文感知的深度对话**：每一个节点都带有其在思维树中的完整路径上下文，这意味着 AI 能够理解你为什么从 A 想到 B，从而生成更精准的后续建议。
3. **多维度的感官呈现**：通过深度“回答（Answer）”获取文本知识，通过 AI 生图获取视觉意象，通过“全篇总结”获取宏观洞察。
4. **极致的隐私与自由**：采用本地优先架构，配置存储在浏览器本地，支持任何 OpenAI 兼容接口，不锁定任何平台。
---
## 📂 Code Structure Guide
## 🚀 核心功能架构
### 1. 智能扩展系统
- **核心想法激活**：一键生成思维树根基。
- **路径上下文追问**：对节点进行 Follow-up，AI 将结合从根节点到当前节点的完整逻辑路径进行推理。
- **节点折叠与管理**：支持大规模图谱的子树折叠，保持视野清爽。
### 2. 内容深挖与总结
- **深度回答 (Deep Dive)**：针对特定概念生成 300-500 字的专业解析，支持 Markdown 丰富格式。
- **视觉生成 (Image Gen)**：利用 CogView 或 DALL-E 为节点生成写实风格配图，强化视觉记忆。
- **全局摘要 (Summary)**：自动分析全图逻辑，提取核心洞察与结论。
### 3. 画布交互与排版
- **智能树形布局**：内置基于子树高度动态计算的算法，解决节点展开后的重叠问题。
- **联动拖拽**：父节点移动时，子节点保持相对位置同步移动。
- **多样化导出**：完美支持导出为结构化 Markdown，保留所有深度回答内容。
---
## 🛠️ 技术栈
| 维度 | 技术选型 |
| :----------- | :---------------------------------- |
| **前端框架** | Vue 3 (Composition API) |
| **构建工具** | Vite 5 + TypeScript |
| **画布引擎** | @vue-flow/core (高性能、高度定制化) |
| **UI/样式** | Tailwind CSS + Lucide Icons |
| **国际化** | Vue-I18n (中英双语无缝切换) |
| **Markdown** | Markdown-it (支持节点内容渲染) |
---
## 📂 源码结构
```text
src/
├── components/ # UI Components
│ ├── TopNav.vue # Top toolbar: Handles fit, layout, export, summary, and language toggle.
│ ├── SideNav.vue # Left side nav: Controls MiniMap, edge styles, background, and settings entry.
│ ├── BottomBar.vue # Bottom input bar: Initial entry for core ideas.
│ ├── WindowNode.vue # Custom Node: Core UI for expanding, answers, image generation, and follow-ups.
│ ├── SettingsModal.vue # API Settings: Configuration for Text and Image generation endpoints.
│ ├── SummaryModal.vue # Modal for displaying the session summary.
│ ├── ImagePreviewModal.vue # Modal for fullscreen node image preview.
│ └── ResetConfirmModal.vue # Confirmation modal for canvas reset.
├── composables/ # Core Logic Layer
│ └── useThinkFlow.ts # Core Business Hook: Manages node state, API calls, layout algorithms, and persistence.
├── i18n/ # Internationalization
│ ├── locales/ # Language packs (zh.json, en.json)
│ └── index.ts # I18n initialization
├── App.vue # App Entry: Composes components and configures the VueFlow environment.
└── main.ts # Program Entry Point
├── components/ # UI 组件层
│ ├── WindowNode.vue # 核心逻辑载体：自定义节点，集成生图/回答/追问能力
│ ├── TopNav.vue # 全局控制：布局算法触发、导出、总结、全屏等
│ ├── SideNav.vue # 视图配置：小地图、连线样式、背景切换、设置入口
│ ├── BottomBar.vue # 想法入口：灵感触发点
│ └── ...Modals # 弹窗逻辑：设置、预览、重置确认等
├── composables/ # 领域逻辑层
│ └── useThinkFlow.ts # 业务心脏：响应式状态管理、API 调度、排版算法实现
├── i18n/ # 语言资产
│ └── locales/ # zh.json / en.json 翻译文件
├── App.vue # 应用骨架：VueFlow 容器配置与组件组装
└── main.ts # 入口文件
```
### Core Design Principles
- **State Management**: Uses `useThinkFlow` composable to centralize management of nodes, edges, and UI states, distributed to child components via `App.vue`.
- **Layout Algorithm**: Implements a horizontal tree layout algorithm based on dynamic subtree height calculations, automatically adapting to node size changes.
- **API Communication**: Compatible with OpenAI-style endpoints, supporting custom model names and Base URLs.
---
## 🚀 Quick Start
## ⚙️ API 服务说明 (重要)
### 1. Prerequisites
为了让用户能够开箱即用，本项目提供了一套默认的演示接口。
- Node.js 18+
- npm or pnpm
### 1. 演示接口说明
### 2. Install Dependencies
- **服务转发**：默认请求通过 **Cloudflare Workers & Pages** 进行转发与控制。
- **模型支持**：目前后端对接了智谱 Bigmodel (glm-4-flash / cogview-3-flash) 的免费额度。
- **限制**：由于是公共演示接口，可能会存在请求频率限制或额度耗尽的情况。
### 2. 进阶使用建议 (自定义接口)
为了获得更稳定、更高质量的生成效果（例如使用 GPT-4o, Claude 3.5 Sonnet 等），强烈建议在 **设置 (Settings)** 中配置您自己的 API 端点：
- **Base URL**: 您的 API 代理地址 (需支持 CORS)。
- **Model**: 目标模型名称。
- **API Key**: 您的私有密钥。
_注：自定义模式下，请求将直接从您的浏览器发往目标端点，不经过任何中转，更加安全高效。_
---
## <20> 快速部署
```bash
# 克隆仓库
git clone https://github.com/your-repo/ThinkFlowAI.git
# 安装依赖
npm install
```
### 3. Run Development Server
```bash
# 启动开发
npm run dev
# 生产构建
npm run build
```
Access `http://localhost:5173` to start.
---
## ⚙️ Configuration
This project does not provide a backend; users must configure their own API endpoints:
1. Click the **Settings** icon at the bottom of the left sidebar.
2. **Default Mode**: Uses pre-configured trial endpoints (subject to rate limits).
3. **Custom Mode**:
- **Text Gen**: Enter OpenAI-compatible `Base URL`, `Model Name`, and `API Key`.
- **Image Gen**: Enter configuration for `dall-e` or other image generation APIs.
---
## 📖 Usage Manual
1. **Start a Session**: Enter your idea in the bottom input (e.g., "Future of Urban Transportation") and press Enter.
2. **Node Actions**:
- **Expand**: Click the `+` on a node or enter a follow-up requirement to generate child nodes.
- **Answer**: Click the book icon for a deep analysis of that node.
- **Image**: Click the image icon to generate a visual reference for the idea.
3. **Organize Canvas**:
- **Layout**: Click the "Layout" button at the top to automatically organize all nodes.
- **Export**: Click the "Export" button at the top to get a Markdown copy of your work.
---
## 📄 License
MIT License

116
README.zh-CN.md
View File

@@ -1,116 +0,0 @@
# ThinkFlow AI
[English](./README.md) | 中文
ThinkFlow AI 是一个轻量级、Local-first（本地优先）的 AI 驱动思维导图工作台。它能够将你的一个简单想法，通过 AI 的发散性思维，自动化地扩展为结构清晰、可视化程度高的思维图谱。
本项目旨在提供一个极致流畅、无需复杂后端配置、且具备深度解析能力的思维助手，帮助用户在头脑风暴、知识梳理和创意发散时获得持续的灵感支持。
---
## 🌟 核心亮点
- **🚀 从想法到图谱**：只需输入一个核心概念，AI 会自动生成根节点并向外发散多个具有深度的子节点。
- **🧠 上下文关联追问**：支持针对任意节点进行追问，AI 在生成时会参考“从根到当前节点”的思考路径，确保生成的逻辑一致性。
- **📖 深度回答（Deep Dive）**：不再仅仅是关键词，点击“回答”即可让 AI 针对该节点生成详尽的解析、背景及应用场景，支持 Markdown 渲染。
- **🎨 智能视觉辅助**：集成 AI 生图能力，可根据节点内容生成写实风格的配图，提升思维导图的视觉冲击力与记忆点。
- **📊 全篇智能总结**：一键梳理整张画布的所有想法，提取核心逻辑、主要维度和最终洞察，生成精炼的全局总结。
- **📂 结构化导出**：支持将整个思维图谱导出为标准的 Markdown 大纲，包含节点描述、回答内容及层级结构。
- **🔐 本地化配置**：所有的 API 配置（Key、Base URL 等）和语言偏好均保存在浏览器 `localStorage` 中，隐私且安全。
---
## 🛠️ 技术栈
- **框架**: [Vue 3](https://vuejs.org/) (Composition API)
- **构建工具**: [Vite 5](https://vitejs.dev/)
- **语言**: [TypeScript](https://www.typescriptlang.org/)
- **样式**: [Tailwind CSS](https://tailwindcss.com/)
- **画布引擎**: [@vue-flow/core](https://vueflow.dev/)
- **国际化**: [vue-i18n](https://vue-i18n.intlify.dev/)
- **图标库**: [lucide-vue-next](https://lucide.dev/)
- **Markdown 渲染**: [markdown-it](https://github.com/markdown-it/markdown-it)
---
## 📂 代码结构指南
```text
src/
├── components/ # UI 组件库
│ ├── TopNav.vue # 顶部工具栏：处理适配、布局、导出、总结、语言切换等全局动作
│ ├── SideNav.vue # 左侧配置栏：控制小地图、连线样式、背景网格及 API 设置入口
│ ├── BottomBar.vue # 底部输入框：核心想法的初始入口
│ ├── WindowNode.vue # 自定义节点：核心 UI，包含扩展、回答、生图及追问逻辑
│ ├── SettingsModal.vue # API 配置弹窗：支持文本/图片生成的 Base URL 和 Key 设置
│ ├── SummaryModal.vue # 全篇总结展示弹窗
│ ├── ImagePreviewModal.vue # 节点配图全屏预览弹窗
│ └── ResetConfirmModal.vue # 画布重置确认弹窗
├── composables/ # 核心逻辑层
│ └── useThinkFlow.ts # 核心业务 Hook：管理节点状态、API 调用、布局算法、持久化逻辑等
├── i18n/ # 国际化
│ ├── locales/ # 语言包 (zh.json, en.json)
│ └── index.ts # i18n 初始化
├── App.vue # 应用入口：组合各组件并配置 VueFlow 画布环境
└── main.ts # 程序起点
```
### 核心逻辑设计
- **状态管理**: 采用 `useThinkFlow` 组合式函数统一管理画布节点、连线及 UI 状态。通过解构方式在 `App.vue` 中分发给各子组件。
- **布局算法**: 实现了基于子树高度动态计算的“横向树形”排版算法，能够自动适配节点展开后的尺寸变化，确保图谱整齐。
- **API 通信**: 适配 OpenAI 格式接口，支持自定义模型名称及 Base URL。
---
## 🚀 快速开始
### 1. 环境准备
- Node.js 18+
- npm 或 pnpm
### 2. 安装依赖
```bash
npm install
```
### 3. 启动开发服务器
```bash
npm run dev
```
访问 `http://localhost:5173` 即可开始使用。
---
## ⚙️ 配置说明
本项目不提供后端服务，需用户自行配置 API 接口：
1. 点击左侧工具栏底部的 **设置** 图标。
2. **默认模式**: 预设了部分体验接口（可能有请求限制）。
3. **自定义模式**:
- **文本生成**: 填入 OpenAI 兼容格式的 `Base URL`、`Model Name` 和 `API Key`。
- **图片生成**: 填入支持 `dall-e` 格式或其他生图 API 的配置。
---
## 📖 功能使用手册
1. **开启新会话**: 在底部输入框输入您的想法（如“未来城市的交通方式”），按回车。
2. **节点操作**:
- **扩展**: 点击节点右侧的 `+` 或输入后续要求，AI 会继续在该分支下生成子节点。
- **回答**: 点击书本图标，获取该节点的深度解析。
- **生图**: 点击图片图标，为该想法生成视觉参考。
3. **整理画布**:
- **布局**: 点击顶部“布局”按钮，自动按层级整理所有节点。
- **导出**: 点击顶部“导出”按钮，获取 Markdown 格式的内容副本。
---
## 📄 开源协议
MIT License