5.6 KiB
ThinkFlow AI
中文 | 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.
This project was built through Vibe Coding (requirement-driven, AI-assisted iteration).
🔗 Live Demo
Experience it now: 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:
- 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."
- 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.
- Multi-Dimensional Sensory Presentation: Gain textual knowledge through deep "Answers," visual imagery through AI Image Generation, and macro insights through "Session Summaries."
- 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
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
# 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