markdown语法绘制常用图示例

前言

经常要绘制流程图、时序图来做一些讲解和演示
但是绘制简单的图使用比较专业的工具略显麻烦而且经常需要调整样式
看到markdown 有插件也支持绘图干脆记录一下做个笔记

安装识别绘图插件

使用mermaid来进行绘制官方文档:https://mermaid-js.github.io/mermaid/#/

mermaid支持流程图、序列图、类图、状态图、实体关系图、用户旅程图、甘特图、指令图、饼图等具体的查看官方文档

此处由于个人博客使用hexo来构建 next主题
如果在其他平台使用按需安装 mermaid创建即可例如在vscode 或者idea 上编辑要安装markdown 对应的mermaid插件

hexo

参考博客: https://blog.csdn.net/wzh0709zml/article/details/103310405

安装mermaid插件

script

1	npm install --save hexo-filter-mermaid-diagrams

启用绘图
编辑 blog/themes/next/_config.yaml 中的mermaid配置

# Mermaid tag
mermaid:
  enable: true
  # Available themes: default | dark | forest | neutral
  #绘图主题 按需选择 我个人使用的是default主题  
  theme: default

vscode

安装 [Markdown Preview Mermaid Support] 或者类似插件即可

idea

idea 上mermaid 插件收费这里不做演示 mmp

绘图语法示例

此处全部参考 mermaid语法参考官方文档即可这里只作为速查

流程图

流程图方向

TB - 从上到下

1 2	graph TB start --> stop

graph TB
   start --> stop

TD - 自上而下/与从上到下相同

1 2	graph TD start --> stop

graph TD
    start --> stop

BT - 从下到上

1 2	graph BT start --> stop

graph BT 
    start --> stop

RL - 从右到左

1 2	graph RL start --> stop

graph RL 
    start --> stop

LR - 从左到右

1 2	graph LR start --> stop

graph LR 
    start --> stop

节点形状

默认形状

1 2	graph LR id1[节点中的内容]

graph  LR 
    id1[节点中的内容]

圆边节点

1 2	graph LR id1(节点中的内容)

graph  LR
    id1(节点中的内容)

体育场形状节点

1 2	graph LR id1([节点中的内容])

graph  LR
    id1([节点中的内容])

子例程形状中的节点

1 2	graph LR id1[[节点中的内容]]

graph  LR
    id1[[节点中的内容]]

圆柱型节点

1 2	graph LR id1[(节点中的内容)]

graph  LR
    id1[(节点中的内容)]

圆形节点

1 2	graph LR id1((节点中的内容))

graph  LR 
    id1((节点中的内容))

不对称形状节点

1 2	graph LR id1>节点中的内容]

graph  LR
    id1>节点中的内容]

菱形节点

1 2	graph LR id1{节点中的内容}

graph  LR 
    id1{节点中的内容}

六边形节点

1 2	graph LR id1{{节点中的内容}}

在hexo中要注意对于‘}}’解析有bug 需要
1
2
3
{% raw %}
  包含‘}}’内容
{% endraw %}

graph  LR
    id1{{节点中的内容}}

平行四边形

1
2
3

graph  LR 
    id1[/节点中的内容/]
    id2[\节点中的内容\]

graph  LR 
    id1[/节点中的内容/]
    id2[\节点中的内容\]

梯形

1
2
3

graph  LR
    id1[/节点中的内容\]
    id2[\节点中的内容/]

graph  LR
    id1[/节点中的内容\]
    id2[\节点中的内容/]

节点之间链接

注意-数量

带箭头的链接

1 2	graph LR a--->B

graph  LR 
    a--->B

不带箭头的链接

1 2	graph LR a---b

graph  LR 
    a---b

带文本不带箭头链接

1 2	graph LR a--链接内容---b---\|链接内容\|c

graph  LR 
    a--链接内容---b---|链接内容|c

带箭头和文本的链接

1 2	graph LR a--链接内容-->b-->\|链接内容\|c

graph LR 
    a--链接内容-->b-->|链接内容|c

虚线带箭头点链接

1 2	graph LR a-.->b-.链接内容.->c

graph LR
    a-.->b-.链接内容.->c

粗线链接厚链接

1 2	graph LR a==>b==链接内容==>c

graph LR
    a==>b==链接内容==>c

多个链接链接

用 & 来指向多个节点

1
2
3

graph LR
    a--->b--->
    c & d --->e & f

graph LR
    a--->b--->
    c & d --->e & f

新箭头（hexo无法解析）

1
2
3

