【亲测免费】 jsMind：思维导图JavaScript版本

2026-01-31 05:21:31作者：曹令琨Iris

jsMind 是一个轻量级、高性能的纯 JavaScript 思维导图库，基于 HTML5 Canvas 开发，无需依赖其他框架，适合快速集成到各类项目中。它支持动态创建、编辑和展示思维导图，操作简单灵活，适用于知识管理、项目规划等多种场景。遵循 BSD 开源协议，开发者可以自由使用、修改和分发，助力打造个性化的思维导图工具。无论是初学者还是资深开发者，jsMind 都能为您提供高效、直观的思维导图解决方案。

项目地址：https://gitcode.com/Universal-Tool/4b531

简介

jsMind 是一个用于显示和编辑思维导图的纯 JavaScript 类库，基于 HTML5 的帆布（Canvas）进行设计。此库以 BSD 协议开源，可以在您的项目中自由使用。

特点

纯 JavaScript 编写，无需依赖其他类库
基于 HTML5 Canvas，性能优越
遵循 BSD 协议，可自由嵌入到任何项目中

使用方法

引入 jsMind.css 样式文件：

<link type="text/css" rel="stylesheet" href="style/jsmind.css" />

引入 jsMind.js 脚本文件：

<script type="text/javascript" src="js/jsMind.js"></script>

开始使用

请参考以下示例代码，开始使用 jsMind 创建思维导图：

<!DOCTYPE html>
<html>
<head>
    <link type="text/css" rel="stylesheet" href="style/jsmind.css" />
    <script type="text/javascript" src="js/jsMind.js"></script>
</head>
<body>
    <div id="jsmind-container"></div>
    <script>
        // 初始化思维导图
        var mind = {
            "root": "jsMind",
            "children": [
                {
                    "topic": "特性",
                    "children": [
                        {"topic": "纯 JavaScript"},
                        {"topic": "基于 HTML5 Canvas"},
                        {"topic": "BSD 协议开源"}
                    ]
                },
                {
                    "topic": "使用方法",
                    "children": [
                        {"topic": "引入样式文件"},
                        {"topic": "引入脚本文件"}
                    ]
                }
            ]
        };

        // 渲染思维导图
        var jsMind = new jm.JsMind({
            container: 'jsmind-container',
            theme: 'primary'
        });
        jsMind.show(mind);
    </script>
</body>
</html>