轻松上手写作利器Markdown：写代码画流程图

最新推荐文章于 2025-05-22 23:51:54 发布

weixin_34319374

最新推荐文章于 2025-05-22 23:51:54 发布

阅读量1.6k

点赞数 1

CC 4.0 BY-SA版权

文章标签： markdown

原文链接：https://juejin.im/post/5d0852abf265da1bc414548d

本文介绍了以写代码方式画流程图的方法。先阐述了代码画图相较于画图工具的优势，接着介绍了流程图基础，包括常用符号含义和布局方向。然后讲解了代码画图工具，如 Typora 和在线 mermaid 编辑器，还说明了节点和线段的画法，并给出完整示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这篇文章主要为大家介绍

流程图基础
以写代码的方式画流程图

写代码画图相比于使用使用画图工具画图有什么好处呢？

首先，这种方式非常轻便，Typora 等多种 Markdown 编辑器自带有画图扩展
其次，用画图工具画图时可能需要考虑图形尺寸和对齐问题，而代码画图不需要考虑这些
另外，想象下你在写文档时，随手一段代码就插入了一幅流程图，这多么酷炫！

流程图基础

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

流程图，顾名思义就是表示一件事的流程的图示。

流程图常用符号及含义

流程图的符号有很多，这里只介绍最常用的几个，通常情况下这就足够满足需求了。

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

矩形：表示过程，也就是整个流程中的一个环节

单向箭头线段：表示流程进行方向

菱形：表示判断、决策

圆形：表示连接，为避免流程过长或有交叉可将流程切开，圆形即相当于切口处的连接头（成对出现）

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

图示布局方向

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

从上向下
从左向右

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

代码画图

工具

想要用代码画图，就得有个支持这种方式的画图工具。这里介绍两个工具：

我们在《轻松上手写作利器Markdown：基础、编辑器及图床》中介绍过免费 Markdown 编辑器 Typora，它就能作这件事。

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

```mermaid ……流程图代码…… ```

其中流程图的代码会自动被 mermaid 解析和渲染。演示视频

这样的使用方式很简单，其它的能支持 mermaid 的编辑器也可以这样来用，比如说印X笔记。
如果你不想用 Markdown，可以选择在线 mermaid 编辑器：dwz.cn/hOMIoH4w

器有了，现在来开始善其事。

节点的画法

每次作图的代码以「graph <布局方向>」开头，如：

graph TB
    ...
    ...
复制代码

TB（Top Bottom）表示从上向下布局，另外三种是

BT
LR（Left Right）
RL

我们把之前介绍过的那四种节点画一下，请仔细比较代码和对应的图形。

graph TB
    A(开始)
    B[打开冰箱门]
    C{"冰箱小不小？"}
    D((连接))
复制代码

看出玄机了吗？其实很简单，就是

不同种类的括号对应不同的节点图形
括号中的文字就是显示在节点中的描述
A B C D 这些字符是为节点取的名字，这个名字可以在之后反复利用（在编程里这相当于定义变量）

线段的画法

前面是节点的画法，再来看下线段的画法。

graph TB
    A[把大象放进去] --> B{"冰箱小不小？"}
    B -->|不小| C[把冰箱门关上]
    B -->|小| D[换个大冰箱]
复制代码

是不是也很简单！-->是带箭头线段，-->|不小|是加了描述文字的带箭头线段。

好了，要学的内容就是这些，意不意外！东西不多也不复杂，只要根据图案联想记忆即可，稍加练习后便能运用自如。

额外提示

上一个代码示例中 B 节点的描述文字加了引号，是因为描述文字包含特殊字符，用引号包裹防止出错
为节点取名为 A B C 不太合适，如果节点很多时往往容易混淆，不方便后续使用和阅读（编程时命名的重要性）。建议起有意义的名字
线段另外还有单向箭头虚线线段 -.->、加粗的单向箭头线段 ==>、不带箭头的线段 ---

完整示例

完成了上面的教程后，我们再来看个完整例子体会下：

graph TB
    Start(开始) --> Open[打开冰箱门]
    Open --> Put[把大象放进去]
    Put[把大象放进去] --> IsFit{"冰箱小不小？"}
    
    IsFit -->|不小| Close[把冰箱门关上]
    Close --> End(结束)
        
    IsFit -->|小| Change[换个大冰箱]
    Change --> Open
复制代码