Create your Node Diagram with Tabs and Enter or JSON
- 📝 Hierarchical Text Editor: Write structured notes with indentation-based hierarchy
- 🔧 JSON Transformation: Automatically convert hierarchical text to structured JSON
- 🗺️ Visual Flow Mapping: Generate interactive flow diagrams from your notes
- 💾 Multiple Export Formats: Save as text files, JSON, or copy to clipboard
- ⚡ Native Performance: Cross-platform desktop app powered by Tauri
- 🔍 Syntax Highlighting: Monaco Editor integration for JSON editing
- 📊 Real-time Visualization: Vue Flow diagrams that update as you type
- So you use tab for intend and enter for new line, then the right pad will direct show the relationship diagram
- Each level deeper (more indentation) becomes a child of the previous line.
- The first line will be the root node.
- You can add "--" doubledash after text to create description .For example Apple -- red then u can click on the Apple node to see the description
- You can use JSON lines in JSON Editor, it will automatically detect the simple object and convert to indented format
- Node.js (v18 or higher)
- Rust (latest stable)
- pnpm (recommended package manager)
-
Clone the repository
git clone https://github.com/manfad/TabsFlow.git cd TabsFlow -
Install dependencies
pnpm install
-
Run in development mode
pnpm dev
-
Build for production
pnpm tauri build
- Vue 3 - Progressive JavaScript framework
- TypeScript - Type-safe JavaScript
- Tauri - Cross-platform desktop framework
- Vite - Fast build tool and dev server
- @guolao/vue-monaco-editor - Monaco Editor integration for Vue
- @vue-flow/core - Interactive flow diagrams
- @tauri-apps/api - Tauri desktop APIs
Welcome contributions from the community for any bugs or request!
This project is licensed under the MIT License - see the LICENSE file for details.
This project is built on the shoulders of amazing open source libraries:
- @guolao/vue-monaco-editor - Monaco Editor integration for Vue 2&3, loaded from CDN without bundling
- @vue-flow/core - Interactive flow diagrams and node-based editors for Vue 3
Special thanks to the maintainers and contributors of these libraries for making this project possible.