Mindmanager就有导出HTML5交互式导图功能：
图1：Mindmanager可导出格式
第一、什么是HTML5交互式导图？
首先，HTML是一种超文本标记语言，通过超链接的方式将文本、图表、图片等信息相关联，并通过浏览器的识别，将其内容翻译为用户所能见到的网页。而HTML5于2008年正式发布，是最新的Web语言，能极大地提升Web多媒体内容的处理。
接下来，我们会以下图的项目章程思维导图为例，导出HTML5交互式导图。
图2：思维导图示例
第二、插入超链接并导出
由于HTML5交互式导图是依托于超链接的文本格式，因此很适用于含有超链接内容的导图。用户可以在Mindmanager思维导图软件中选择主题内容后，右击启动快捷菜单，并在其中选择“插入”“超链接”，即可为主题添加超链接。
图3：插入超链接
插入链接后，单击工具栏中的“文件”，并单击其中的“导出”HTML5交互式导图，即可导出。
图4：导出的HTML5交互式导图
第三、打开导出的HTML5交互式导图
用户需要使用浏览器来打开HTML5交互式导图。打开的方式有两种，既可以直接单击导出的文件打开，也可以将导出的文件拖拉到浏览器中打开。
打开后的HTML5交互式导图与Mindmanager思维导图软件中的导图格式一致，用户可以单击其中包含链接的主题打开所指向的链接。
图5：导出的CSV文件
除了标准的视图外，HTML5交互式导图还提供演示文稿的视图模式。单击浏览器底部左边的“菜单”工具即可设置导图的视图模式，并可使用“搜索”功能，快速定位所需的内容。
图6：CSV文件的视图模式
通过运用Mindmanager思维导图软件导出HTML5交互式导图功能，用户能实现更有效的文件分享。HTML5交互式导图只要依托浏览器就能实现浏览，适合用于较多用户类型的分享，不用局限于特定的应用程序，而且对于一些超链接内容，也能实现更快速的导向。如果想要体验这项功能的小伙伴们，可以在Mindmanager官网进行思维导图软件下载使用。
思维导图，作为一个强大的思维工具，去学习、去运用才是王道！以下是15个好用的思维导图软件推荐，希望对你有帮助～
基于HTML5在线思维导图管理，可实现实时保存。操作简单，样式多变，可选不同的形状，可保存多种文件格式，也可读取多种思维导图的软件格式。
XMind不仅可以绘制思维导图，还能绘制鱼骨图、二维图、树形图、逻辑图、组织结构图。输出格式有HTML、图片。
MindNode 对于任何首次使用的用户来说，完全可以第一时间马上上手，甚至你都不需要听说过「思维导图」的概念。
MindMeister是在线软件，无论是在使用微软、Mac OS或Linux 作业系统，都可以随时打开使用。
这款强大的思维导图工具可以让你在一个单一的视图组织你的想法，添加图像，视频，超链接和附件都非常简单。
Bubbl.us是在线思维导图服务，是一个基于Flash的简单、免费的Web应用程序，方便个人或团体在线创建丰富多彩的树形流程图，勾勒出在脑海中构思的概念图。
Popplet 是另外一款思维导图工具，它能完美的视觉策划你的想法和奇思妙想。你可以直观地记录你的想法，灵感和思想，以及上传文字，视频，图片到画布上。
StormBoard 是一款基于web的在线头脑风暴和协作平台。它很好地解决了在线讨论和协作时难以做到的观点收集、资料分享、缺乏条理的问题。
Mindomo 提供了思维导图和项目协作工具，它可以用来进行头脑风暴，创建任务和资源共享，实现了真正意义上的协作。
Coggle 是一个免费的在线协作思维导图工具，它可以让你制作出漂亮的笔记，展现你的想法。也可以与朋友和同事协同工作，方便快捷。
如果有用，奖励我一个“喜欢”哦～❤️
制作思维导图应用Qunee组件本身支持树形布局，所以对于思维导图的大体结构是可以呈现的，到细节的地方就比较多了，包括线条的走向，节点的样式，布局交互，自动吸附，双击编辑等等，本示例没办法面面俱到，所以参照XMind的效果，只实现了部分功能，供用户参考和扩展
连线定制
默认连线为直线，通过定制EdgeUI可以实现曲线效果
function FlexEdgeUI(edge, graph){
Q.doSuperConstructor(this, FlexEdgeUI, arguments)
}
FlexEdgeUI.prototype = {drawEdge: function(path, fromUI, toUI, edgeType, fromBounds, toBounds){var from = fromBounds.center var to = toBounds.center var cx = (from.x + to.x) / 2 var cy = (from.y + to.y) / 2
path.curveTo(from.x, cy, cx, to.y)
}
}
Q.extend(FlexEdgeUI, Q.EdgeUI)
使用方式
通过图元的#uiClass属性，与定制的EdgeUI相关联
function createEdge(name, from, to){
var edge = graph.createEdge(name, from, to)
edge.uiClass = FlexEdgeUI
}
