干货分享 | PPT中的图表、流程图就靠它了！！！

快，关注这个公众号，一起涨姿势～

本文作者：@不到布 （新浪微博）

投稿于：优设网（http://www.uisdc.com/online-diagram-and-flow-chart）

今天@不到布 给同学们安利一个超实用的在线神器，可以创建流程图、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=。另外如果只是结构图或者脑暴图，也可以选择各种脑图工具，比如百度脑图，优点当然是操作简单，缺点也是由此而引发的自定性差。

BTW，请不要在网络上保存涉及公司机密的文件，你懂的。

资料来源：不到布 （新浪微博）、优设网

本期编辑：常贵蒋 芦志霞 毛雅倩 徐晓凡

审核人：任宇飞 王冠

猜你喜欢