Overview

The MindMap Vue2 component inspired by MindNode is designed for easy and effective brainstorming and organization of thoughts using visual maps. Built on d3.js, this component allows users to create dynamic mind maps with a range of interactive features. Although the project will not see further maintenance in its current form, a Vue3 and d3v6 version is in development, promising even more advanced capabilities.

This component is user-friendly and versatile, making it suitable for both casual users looking to organize their ideas and professionals who need to streamline their workflow. With a host of customizable settings and features, it’s an excellent choice for anyone interested in mind mapping.

Features

v-model: Allows data binding for the mind map, making it easy to manage and update the map’s data.
Width & Height: Set the component's dimensions to fit your design needs, with width adjustable to 100% and height being customizable.
Spacing Adjustments: Fine-tune your layout with adjustable horizontal and vertical spacing between nodes to improve readability.
Draggable Nodes: Easily rearrange the mind map by dragging nodes, making it intuitive to create connections and reorganize ideas.
Zoomable Interface: Users can zoom in or out and move the map around for better navigation and focus on specific sections.
Context Menu Support: Right-click functionality allows for quick access to options, enhancing user experience during editing.
Keyboard Shortcuts: Includes keyboard event support, enabling actions such as adding nodes and navigating through the map efficiently.
Undo/Redo Functionality: A built-in feature to easily revert or restore changes, ensuring a fluid editing process.

Hellowuxin

Mindmap

Vue3 Mindmap