这篇文章主要为大家介绍
写代码画图相比于使用使用画图工具画图有什么好处呢?
考虑到有些读者可能不了解流程图,为此这里先作一些简单介绍,如果你熟悉流程图可以跳过这段内容直接看下一小节。
流程图,顾名思义就是表示一件事的流程的图示。
流程图的符号有很多,这里只介绍最常用的几个,通常情况下这就足够满足需求了。
2. 矩形:表示过程,也就是整个流程中的一个环节
3. 单向箭头线段:表示流程进行方向
4. 菱形:表示判断、决策
5. 圆形:表示连接,为避免流程过长或有交叉可将流程切开,圆形即相当于切口处的连接头(成对出现)
6. 另外还有嵌入在以上符号中的描述文本
在画流程图时,最常用的布局方向是
当然也允许从下向上画、从右向左画,但是这两种很少见。
想要用代码画图,就得有个支持这种方式的画图工具。这里介绍两个工具:
1) 我们在《写作利器 Markdown:基础、编辑器及图床》中介绍过免费 Markdown 编辑器 Typora,它就能作这件事。
在用 Typora 编写 Markdown 文本时,插入这样一个代码块:
```mermaid ……流程图代码…… ```
其中流程图的代码会自动被 mermaid 解析和渲染。
00:10
这样的使用方式很简单,其它的能支持 mermaid 的编辑器也可以这样来用,比如说印X笔记。
2) 如果你不想用 Markdown,可以选择在线 mermaid 编辑器:
器有了,现在来开始善其事。
每次作图的代码以「graph <布局方向>」开头,如:
graph TB ... ...
TB(Top Bottom)表示从上向下布局,另外三种是BTLR(Left Right)RL
TB(Top Bottom)表示从上向下布局,另外三种是
我们把之前介绍过的那四种节点画一下,请仔细比较代码和对应的图形。
graph TB A(开始) B[打开冰箱门] C{"冰箱小不小?"} D((连接))
看出玄机了吗?其实很简单,就是
前面是节点的画法,再来看下线段的画法,请留意节点是怎么连接的。
graph TB A[把大象放进去] --> B{"冰箱小不小?"} B -->|不小| C[把冰箱门关上] B -->|小| D[换个大冰箱]
是不是也很简单!-->是带箭头线段,-->|不小|是加了描述文字的带箭头线段。
-->
-->|不小|
好了,要学的内容就是这些,意不意外!东西不多也不复杂,只要根据图案联想记忆即可,稍加练习后便能运用自如。
-.->
==>
---
完成了上面的教程后,我们再来看个完整例子体会下:
graph TB Start(开始) --> Open[打开冰箱门] Open --> Put[把大象放进去] Put[把大象放进去] --> IsFit{"冰箱小不小?"}
IsFit -->|不小| Close[把冰箱门关上] Close --> End(结束)
IsFit -->|小| Change[换个大冰箱] Change --> Open
当然节点和线段的表现力可以很丰富,不仅限于用于流程图,你也可以借助它们来表现其它内容。如下面是火锅冒菜麻辣烫的关系图 :)