HTML5使用jsMind思维导图

原创已于 2024-10-24 09:35:50 修改 · 586 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#1024程序员节 #html5 #html #前端

于 2024-10-24 09:33:51 首次发布

jsMind

jsMind 是一个用于显示和编辑思维导图的纯 JavaScript 类库。它基于 Canvas 和 SVG 进行设计，能够在现代浏览器中高效地运行。

文章目录

jsMind
前言
一、引入库
二、样例代码
三、效果图
参考文章

前言

jsMind 提供了强大的脑图编辑功能，支持节点的添加、删除、移动等操作。它内置了多种主题，用户可以根据需要选择合适的主题，或者自定义主题。此外，通过 CSS 可以自定义节点的样式，包括背景色、字体颜色、鼠标悬停效果等。jsMind 还提供了丰富的 API，方便开发者进行二次开发和功能扩展。

一、引入库

<link type="text/css" rel="stylesheet"href="https://cdn.jsdelivr.net/npm/jsmind@0.8.6/style/jsmind.css"/>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jsmind@0.8.6/es6/jsmind.js"></script>
// 如果希望能够通过鼠标拖拽的方式移动节点，需要额外引用 jsmind.draggable-node.js 文件
<script type="text/javascript" src="https://unpkg.com/jsmind@0.8.6/es6/jsmind.draggable-node.js"></script>

二、样例代码

代码如下（示例）：

<html>
    <head>
        <link type="text/css" rel="stylesheet"href="https://cdn.jsdelivr.net/npm/jsmind@0.8.6/style/jsmind.css"/>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jsmind@0.8.6/es6/jsmind.js"></script>
		<!-- 如果希望能够通过鼠标拖拽的方式移动节点，需要额外引用 jsmind.draggable-node.js 文件-->
		<script type="text/javascript" src="https://unpkg.com/jsmind@0.8.6/es6/jsmind.draggable-node.js"></script>
    </head>
    <body>
        <div id="jsmind_container" style="width: 100%; height: 600px;background:#f6f6f6;"></div>

        <script type="text/javascript">
          var mind = {
				/* 元数据，定义思维导图的名称、作者、版本等信息 */
				"meta":{
					"name":"jsMind-demo-tree",
					"author":"system",
					"version":"0.2"
				},
				/* 数据格式声明 */
				"format":"node_tree",
				/* 数据内容 */
				"data":{"id":"root","topic":"jsMind","children":[
					{"id":"easy","topic":"Easy","direction":"left","expanded":false,"children":[
						{"id":"easy1","topic":"Easy to show"},
						{"id":"easy2","topic":"Easy to edit"},
						{"id":"easy3","topic":"Easy to store"},
						{"id":"easy4","topic":"Easy to embed"}
					]},
					{"id":"open","topic":"Open Source","direction":"right","expanded":true,"children":[
						{"id":"open1","topic":"on GitHub"},
						{"id":"open2","topic":"BSD License"}
					]},
					{"id":"powerful","topic":"Powerful","direction":"right","children":[
						{"id":"powerful1","topic":"Base on Javascript"},
						{"id":"powerful2","topic":"Base on HTML5"},
						{"id":"powerful3","topic":"Depends on you"}
					]},
					{"id":"other","topic":"test node","direction":"left","children":[
						{"id":"other1","topic":"I'm from local variable"},
						{"id":"other2","topic":"I can do everything"}
					]}
				]}
			};
            var options = {
                container: 'jsmind_container',  // [必选] 容器的ID，或者为容器的对象
                theme: 'orange', // [可选] 主题 orange、pumpkin等
                editable: true, // [可选] 是否启用编辑
				view:{
                   engine: 'canvas',   // 思维导图各节点之间线条的绘制引擎
                   hmargin:100,        // 思维导图距容器外框的最小水平距离
                   vmargin:50,         // 思维导图距容器外框的最小垂直距离
                   line_width:2,       // 思维导图线条的粗细
                   line_color:'#555',  // 思维导图线条的颜色
                   line_style:'curved',// 思维导图线条的样式，直线(straight)或者曲线(curved)
                   custom_line_render: null,  // 自定义的线条渲染方法
                   draggable: true,   // 当容器不能完全容纳思维导图时，是否允许拖动画布代替鼠标滚动
                   hide_scrollbars_when_draggable: true, // 当设置 draggable = true 时，是否隐藏滚动条
                   node_overflow: 'hidden', // 节点文本过长时的样式
                   zoom: {             // 配置缩放
                       min: 0.5,       // 最小的缩放比例
                       max: 2.1,       // 最大的缩放比例
                       step: 0.1,      // 缩放比例间隔
                   },
                   custom_node_render: null, // 自定义的节点渲染方法
               },
               layout:{
                   hspace:30,          // 节点之间的水平间距
                   vspace:20,          // 节点之间的垂直间距
                   pspace:13,          // 节点与连接线之间的水平间距（用于容纳节点收缩/展开控制器）
                   cousin_space:0      // 相邻节点的子节点之间的额外的垂直间距
               },
            };
            var jm = new jsMind(options);
            jm.show(mind);
        </script>
    </body>
</html>

三、效果图

在这里插入图片描述

参考文章

官网地址：https://hizzgdev.github.io/jsmind/
在线体验：https://hizzgdev.github.io/jsmind/example/2_features.html