作為一個程序員产捞，經常需要畫流程圖之拨。而用Markdown畫流程圖，省心省力斑鼻，后面需要調整的話也更方便蒋纬。但是，目前簡書上的Markdown還不支持流程圖坚弱。怎么辦呢蜀备？只能以迂為直，曲線救國了荒叶。
簡單的說：
簡書的Markdown本身不支持流程圖碾阁，但我們可以找一個支持流程圖的Markdown編輯器，畫完之后些楣，直接截圖上傳到簡書上就可以了脂凶。但是有時候流程圖太長，超出一個屏幕的高度愁茁，這時候需要用能滾動截圖的工具來截蚕钦。
你將需要：
- 一款支持流程圖的Markdown編輯器。推薦Typora埋市。
- 一款截圖工具冠桃。QQ自帶的就可以命贴。
- 一款支持截長圖的工具道宅。Mac上可以用Snip。Windows上可以用FSCapture胸蛛。
編輯流程圖
第一步污茵，當然是先寫好我們的流程圖了。這里我使用的工具是Typora葬项。需要注意的是泞当，Typora默認是不支持流程圖的，需要在設置中開啟這個功能民珍。在設置中切換到Markdown那個tab襟士，然后勾選上對圖表（包含流程圖）的支持盗飒。
Markdown畫流程圖的語法可以看這篇文章：Markdown筆記：如何畫流程圖。
先來畫一個簡單的流程圖陋桂。
st=>start: 開始
rain?=>condition: 今天有雨嗎逆趣？
takeAnUmbrella=>operation: 帶傘
go=>operation: 出門
e=>end: 結束
st->rain?
rain?(yes)->takeAnUmbrella->go
rain?(no)->go->e
截圖
下面到了收獲成果的時候了，直接在Typora里面截圖嗜历，然后把圖片拖到簡書的編輯器里就可以了宣渗。
小貼士：
- Typora也支持導出圖片，不過如果你的流程圖太寬的話梨州，導出的圖片不能包含整個流程圖痕囱。
-
如果你的流程圖確實非常寬，以致于在Typora里需要橫向滾動才能顯示完全的話暴匠，可以先導出成html鞍恢，在瀏覽器里面打開，再進行截圖巷查。
出門帶傘的流程
截長圖
如果流程比較復雜有序，流程圖的長度超過一個屏幕的高度的話，就需要用到滾動截圖的工具了岛请。把Typora編輯好的流程圖導出成html旭寿，然后用支持滾動截圖的工具來截。
Mac下Snip可以完全滾動截圖的操作崇败，Snip在安裝和使用的時候有幾點要注意的地方盅称，所以我簡單介紹一下。
1. 下載地址
Snip官網后室，只支持Mac缩膝。
2. 安裝
在安裝時，如果直接雙擊打開岸霹，會提示“來自身份不明的開發(fā)者”疾层，而無法打開。但這個Snip是騰訊做的東西贡避，安全性應該是沒有問題的痛黎，我們在這里用右鍵點擊，然后選擇打開刮吧，就可以安裝了湖饱。
3. 設置
- 首先需要在系統(tǒng)設置里面，找到安全性與隱私杀捻。在輔助功能里井厌，勾選允許Snip控制您的電腦。我猜想是因為Snip在截圖的時候需要滾動屏幕，所以需要這個權限仅仆。
-
在Snip的偏好設置里器赞，勾選啟動滾動截屏。
Snip設置
4. 使用
如果需要滾動截屏墓拜，在點擊截屏后拳魁，直接單擊，就會開始滾動截屏撮弧。這樣截的圖可能兩邊會有較多空白潘懊，可以用圖片處理工具把多余的部分裁掉（Mac上可以直接用自帶的圖片預覽工具進行裁剪）。