flowchart LR
    A --o B
    B --x C

多方向箭头（hexo无法解析）

flowchart LR
    A o--o B
    B <--> C
    C x--x D

流程图中的每个节点最终都分配给渲染图形中的等级，即根据其链接的节点指定垂直或水平级别（取决于流程图方向）。默认情况下，链接可以跨越任何数量的排名，但您可以通过在链接定义中添加额外的破折号来要求任何链接比其他链接长。

如果有特殊字符可以用””包含起来或者使用转义字符替换

子图

格式
subgraph 名称
graph definition
end

graph TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end

序列图时序图

主要是参与者、操作

sequenceDiagram 
    participant a as ming1 
    participant b as ming2
    a->>b:ming2 你好吗?
    b->>a:很好~

sequenceDiagram 
    participant a as ming1 
    participant b as ming2
    a->>b:ming2 你好吗?
    b->>a:很好~

消息格式

[参与者][箭头][参与者]:消息内容

支持六种格式的箭头:

类型	描述
->	无箭头的实线
[>	无箭头的虚线
-»	带箭头的实线
–»	带箭头的虚线
-x	端端有十字的实线（异步）
+x	末尾有十字的虚线（异步）

激活、停用参与者定义参与者执行动作块

activate 开启动作 deactivate结束动作

sequenceDiagram
      participant a as ming1 
      participant b as ming2
      a->>b:ming2 你好
      activate b
      b->>a:很好~
      deactivate b
``` 
<pre class="mermaid">sequenceDiagram
      participant a as ming1 
      participant b as ming2
      a->>b:ming2 你好
      activate b
      b->>a:很好~
      deactivate b</pre>

##### 注释

>note \[right、left、over] 参与者:笔记内容

```text
sequenceDiagram 
    participant ming1
    participant ming2
    note right of ming1:ming1用户
    note over ming1,ming2:ming所有用户

sequenceDiagram 
    participant ming1
    participant ming2
    note right of ming1:ming1用户
    note over ming1,ming2:ming所有用户

循环

loop 条件
操作
end

sequenceDiagram
    ming1->>ming2:你好ming2
    loop 现在几点了？
        ming2->>ming1:不知道~
    end

sequenceDiagram
    ming1->>ming2:你好ming2
    loop 现在几点了？
        ming2->>ming1:不知道~
    end

alt 多条件操作

alt 条件
操作
else 条件
操作
end
opt 可选序列
操作
end

sequenceDiagram
    ming1->>ming2:你好
    alt 好
        ming2->>ming1:好
    else 不好
        ming2->>ming1:不好
    end
    opt 不知道好不好
        ming2->>ming1:不知道好不好
    end

sequenceDiagram
    ming1->>ming2:你好
    alt 好
        ming2->>ming1:好
    else 不好
        ming2->>ming1:不好
    end
    opt 不知道好不好
        ming2->>ming1:不知道好不好
    end

并行同时操作

par [操作 1]
… 操作内容 …
and [操作 2]
… 操作内容 …
and [操作 N]
… 操作内容 …
end

sequenceDiagram
    participant a as ming1 
    participant b as ming2 
    participant c as ming3 
    par 对ming2嘘寒问暖
        a ->> b: 饿吗
    and 对ming3嘘寒问暖
        a ->> c : 饿吗
    end

sequenceDiagram
    participant a as ming1 
    participant b as ming2 
    participant c as ming3 
    par 对ming2嘘寒问暖
        a ->> b : 饿吗
    and 对ming3嘘寒问暖
        a ->> c : 饿吗
    end

添加背景颜色

rect rgb(x,x,x)
…
end

rect rgba(x.x.x.x)
…
end

sequenceDiagram
    rect rgb(0,255,0)
        a->>b:好吗？
    end

sequenceDiagram
    rect rgb(0,255,0)
        a->>b:好吗？
    end

注释和序号

%% 注释一行
autonumber开启自动编号
\
1
2
3
4
5
sequenceDiagram
    autonumber
    a->>b:好吗？
    %% a->>c:怎么样?
    b->>a:很好

sequenceDiagram
    autonumber
    a->>b:好吗？
    %% a->>c:怎么样?
    b->>a:很好

类图状态图实体关系图用户旅程图甘特图指令图饼图不常用这里不做记录需要的话直接去官网:https://mermaid-js.github.io/mermaid/#/

总结

mermaid 提供了一种markdown语法来描述常用的图
对于我来说可能就流程图和时序图比较有用
至于其他的用到的时候再说吧

前言