js-mind 开源项目教程

舒蝶文Marcia

于 2024-09-02 07:45:12 发布

阅读量367

点赞数 4

本文链接：https://blog.csdn.net/gitblog_01122/article/details/141798155

版权

js-mind 开源项目教程

js-mindDeep Learning Library Written in ES2015.项目地址:https://gitcode.com/gh_mirrors/js/js-mind

1、项目介绍

js-mind 是一个用于显示和编辑思维导图的纯 JavaScript 类库。它基于 HTML5 Canvas 和 SVG 进行设计，并以 BSD 协议开源。用户可以在任何项目中嵌入 js-mind，只要遵守 BSD 协议。

2、项目快速启动

以下是一个简单的快速启动示例，展示如何在 HTML 页面中使用 js-mind：

<!DOCTYPE html>
<html>
<head>
    <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsmind@0.8.5/style/jsmind.css" />
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jsmind@0.8.5/es6/jsmind.js"></script>
</head>
<body>
    <div id="jsmind_container"></div>
    <script type="text/javascript">
        var mind = {
            "meta": {
                "name": "example",
                "author": "hizzgdev",
                "version": "0.2"
            },
            "format": "node_array",
            "data": [
                ["1", "", "Root"],
                ["2", "1", "Child 1"],
                ["3", "1", "Child 2"],
                ["4", "2", "Grandchild"]
            ]
        };
        var options = {
            container: 'jsmind_container',
            theme: 'orange',
            editable: true
        };
        var jm = new jsMind(options);
        jm.show(mind);
    </script>
</body>
</html>