Typora画图Mermaid插件流程图

官网

Github 项目地址

一、介绍

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

二、流程图基础

1、流程图符号和含义

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

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

更多形状参考官方文档

示例：

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

流程图形状.png

---

2、节点之间的连线

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

代码示例 1:箭头连线示例

graph TD
    A(把你送进去监牢)-->B{打开监牢门}
    B-->|"你是初犯,使用小箭头"|C["放进去小监牢"]
    C---E("三杠没有箭头指向")
    B==>|"你是老犯,使用大箭头"|D["换个大监牢"]
    D-- "终身监禁" ---forever("没出头了")
    D---|"终身监禁"|forever("没出头了")

箭头连线示例.png

代码示例 2：箭头上加文字

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

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

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

箭头加文字.png

代码示例3：结合fontawesome使用

graph TD
    B["fa:fa-weixin weixin"]
    B-->C[fa:fa-ban forbidden]
    B-->D(fa:fa-spinner waitting);

fontawesome结合.png

代码示例4：给流程表做标题

将其添加到流程图TD定义之后的顶部。
这将定义一个框，用下划线（）设置其文本的样式，并使框填充和描边为空白#FFF（样式标题）

并将其链接到实际的第一步/框（FirstStep），从而使其显示在顶部，同时使使用linkStyle 0隐藏链接

graph TD

title[My Title]
title-->FirstStep
style title fill:#FFF,stroke:#FFF
linkStyle 0 stroke:#FFF,stroke-width:0;

FirstStep-->...

标题.png

---

3、布局方向

TB/TB	Top Bottom 从上到下
BT	bottom top 从下到上
LR	left right 从左到右
RL	right left 从右到左

---

4、子图

格式：

subgraph title
 graph definition
end

代码示例：

graph TB

    subgraph 图3
    two1---two2
    end
    subgraph 图2
    three1 ==> three2
    end
        subgraph 图1
    one1-->one2
    end
    one1-->two2
style 图2 fill:#f9f,stroke:#333,stroke-width:4px

子图.png

---

三、代码格式

基本格式：

​ graph {布局方向[TB | BT | LR |RL ]}

​ 【自定义代码】