制作思维导图简单又漂亮 使用前端助手快速制作思维导图

在之前有介绍过Web前端助手插件，是一款基于浏览器端十分实用而又全面的免费前端工具，当时看到有思维导图工具，所以当然安装了也没有合适的场景实用，在写《建网站建设的流程 做网站该怎么做？》一文时，对于建站流程这一块需要一个简单又明了的介绍，所以就使用了这款插件制作了一个思维导图，使用Web前端助手插件制作思维导图十分简单又漂亮，并且还免费不收费。下面是对前端助手插件制作思维导图的介绍。

一、Web前端助手插件如何安装思维导图？

在前面所写的《前端实用插件推荐：Web前端助手插件》一文中有简单的介绍如何安装Web前端助手插件，此插件支持在Chrome、 Firefox、Edge三款浏览器中安装。下面是如何在前端助手插件如何安装思维导图应用（以下是以谷歌浏览器为例，其他浏览器中操作步骤应该也大同小异）。

1、在浏览器中找到并点击Fehelper前端助手插件图标，在弹出的下拉菜单的最下面右下角找到设置选项。

2、在设置弹出的页面中的FH应用市场下找到思维导图应用点击安装即可。

只要安装了Web前端助手插件，再在设置里安装思维导图应用，就可以快速简单制作出一个漂亮又美观的思维导图了。

二、制作思维导图准备工作

确定自己的主题及思维导图树状目录

确定自己要制作的思维导图的树状目录，就像是一本书的目录一样，比如：一本书有很多个大章节，一个大章节下面很多个子章节，就像是一棵树有很多树状一样，而思维导图就像是这样的，在使用Web前端助手插件思维导图应用时，你需要先提前准备好这些“树状”内容。

三、Web前端助手插件思维导图应用功能介绍

在思维导图应用中主要有思路、外观、视图三大模块，摸索好思路和外观两大模块的使用，基本上就可以制作出一个简单又美观的思维导图了。

1、Web前端助手插件思维导图应用思路模块介绍：

下图中是李涛自留地对于思路模块中各种思维导图功能区域的拆分介绍：

（1）、撤销与重做区域，是我们在制作思维导图出错或者不想要某一主题的时候就可以撤销。

（2）、插入思维导图上下级及同级主题选项和移动、编辑、删除主题选项及优先级选项区域是制作思维导图最主要的区域。

（3）、在最左侧下角位置是放大与缩小思维导图选项，当我们制作的思维导图太小或者是太大的时候，我们可以使用这个选项对思维导图进行放大与缩小设置。

2、Web前端助手插件思维导图应用外观模块介绍：

在我们制作好自己的思维导图之后，可以使用外观模块中的一些功能对我们制作的思维导图进行外观美化，这样我们制作出来的思维导图就更加美观又大方。

（1）、思维逻辑图区域，应用中内置了6种不同样式的思维逻辑图，我们可以根据自己的内容选择适合自己的思维逻辑图。

（2）、紧促绿按钮框区域，可以设置我们思维导图的颜色，可以根据自己需要设置适合自己的主题颜色。

（3）、字体设置选项，可以对我们的思维导图中的字体进行设置，设置好看的字体样式、字体大小、字体颜色、字体背景颜色。

3、Web前端助手插件思维导图应用视图模块介绍：

视图模块主要有展开、全选、搜索三种子模块，使用率不是很高，这里就不过多介绍。

四、如何快速又简单制作漂亮美观的思维导图

上面详细介绍了思维导图应用的各项功能，在思维导图应用中制作思维导图，只要确定了树状目录结构，直接使用应用中的插入上下级、同级主题即可，下面是制作一个简单又美观漂亮的思维导图步骤。

1、在思路模块输入上下级、同级主题。

在我们新建一个思维导图后，应用中会自动生成一个名为“中心主题”的主题名，选定“中心主题”修改为我们想要的主题名称，然后再在插入上下级、同级主题区域中选择我们要插入的下级主题，会弹出一个分支主题，再将分支主题修改我们我们想要的内容，可以再在这个分支主题中再次插入它的下级主题。具体效果如下：

2、美观思维导图

当我们制作好思维导图好，再使用外观模块中的思维逻辑图、颜色设置、字体设置等选项，对思维导图进行美观设置。以下是上图美化后的效果图：

3、使用思维导图应用的小技巧：

（1）、选定中心主题后，我们可以拖动整个思维导图在浏览器中的位置；选定分支主题后，可以拖动这个分支主题及下级主题的位置。

（2）、需要上下移动或者是编辑和删除主题的内容可以在选定主题后，选择上下移动、编辑、删除按钮进行操作。

（3）、当我们的一个主题下有多个层次分明的下级主题时，我们可以在这些下级主题前面加上带背景颜色小方框的优先级1、2、3、4图标，这样整个思维导图看上去更加美观高逼格。

总体上来说Web前端助手插件思维导图应用还是非常容易上手的，里面的功能都点一点、看一看、测试使用下，不出10分钟基本上都能熟练的使用，几分钟就可以快速的制作出一个美观又漂亮简单实用的思维导图，这款插件的思维导图应用值得大家使用！