ThinkFlow AI

English | 中文

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 (Composition API)
• Build Tool: Vite 5
• Language: TypeScript
• Styling: Tailwind CSS
• Graph Engine: @vue-flow/core
• I18n: vue-i18n
• Icon Library: lucide-vue-next
• Markdown Rendering: markdown-it

---

📂 Code Structure Guide

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

npm install

3. Run Development Server

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