Powerful Mind Map Generator With JavaScript And Canvas – MindWired

Preview:

Description:

A mind map is a diagram used to visually organize information. A mind map is hierarchical, outlined and matrix-based. Mind maps are often used for brainstorming or as part of a meeting.

This JavaScript library is a powerful and open-source tool for drawing dynamic, interactive mindmaps on an HTML canvas element. It uses HTML5 Canvas API and allows you to export data as JSON or just view the mind map inside your browser.

How to use it:

1. Install & download.

# NPM
$ npm i @mind-wired/core

2. Load the MindWired’s JavaScript and Stylesheet.

<link rel="stylesheet" href="/path/to/dist/mind-wired.css" />
<script src="/path/to/dist/mind-wired.js"></script>

3. Create a placeholder element for the mind map.

<div id="mmap-root"></div>

4. Initialize the MindWired.

let mwd; 
window.onload = () => {
  window.mindwired
    .init({
      el: "#mmap-root",
      ui: {
        // UI Options here
      }
    })
}

5. Add your own nodes to the mind map.

window.mindwired
.init({
  el: "#mmap-root",
  ui: {
    // UI Options here
  }
})
.then((instance) => {
  mwd = instance;
  // install nodes here
  mwd.nodes({
    model: {
      type: "text",
      text: "Mind-Wired",
    },
    view: {
      x: 0,
      y: 0,
      layout: {type: 'X-AXIS'},
      edge: {
        name: 'mustache_lr',
        color: '#9aabaf',
        width: 1
      }
    },
    subs: [
      {
        model: {
          text: "Mindmap Javascript Library\n(with memo schema)",
          schema: 'memo'
        },
        view: {x: 0, y: -150, edge: {
          name: 'line',
          color: '#9a9c12',
          width: 1
        }},
        
      },
      {
        model: {text: "Configuration"},
        view: {x: 160, y: 80}
      },
      {
        model: { text: "Node" },
        view: { x: -140, y: -80 },
        subs: [
          {
            model: { text: "text" },
            view: { x: -100, y: -40 }
          },
          {
            model: { text: "badge" },
            view: { x: -100, y: 0 }
          },
          {
            model: { text: "thumnail" },
            view: { x: -100, y: 40 }
          },
        ],
      },
      {
        model: { text: "Edge" },
        view: { x: -140, y: 80 },
        subs: [
          {
            model: { text: "LINE" },
            view: { x: -100, y: -40 }
          },
          {
            model: { text: "mustache_lr" },
            view: { x: -100, y: 0 }
          },
          {
            model: { text: "mustache_tb" },
            view: { x: -100, y: 40 }
          },
        ],
      },
      {
        model: { text: "Layout" },
        view: { x: 140, y: -80 },
        subs: [
          {
            model: { text: "DEFAULT" },
            view: { x: 100, y: -40 }
          },
          {
            model: { text: "X-AXIS" },
            view: { x: 100, y: 0 }
          },
          {
            model: { text: "Y-AXIS" },
            view: { x: 100, y: 40 }
          },
        ],
      },
    ],
  });
});

6. All available UI options.

width: 600,
height: 600,
scale: 1.0,
clazz: {
  node: "active-node",
  edge: "active-edge",
  schema: (schemaName) => schemaName,
  level: (level) => `level-${level}`,
},
offset: { x: 0, y: 0 },
snap: {
  limit: 4,
  width: 0.4,
  dash: [6, 2],
  color: { horizontal: "orange", vertical: "#2bc490" },
},
selection: {
  padding: 5,
  "background-color": "#b3ddff6b",
  "border-radius": "4px",
},

7. Event handlers.

window.mindwired
.init({
  el: "#mmap-root",
  ui: {
    // UI Options here
  }
})
.then((instance) => {
  // nodes here
  mwd.listen('node.created', (e) => {
    const { nodes } = e;
    console.log('[CREATED]', nodes);
  });
  mwd.listen('node.created', (e) => {
    const { nodes } = e;
    console.log('[CREATED]', nodes);
  });
  mwd.listen('node.updated', (e) => {
    const {nodes, type} = e;
    console.log('[UPDATED]', nodes, type);
  });
  mwd.listen('node.deleted', (e) => {
    const {nodes} = e;
    console.log('[DELETED]', nodes);
  });
});

8. Export the mind map to JSON.

mwd.export("json").then((json) => {
  console.log(json);
});

9. Load JSON from a remote data source.

let mwd;
load_from_your_server().then(res => {
  const json = res.json
  window.mindwired.
    .init({...})
    .then(instance => {
      mwd = instance;
      const nodes = JSON.parse(json);
      mwd.nodes(nodes);
    })
})