切圖崽的自我修養－[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/