编者按：今天@不到布给同学们安利一个超实用的在线神器，可以创建流程图、UML图、线框图、BPNM、组织架构图、网站地图等各式图表，还有很多贴心功能，来一一感受下。
之前写醍醐灌奶酪的时候，做了一张很大的图。可以说，当时写文查资料只占那篇文全部精力的一半，剩下一半则是作图 ><。
在我记忆里这种图用 Axure 或者 AI 也不是不能画，但是好死不死我电脑里并没有这两个软件也并不想装。我相信万能的互联网会给我答案!经过一番筛选，我也成功找到了心仪的它 XD，它就是——Gliffy。
Gliffy是可以在线创建流程图、UML图、线框图、BPNM、组织架构图、网站地图等各式图表的工具型网站。可以同步Google、微软以及著名不存在网站帐号，也可以使用邮箱注册。免费用户有30天无限制试用期，试用期过后，部分组件会被锁定(主要是UML和线框图的部分)，不能保存私有图表，并且保存图表限制为5张。对于大部分普通用户来说是足够了。
可以在首页直接点START DRAWING或者先登录帐号都可以开始绘图，登录了帐号才能保存图表哦~新建图表后的界面是这样的
最上面两行分别是菜单栏和工具栏，左边是组件库，右边最大的空白区域就是编辑区了。
画图的方式也非常简单…就是把左边组件库的组件，拖~~~到右边来就可以了。选中组件的时候，这个组件右边会出现
这样的按钮，点开左边的按钮之后就是组件属性设置：
应该还挺容易看明白的吧…第一排从左到右分别是填充颜色，边框(线条)颜色，边框(线条)粗细，边框(线条)种类，渐变(它的渐变是自动的，不能手工调整)，投影(同样不能手工调整)，透明度。下面则分别是坐标尺寸旋转角度以及锁定功能。
同时选中多个组件的时候，设置工具就会变样，打开之后则是多了一排对齐工具，熟悉任意一种绘图工具的同学应该都会熟悉这些图标的意思，不明的话点点看就知道了。
属性设置右边的A字按钮，顾名思义就是修改文字设置的。只要双击任何一个组件，就可以在上面添加文字(如果是连接线，则可以添加多段文字，你在哪双击的，就会在哪添加，添加好的文字位置也可以拖动修改)，虽然不能设置文字边距这些，但是文字位置、对齐方式这些还是可以修改的。
另外它虽然提供了字体字号的修改工具，但是这个工具对中文的支持性…很一般，默认导出的图片只能是宋体(windows)，当然你也可以选择导出svg然后再去改代码或者进AI编辑。
而说到连接线，则要使用 Gliffy 提供的连接工具了：
从左到右分别是 1.撤销/重做;2.组合/解散组合;3.置于最前/置于最后;4.超链接工具;5.弹出框工具;6.格式刷;7.文字;8.形状;9.连接/直线;10.选择;11.移动画布;12.缩放;13.放大/缩小;14.自动辅助线;15.网格;16.对齐网格;17.主题;18.图层。
选择连接工具(9)，组件上就会出现很多小十字，鼠标挪过去之后，对应的十字就会变成绿圈，点一下并拖动到想要连接的另外一个组件上去就可以了。之后要记得选回到选择(10)状态，单击连接线，就会出现
这样的编辑按钮，同样点左边的，就会出现属性设置的窗口。
前两个分别是初始箭头和结束箭头的样式，最后一个type则是线型，有直线、折线、圆角折线、曲线四种选择。
最后我要盛赞它的主题…在工具栏上点开主题按钮(17)之后，界面右边就会出现默认主题的选择
鼠标悬停就可以查看样式，点一下就可以应用，非常方便，重点是，都还挺好看的。
全部搞定之后，就可以导出啦。格式有PNG、JPG、SVG和 Gliffy 可选。PNG并不是透明背景的这一点不是特别好…当然导出svg也完全没问题。
PS：除了我上述这些，Gliffy 还带有表格功能、图层管理、插入图片、直接打印等等其他功能，因为我没用过，就不多说了 XDD 更详细的功能说明可以参考他们的使用说明，虽然都是英文的，但是配图很多不怕不懂~
当时为了货比三家，也找了很多其他的在线工具，去掉使用 flash 的网站之后…就没剩几个了。这里比较推荐使用的是Draw.io，优点是完全免费，缺点是需要自备梯子以及主题不好看 =3=。另外如果只是结构图或者脑暴图，也可以选择各种脑图工具，比如百度脑图，优点当然是操作简单，缺点也是由此而引发的自定性差。
