如何快速高效准确的制作相对保真的流程图

浏览器截图

• 打开手机模式，通过右上角菜单，截图保存。
• 如果截图某个节点的图：打开控制台Inspect具体的节点，快捷键『cmd + shift + p』，输入『screenshot』→『capture node screenshot』，该方式对于非正方形会截取底色，实际效果如同屏幕截图，只是少了方便了边界定位而已。
• 隐藏某个节点：『element』面板中右击元素节点，选择『Hide element』

Photoshop

• 复制整张图到剪贴板：暂无太心怡的方案，目前可以用快速导致png后再打开复制。

Sketch

暂时还是老老实实做好画板，选择导入到Axure使用制作流程图。需要安装Sketch插件。

调研了几个软件

1. User Flows

   不能自己调整线条，做出来相当不美观。

2. Overflow要收费，并且不能单独导出

图片调整

一般需要做如下处理

1. 改变宽度
2. 去掉软件头部导航

写了个脚本，使用ImageMagic处理。

./crop.sh /Volumes/hdb/Share/Download/领取MVP截图/with_header
WechatIMG724.png

参数

1. 处理的图片目录
2. 是否裁剪头部导航

脚本源文件如下

#!/bin/sh

if [ "$1" = "" ]; then
	echo Usages: $0 [directory]
	exit 1
fi

if [ ! -d $1 ]; then
	echo Not found directory, $1
	exit 1
else
	cd $1
fi

CROP_OPTS=""
if [ "$2" != "" ]; then
	CROP_OPTS=" -crop +0+$2"
fi

# read w h < <(identify -format "%w %h" WechatIMG724.png)

for f in `ls | grep -E "\.(png|jpg)$"`; do
	[ ! -d output ] && mkdir output
	echo $f
	convert -resize 320x $CROP_OPTS $f output/$f
done