一、功能簡介
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/zh-tw/n/284816.html
微信掃一掃 
支付寶掃一掃 