轻松记录您
灵感和创意

Markdown 进阶技能:用代码画流程图(编程零基础也适用)

这篇文章主要介绍

流程图基础

以写代码的方式画流程图

相比于使用画图工具拖拽画图,用代码画图有什么好处?

首先,这种方式非常轻便,无需安装复杂的画图应用。Typora 等多种 Markdown 编辑器自带有画图扩展(这也是 Markdown 能画图的原因,因为用到了扩展)

其次,拖拽画图时需要考虑图形尺寸和对齐问题,而代码画图不需要考虑这些,一切均自动调整

另外,想象下你在写文档时,随手一段代码就插入了一幅流程图,这多么酷炫!

虽说要使用代码,但其实这些代码非常简单,编程零基础也可以轻松学会,只要运用一些联想记忆即可。

一、流程图基础

考虑到有些读者可能不了解流程图,为此这里先作一些简单介绍,如果你熟悉流程图可以跳过这段内容直接看下一小节。

流程图,顾名思义,就是表示一个事件或活动的流程的图示。

流程图常用符号及含义

流程图的符号有很多,但常用的也就几个。

圆角矩形:表示开始和结束

2. 矩形:表示过程,也就是整个流程中的一个环节

3. 单向箭头线段:表示流程进行方向

4. 菱形:表示判断、决策

5. 圆形:表示连接。为避免流程过长或有交叉,可将流程切开,圆形即相当于切口处的连接头(成对出现)

6. 另外还有嵌入在以上符号中的描述文本

图示布局方向

在画流程图时,最常用的布局方向是

从上向下

从左向右

当然也允许从下向上画、从右向左画,但是这两种很少见。

二、代码画图

工具

君欲善其事,必先利其器。想要用代码画图,就得有支持这种方式的画图工具。这里介绍两款工具:

1) 免费 Markdown 编辑器 Typora,非常好用且美观。其自带 mermaid 画图扩展。

在用 Typora 编写 Markdown 文本时,插入这样一个代码块:

mermaid    ……流程图代码……

其中流程图的代码便会自动被 mermaid 解析和渲染。

未经允许不得转载:坚果云Markdown » Markdown 进阶技能:用代码画流程图(编程零基础也适用)
分享到: 更多 (0)

坚果云Markdown轻松记录您 灵感和创意

坚果云Markdown下载坚果云Markdown介绍