Ideadiagrams详解

发布时间:2023-05-18

一、 Ideadiagrams简介

Ideadiagrams是一款功能强大的思维导图与时间轴工具。它可以帮助用户更好地组织思路,规划工作和学习。独特的时间轴功能可以帮助用户记录任务,跟进进度,并且支持导出,方便分享与邮件提醒,使工作和学习更加高效。

二、 快速入门

1、下载并安装 Ideadiagrams

npm install ideadiagrams

2、创建一个思维导图

import * as id from 'ideadiagrams';
const myDiagram = new id.Diagram("myDiagramDiv");

3、添加节点

const myNode1 = myDiagram.addNode({text:"idea1"});
const myNode2 = myDiagram.addNode({text:"idea2"});

4、连接节点

myDiagram.addLink({from:myNode1, to:myNode2});

三、主要特点

1、支持多种节点

Ideadiagrams支持多种节点,如文本、图片、视频、链接等。用户可以为每个节点设置不同的样式、颜色和大小,以便更好地区分内容。

2、支持多种布局

Ideadiagrams支持多种节点布局方式,如树形结构、思维导图等,用户可以根据需求选择不同的布局方式。

3、支持时间轴

独特的时间轴功能可以帮助用户记录任务、跟进进度,并且支持导出、方便分享与邮件提醒,使工作和学习更加高效。

四、代码示例

以下代码示例演示如何使用Ideadiagrams创建一个带时间轴的思维导图,可以为每个节点设置不同的样式和颜色,并且支持编辑、删除和拖动节点。

import * as id from 'ideadiagrams';
const myDiagram = new id.Diagram("myDiagramDiv",{
    layoutType: "tree",
    timeLine: true
});
const node1 = myDiagram.addNode({text: 'idea 1', color: "red", style: {shape: 'circle'}});
const node2 = myDiagram.addNode({text: 'idea 2', style: {shape: 'square'}});
const node3 = myDiagram.addNode({text: 'idea 3', color: "green", style: {shape: 'cloud'}});
myDiagram.addLink({from: node1, to: node2, color: "blue"});
myDiagram.addLink({from: node1, to: node3, color: "purple", style: {toDecoration:"arrow"}});
node1.editText("new text");
node2.delete();
myDiagram.moveNode(node3, 100, 100);