Project►Web

我常用的mermaid图表

mermaid图表速查 >Mermaid is a JavaScript based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams.

Mermaid 是一个基于 JavaScript 的图表绘制工具，可以在 Markdown 中使用。它支持多种图表类型，包括流程图、序列图、甘特图等。而且支持了许多你曾经用过的软件，详见 # 我的使用场景 主要使用 flowchart 和 gantt 其他目前用不到 2025-07-30 15:15:32 花了一个多小时看完了mermaid 官方所有的 tutorial。以下是我的感受： 1. mermaid可以实现多数你知道的图表类型。 2. mermaid的目的是文本表示图表，相比于图片是一种更适合出现在说明文档里的展示形式。 3. 只需要了解mermaid能实现什么，有个大致印象即可，用时在查看文档。

flowchart

node

1
2
3
4
5
6
7
8
9
10
flowchart RL
    A@{ shape: manual-file, label: "File Handling"}
    B@{ shape: manual-input, label: "User Input"}
    markdown["`This **is** _Markdown_`"]
    newLines["`Line1
    Line 2
    Line 3`"]
    markdown --> newLines
A --> C
B --> A

这个例子是错误的，只是展示了我的构建图表的思路 从以上的例子，观察到有两种声明节点的方式： 1. 使用 <node_id>@{shape_def:shape; label_def:content} 语法来声明节点的形状和content。 2. 使用 <node_id>["content"] 语法来声明节点的content。 然后再批量用箭头链接节点的<id>。

edge

样式 语法
箭头实线 -->
加粗箭头实线 ==>
箭头虚线 -.->
双向箭头 <->
双向虚线 <-.->
带有文字箭头 -- text -->
隐藏箭头（用于约束位置） ~~~

用边ID批量定义边样式

1
2
flowchart LR
  A <edge_id>@--> B
利用边id开启批量样式定义 
1
2
3
flowchart LR
  A e1@==> B
  e1@{ animate: true }
flowchart LR
    N1@{shape: circ, lable: "Animation"}
    N2@{shape: circ, lable: "true"}
    N3@{shape: circ, lable: "fast"}
    N4@{shape: circ, lable: "slow"}
    N1 e1@--> N2
    N1 e2@--> N3
    N1 e3@--> N4
    e1@{animate: true, speed: true}
    e2@{animate: true, speed: fast}
    e3@{animate: true, speed: slow}

block的构建是 Node定义 + 连接方式 + 边定义

subgraph

实现如下线框图 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
flowchart LR
  subgraph TOP
    direction TB
    subgraph B1
        direction RL
        i1 -->f1
    end
    subgraph B2
        direction BT
        i2 -->f2
    end
  end
  A --> TOP --> B
  B1 --> B2
flowchart LR
  subgraph TOP
    direction TB
    subgraph B1
        direction RL
        i1 -->f1
    end
    subgraph B2
        direction BT
        i2 -->f2
    end
  end
  A --> TOP --> B
  B1 --> B2

子图和母图的方向可以不同

实现链接跳转

flowchart LR
    A-->B
    B-->C
    C-->D
    click A callback "Tooltip for a callback"
    click B "https://www.github.com" "This is a tooltip for a link"
    click C call callback() "Tooltip for a callback"
    click D href "https://www.github.com" "This is a tooltip for a link"

gantt

https://mermaid.js.org/syntax/gantt.html

---
displayMode: compact
---
gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD

    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :a2, 2014-01-20, 25d
    Another one      :a3, 2014-02-10, 20d

pie chart

pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15

git graph

---
config:
  logLevel: 'debug'
  theme: 'base'
  gitGraph:
    showBranches: false
---
      gitGraph
        commit
        branch hotfix
        checkout hotfix
        commit
        branch develop
        checkout develop
        commit id:"ash" tag:"abc"
        branch featureB
        checkout featureB
        commit type:HIGHLIGHT
        checkout main
        checkout hotfix
        commit type:NORMAL
        checkout develop
        commit type:REVERSE
        checkout featureB
        commit
        checkout main
        merge hotfix
        checkout featureB
        commit
        checkout develop
        branch featureA
        commit
        checkout develop
        merge hotfix
        checkout featureA
        commit
        checkout featureB
        commit
        checkout develop
        merge featureA
        branch release
        checkout release
        commit
        checkout main
        commit
        checkout release
        merge main
        checkout develop
        merge release

sankey

sankey-beta

%% source,target,value
Electricity grid,Over generation / exports,104.453
Electricity grid,Heating and cooling - homes,113.726
Electricity grid,H2 conversion,27.14

packed diagram

演示数据包的结构，很适合展示bit的内容 貌似是beta版本的，目前我的渲染器不支持

---
title: "TCP Packet"
---
packet
0-15: "Source Port"
16-31: "Destination Port"
32-63: "Sequence Number"
64-95: "Acknowledgment Number"
96-99: "Data Offset"
100-105: "Reserved"
106: "URG"
107: "ACK"
108: "PSH"
109: "RST"
110: "SYN"
111: "FIN"
112-127: "Window"
128-143: "Checksum"
144-159: "Urgent Pointer"
160-191: "(Options and Padding)"
192-255: "Data (variable length)"

sequenceDiagram

sequenceDiagram
    Alice->>Bob: Hello Bob, how are you ?
    Bob->>Alice: Fine, thank you. And you?
    create participant Carl
    Alice->>Carl: Hi Carl!
    create actor D as Donald
    Carl->>D: Hi!
    destroy Carl
    Alice-xCarl: We are too many
    destroy Bob
    Bob->>Alice: I agree

用于演示交互 比如函数的传参

classDiagram

演示类的设计