Features

Plugin-based architecture. Apart from core functionalities, other features are provided as plugins, allowing on-demand use to reduce bundle size.
Supports various structures: Logical Structure Diagrams (left, right), Mind Maps, Organizational Charts, Directory Organization Charts, Timelines (horizontal, vertical), Fishbone Diagrams, etc.
Built-in multiple themes, allows high customization of styles, supports registering new themes.
Node content supports text (plain text, rich text), images, icons, hyperlinks, notes, tags, summaries, mathematical formulas.
Nodes support drag-and-drop (move, free resize), multiple node shapes; supports extending node content, supports using DDM for fully custom node content.
Supports canvas dragging and zooming.
Supports two methods for multi-selecting nodes: mouse button drag selection and Ctrl+left click.
Supports export to json, png, svg, pdf, markdown, xmind, txt; supports import from json, xmind, markdown.
Supports shortcuts, undo/redo, associative lines, search/replace, mini-map, watermark, scrollbars, hand-drawn style, rainbow lines, markers, outer frames.
Provides rich configuration options to meet various scenarios and usage habits.
Supports collaborative editing.
Supports presentation mode.
More features await your discovery.

The following plugins are officially provided and can be imported as needed (if a feature doesn't work, it's likely because the corresponding plugin hasn't been imported). Please refer to the documentation for specific usage:

RichText (Node Rich Text Plugin)	Select (Mouse Multi-Select Node Plugin)	Drag (Node Drag Plugin)	AssociativeLine (Associative Line Plugin)
Export (Export Plugin)	KeyboardNavigation (Keyboard Navigation Plugin)	MiniMap (Mini-Map Plugin)	Watermark (Watermark Plugin)
TouchEvent (Mobile Touch Event Support Plugin)	NodeImgAdjust (Drag to Adjust Node Image Size Plugin)	Search (Search Plugin)	Painter (Node Format Painter Plugin)
Scrollbar (Scrollbar Plugin)	Formula (Mathematical Formula Plugin)	Cooperate (Collaborative Editing Plugin)	RainbowLines (Rainbow Lines Plugin)
Demonstrate (Presentation Mode Plugin)	OuterFrame (Outer Frame Plugin)	MindMapLayoutPro (Mind Map Layout Plugin)

Features that will not be implemented in this project:

Free nodes, i.e., multiple root nodes.

Adding nodes after a summary node.

If you need the above features, this library may not meet your requirements.

Installation

npm i simple-mind-map

Usage

Provide a container element with non-zero width and height:

<div id="mindMapContainer"></div>

Also, set the following CSS styles:

#mindMapContainer * {
  margin: 0;
  padding: 0;
}

Then create an instance:

import MindMap from "simple-mind-map";

const mindMap = new MindMap({
  el: document.getElementById("mindMapContainer"),
  data: {
    data: {
      text: "Root Node",
    },
    children: [],
  },
});

You will get a mind map. Want to implement more features? Check the Development Documentation.

License

MIT. Commercial use is permitted freely as long as the simple-mind-map copyright notice and attribution are retained. If you have questions or wish to remove these requirements, please contact the author (WeChat: wanglinguanfang) for a paid option to remove them.

Example: You can add the following content on any page of your application, such as the About page, Help page, Documentation page, Open Source Notice, etc.:

The mind map feature of this product is developed based on the SimpleMindMap project. The copyright belongs to the original project. Open Source License.

Development Help / Technical Support / Consulting

Due to limited time and a shift in focus, we currently do not provide any development support (including paid support). Thank you for your understanding!

Star

If you like this project, welcome to give it a star. It means a lot to us.

4.5 KiB Raw Permalink Blame History