Используйте Mindmap на своей странице прямо сейчас, из коробки

Когда вы действительно хотите разобраться в своих мыслях, лучше использовать график. Вы всегда можете открыть программное обеспечение или веб-сайт, чтобы нарисовать его, как насчет того, чтобы использовать ментальную карту на своей собственной странице?

Когда вы столкнетесь с графическими движками с открытым исходным кодом, вы обнаружите, что их слишком сложно использовать. Многие из нас не являются профессией, на разработку собственной карты разума уходят часы или дни.

Итак, как насчет использования графика из коробки. Вы просто импортируете, устанавливаете данные и монтируете… Тада~ Теперь у вас есть карта ума~

Используя DiceGraph, вы можете легко получить интерактивную карту разума в несколько шагов:

Шаг 1. Установите

npm install --save dice-graph

Шаг 2 импорт

import { MindMapGraph } from 'dice-graph';

Шаг 3 установить данные

{
  "id": "string",
  "label": "string",
  "color": "string",
  "children": "data[]"
}

Шаг 4. Крепление

const instance = new MindMapGraph();

// DOM node that your graph render
const el = document.getElementById('target');
const data = { ...your data };

instance.setData(data);
instance.mount(el);

Если вы используете фреймворк. Поместите Mount в смонтированный жизненный цикл. Например, componentDidMount/useEffect/mounted……

Двойной щелчок левой кнопкой мыши для изменения заголовка, щелчок + для добавления дочерних элементов, щелчок — для удаления узла. И использование instance.saveData() для получения измененных данных.

Ищете больше? Попробуйте DiceGraph (https://github.com/DiceGraph/DiceGraph), скоро появится еще один пример графика.