I made a Sveltekit Mind Map App!

🧠 Mind-Map

"All the planets and the stars in one piece..." - Your thoughts, beautifully connected.

A sleek, interactive mind-mapping application built with SvelteKit that helps you visualize your ideas, thoughts, and connections in a beautiful, flowing interface.

✨ Features

🎯 Core Functionality

• Interactive Nodes - Create, edit, and organize your thoughts with ease
• Flexible Connections - Multiple connection types to represent different relationships:
  • Bezier curves for smooth, organic flow
  • Step connections for structured hierarchies
  • Straight lines for direct relationships
  • Smooth step for clean, professional layouts
• Smart Labels - Add context with node and edge labels
• Animated Edges - Watch your thoughts flow with smooth, animated connections
• Layout Options - Switch between vertical and horizontal node arrangements

💾 Data Management

• Local Storage - Your mind maps are automatically saved locally (no account required!)
• Persistent State - Pick up right where you left off

🎨 User Experience

• Responsive-ish Design 😜 - Works beautifully only on desktop
• Intuitive Controls - Pan, zoom, and navigate your mind maps effortlessly
• Clean Interface - Focus on your ideas, not the interface

🚀 Getting Started

Prerequisites

• Node.js (v16 or higher)
• npm or yarn

Installation

1. Clone the repository

   git clone https://github.com/yourusername/mind-map.git
   cd mind-map

1. Install dependencies

   npm install
   # or
   yarn install

1. Start the development server

   npm run dev
   # or
   yarn dev

1. Open your browser Navigate to http://localhost:5173 and start mapping your mind! 🎉

Building for Production

npm run build
# or
yarn build

The built application will be in the build directory, ready for deployment.

🛠️ Built With

• SvelteKit - The fastest way to build web apps
• SvelteFlow - Beautiful, interactive node-based UIs
• TypeScript - Type safety for better development experience
• Local Storage API - Client-side persistence

🔮 Future Roadmap

We're just getting started! Here's what's cooking:

🎯 Next Up

• [ ] 🌙 Dark Mode - Because sometimes your best ideas come at night
• [ ] ☁️ Cloud Storage with Supabase - Access your mind maps from anywhere
• [ ] 👤 User Authentication - Personal accounts and secure login
• [ ] 🤝 Real-time Collaboration - Think together, create together

🚀 Possible Future Features

• [ ] 📱 Mobile App - Native iOS and Android apps
• [ ] 🎨 Themes & Customization - Make it yours with custom colors and styles
• [ ] 📤 Export Options - PNG, PDF, and more export formats
• [ ] 🔍 Search & Filter - Find any node or connection instantly
• [ ] 📊 Mind Map Templates - Quick-start templates for different use cases
• [ ] 🔗 Sharing & Publishing - Share your mind maps with the world
• [ ] 📈 Analytics - Insights into your thinking patterns

🤝 Contributing

Got ideas? Found a bug? Want to add that dark mode? We'd love your help!

1. Fork the project
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

💡 Ideas for Contributors

• Add dark mode theme
• Improve mobile responsiveness
• Add keyboard shortcuts
• Create mind map templates
• Enhance accessibility features
• Add more connection styles

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Thanks to the SvelteFlow team for creating such an amazing library
• Inspired by all the creative minds who need a better way to visualize their thoughts
• Coffee ☕ - the real MVP behind this project

---

Ready to map your mind? Star this repo if you find it useful! ⭐

Built with ❤️ using SvelteKit