DOCSEARCHbyAlgolia
Submit Docs

Mind Elixir Documentation

website·Indexed 33 days ago

https://docs.mind-elixir.com/

An open-source mind mapping library written in TypeScript. Features include support for node operations, custom themes, data import/export, image export, and the ability to add node summaries and arrows to mind maps.

Tokens
42.8K
Snippets
488
Records
526
Agent score
58%

What's inside Mind Elixir

  1. Overview of Mind Elixir mind mapping framework

    Mind Elixir is an open-source JavaScript mind mapping framework that allows developers to integrate mind map functionality into applications. It is framework-agnostic, lightweight (approximately 33kb after gzip), and has zero dependencies. Key capabilities include high-performance node operations, multi-node selection, drag-and-drop functionality, node linking, and undo/redo support. It supports output in SVG or PNG formats and allows for customization via themes and CSS style modifications.

  2. Export Mind Maps with LaTeX and Markdown styles

    When using exportPng or exportSvg, you must explicitly inject the KaTeX CSS and any custom Markdown CSS into the export helper to ensure the exported image maintains the correct styling.
    // Pass KaTeX + custom CSS into exportPng / exportSvg as injectCss
const blob = await mind.exportPng(false, style + katexCss)

  3. Install plugins using MindElixir.install

    The install method is used to extend the functionality of a MindElixir instance by registering plugins. A plugin is defined as a function that receives the MindElixirInstance as its argument and performs setup or modifications on that instance.
    // Signature
install: (this: MindElixirInstance, plugin: (instance: MindElixirInstance) => void) => void;

// Example usage:
const myPlugin = (instance: MindElixirInstance) => {
  console.log('Plugin initialized with instance:', instance);
  // Add custom logic or configurations to the instance here
};

mindElixirInstance.install(myPlugin);

  4. Integrate Mind Elixir with SSR frameworks (e.g., Next.js)

    Mind Elixir relies on DOM operations and cannot run on the server. To use it in SSR frameworks like Next.js, import and initialize the library inside a useEffect hook to ensure it only executes on the client side.
    "use client";
import { useEffect } from "react";
import { mindMapExample } from "./mapExample";

export const MindMap = ({ className }: { className: string }) => {
	useEffect(() => {
		import("mind-elixir").then((MindElixir) => {
			const theme = MindElixir.default.DARK_THEME;
			theme.cssVar["--bgcolor"] = "rgba(0,0,0,0)";
			const mei = new MindElixir.default({
				el: "#map",
				direction: 2,
				theme,
			});
			mei.init({
				nodeData: mindMapExample,
			});
			mei.toCenter();
			window.addEventListener("resize", () => {
				mei.toCenter();
			});
		});
	}, []);
	return (
		<div id="wrapper" className={className}>
			<div
				id="map"
				className="pointer-events-none h-[50vh] w-screen"
				onScroll={(e) => e.preventDefault()}
			></div>
		</div>
	);
};

  5. Update and redraw the mind map

    You can redraw the mind map by modifying the nodeData property of the Mind Elixir instance and calling refresh(). To replace the entire map, pass a new data object conforming to the Mind Elixir format directly into the refresh() method.
    // Update specific node data
const data = mind.nodeData;
data.topic = data.topic + " new Data";
mind.refresh();

// Replace entire map with new data
import externalData from "./example.js";
mind.refresh(externalData);

  6. Update and redraw the mind map

    Mind maps can be redrawn by modifying the nodeData property of the Mind Elixir instance and calling the refresh() method. You can either update specific properties of the existing data or pass a completely new data object to refresh() to replace the entire map.
    // Update existing data
const data = mind.nodeData;
data.topic = data.topic + " new Data";
mind.refresh();

// Replace entire map with new data
import newData from "./example.js";
mind.refresh(newData);

  7. Export Mind Elixir maps to images

    Mind Elixir maps can be exported to images using libraries like @ssshooter/modern-screenshot or @zumer/snapdom. When using modern-screenshot, it is recommended to clear the position styles of cloned nodes to ensure correct rendering. If screenshots appear incomplete (missing summaries or lines), adjust the --map-padding in cssVar or ensure the map scale is set to 1 before capturing.
    import { domToPng } from "@ssshooter/modern-screenshot";

const download = async () => {
	const dataUrl = await domToPng(mind.nodes, {
		onCloneNode: (node) => {
			const n = node as HTMLDivElement;
			n.style.position = "";
			n.style.top = "";
			n.style.left = "";
			n.style.bottom = "";
			n.style.right = "";
		},
		padding: 300,
		quality: 1,
	});
	const link = document.createElement("a");
	link.download = "screenshot.png";
	link.href = dataUrl;
	link.click();
};

  8. Update a single node's properties

    To update a specific node, use the reshapeNode method. This method requires the node identifier (which can be retrieved using the MindElixir.E() function) and an object containing the properties to be updated.
    // Update the fontWeight style of a specific node
mind.reshapeNode(MindElixir.E('d6e5f69edb6336c3'), { style: { fontWeight: 'bold' } })

  9. Export Mind Elixir maps to images

    Mind Elixir maps can be exported to images using libraries like @ssshooter/modern-screenshot or @zumer/snapdom.

    Caveats:

    • If screenshots are incomplete (missing summaries or lines), adjust the --map-padding CSS variable.
    • If issues persist, set the map scale to 1 before capturing the screenshot, then restore the original scale.
    import { domToPng } from "@ssshooter/modern-screenshot";

const download = async () => {
	const dataUrl = await domToPng(mind.nodes, {
		onCloneNode: (node) => {
			const n = node as HTMLDivElement;
			n.style.position = "";
			n.style.top = "";
			n.style.left = "";
			n.style.bottom = "";
			n.style.right = "";
		},
		padding: 300,
		quality: 1,
	});
	const link = document.createElement("a");
	link.download = "screenshot.png";
	link.href = dataUrl;
	link.click();
};

  11. Create custom plugins for Mind Elixir

    Plugins in Mind Elixir are created by manipulating the MindElixirInstance. You can extend functionality by either inserting custom DOM elements into the Mind Elixir container or by adding new methods directly to the Mind Elixir object.
    // Example 1: Inserting a custom UI element into the container
mind.container.append(menuContainer);

// Example 2: Adding a new method to the Mind Elixir instance
me.exportXmind = function() {
  /* custom logic here */
};

  12. Initialize and mount a Mind Elixir map

    To initialize a Mind Elixir map, create a new instance of MindElixir by passing an options object containing the el property (either a CSS selector string or an HTMLDivElement). Use MindElixir.new() to generate initial map data and mind.init(data) to load it into the instance.

    Important: Because Mind Elixir mounts with a height of 100% of its container, you must explicitly set a height on the container element to avoid display abnormalities.

    import MindElixir from 'mind-elixir'

let options = {
  el: '#map', // or HTMLDivElement
}

let mind = new MindElixir(options)

// create new map data
const data = MindElixir.new('new topic')
mind.init(data)
    <div id="map"></div>
<style>
  #map {
    height: 500px;
    width: 100%;
  }
</style>