流程图和工具介绍

为什么要画图

作为一个技术人员,在很多场合可能会与别人沟通或者交流自己的架构设计、规划等思路,比如在分享、答辩、沟通需求等场景。

我们往往会写一个文档来描述自己的想法,但科学研究表明,很多时候,文字其实并没有那么直观,尤其是在一场会议中,使用大段的文字可能会让观众很容易疲劳,容易走神,GET不到重点等。

所以在文档中插入一些图示,能够帮助观众更好地理解自己的想法,也能更清晰地表达整体的设计思路,是开发者非常值得掌握的一个技能。

总的来说就是:

  • 解决沟通障碍
  • 达成共识
  • 减少歧义

画好图的核心

清晰的思考

对业务和技术有深入的理解,清楚各个模块、层次之间的关系,才能做到胸有成竹,快速利用软件把自己心中的图画出来。先画大的模块和框架,在大的模块和框架经过反复推敲确定后,再去完善内部小的细节.

准确的表达

图是给别人看的,要考虑到面向的对象是谁,有没有了解相关的基础背景,他关注的是整体框架还是细节。

图的分类

架构图

架构就是对系统中的实体以及实体之间的关系所进行的抽象描述,是一系列的决策。系统架构图是为了抽象的表示软件系统的整体轮廓和各个组件之间的相互关系和约束边界,以及软件系统的物理部署和软件系统的演进方向的整体视图。是对物/信息的功能与形式元素之间的对应情况所做的分配,是对元素之间的关系以及元素同周边环境之间的关系所做的定义。

用例图(操作动线)

传统的UML用例图是用于描述角色和行为之间的关系,用例下面可以再拆分用例(或者叫进一步用例)

图片

但用例图只是刻画业务行为,并没有刻画领域模型、单据和领域的划分,所以信息量其实很少。

流程图可以刻画业务的核心流程,也可以在流程图的节点周围画上对应的产品功能、模型或者产生的单据。

图片

时序图

时序图就是接口调用的时间关系,也是开发人员表达接口内部细节的主要工具。时序图非常推荐使用plant UML来画,效率比较高。

比如大家都熟知的 OAuth2 的时序图:

图片

系统链路图

系统链路图,有时候也叫服务链路图。

表达的是各个微服务之间的调用关系,一个好的微服务系统调用链路应该是干净的、单向依赖的,呈一个“树状”,但现实中如果设计不好,经常会有循环依赖,形成“图”状。

实际上好一点的基建平台可以根据现有的服务监控体系,自动生成调用链路图,不过在设计阶段肯定是要自己手动画了。

图片

画图工具分类

draw.io

draw.io 是一款免费的在线图表编辑工具,且是开源,免费的。web 版本就够用,通过域名就能直接打开,不需要安装任何软件。可以绘制流程图、UML、类图、组织结构图、泳道图、E-R图、思维导图等,堪称画图神器!

draw.io 提供了丰富的模版,支持商务、图表、cloud、工程、流程图、布局、地图、网络、软件、表格、UML、Venn等。还可以自定义模板。

图片

除此之外,draw.io 还有很多特点:

  • 支持语言设置为中文;
  • 支持使用图层;
  • 支持设置手绘风格、自带多种图标,支持自定义图标;
  • 支持将图片导出为PNG、JEPG、SVG、PDF、HTML、XML等,支持导出高级设置,如调整DPI、宽高、缩放、背景等。

draw.io 使用:

缺点是 draw.io 是国外的网站,要想流畅使用可能需要科学上网工具。不过由于 draw.io 是开源的,所以可以下载离线版本的软件,或者部署在自己的服务器上。

excalidraw

Excalidraw 是一款轻量、开源的手绘风格电子白板和画图应用,可以快速画出漂亮的流程图、UML图甚至是图表。

图片

图片

Excalidraw 提供了丰富的素材库,包含手绘风格的图标、图标等:

图片

除此之外,Excalidraw 还有很多特点:

  • 界面简洁,模版众多,支持键盘快捷键,可以快速上手;
  • 免注册,支持切换为中文语言;
  • 内容安全,采用端到端加密,不会将内容上传到云端;
  • 支持导出图片、导出源文件、分享链接、实时协作、将内容保存到工作区。

在线地址:https://excalidraw.com/

processOn

ProcessOn 是一个在线协作绘图平台,支持在线制作思维导图、流程图、组织结构图、网络拓扑图、鱼骨图、UML图等。丰富的模版市场,可以通过分类、关键字搜索来查找合适的模版:

图片

图片

plant uml

plant uml 是一个可以用代码生成图片的工具,免费的。可以画很多图。包括时序图、类图、用例图等。

但是plant uml有一个最大的优势就是效率高。尤其是在画时序图、UML 类图等场景,

但整体风格比较朴素,如果要画得很好看的话还是不适合用它。

图片

图片

语雀

语雀是一款面向未来的文档和知识协同工具,可以用来记笔记,也可以用来画图。语雀画板支持基础图形、流程图、UML图、ER图、思维导图等。

图片语雀画板还支持直接从 icofont 搜索、添加图标:

图片

其还提供了一些常用图的模版:

图片

除此之外,语雀画板还有以下特点:

  • 支持团队协作绘图;
  • 保存版本,恢复历史版本。
  • 飞书文档内嵌的画图工具最大的好处就是它与文档的无缝集成,可以随时随地直接编辑,不用在文档和画图工具之间切换

语雀使用:

Xmind

XMind 是一个跨平台的思维导图软件,具有多种结构样式,除了普通的思维导图,还包括树形图、逻辑图、鱼骨图、时间轴、树状表格等等,不同的结构样式可以自由组合混用,同时支持一键更换结构样式。

图片

Xmind 提供了很多类型的思维导图,并支持设置多种主题风格:

图片

除此之外,Xmind 还有很多特点:

  • 可以灵活的定制节点外观、插入图标外,还有多种样式、主题色彩、贴图可以选择,主题颜色和样式同样支持自由组合;
  • 除了 XMind 自身的格式,还支持导入 FreeMind、MindManager 等软件的文件格式,支持导出PNG、SVG、PDF、Markdown、Word、Excel 等;
  • 支持进行动态演示。

下载地址:https://xmind.app/download/

Carbon

Carbon是开源免费的代码图片生成器,可以快速生成漂亮的代码图片。操作简单,直接将代码粘贴在代码区,设置想要的格式即可。

图片

生成的代码图片非常适合用来分享:

图片

除此之外,Carbbon 还有很多特点:

  • 支持多种代码风格、支持自定义代码风格,支持主流的各种编程语言;
  • 支持设置代码的字体、行号、行数等文本格式;
  • 支持设置图片的边距、背景、颜色、阴影、大小等。

在线地址:https://carbon.now.sh/


流程图和工具介绍
http://www.wangxiaohuan.com/2018/01/15/2018-01-15/
作者
吃素的左撇子
发布于
2018年1月15日
许可协议