那种思维导图软件可以另存为HTML格式

html-css022

那种思维导图软件可以另存为HTML格式,第1张

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官网进行思维导图软件下载使用。

制作思维导图应用

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

}

可能是因为你保存的思维导图文件的格式没办法修改吧

比如说图片、html这种格式,一般保存之后再修改就比较难了,如果是word、ppt、svg,或者是你用的思维导图软件的原文件格式,改起来就比较简单。

用MindMaster思维导图软件做个例子:

它的原文件格式是.emmx,只要电脑上装了MindMaster,就可以打开文件来编辑。

如果你觉得每台电脑上装个软件太麻烦了,可以导出word、ppt、pdf、svg这种格式,然后你用对应的软件打开,也可以继续修改。

不过具体还是要看你用的是哪个工具了,有些不一定支持这些格式。像MM这种免费的思维导图软件,用起来还是挺方便的,有需要的可以去试试哈。。。