这篇文章主要介绍
流程图基础
以写代码的方式画流程图
相比于使用画图工具拖拽画图,用代码画图有什么好处?
首先,这种方式非常轻便,无需安装复杂的画图应用。Typora 等多种 Markdown 编辑器自带有画图扩展(这也是 Markdown 能画图的原因,因为用到了扩展)
其次,拖拽画图时需要考虑图形尺寸和对齐问题,而代码画图不需要考虑这些,一切均自动调整
另外,想象下你在写文档时,随手一段代码就插入了一幅流程图,这多么酷炫!
虽说要使用代码,但其实这些代码非常简单,编程零基础也可以轻松学会,只要运用一些联想记忆即可。
一、流程图基础
考虑到有些读者可能不了解流程图,为此这里先作一些简单介绍,如果你熟悉流程图可以跳过这段内容直接看下一小节。
流程图,顾名思义,就是表示一个事件或活动的流程的图示。
流程图常用符号及含义
流程图的符号有很多,但常用的也就几个。
圆角矩形:表示开始和结束
2. 矩形:表示过程,也就是整个流程中的一个环节
3. 单向箭头线段:表示流程进行方向
4. 菱形:表示判断、决策
5. 圆形:表示连接。为避免流程过长或有交叉,可将流程切开,圆形即相当于切口处的连接头(成对出现)
6. 另外还有嵌入在以上符号中的描述文本
图示布局方向
在画流程图时,最常用的布局方向是
从上向下
从左向右
当然也允许从下向上画、从右向左画,但是这两种很少见。
二、代码画图
工具
君欲善其事,必先利其器。想要用代码画图,就得有支持这种方式的画图工具。这里介绍两款工具:
1) 免费 Markdown 编辑器 Typora,非常好用且美观。其自带 mermaid 画图扩展。
在用 Typora 编写 Markdown 文本时,插入这样一个代码块:
mermaid ……流程图代码……
其中流程图的代码便会自动被 mermaid 解析和渲染。