74K star!!!像写markdown一样绘制流程图-----记录第一次使用mermaid的感受

1.来源

我自己是在这个微信公众号里面看到的这个文章，顺便去这个github上面去看看，但是我自己接触到的这个github上面的这个项目比较少，所以看起来不是很习惯，所以就在这个b栈上面找点视频了解一下，毕竟这个工具已经很成熟了，只不过我刚认识罢了；

果然b栈的第一个视频就像我清楚的讲述了这个mermaid是干什么用的，我下面结合我的使用和 遇到的问题和大家分享一下；

2.如何使用

这个是官方的网站：

点击这个上面的get started就可以进入这个相关的文档，我们不会的都可以在这个里面进行学习，而且这个里面的都是可以让我们run演示的（就是你可以查看这个运行的效果）；

左边的就是目录，方便我们快速地查找不同的类型的图标的绘制的方法；

我们可以点击这个右上角的进行演示：就是我们的这个mermaid的实时的编辑器，方便我们进行学习hes

页面是张这个样子的：左边写代码，右边直接生成（千万别怕，我们只需要在这个基础上改写就可以了）

3.代码真的好难写吗

千万不要看到上面的这个代码编辑器，就认为这个只有计算机专业的才可以学会，实际上这个代码不是真正的代码，我们只需要在官方文档的基础上改就可以了；

下面的这个就是官方文档里面的这个截图，我们只需要找到我们想要的图的类型，在这个模版的基础上修改就可以了，因此我们需要多去看这个官方文档；

4.live editor使用的演示

下面的这个有sample就是样本模版的意思，这个里面我比较熟悉的就是ER图，这个是进行数据库的设计的时候使用的，其他的图标我们可以知道，但是这个英文对不上罢了，没关系，多看多用就好了；

他的这个左下角是可以导出成为这个Png的欧；

这个里面的sample有很多，大家直接进去看就可以了，我觉得我没必要一个一个的演示，我主要说下这个在markdown里面如何使用；

5.如何嵌入到markdown里面去

我是受到网上的文章的影响，所以刚开始遇到了这个问题，实际上只写这个正文就可以了，不用写前面的三个点加上mermaid这个不分，以及后面的结尾的部分；

他的真实效果是这个样子的：

展示的效果是这个样子的：

还有下面的很多，只需要放到代码块里面就可以了：

6.我为什么推荐

我觉得数学建模比赛用得到，我们日常很多情况下也用得到，我们没必要去喷，我见网上的一些网友说这个线条什么的无法调整，如果觉得不好的话，可以去使用这个诸如processon这样的自己去画不就好了，觉得好用的就可以用，我目前觉得这个用起来我自己画的强多了；

如果你觉得不好用，只是你不熟练，多用就好了，我会在最近的这个华数杯里面尝试使用这个工具，以及后续的数学建模比赛都会使用这个工具，最近不是华数杯吗，我在这个比赛结束之后就发一篇我的参赛经历的文章以及一篇介绍我是如何在这个比赛里面使用这个工具的，敬请期待吧~~