一、功能简介
kityminder是一款用于制作思维导图的在线工具，主要功能包括：画线、改颜色、缩放、编辑、多样式选择、本地导入、导出等。
在绘制思维导图时，我们只需要选择需要的节点，然后可以通过拖动、双击、右键菜单等方式对节点进行编辑和排版，具体的操作十分简单直观。
在进行节点编辑后，进一步可以加入图标和图片，特别是对于生产工具类的思维导图，比如需求分析、软件设计等方面，我们可以通过在图标上自定义文字，来辅助描述和传递信息。
二、布局及编辑
在kityminder中，最大的创新和特色，就是对于思维导图的节点可以支持多种布局方式。
我们可以将节点布置在上下、左右、环形等多种布局方式中自由组合，使得思维导图的表现形式更加多样化。
同时，在节点数量较多时，我们可以通过缩放、改变节点大小、颜色等方式，进一步将节点分组，让整个思维导图看起来更加清晰。
下面是一个头脑风暴的示例，可以通过修改颜色、大小等方式，让关键点更加突出
minder.ImportJson({
“root”: {
“data”: {
“id”: “123”,
“text”: “主题”
},
“children”: [
{
“data”: {
“id”: “123_1”,
“text”: “相关因素”
},
“children”: [
{
“data”: {
“id”: “123_1_1”,
“text”: “因素1”,
“background-color”: “#E3F2FD”,
“text-color”: “#0082c8”,
“font-size”: “20”,
“width”: “205”
}
},
{
“data”: {
“id”: “123_1_2”,
“text”: “因素2”,
“background-color”: “#B3E5FC”,
“text-color”: “#005daa”,
“fold-status”: “expand”,
“font-size”: “20”,
“width”: “220”
}
},
{
“data”: {
“id”: “123_1_3”,
“text”: “因素3”,
“background-color”: “#81D4FA”,
“text-color”: “#ffffff”,
“font-size”: “36”,
“width”: “200”
}
}
],
“background-color”: “#4DA1FF”,
“text-color”: “#ffffff”,
“font-size”: “24”,
“width”: “240”
},
{
“data”: {
“id”: “123_2”,
“text”: “正面影响”
},
“children”: [
{
“data”: {
“id”: “123_2_1”,
“text”: “影响1”,
“background-color”: “#E3F2FD”,
“text-color”: “#0082c8”,
“font-size”: “20”,
“width”: “205”
}
},
{
“data”: {
“id”: “123_2_2”,
“text”: “影响2”,
“background-color”: “#B3E5FC”,
“text-color”: “#005daa”,
“fold-status”: “expand”,
“font-size”: “20”,
“width”: “220”
}
},
{
“data”: {
“id”: “123_2_3”,
“text”: “影响3”,
“background-color”: “#81D4FA”,
“text-color”: “#ffffff”,
“font-size”: “36”,
“width”: “200”
}
}
],
“background-color”: “#4DA1FF”,
“text-color”: “#ffffff”,
“font-size”: “24”,
“width”: “240”
},
{
“data”: {
“id”: “123_3”,
“text”: “负面影响”
},
“children”: [
{
“data”: {
“id”: “123_3_1”,
“text”: “影响1”,
“background-color”: “#FFCDD2”,
“text-color”: “#d50000”,
“font-size”: “20”,
“width”: “205”
}
},
{
“data”: {
“id”: “123_3_2”,
“text”: “影响2”,
“background-color”: “#FFA5A5”,
“text-color”: “#d50000”,
“fold-status”: “expand”,
“font-size”: “20”,
“width”: “220”
}
},
{
“data”: {
“id”: “123_3_3”,
“text”: “影响3”,
“background-color”: “#F44336”,
“text-color”: “#ffffff”,
“font-size”: “36”,
“width”: “200”
}
}
],
“background-color”: “#FF5252”,
“text-color”: “#ffffff”,
“font-size”: “24”,
“width”: “240”
}
]
}
});
三、多平台支持
kityminder是跨平台使用的，不论是Windows、MacOS或者Linux，都可以通过在线访问的方式来使用本工具。
同时，我们可以将思维导图导出为多种格式，例如SVG、PNG、HTML、PDF等，让我们进一步方便地将思维导图整合到我们的工作与生活中来。
四、代码示例
下面是一个简单的示例代码，可以用来绘制一棵简单的思维导图：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>kityminder 示例</title>
<script type="text/javascript" src="http://cdn.kityminder.com/zh_cn/latest/kityminder.core.min.js"></script>
</head>
<body>
<div id="kitymind" style="width:800px;height:500px;margin:0 auto;"></div>
<script type="text/javascript">
window.onload = function() {
var km = new kityminder.Minder({
renderTo: 'kitymind',
theme: 'fresh-blue'
});
var rootNode = km.createNode('根节点'),
childNode1 = km.createNode('节点1'),
childNode2 = km.createNode('节点2');
rootNode.appendChild(childNode1);
childNode1.appendChild(childNode2);
km.getRoot().appendChild(rootNode);
};
</script>
</body>
</html>
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/284816.html
微信扫一扫 
支付宝扫一扫 