mind-map Svelte Themes

Mind Map

Mindmapping app to visualise, break down and understand concepts to facilitate learning

🧠 Mind-Map

"All the planets and the stars in one piece..." - Your thoughts, beautifully connected. Screenshot 2025-07-21 220813

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
    
  2. Install dependencies

    npm install
    # or
    yarn install
    
  3. Start the development server

    npm run dev
    # or
    yarn dev
    
  4. 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

Top categories

Loading Svelte Themes