为一名全栈开发者，我经常喜欢用各类流程图、思维导图软件来梳理与总结当前的技术堆栈。善用图表的好处，在于能帮我快速地进行跳跃式阅读思考与知识整理。

将零散的知识点，按树状形式依次展开，让我可以更好地看到整个知识体系的全貌，进而针对一些不足点进行查漏补缺。

为了让大家能更便捷地使用图表，对项目架构进行条理性划分，GitHub 在前几天将绘图插件 Mermaid 集成进了 Markdown，并推出了一项「图表绘制」功能！

看到这里，估计有部分水友可能对 Mermaid 不太了解，下面我简单介绍一下。

Mermaid 是一款受到 Markdown 语法启发而诞生的 JavaScript 图表工具，由开发者 Knut Sveidqvist 所负责维护，目前在 GitHub 已积累 42000 Star，在技术圈内受众颇广。

该工具的主要作用，是能直接通过文本，来动态调整与创建各种实用的图表。

GitHub：https://github.com/mermaid-js/mermaid

在这个功能没有实现之前，开发者只能在项目文档中内嵌图片，用以展示图表。

这种方式的弊端，在于开发者每次更新图表时，都需要在绘图软件修改源文件，再截图上传至 GitHub。这无疑增加了工作成本，且不利于团队间的协作维护。

因此，在将 Mermaid 集成进 GitHub 之后，我们编写项目的 README 文件或其它 Markdown 文档时，便可以借助 mermaid 语法，在文档中轻松插入各类流程图、序列图、甘特图、类图、关系图等图表。

对于熟悉 Markdown 语法的人来说，上手玩转 Mermaid 简直就是易如反掌。

下面我便以 Mermaid 官方提供的流程图入门示例，为大家做下讲解。

首先，我们需要在 Markdown 中使用 mermaid 声明，表示这是一段 mermaid 专属语法：

mermaid

然后，用「flowchart TD」语法，表示这是一个从上（Top）到下（Down）的流程图（flowchart）。

最后一步，就是用「A-->B;」链式语法，来清晰表达各个节点之间的连接关系。

完整的流程图绘制，语法如下所示：

```mermaid
flowchart TD;
     A-->B;
     A-->C;
     B-->D;
     C-->D;

将上面这段语法，放到 GitHub 或使用 Markdown 编辑器 Typora 进行渲染，则可呈现流程图：

除了流程图之外，Mermaid 还提供了非常多种丰富的图表类型，你可以根据文档的不同内容，合理选择与之相对应的图表进行表述。

Mermaid 使用手册：

https://mermaid-js.github.io/mermaid/

正所谓「一图胜千言」，合理的应用图表，让我们在撰写文档时，可以达到事半功倍的效果。

对于公司项目来说，开发者通过在文档中插入项目业务流程图、技术架构图、数据库表设计图等图标。一方面，能让新人更快地了解业务，上手开发。另一方面，公司老人在项目遇到问题时，也可以通过清晰直观的文档，快速排查与修补系统漏洞，真可谓一举两得！

目前，该功能已正式上线至 GitHub，感兴趣的同学，可以上去体验一下。

如果你想进一步了解这项技术的实现原理，也可以前往 GitHub 官方博客，查看详细内容：

https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/

来源：https://mp.weixin.qq.com/s/SAbLiLWhp9R_UOVnRi31YQ

面我们来说说流程图该如何制作？如果你也感兴趣的话，那就一起来看看吧！今天我们所演示的内容会在这个【迅捷画图】网站上进行，它里面还有很多流程图模板可以使用，小编感觉还挺不错的。

一、流程图制作过程

1、流程图分类

先来说说流程图的分类，大家可以看看下面这张图片就知道了，它主要分为组织结构图，BPMN，UML，EPC事件过程线图，EVC企业价值链图等，大家可以根据自身需求选择，相信这里的分类一定够你使用。

2、流程图制作

第二步就是流程图的制作，大家可以看看下面这张动图就明白了，一来是通过添加不同形状的方框，二来是在每个方框中输入内容，最后再用带箭头的线将它们连接起来就可以了。

3、导出流程图

经过前面的操作之后，我们算是完成了流程图的制作，最后只要点击【导出】选项就可以了，在这里能选择的格式非常多，比如有图片，高清图片，矢量图片，PDF文件，HTML，XML，XSD等，大家可以自由选择。

二、流程图模板使用

1、组织结构图模板

如果大家觉得这样制作流程图比较麻烦，那没关系，这个【迅捷画图】网站还提供了非常多的流程图模板，比如下面这个组织结构图模板。

2、EPC事件过程线图

接下来是这个EPC事件过程线图模板，简单来说就是让我们了解整个事情的发展过程，以便我们后期做出修改。

3、EVC企业价值链图

最后是EVC企业价值链图模板，大家可以看看下面这张图片就明白了，它可以让我们知道哪个环节是比较有价值。

以上就是关于流程图的介绍，如果大家还有其他补充的，可以在评论区留言。

朋友询问流程图和思维导图有什么区别？简单好看的流程图怎么制作？

其实流程图就是属于思维导图的一种，只是流程图侧重于表现事物之间的先后关系。那么怎么做流程图呢？其实很简单，这里小编就给大家展示一下【树图思维导图】中的流程图模版～

工作方案流程图

https://shutu.cn/template/e42199e275d1a9da1459b99238390574.html

直播脚本流程图

https://shutu.cn/template/057e492bc8895ecb3c958737e0fbd0b1.html

这些模版都在【树图思维导图】的模版中心里可以找到，欢迎大家使用！