117 lines
5.3 KiB
Markdown
117 lines
5.3 KiB
Markdown
# ThinkFlow AI
|
|
|
|
English | [中文](./README.zh-CN.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.
|
|
|
|
---
|
|
|
|
## 🌟 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.
|
|
|
|
---
|
|
|
|
## 🛠️ Tech Stack
|
|
|
|
- **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)
|
|
|
|
---
|
|
|
|
## 📂 Code Structure Guide
|
|
|
|
```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
|
|
```
|
|
|
|
### 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
|
|
|
|
### 1. Prerequisites
|
|
|
|
- Node.js 18+
|
|
- npm or pnpm
|
|
|
|
### 2. Install Dependencies
|
|
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
### 3. Run Development Server
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
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
|