**

一、jsMind

**
jsMind 是一个显示/编辑思维导图的纯 javascript 类库，其基于 html5 的 canvas 进行设计。jsMind 以 BSD 协议开源，在此基础上你可以在你的项目上任意使用。你可以在此浏览适用于 jsMind 的 BSD 许可协议(中英文版本)。

官网地址

核心代码

<div id="jsmind_container"></div>
<script type="text/javascript" src="../js/jsmind.js"></script>
<script type="text/javascript" src="../js/jsmind.draggable.js"></script>
<script type="text/javascript" src="../features/jsmind.shell.js"></script>
<script type="text/javascript">
    var _jm = null;
    function load_jsmind(){
        var mind = {
            meta:{
                name:'公司组织架构图',
                author:'poya',
                version:'0.2'
            },
            format:'node_array',
            data:[
                {"id":"root", "isroot":true, "topic":"X科技有限公司"},

                {"id":"sub1", "parentid":"root", "topic":"国际部"},
                {"id":"sub11", "parentid":"sub1", "topic":"美国国际部"},
                {"id":"sub12", "parentid":"sub1", "topic":"德国国际部"},
                {"id":"sub13", "parentid":"sub1", "topic":"俄罗斯国际部"},

                {"id":"sub2", "parentid":"root", "topic":"营销部"},
                {"id":"sub21", "parentid":"sub2", "topic":"商务中心"},
                {"id":"sub22", "parentid":"sub2", "topic":"销售部"},
                {"id":"sub23", "parentid":"sub2", "topic":"售后服务部"},

                {"id":"sub3", "parentid":"root", "topic":"监察部"},

                {"id":"sub4", "parentid":"root", "topic":"质管部"},
                {"id":"sub41", "parentid":"sub4", "topic":"质管部"},
                {"id":"sub42", "parentid":"sub4", "topic":"质检部"},
            ]
        };
        var options = {
            container:'jsmind_container',
            editable:true,
            theme:'primary',
            shortcut:{
                handles:{
                    test:function(j,e){
                        console.log(j);
                    }
                },
                mapping:{
                    test:89
                }
            }
        }
        _jm = jsMind.show(options,mind);
        // jm.set_readonly(true);
        // var mind_data = jm.get_data();
        // alert(mind_data);
    }
    
    function load_file(fi){
        var files = fi.files;
        if(files.length > 0){
            var file_data = files[0];
            jsMind.util.file.read(file_data, function(freemind_data, jsmind_name){
                var mind = jsmind_data;
                if(!!mind){
                    _jm.show(mind);
                }else{
                    console.error('can not open this file as mindmap');
                }
            });
        }
    }

    function save_nodetree(){
        var mind_data = _jm.get_data('node_tree');
        console.log(mind_data);
    }

    function replay(){
        var shell = _jm.shell;
        if(!!shell){
            shell.replay();
        }
    }

    load_jsmind();
</script>

jsMind功能特点：代码简单；轻量级的，适合web使用，支持一键保存图片，切换、放大于缩小、添加删除、移动节点、折叠与展开分级、支持导入与导出
**

二、HTML5 D3.js

**

D3js 是一个可以基于数据来操作文档的 JavaScript 库。可以帮助你使用 HTML, CSS, SVG 以及 Canvas 来展示数据。D3 遵循现有的 Web 标准，可以不需要其他任何框架独立运行在现代浏览器中，它结合强大的可视化组件来驱动 DOM 操作

更多了解请访问 官网地址

**

三、百度脑图

**

百度脑图其实是基于 kityminder 进行二次开发的一个产品而已。kityminder 本身是一个开源软件，也就是说，任何人都可以使用源代码进行二次开发并使用。

官网需要注册账号才能取体验离线版

官网地址

四、Freedgo

**

Freedgo思维导图是一款简单好用的思维导图软件，除了可以轻松绘制不同风格的思维导图，支持各种不同的结构布局。支持导图文字、图形、备注、表格的样式设置，为客户提供美观漂亮的思维导图，可以把思维导图导出为图片格式，网页模式，通过提供打印。

官网
体验地址

五、Qunee for HTML5

**

使用HTML5 Canvas技术，绘制清新、流畅的网络图，可用于社交网络图、拓扑图、流程图、地图等需求， JS组件封装，藏繁琐于简洁，轻松构建优雅的互联网应用与企业应用，让数据的在线可视化变得容易

组件特点
轻巧、高性能 - 支持上万图元，流畅操作
矢量图形 - 支持矢量图形，无极缩放
交互体验 - 漫游交互，改进交互事件、支持手持设备
注重细节 - GIF动画，丰富渐变，层次控制等

官网地址
需要注意的是此插件收费

**

六、GGEditor

**
GGEditor 是一款国人开发的开源可视化流程图编辑器,基于 G6 和 React 编写, 遵守MIT开源协议。GGEditor 可以方便的绘制流程图,思维导图等。

官网地址

**

七、MindManager脑图

**

MindManager专业思维导图工具，由美国Mindjet公司开发，是全球领先推动企业创新的平台，在全球拥有400多万大用户，包括ABB、可口可乐、迪斯尼、IBM及沃尔玛等著名客户。通过轻松拖拽整理脑图调整思路。其中还可以添加图像、视频、超链接和附件，进行项目管理，管理任务，付诸实践。

官网地址

**

八、Mindmaps

**

Mindmaps 是一款开源的应用，可以帮你轻松快捷地创建思维导图。在Mindmaps里面，你可以无限地创建分支和层级，其中所有的分支都可以相互连接。整个应用是用HTML5、CSS3和Javascript写的，离线也可以使用。
**

九、zhimap

**
zhimap整理知识 分享导图 - 极简 清爽 手感佳 所见所得 快速分享。让您在线上直接创建、保存并分享你的思路。

官网地址