Typora 图形插件 Mermaid 完美画图

Typora 图形插件 Mermaid 完美画图

今天给伙伴们分享一下Typora 图形插件 Mermaid 画图，希望看了有所收获。

我是想吃西红柿，公众号「想吃西红柿」「云原生运维实战派」作者，对云原生运维感兴趣，也保持时刻学习，后续会分享工作中用到的运维技术，在运维的路上得到支持和共同进步！

如果伙伴们看了文档觉得有用，欢迎大家关注我的公众号，获取相关文档。爱运维，爱生活。

一、Mermaid 介绍

• Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库，使用 JS 进行本地渲染，广泛集成于许多 Markdown 编辑器中。

• mermaid语法和Markdown一样简单。通过文本化的方法来制作图形，一方面不需要其他软软件，直接在Typora中就可以编辑和修改，另一方面图形体积非常小，加载速度非常快。

• 本文的代码和图形都在用Typora编辑器实现的。以下以例子为主，在实际使用过程中可以根据例子照猫画虎。例子中的mermaid代码很简单，很容易理解，工作使用中根据需要修改就可以用了。

• 官网地址

• Github 项目地址

二、Mermaid 流程图基础

1、流程图符号和含义

• Mermaid 的流程图的图形含义使用象形的表达形式，非常类似中国象形，理解起来很直观，比如矩形 [],圆角矩形(),圆形(())

图形	符号含义
圆角矩形	表示开始和结束	id(“文字”)
矩形	表示过程环节	id["文字"]
单向箭头线段	表示流程进行方向
菱形	决策判断	id{"文字"}
圆形	表示连接，避免流程图	id(("文字"))
右向旗帜节点	标志提示	id>"文字"]

• 更多形状参考官方文档

• 示例：

graph TB
    start("圆角矩形")
    rectangle["矩形"]
    rhombus{
   "菱形"}
    round(("圆形"))
    right_arrow>"右向旗帜节点"]

2、节点之间的连线

表述	说明	使用示例
-->	添加尾部箭头	A(把大象装进冰箱)-->B{打开冰箱}
---	不添加尾部箭头	A(把大象装进冰箱)---B{打开冰箱}
--	单线	A(把大象装进冰箱)--B{打开冰箱}
--text--	单线上加文字	A(把大象装进冰箱)--你好亲爱的--B{打开冰箱}
==	粗线	A(把大象装进冰箱)==>B{打开冰箱}
==text==	粗线加文字
-.-	虚线
-.text.-	虚线加文字

1、示例 1:箭头连线示例

graph TD
    A(把大象塞进冰箱)-->B{
   打开冰箱门}
    B-->|"保鲜,使用小箭头"|C["放进保鲜区"]
    C---E("三杠没有箭头指向")
    B==>|"冷藏,使用大箭头"|D["放进冷冻区"]
    D-- "整块" ---forever("结冰")
    D---|"分块"|forever("结冰")

2、示例 2：箭头上加文字

• 加文字方式：节点连线表述定义+文字+节点连线表述定义

• 如：-.|“文字”|.->id(“”)

graph TB
    connect["数据库连接"]--"root 192.168.100.100"-->start{
   "开始连接"}
    start-.虚线加文字.->ok["连接成功"]
    start-.->faild["连接