| HTML5思维脑图插件推荐 | 您所在的位置：网站首页 › 网页前端制作流程图 › HTML5思维脑图插件推荐 |
HTML5思维脑图插件推荐
|
** 一、jsMind** jsMind 是一个显示/编辑思维导图的纯 javascript 类库，其基于 html5 的 canvas 进行设计。jsMind 以 BSD 协议开源，在此基础上你可以在你的项目上任意使用。你可以在此浏览适用于 jsMind 的 BSD 许可协议(中英文版本)。 官网地址
核心代码 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();jsMind功能特点：代码简单；轻量级的，适合web使用，支持一键保存图片，切换、放大于缩小、添加删除、移动节点、折叠与展开分级、支持导入与导出 ** 二、HTML5 D3.js** D3js 是一个可以基于数据来操作文档的 JavaScript 库。可以帮助你使用 HTML, CSS, SVG 以及 Canvas 来展示数据。D3 遵循现有的 Web 标准，可以不需要其他任何框架独立运行在现代浏览器中，它结合强大的可视化组件来驱动 DOM 操作 ** 三、百度脑图** 百度脑图其实是基于 kityminder 进行二次开发的一个产品而已。kityminder 本身是一个开源软件，也就是说，任何人都可以使用源代码进行二次开发并使用。 官网需要注册账号才能取体验离线版 官网地址 四、Freedgo** Freedgo思维导图是一款简单好用的思维导图软件，除了可以轻松绘制不同风格的思维导图，支持各种不同的结构布局。支持导图文字、图形、备注、表格的样式设置，为客户提供美观漂亮的思维导图，可以把思维导图导出为图片格式，网页模式，通过提供打印。 官网 体验地址
** 使用HTML5 Canvas技术，绘制清新、流畅的网络图，可用于社交网络图、拓扑图、流程图、地图等需求， JS组件封装，藏繁琐于简洁，轻松构建优雅的互联网应用与企业应用，让数据的在线可视化变得容易 组件特点 轻巧、高性能 - 支持上万图元，流畅操作 矢量图形 - 支持矢量图形，无极缩放 交互体验 - 漫游交互，改进交互事件、支持手持设备 注重细节 - GIF动画，丰富渐变，层次控制等 官网地址 需要注意的是此插件收费 ** 六、GGEditor** GGEditor 是一款国人开发的开源可视化流程图编辑器,基于 G6 和 React 编写, 遵守MIT开源协议。GGEditor 可以方便的绘制流程图,思维导图等。 官网地址
** MindManager专业思维导图工具，由美国Mindjet公司开发，是全球领先推动企业创新的平台，在全球拥有400多万大用户，包括ABB、可口可乐、迪斯尼、IBM及沃尔玛等著名客户。通过轻松拖拽整理脑图调整思路。其中还可以添加图像、视频、超链接和附件，进行项目管理，管理任务，付诸实践。 官网地址
** Mindmaps 是一款开源的应用，可以帮你轻松快捷地创建思维导图。在Mindmaps里面，你可以无限地创建分支和层级，其中所有的分支都可以相互连接。整个应用是用HTML5、CSS3和Javascript写的，离线也可以使用。 ** 九、zhimap** zhimap整理知识 分享导图 - 极简 清爽 手感佳 所见所得 快速分享。让您在线上直接创建、保存并分享你的思路。 官网地址 |
更多了解请访问 官网地址
**
**
【本文地址】