DOCSEARCHbyAlgolia
Submit Docs

SxMind (Simple Mind Map)

repository·main·Indexed 11 days ago

https://github.com/wanglin2/mind-map

A versatile mind mapping ecosystem featuring a framework-agnostic JavaScript library (simple-mind-map v0.14.0-fix.3) and a privacy-first desktop client. It supports various diagram types including mind maps, logic charts, timelines, and fishbone diagrams, with a plugin-based architecture for extending functionality such as rich text, collaborative editing, and SVG export.

Tokens
18K
Snippets
61
Records
80
Agent score
96%

What's inside SxMind

  2. Overview of Simple Mind Map ecosystem

    main

    The mind-map repository consists of two main parts: an open-source JavaScript library and closed-source client software/plugins.

    1. Open Source Library & Web App

    • simple-mind-map: A framework-agnostic JavaScript mind map library used for building web-based mind mapping products. Note: This library is currently in a low-maintenance state.
    • Web Mind Map: A web-based application built using simple-mind-map, Vue2.x, and ElementUI. It supports local file operations and can be self-hosted or used as an online service.

    2. Closed Source Clients & Plugins

    • SxMind Client: A desktop application for Windows, Mac, and Linux featuring local storage, privacy-first data handling, and support for various structures (Mind Map, Logic Chart, Timeline, Fishbone, etc.).
    • Obsidian Plugin: An extension for the Obsidian note-taking app.
    • uTools Plugin: Available in the uTools plugin market.

  5. Extend functionality using plugins

    main

    The library uses a plugin-based architecture to keep the core bundle size small. Many advanced features (like Rich Text, Export, or Collaborative Editing) are not enabled by default and must be imported as plugins. If a feature is not working, ensure you have imported the corresponding plugin.

    Available Official Plugins:

    Plugin NameDescription
    RichTextNode Rich Text Plugin
    SelectMouse Multi-Select Node Plugin
    DragNode Drag Plugin
    AssociativeLineAssociative Line Plugin
    ExportExport Plugin
    KeyboardNavigationKeyboard Navigation Plugin
    MiniMapMini-Map Plugin
    WatermarkWatermark Plugin
    TouchEventMobile Touch Event Support Plugin
    NodeImgAdjustDrag to Adjust Node Image Size Plugin
    SearchSearch Plugin
    PainterNode Format Painter Plugin
    ScrollbarScrollbar Plugin
    FormulaMathematical Formula Plugin
    CooperateCollaborative Editing Plugin
    RainbowLinesRainbow Lines Plugin
    DemonstratePresentation Mode Plugin
    OuterFrameOuter Frame Plugin
    MindMapLayoutProMind Map Layout Plugin

  10. Initialize a MindMap instance

    main

    To use simple-mind-map, you must provide a container element with a non-zero width and height. Ensure you reset the default margins and padding for the container's children via CSS to avoid layout issues.

    Initialize the map by passing an options object to the MindMap constructor containing the el (the container element) and the initial data structure.

    <!-- 1. Prepare the container -->
<div id="mindMapContainer"></div>

<style>
/* 2. Reset container styles */
#mindMapContainer * {
  margin: 0;
  padding: 0;
}
</style>

<script type="module">
import MindMap from "simple-mind-map";

// 3. Create the instance
const mindMap = new MindMap({
  el: document.getElementById("mindMapContainer"),
  data: {
    data: {
      text: "Root Node",
    },
    children: [],
  },
});
</script>

  12. Track granular data changes via data_change_detail

    main

    The Command class can emit a data_change_detail event on the mindMap instance. This event provides a list of specific changes (create, update, or delete) between the previous state and the current state, which is highly efficient for syncing with external databases or performing partial updates.

    Event Payload Structure: Each change object in the array contains:

    • action: 'create', 'update', or 'delete'.
    • data: The node data (for create and delete).
    • oldData: The previous node data (only for update).

    Performance Note: To save resources, the data_change_detail event is only calculated if there is at least one active listener for it on the mindMap instance.

    mindMap.on('data_change_detail', (changes) => {
  changes.forEach(change => {
    if (change.action === 'create') {
      console.log('New node:', change.data)
    } else if (change.action === 'update') {
      console.log('Updated from:', change.oldData, 'to:', change.data)
    } else if (change.action === 'delete') {
      console.log('Deleted node:', change.data)
    }
  })
})