作为一个程序员，经常需要画流程图。而用Markdown画流程图，省心省力，后面需要调整的话也更方便。但是，目前简书上的Markdown还不支持流程图。怎么办呢？只能以迂为直，曲线救国了。
简单的说：
简书的Markdown本身不支持流程图，但我们可以找一个支持流程图的Markdown编辑器，画完之后，直接截图上传到简书上就可以了。但是有时候流程图太长，超出一个屏幕的高度，这时候需要用能滚动截图的工具来截。
你将需要：
- 一款支持流程图的Markdown编辑器。推荐Typora。
- 一款截图工具。QQ自带的就可以。
- 一款支持截长图的工具。Mac上可以用Snip。Windows上可以用FSCapture。
编辑流程图
第一步，当然是先写好我们的流程图了。这里我使用的工具是Typora。需要注意的是，Typora默认是不支持流程图的，需要在设置中开启这个功能。在设置中切换到Markdown那个tab，然后勾选上对图表（包含流程图）的支持。
Typora勾选支持流程图
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. 安装
在安装时，如果直接双击打开，会提示“来自身份不明的开发者”，而无法打开。但这个Snip是腾讯做的东西，安全性应该是没有问题的，我们在这里用右键点击，然后选择打开，就可以安装了。
双击安装会提示打不开
3. 设置
- 首先需要在系统设置里面，找到安全性与隐私。在辅助功能里，勾选允许Snip控制您的电脑。我猜想是因为Snip在截图的时候需要滚动屏幕，所以需要这个权限。
-
在Snip的偏好设置里，勾选启动滚动截屏。
Snip设置
4. 使用
如果需要滚动截屏，在点击截屏后，直接单击，就会开始滚动截屏。这样截的图可能两边会有较多空白，可以用图片处理工具把多余的部分裁掉（Mac上可以直接用自带的图片预览工具进行裁剪）。
网友评论