Markdown画图及Mermaid入门

简介

目前博客园支持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;
A
B
C
D

形状

代码 形状
变量 默认形状
变量[内容] 矩形
变量(内容) 圆矩形
变量((内容)) 圆形
变量>内容] 非对称形
变量 菱形
例如:
graph LR
A
B[b]
C(c)
D((d))
E>e]
F{f}
A
b
c
d
e
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
text
text
text
text
text
text
A1
B1
A2
B2
A3
B3
A4
B4
A5
B5
A6
B6
A7
B7
A8
B8
A9
B9
A10
B10
A11
B11
A12
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
x
if(x<0)
x=-x
return x

subgraph(子图)

格式

注意:外层可以使用里层中的节点,可以认为是全局变量

graph LR
subgraph 名称
代码
end
subgraph 名称
代码
end

大例如:

g3
g2
g1
b3
a3
b2
a2
b1
a1

sequenceDiagram(序列图)

功能

  • participant
    参与者,相当先定义模块,可通过设定参与者(participant)的顺序控制展示顺序。
    例如:
partcipant A
partcipant B
BABA
partcipant B
partcipant A
ABAB

也可以使用别名:

sequenceDiagram
participant A as A dog
participant B as Bob
A->B:Hello
BobA dogBobA dogHello
  • note
    注释,格式如下
note right of或left of 变量:Text
note over 变量左,变量右 :Text
  • 循环
loop 题目
代码
end
  • 选择
alt 题目
代码
else
代码
end

在没有else的情况下使用 opt(option,选择)

opt 题目
代码
end

例如:

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
BABAalt[is sick][is well]opt[another]Hello B, how are you?not so good :(goodThanks for asking
  • 激活停用
    可以激活activate或停用deactivate
sequenceDiagram
Alice->>John: Hello John, how are you?
activate John
John-->>Alice: Great!
deactivate John
JohnAliceJohnAliceHello John, how are you?Great!

也可通过在消息箭头后面添加+-后缀,这一种快捷方式标记:

sequenceDiagram
Alice->>+John: Hello John, how are you?
John-->>-Alice: Great!
JohnAliceJohnAliceHello John, how are you?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
CBACBApar[A to B][A to C]HelloHello

连线

代码 形状
-> 无箭头实线
->> 有箭头实线
--> 无箭头虚线
-->> 有箭头虚线
-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
BABAnonenonenonenonenonenone

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
Syntax error in textmermaid version 10.9.0

classDiagram(类图)

类图是面向对象建模的主要构建块。它用于应用程序结构的一般概念建模,以及用于将模型转换为编程代码的详细建模。类图也可以用于数据建模。类图中的类表示主要元素,应用程序中的交互以及要编程的类。
就是大了点,以我现在的能力是无法改变的。

功能


  • UML提供了表示类成员的机制,例如属性和方法,以及有关它们的其他信息。图中一个类的单个实例包含三个隔离专区:

顶部的小节包含类的名称。它以粗体和居中打印,并且第一个字母大写。它还可能包含描述类性质的可选注释文本。
中间隔离专区包含类的属性。它们左对齐,第一个字母为小写。
底部的隔离区包含类可以执行的操作。它们也左对齐,首字母为小写。

  • 定义类
    定义类有两种方法:
  1. 使用关键字类(如)明确定义一个类class A.
  2. 通过它们之间的关系定义两个类A <|-- B
    命名约定:类名应由字母数和下划线字符组成。
classDiagram
class A
A <|-- B
A
B
  • 定义成员
    根据括号()是否存在来区分属性和函数/方法。与()一起的被视为函数/方法,而其他被视为属性。
    使用:(冒号)后跟成员名称来关联类的成员
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()
Animal
+int age
+String gender
+isMammal()
+mate()
Duck
+String beakColor
+swim()
+quack()
Fish
-int sizeInFeet
-canEat()
Zebra
+bool is_wild
+run()
  • 能见度
    为了指定类成员的可见性(即任何属性或方法),可以将这些符号放在成员名称的前面,但它是可选的:
    1.+Public
    2.-Private
classDiagram
AA <|-- BB
AA : +a()
BB : -b()
AA
+a()
BB
-b()

连线

大概定义为:

类型1 关系 类型2 : 注释

代码 代码 解释
`< --` `--
*-- --* 实线菱头
o-- --o 实线空菱
<-- --> 实线箭头
-- -- 实线直连
<.. ..> 实线箭头
`< ..` `..
.. .. 实线直连

例如:

classDiagram
A1 <|-- B1
B1 --|> C1
A2 *-- B2
B2 --* C2
A3 o-- B3
B3--o C3
A4 <-- B4
B4--> C4
A5 -- B5
B5-- C5
A6 <.. B6
B6..> C6
A7 <|.. B7
B7 ..|> C7
A8 .. B8
B8 .. C8
A1
B1
C1
A2
B2
C2
A3
B3
C3
A4
B4
C4
A5
B5
C5
A6
B6
C6
A7
B7
C7
A8
B8
C8
posted @   LYinMX  阅读(9084)  评论(0编辑  收藏  举报
编辑推荐:
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 上周热点回顾(2.17-2.23)
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
点击右上角即可分享
微信分享提示