简介
目前博客园支持mermaid的graph,subgraph,sequenceDiagram,gantt,classDiagram
mermaid(美人鱼), 是一个类似markdown,用文本语法来描述文档图形的工具。mermaid语法包含在博客园markdown中。
注释为:
插入为:(以下的例如只列举代码)
```mermaid
代码
```
或
| <body> |
| <div class="mermaid"> |
| 代码 |
| </div> |
| </body> |
graph(流程图)
关键字graph表示一个流程图的开始,同时需要指定该图的方向。如果内容包含特殊字符,可使用"字符"
,或参考这个的markdown转义。
方向
代码 |
方向 |
TB |
从上到下 |
TD |
从上到下 |
BT |
从下到上 |
RL |
从右到左 |
LR |
从左到右 |
T = TOP,B = BOTTOM,L = LEFT,R = RIGHT,D = DOWN |
|
例如: |
|
| graph LR; |
| A-->B; |
| B-->C; |
| C-->D; |
| D-->A; |
形状
代码 |
形状 |
变量 |
默认形状 |
变量[内容] |
矩形 |
变量(内容) |
圆矩形 |
变量((内容)) |
圆形 |
变量>内容] |
非对称形 |
变量 |
菱形 |
例如: |
|
| graph LR |
| A |
| B[b] |
| C(c) |
| D((d)) |
| E>e] |
| F{f} |
连线
话不多说,上表。注意:中间的符号或多或少都不行
代码 |
形状 |
A-->B |
箭头 |
A---B |
直连 |
A--text---B |
注释 |
A--text-->B |
箭头注释 |
A-.-B |
虚线直连 |
A-.->B |
虚线箭头 |
A-.text.-B |
虚线注释直连 |
A-.text.->B |
箭头虚线注释 |
A===B |
加粗直连 |
A==>B |
加粗箭头 |
A==text===B |
加粗注释直连 |
A==text==>B |
加粗注释箭头 |
| graph TB |
| A1-->B1 |
| A2---B2 |
| A3--text---B3 |
| A4--text-->B4 |
| A6-.-B5 |
| A6-.->B6 |
| A7-.text.-B7 |
| A8-.text.->B8 |
| A9===B9 |
| A10==>B10 |
| A11==text===B11 |
| A12==text==>B12 |
| |
样式
将特定样式例如较粗的边框或不同的背景颜色
| graph LR |
| id1(Start)-->id2(Stop) |
| style id1 fill:#f9f,stroke:#333,stroke-width:4px |
| style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5, 5 |
大例如
| graph LR |
| A[x] |
| B["if(x<0)"] |
| C["x=-x"] |
| D[return x] |
| A-->B-->C-->D |
| C-->D |
subgraph(子图)
格式
注意:外层可以使用里层中的节点,可以认为是全局变量
| graph LR |
| subgraph 名称 |
| 代码 |
| end |
| subgraph 名称 |
| 代码 |
| end |
大例如:
sequenceDiagram(序列图)
功能
- participant
参与者,相当先定义模块,可通过设定参与者(participant)的顺序控制展示顺序。
例如:
也可以使用别名:
| sequenceDiagram |
| participant A as A dog |
| participant B as Bob |
| A->B:Hello |
| note right of或left of 变量:Text |
| note over 变量左,变量右 :Text |
在没有else的情况下使用 opt(option,选择)
例如:
| sequenceDiagram |
| A->>B: Hello B, how are you? |
| alt is sick |
| B->>A:not so good :( |
| else is well |
| B->>A:good |
| end |
| opt another |
| B->>A:Thanks for asking |
| end |
- 激活停用
可以激活activate
或停用deactivate
。
| sequenceDiagram |
| Alice->>John: Hello John, how are you? |
| activate John |
| John-->>Alice: Great! |
| deactivate John |
| |
也可通过在消息箭头后面添加+
或-
后缀,这一种快捷方式标记:
| sequenceDiagram |
| Alice->>+John: Hello John, how are you? |
| John-->>-Alice: Great! |
| par [题目] |
| 代码 |
| and [题目] |
| 代码 |
| and [题目] |
| 代码 |
| end |
| sequenceDiagram |
| participant A |
| participant B |
| par A to B |
| A->B:Hello |
| and A to C |
| A->C:Hello |
| end |
连线
代码 |
形状 |
-> |
无箭头实线 |
->> |
有箭头实线 |
--> |
无箭头虚线 |
-->> |
有箭头虚线 |
-x |
带x实线 |
--x |
带x虚线 |
在必须后面加: ,以加以注释。 |
|
例如: |
|
| sequenceDiagram |
| A -> B : none |
| A ->> B : none |
| A --> B : none |
| A --> B : none |
| A -x B : none |
| A --x B : none |
gantt(甘特图)
甘特图是一类条形图,由Karol Adamiechi在1896年提出, 而在1910年Henry Gantt也独立的提出了此种图形表示。通常用在对项目终端元素和总结元素的开始及完成时间进行的描述
功能
代码 |
解释 |
title |
标题 |
dateFormat |
日期写入格式 |
axisFormat |
日期输出格式 |
section |
模块 |
done |
已经完成 |
Active |
当前正在进行 |
Future |
后续待处理 |
crit |
关键阶段 |
日期缺失 |
默认从上一项完成后 |
格式基本为:内容:关键是否,状态,变量,日期 |
|
日期写入格式
默认为:dateFormat YYYY-MM-DD
代码 |
例如 |
解释 |
YYYY |
2020 |
4位年数 |
YY |
20 |
2位年数 |
Q |
4 |
季度 |
M或MM |
1或12 |
月 |
D或DD |
1或31 |
日 |
Do |
1st或31st |
序数的日 |
DDD或DDDD |
1或365 |
年的日 |
X |
1410715640.579 |
秒 |
x |
1410715640579 |
毫秒 |
H或HH |
0或23 |
时 |
h或hh |
1或12 |
12时记时法 |
a或A |
am或pm |
12时的附加 |
m或mm |
0或59 |
分 |
s或ss |
0或59 |
秒 |
S |
0或9 |
十分之一秒 |
SS |
0或99 |
百分之一秒 |
SSS |
0或999 |
千分之一秒 |
Z或ZZ |
+12:00 |
从UTC偏移的时间 |
日期输出格式
默认为:axisFormat %Y-%m-%d
代码 |
解释 |
%a |
星期几的缩写 |
%A |
完整的工作日名称 |
%b |
月份的缩写 |
%B |
完整的月份名称 |
%c |
日期和时间如"%a%b%e%H:%M:%S%Y" |
%d |
以十进制数[01,31]补零的月份 |
%e |
以十进制数字表示的月份中带空格的日期[1,31] |
%H |
小时(24小时制)十进制数字[00,23] |
%I |
小时(12小时制)十进制数字[01,12] |
%j |
年中的天十进制数字[001,366] |
%m |
以十进制数字[01,12]表示的月份 |
%M |
分钟十进制数字[00,59] |
%L |
十进制数字[000,999]表示的毫秒 |
%p |
AM或PM |
%S |
秒十进制数字[00,61] |
%U |
一年中的第几周(星期日为一周的第一天)以十进制数[00,53]为准 |
%w |
工作日以十进制数字[0,6] |
%W |
一年中的第几周(星期一为一周中的第一天)以十进制数[00,53]为准 |
%x |
日期以“%m /%d /%Y”表示 |
%X |
时间以“%H:%M:%S”表示 |
%y |
不带世纪的十进制数字[00,99] |
%Y |
以世纪作为十进制数字的年份 |
%Z |
时区偏移量 |
%% |
文字“%”字符 |
大例如
| gantt |
| title AB |
| section A |
| A1 : done, 2020-01-01,2020-01-02 |
| A2 : active, 2020-01-02,1d |
| section B |
| B1 : future, 2020-01-03 |
| B2 : crit,active,b2,2020-01-03,48h |
| section C |
| C1 : done,after b2,1d |
classDiagram(类图)
类图是面向对象建模的主要构建块。它用于应用程序结构的一般概念建模,以及用于将模型转换为编程代码的详细建模。类图也可以用于数据建模。类图中的类表示主要元素,应用程序中的交互以及要编程的类。
就是大了点,以我现在的能力是无法改变的。
功能
- 类
UML提供了表示类成员的机制,例如属性和方法,以及有关它们的其他信息。图中一个类的单个实例包含三个隔离专区:
顶部的小节包含类的名称。它以粗体和居中打印,并且第一个字母大写。它还可能包含描述类性质的可选注释文本。
中间隔离专区包含类的属性。它们左对齐,第一个字母为小写。
底部的隔离区包含类可以执行的操作。它们也左对齐,首字母为小写。
- 使用关键字类(如)明确定义一个类class A.
- 通过它们之间的关系定义两个类A <|-- B
命名约定:类名应由字母数和下划线字符组成。
| classDiagram |
| class A |
| A <| |
| |
- 定义成员
根据括号()
是否存在来区分属性和函数/方法。与()
一起的被视为函数/方法,而其他被视为属性。
使用:(冒号)后跟成员名称来关联类的成员
| classDiagram |
| Animal <|-- Duck |
| Animal <|-- Fish |
| Animal <|-- Zebra |
| Animal : +int age |
| Animal : +String gender |
| Animal : +isMammal() |
| Animal : +mate() |
| Duck : +String beakColor |
| Duck : +swim() |
| Duck : +quack() |
| Fish : -int sizeInFeet |
| Fish : -canEat() |
| Zebra : +bool is_wild |
| Zebra : +run() |
- 能见度
为了指定类成员的可见性(即任何属性或方法),可以将这些符号放在成员名称的前面,但它是可选的:
1.+
Public
2.-
Private
| classDiagram |
| AA <|-- BB |
| AA : +a() |
| BB : -b() |
连线
大概定义为:
类型1 关系 类型2 : 注释
代码 |
代码 |
解释 |
`< |
--` |
`-- |
*-- |
--* |
实线菱头 |
o-- |
--o |
实线空菱 |
<-- |
--> |
实线箭头 |
-- |
-- |
实线直连 |
<.. |
..> |
实线箭头 |
`< |
..` |
`.. |
.. |
.. |
实线直连 |
例如:
| classDiagram |
| A1 <| |
| B1 |
| A2 * |
| B2 |
| A3 o |
| B3 |
| A4 < |
| B4 |
| A5 |
| B5 |
| A6 <.. B6 |
| B6..> C6 |
| A7 <|.. B7 |
| B7 ..|> C7 |
| A8 .. B8 |
| B8 .. C8 |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 上周热点回顾(2.17-2.23)
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)