mermaid程序化绘图——基础篇

最新推荐文章于 2025-07-04 00:28:12 发布

samxfb

最新推荐文章于 2025-07-04 00:28:12 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： mermaid sequenceDiagram 文章标签： markdown vscode graph

本文链接：https://blog.youkuaiyun.com/weixin_36623563/article/details/116029607

mermaid 同时被 2 个专栏收录

1 篇文章

订阅专栏

sequenceDiagram

1 篇文章

订阅专栏

本文聚焦于如何在Markdown文档中利用Mermaid语法高效绘制图表，包括流程图与flowchart示例，旨在简化程序员的绘图流程，提高工作效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简介

程序员都喜欢任何工作都与代码脚本搭上关系，比如绘图，不喜欢诸如ppt，visio等大型绘图软件复杂的操作，可移植性和可分享性（兼容性）都不尽人意，要想绘出漂亮的图表需要一定的门槛。
因此，一切以简洁为美，程序化绘图是一个很好的解决方案, 本文介绍使用markdown进行mermaid绘图的基础篇介绍。

环境

vscode+markdown+mermaid（vscode安装markdown和mermaid preview插件）

流程图

声明为graph或flowchart，区别是graph有棱角，而flowchart比较圆滑。

graph/flowchart TD/TB 代表从上到下绘制 top-down/top-bottom
graph/flowchart BT 代表从下到上绘制 bottom-top
graph/flowchart LR 代表从上到下绘制 left-right
graph/flowchart RL 代表从下到上绘制 right-left

graph示例

"```mermaid
graph TD
    node1((start)) --> node2[mid1]
    node2 ==> node3{yes or no?}
    node3 --yes--> node4(it's true)
    node3  --> | no |node5(it's false)
    node4 -.-> node6((end))
    node5 -.-> node6
```“(去除引号使用）

flowchart示例

"```mermaid
flowchart TD
    node1((start)) --> node2[mid1]
    node2 ==> node3{yes or no?}
    node3 --yes--> node4(it's true)
    node3  --> | no |node5(it's false)
    node4 -.-> node6((end))
    node5 -.-> node6
```“(去除引号使用）

常用线条和形状可对比代码了解，其实形状和线条的表示是可见即可得，如下：

[ ]代表矩形
{ }代表菱形
( )代表圆润矩形
(( ))代表圆形
–>代表实线箭头
-.->代表虚线箭头
==>代表粗实线箭头

时序图

声明为sequenceDiagram

"```mermaid
sequenceDiagram
    participant client
    note right of server: tcp三次握手
    client ->> server: syn
    server -->> client: syn+ack
    client ->> server: ack

    note right of server: tcp四次挥手
    client ->> server: fin
    server -->> client: ack
    loop
       server -->> server: server handle left data 
    end
    server -->> client: fin
    client ->> server: ack
```"(去除引号使用）