在线创建美图表、流程图

之前写醍醐灌奶酪的时候,做了一张很大的图。可以说,当时写文查资料只占那篇文全部精力的一半,剩下一半则是作图 ><。

在我记忆里这种图用 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,请不要在网络上保存涉及公司机密的文件,你懂的。

本部落格采用DISQUS评论系统,如果您无法见到留言框,可前往我的GitHub微博提Issue(留言)。
为您带来了不便我也很尴尬╮(╯_╰)╭