切图崽的自我修养－[TOOL] 用Omnigraffle绘制UML

前言

不会画图的程序员不是好产品经理

喜欢装逼有品位的程序员都有一颗产品经理的心，但印象中产品经理经常要画一些奇奇怪怪七七八八的图，在请教了一些立志做产品经理的程序员之后，发现他们都有一套自己喜欢用的精致小巧的工具，其中经典的一套为Balsamiq mockups(线框原型)+Omnigraffle(通用图形)+Markdown(文本编辑)+Keynote(演示汇报)的Mac全家桶. 满满的都是逼格有没有.

所以今天稍微鼓捣了一下Omnigraffle,发现真的非常好用，暂时贴上一点点心得，慢慢补上一些前端程序员经常用到的图表绘制的方法.

常用快捷键:

1. 移动:v

2. 形状:s

3. 线条:c

4. 文字:t

5. 格式刷:w

6. 磁化:m

7. 缩放:z

8. 连接图:d

P.s: 按住快捷键不动可以暂时切换到该快捷键对应的功能状态，另外同时按下opt键会有配合效果. 比如格式刷，按住opt+w，再单击某个元素为暂存某个元素的样式. 直接按住w，再单击某个元素，就是把格式刷暂存的样式应用到这个元素上

---

流程图

Ominigraffle有流程图的样式模版，点击文件－>资源浏览器－>型板－>软件->流程图,里面有流程图的基本样式. 然后根据具体流程逻辑补上连接线即可

---

树状图

1. 双击工具栏中的连接图按钮(快捷键d)

2. 在页面空白处点一下，生成一个节点

3. 选中某一个节点，什么都不按在空白处点一下，会生成这个节点的子节点

4. 选中某一个节点按住option在空白处点一下，会生成这个节点的兄弟节点

5. 选中一个节点，按住shift在空白处点一下，会生成这个节点的父节点

---

结语

鼓捣了一阵子才发现，使用Omnigraffle熟练的掌握快捷键和基本操作就够了，很多时候我们并不会自己去从无到有构建具体样式，而是会去借鉴别人的stencil，即图形模版. 你工作中想要画的图，不管是UE/UX/流程图/思维导图/还是UML, 社区里都有一些精美的模版，你只要把这部分模版的样式拷贝下来，根据自己的逻辑应用到自己的图里就好，这能让我们更加专注于图形本身的逻辑和流程，而不是纠结于图形的样式.

分享几个stencil的下载站点,当然有些精美的stencil并不是免费的,但在你需要的时候，一定会物超所值

https://www.graffletopia.com/
https://stenciltown.omnigroup.com/