{"id":42649490,"url":"https://github.com/monch1962/mindmap-web","last_synced_at":"2026-01-29T07:19:42.220Z","repository":{"id":332347567,"uuid":"1132760299","full_name":"monch1962/mindmap-web","owner":"monch1962","description":"Attempt to implement the core functionality of Freemind and Freeplane in a browser app","archived":false,"fork":false,"pushed_at":"2026-01-13T14:15:24.000Z","size":431,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-01-13T15:42:57.370Z","etag":null,"topics":["freemind-mindmap","freeplane","mindmap","playwright","react","typescript-react","vite","web","webapp"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/monch1962.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2026-01-12T12:14:59.000Z","updated_at":"2026-01-13T14:15:33.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/monch1962/mindmap-web","commit_stats":null,"previous_names":["monch1962/mindmap-web"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/monch1962/mindmap-web","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/monch1962%2Fmindmap-web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/monch1962%2Fmindmap-web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/monch1962%2Fmindmap-web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/monch1962%2Fmindmap-web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/monch1962","download_url":"https://codeload.github.com/monch1962/mindmap-web/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/monch1962%2Fmindmap-web/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28869235,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-29T06:56:44.678Z","status":"ssl_error","status_checked_at":"2026-01-29T06:56:35.794Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["freemind-mindmap","freeplane","mindmap","playwright","react","typescript-react","vite","web","webapp"],"created_at":"2026-01-29T07:19:41.577Z","updated_at":"2026-01-29T07:19:42.196Z","avatar_url":"https://github.com/monch1962.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Mind Map Web Application\n\nA modern, feature-rich mind mapping application built with React, TypeScript, and React Flow. Create, edit, and export mind maps with full FreeMind compatibility, AI-powered features, and real-time collaboration.\n\n![Version](https://img.shields.io/badge/version-1.0.1-blue)\n![License](https://img.shields.io/badge/license-MIT-green)\n![Tests](https://img.shields.io/badge/tests-358%20passing-success)\n![Coverage](https://img.shields.io/badge/coverage-73.4%25-yellow)\n\n## Features\n\n### Core Functionality\n\n- ✨ **Interactive Mind Map Canvas** - Create and edit mind maps with an intuitive drag-and-drop interface\n- 💾 **Auto-Save** - Automatic saving to localStorage every 30 seconds\n- ↩️ **Undo/Redo** - Full history tracking with visual history panel (50 states)\n- 🔍 **Advanced Search** - Find nodes with filters (regex, case-sensitive, date ranges, tags, icons)\n- 📝 **Rich Text Notes** - Add detailed formatted notes to any node with a full rich text editor\n- 🎨 **Icons** - 60+ FreeMind-style icons with visual picker\n- ☁️ **Clouds** - Visual grouping for related nodes with custom colors\n- 🔗 **Cross-Links** - Connect any two nodes with advanced linking\n- 📊 **Statistics** - Real-time statistics panel showing node counts, depth, and metrics\n\n### AI-Powered Features\n\n- 🤖 **AI Assistant** - Generate mind maps from text prompts using OpenAI (GPT-4) or Anthropic (Claude)\n- 💡 **Idea Generation** - Get creative suggestions for selected nodes\n- 📝 **Branch Summarization** - AI-powered summaries of mind map branches\n- 🔒 **Privacy-First** - API keys stored locally, never sent to our servers\n\n### Presentation \u0026 Visualization\n\n- 🎯 **Presentation Mode** - Fullscreen slide-based presentations with speaker notes\n- 🎨 **3D View** - Interactive 3D visualization with rotation and auto-rotate\n- 📑 **Templates** - Pre-built mind map templates (project planning, SWOT analysis, brainstorming, etc.)\n- 🌓 **Theme System** - Multiple built-in themes (light, dark, nature, ocean, sunset) with custom theme support\n\n### Collaboration \u0026 Integration\n\n- 👥 **Real-time Collaboration** - Multi-user editing with WebSocket support\n- 💬 **Comments** - Collaborative commenting system for nodes\n- 🔗 **Webhook Integration** - Trigger webhooks on node changes\n- 📅 **Calendar Export** - Export mind maps to calendar formats (iCal)\n- 📧 **Email Integration** - Send mind maps via email directly from the app\n\n### Mobile \u0026 PWA\n\n- 📱 **Mobile-Optimized** - Touch gestures (pinch-to-zoom, drag, pan)\n- 📲 **PWA Support** - Install as desktop/mobile app with offline mode\n- 🔄 **Offline Sync** - IndexedDB-based storage with background sync\n- 📶 **Online/Offline Indicator** - Visual sync status indicator\n\n### Import/Export Formats\n\n- **JSON** - Native format with full feature support\n- **FreeMind (.mm)** - Full compatibility with FreeMind mind maps\n- **OPML** - Outline Processor Markup Language\n- **Markdown** - Export as indented markdown lists\n- **YAML** - Structured data format for developers\n- **D2** - Declarative diagramming language\n- **SVG** - Vector graphics export\n- **PNG** - Raster image export\n- **PDF** - PDF export for sharing and printing\n\n## Documentation\n\n📚 **Comprehensive Documentation Available**:\n\n- **[API Documentation](docs/api.md)** - Complete API reference for all components, hooks, and utilities\n- **[Architecture Overview](docs/architecture.md)** - System design, component hierarchy, and data flow\n- **[Performance Guide](docs/performance.md)** - Optimization tips and best practices\n- **[Mobile Testing Guide](docs/mobile-testing.md)** - Mobile device testing strategies\n- **[Developer Onboarding](docs/onboarding.md)** - Get started contributing to the project\n\n## Getting Started\n\n### Installation\n\n```bash\nnpm install\n```\n\n### Development\n\n```bash\nnpm run dev\n```\n\nThe application will be available at `http://localhost:5173/`\n\nFor network access:\n\n```bash\nnpx vite --host 0.0.0.0\n```\n\n### Build\n\n```bash\nnpm run build\n```\n\nCreates a single-file bundle in `dist/index.html` - self-contained with all assets embedded.\n\n### Testing\n\n```bash\n# Run tests once\nnpm run test:run\n\n# Run tests in watch mode\nnpm run test\n\n# Run tests with UI\nnpm run test:ui\n\n# Generate coverage report\nnpm run test:coverage\n```\n\n## Keyboard Shortcuts\n\n### Node Operations\n\n| Shortcut               | Action                |\n| ---------------------- | --------------------- |\n| `Tab`                  | Create child node     |\n| `Enter`                | Create sibling node   |\n| `Delete` / `Backspace` | Delete selected node  |\n| `E`                    | Edit node text        |\n| `Space`                | Toggle collapse state |\n| `Shift + Click`        | Multi-select nodes    |\n| `Ctrl + A`             | Select all nodes      |\n\n### Navigation \u0026 View\n\n| Shortcut | Action                |\n| -------- | --------------------- |\n| `Ctrl +` | Zoom in               |\n| `Ctrl -` | Zoom out              |\n| `Ctrl 0` | Fit view to all nodes |\n\n### Search\n\n| Shortcut           | Action                 |\n| ------------------ | ---------------------- |\n| `Ctrl + F`         | Open search panel      |\n| `Ctrl + G`         | Next search result     |\n| `Ctrl + Shift + G` | Previous search result |\n\n### Editing\n\n| Shortcut           | Action             |\n| ------------------ | ------------------ |\n| `Ctrl + Z`         | Undo               |\n| `Ctrl + Y`         | Redo               |\n| `Ctrl + Shift + Z` | Redo (alternative) |\n| `Ctrl + S`         | Manual save        |\n\n### Panels\n\n| Shortcut           | Action                   |\n| ------------------ | ------------------------ |\n| `Ctrl + N`         | Toggle notes panel       |\n| `Ctrl + H`         | Toggle save history      |\n| `Ctrl + Shift + H` | Toggle undo/redo history |\n| `Ctrl + I`         | Toggle statistics        |\n| `Ctrl + Shift + A` | Toggle AI Assistant      |\n| `Ctrl + Shift + C` | Toggle comments          |\n| `Ctrl + Shift + W` | Toggle webhooks          |\n| `Ctrl + Shift + D` | Toggle calendar          |\n| `Ctrl + Shift + E` | Toggle email             |\n| `Ctrl + Shift + P` | Toggle presentation mode |\n| `Ctrl + Shift + 3` | Toggle 3D view           |\n| `Ctrl + Shift + T` | Toggle templates         |\n| `Ctrl + Shift + ;` | Toggle theme settings    |\n| `Ctrl + Shift + L` | Toggle dark mode         |\n| `?`                | Show keyboard shortcuts  |\n| `Escape`           | Close panels             |\n\n_For the complete keyboard shortcuts reference, see the [API Documentation](docs/api.md#keyboard-shortcuts-reference)._\n\n## Usage Guide\n\n### Creating a Mind Map\n\n1. **Start Fresh** - The app opens with a blank canvas. Click the root node to begin.\n2. **Add Child Nodes** - Select a node and press `Tab` or click \"Add Root\"\n3. **Add Sibling Nodes** - Select a node and press `Enter`\n4. **Edit Text** - Double-click any node or select it and press `E`\n5. **Delete Nodes** - Select a node and press `Delete` or `Backspace`\n6. **Use Templates** - Press `Ctrl + Shift + T` to use pre-built templates\n\n### Organizing Your Mind Map\n\n1. **Drag \u0026 Drop** - Drag nodes to reorganize the hierarchy\n2. **Clouds** - Select a node, open Metadata Panel (`Ctrl + M`), choose a cloud color\n3. **Icons** - Add visual icons from the Metadata Panel\n4. **Rich Text Notes** - Press `Ctrl + N` to add detailed formatted notes\n5. **Tags** - Add tags to nodes for filtering and organization\n\n### AI-Powered Features\n\n1. **Generate Mind Maps** - Press `Ctrl + Shift + A` to open AI Assistant\n2. **Enter Your Topic** - Type a description or paste text\n3. **Generate** - Click \"Generate Mind Map\" to create structure\n4. **Get Ideas** - Select a node and click \"Generate Ideas\" for suggestions\n5. **Summarize** - Click \"Summarize Branch\" to condense complex branches\n\n### Presentation Mode\n\n1. **Open Presentation** - Press `Ctrl + Shift + P`\n2. **Navigate** - Use arrow keys, Space, or Enter to advance slides\n3. **Speaker Notes** - Toggle notes display for reference\n4. **Overview** - See all slides at a glance\n\n### Advanced Search\n\n1. **Open Search** - Press `Ctrl + F`\n2. **Use Filters** - Enable regex, case-sensitive, or whole word matching\n3. **Filter by Metadata** - Search by tags, icons, cloud colors, or creation date\n4. **Navigate Results** - Use `Ctrl + G` / `Ctrl + Shift + G` to jump between results\n\n### Collaboration\n\n1. **Real-time Sync** - Changes sync automatically across devices (requires backend)\n2. **Comments** - Press `Ctrl + Shift + C` to add comments to nodes\n3. **Webhooks** - Press `Ctrl + Shift + W` to configure webhooks for automation\n4. **Calendar Export** - Press `Ctrl + Shift + D` to export to calendar\n\n### Exporting Your Mind Map\n\n1. Click the export button in the top-right panel\n2. Choose your preferred format:\n   - **SVG/PNG** - For presentations and documents\n   - **FreeMind (.mm)** - For compatibility with other tools\n   - **JSON** - To save your work with all features intact\n   - **Markdown/OPML/YAML/D2** - For developers and text-based workflows\n3. The file will download automatically\n\n## Project Structure\n\n```\nsrc/\n├── components/               # React components\n│   ├── MindMapCanvas.tsx          # Main canvas (1800+ lines)\n│   ├── MindMapNode.tsx            # Custom node component\n│   ├── MetadataPanel.tsx          # Node metadata editing\n│   ├── NotesPanel.tsx             # Rich text notes\n│   ├── SearchPanel.tsx            # Advanced search \u0026 filters\n│   ├── IconPicker.tsx             # Icon selection modal\n│   ├── AIAssistantPanel.tsx       # AI-powered features\n│   ├── PresentationMode.tsx       # Presentation mode\n│   ├── ThreeDView.tsx             # 3D visualization\n│   ├── RichTextEditor.tsx         # Rich text editor\n│   ├── CommentsPanel.tsx          # Collaborative comments\n│   ├── WebhookIntegrationPanel.tsx # Webhook configuration\n│   ├── CalendarExportPanel.tsx    # Calendar export\n│   ├── EmailIntegrationPanel.tsx  # Email integration\n│   ├── TemplatesPanel.tsx         # Template system\n│   ├── ThemeSettingsPanel.tsx     # Theme customization\n│   └── ...                        # Other components\n├── hooks/                    # Custom React hooks\n│   ├── useAutoSave.ts             # Auto-save to localStorage\n│   ├── useUndoRedo.ts             # Undo/redo history (50 states)\n│   ├── useKeyboardShortcuts.ts    # Global keyboard shortcuts\n│   ├── useKeyboardNavigation.ts   # Focus trap for modals\n│   ├── useFileOperations.ts       # Import/export handling\n│   ├── useGestureNavigation.ts    # Touch gestures for mobile\n│   ├── useOfflineSync.ts          # IndexedDB \u0026 service workers\n│   └── ...                        # Other hooks\n├── utils/                    # Utility functions\n│   ├── mindmapConverter.ts        # Tree ↔ Flow conversion\n│   ├── formats/                  # Import/export parsers\n│   │   ├── jsonFormat.ts\n│   │   ├── freemindFormat.ts\n│   │   ├── opmlFormat.ts\n│   │   ├── markdownFormat.ts\n│   │   ├── yamlFormat.ts\n│   │   └── d2Format.ts\n│   ├── errorTracking.ts           # Error logging\n│   ├── accessibility.ts           # ARIA utilities\n│   ├── aiParser.ts                # AI response parsing\n│   └── ...                        # Other utilities\n├── types.ts                  # TypeScript type definitions\n├── App.tsx                   # Root component\n├── main.tsx                  # Application entry point\n└── index.css                 # Global styles\n```\n\n**For detailed architecture information, see the [Architecture Overview](docs/architecture.md).**\n\n## Development\n\n### Quick Start for Developers\n\n1. **Fork and clone** the repository\n2. **Install dependencies**: `npm install`\n3. **Start dev server**: `npm run dev`\n4. **Run tests**: `npm run test`\n5. **Make changes** following TDD principles\n6. **Submit pull request** with tests\n\nSee the [Developer Onboarding Guide](docs/onboarding.md) for detailed setup instructions.\n\n### Adding New Features\n\n1. **Read the documentation** - Check [API docs](docs/api.md) and [Architecture overview](docs/architecture.md)\n2. **Create a feature branch** - `git checkout -b feature/your-feature-name`\n3. **Write tests first** - Follow TDD workflow (see Testing section below)\n4. **Implement your changes** - With tests passing\n5. **Run linting** - `npm run lint`\n6. **Build** - `npm run build` to verify production build\n7. **Commit and push** - With clear commit messages\n8. **Create pull request** - Following the template\n\n### Code Style\n\n- **TypeScript** with strict mode enabled\n- **Functional components** with hooks (no class components)\n- **TDD workflow** with Vitest - write tests first!\n- **ESLint** for code quality - run `npm run lint`\n- **Prettier** for formatting (configured in ESLint)\n\n**See [Developer Onboarding](docs/onboarding.md#code-style) for detailed style guidelines.**\n\n### Testing\n\nWe follow **Test-Driven Development (TDD)**:\n\n```bash\n# Run tests in watch mode (recommended during development)\nnpm run test\n\n# Run tests once\nnpm run test:run\n\n# Run tests with UI (interactive)\nnpm run test:ui\n\n# Generate coverage report\nnpm run test:coverage\n```\n\n**Test Files**: Located alongside source files with `.test.ts` or `.test.tsx` suffix\n\n**Current Coverage**: 73.4% (358 tests passing)\n\n**Target**: 90% coverage\n\n**See [Developer Onboarding](docs/onboarding.md#testing) for testing guidelines.**\n\n## Browser Compatibility\n\n### Desktop\n\n- **Chrome/Edge**: Full support (recommended)\n- **Firefox**: Full support\n- **Safari**: Full support (14+)\n- **Opera**: Full support\n\n### Mobile\n\n- **iOS Safari**: Full support (14+)\n- **Chrome Mobile**: Full support\n- **Samsung Internet**: Full support\n- **Firefox Mobile**: Full support\n\n**For mobile testing guidance, see the [Mobile Testing Guide](docs/mobile-testing.md).**\n\n## Performance\n\n### Current Metrics (v1.0.0)\n\n- **Bundle Size**: 629 KB (184 KB gzipped)\n- **First Contentful Paint**: \u003c 1.5s\n- **Time to Interactive**: \u003c 3.5s\n- **Canvas Performance**: 60 FPS with \u003c 100 nodes\n- **Lighthouse Score**: 90+ (Performance, Accessibility, Best Practices)\n\n**For optimization tips, see the [Performance Guide](docs/performance.md).**\n\n## Contributing\n\nWe welcome contributions! Please follow these guidelines:\n\n### Getting Started\n\n1. **Read the documentation**:\n   - [Developer Onboarding Guide](docs/onboarding.md) - Setup and workflow\n   - [API Documentation](docs/api.md) - Component and hook APIs\n   - [Architecture Overview](docs/architecture.md) - System design\n\n2. **Find a good first issue**:\n   - Check GitHub issues with `good first issue` label\n   - See [First Contribution Ideas](docs/onboarding.md#first-contribution-ideas) for suggestions\n\n3. **Set up your development environment**:\n\n   ```bash\n   # Fork and clone\n   git clone https://github.com/yourusername/mindmap-web.git\n   cd mindmap-web\n\n   # Install dependencies\n   npm install\n\n   # Run tests\n   npm run test:run\n   ```\n\n### Making Changes\n\n1. **Create a feature branch**:\n\n   ```bash\n   git checkout -b feature/your-feature-name\n   ```\n\n2. **Write tests first** (TDD):\n\n   ```bash\n   # Watch mode for development\n   npm run test\n   ```\n\n3. **Implement your feature**:\n   - Follow existing code style\n   - Add tests for new functionality\n   - Update documentation\n\n4. **Verify your changes**:\n\n   ```bash\n   # Run tests\n   npm run test:run\n\n   # Run linter\n   npm run lint\n\n   # Build production bundle\n   npm run build\n   ```\n\n5. **Commit with clear message**:\n\n   ```bash\n   git commit -m \"Add: Feature description\n\n   - Implemented feature X\n   - Added tests for Y\n   - Updated documentation\"\n   ```\n\n6. **Push and create pull request**:\n   ```bash\n   git push origin feature/your-feature-name\n   ```\n\n### Pull Request Guidelines\n\n- **Title**: Use clear, descriptive title (e.g., \"Add: SVG export functionality\")\n- **Description**: Include what you changed and why\n- **Tests**: All tests must pass\n- **Documentation**: Update relevant docs\n- **Style**: Code must pass linting\n\n### Code Review Process\n\n1. **Automated checks** - Tests and linting must pass\n2. **Review** - Maintainers will review your code\n3. **Feedback** - Address any requested changes\n4. **Approval** - PR approved when ready\n5. **Merge** - Squashed into main branch\n\n**For detailed contribution guidelines, see the [Developer Onboarding Guide](docs/onboarding.md).**\n\n## License\n\nMIT License - feel free to use this project for personal or commercial purposes.\n\n## Acknowledgments\n\n### Built With\n\n- **[React 19.2](https://react.dev/)** - UI framework with hooks\n- **[TypeScript 5.8](https://www.typescriptlang.org/)** - Type safety\n- **[Vite 7.2](https://vite.dev/)** - Build tool and dev server\n- **[React Flow 11](https://reactflow.dev/)** - Mind map visualization\n- **[Vitest](https://vitest.dev/)** - Testing framework\n\n### Inspired By\n\n- **[FreeMind](https://freemind.sourceforge.io/wiki/index.php/Main_Page)** - The original mind mapping software\n- **[XMind](https://www.xmind.net/)** - Modern mind mapping UI patterns\n- **[Miro](https://miro.com/)** - Infinite canvas collaboration\n\n### Special Thanks\n\n- All contributors who have helped build this project\n- The React Flow team for the amazing canvas library\n- The open-source community for tools and inspiration\n\n---\n\n## Documentation\n\n- **[API Documentation](docs/api.md)** - Complete API reference\n- **[Architecture Overview](docs/architecture.md)** - System design and patterns\n- **[Performance Guide](docs/performance.md)** - Optimization tips\n- **[Mobile Testing Guide](docs/mobile-testing.md)** - Mobile testing strategies\n- **[Developer Onboarding](docs/onboarding.md)** - Get started contributing\n\n## Support\n\n- **Issues**: [GitHub Issues](https://github.com/yourusername/mindmap-web/issues)\n- **Discussions**: [GitHub Discussions](https://github.com/yourusername/mindmap-web/discussions)\n- **Documentation**: See [docs/](docs/) folder\n\n---\n\n**Made with ❤️ by the Mind Map Web community**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmonch1962%2Fmindmap-web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmonch1962%2Fmindmap-web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmonch1962%2Fmindmap-web/lists"}