当前位置： 首页 > news >正文

工欲善其事，必先利其器，Markdown和Mermaid的梦幻联动（2）

news 来源：原创 2025/5/11 13:34:16

该文章Github地址：https://github.com/AntonyCheng/typora-notes/tree/master/chapter03-mermaid

在此介绍一下作者开源的SpringBoot项目初始化模板（Github仓库地址：https://github.com/AntonyCheng/spring-boot-init-template & CSDN文章地址：https://blog.csdn.net/AntonyCheng/article/details/136555245），该模板集成了最常见的开发组件，同时基于修改配置文件实现组件的装载，除了这些，模板中还有非常丰富的整合示例，同时单体架构也非常适合SpringBoot框架入门，如果觉得有意义或者有帮助，欢迎Star & Issues & PR！

上一章：工欲善其事，必先利其器，Markdown和Mermaid的梦幻联动（1）

5.类图(ClassDiagram)

  • 在软件工程中，统一建模语言（UML）中的类图是一种静态结构图，它通过显示系统的类，属性，操作方法以及对象之间的关系来描述系统的结构。
  • 类图是面向对象建模的主要构建块，它用于应用程序结构的一般概念建模，以及将模型转换为编程代码的详细建模，类图也可用于数据建模，类图中的类代表主要元素，应用程序中的交互以及要编程的类。
  • 例如下：
animal
+int age
+String gender
+isMammal()
+mate()
duck
+String beakColor
+swim()
+quack()
fish
-int sizeInFeet
-canEat()
zebra
+bool is_wild
+run() 
classDiagram
animal <|-- duck
animal <|-- fish
animal <|-- zebra
animal : +int age
animal : +String gender
animal : +isMammal()
animal : +mate()
class duck{
+String beakColor
+swim()
+quack()
}
class fish{
-int sizeInFeet
-canEat()
}
class zebra{
+bool is_wild
+run()
}

5.1.句法

  • UML提供了表示类成员的机制，例如属性和方法，以及关于它们的附加信息，图中类的单个实例包含三个元素。
    1. 顶部：它是类的名称，它以粗体居中打印，第一个字母大写，他还可能包含描述类性质的可选注释文本。
    2. 中部：它是类的属性，它们是左对齐，第一个字母是小写的（String写法本就如此）。
    3. 底部：它是类的操作，它们是左对齐，第一个字母是小写的（String写法本就如此）。
BankAccount
+String owner
+Bigdecimal balance
+deposit(amount)
+withdraw(amount) 
classDiagram
class BankAccount{
+String owner
+Bigdecimal balance
+deposit(amount)
+withdraw(amount)
}

5.2.定义一个类

  • 定义一个类有两种方式，一种是class ClassName，另一种是ClassName <|-- SubClassName，前者是通过关键字class显式定义，后者是通过两类的关系隐式定义：
1900sharehome
1900ShareHome
Typora 
classDiagram
class 1900sharehome
1900ShareHome <|-- Typora
  • 命名要求：类名是由字母，数字（允许使用unicode）和下划线字符组成。

5.3.定义类的成员

  • UML提供了表示类成员的机制，例如属性和方法，以及关于它们的附加信息。
  • Mermaid根据括号()是否存在来区分属性和函数/方法。那些()被视为函数/方法，而其他被视为属性。
  • 定义类成员的方法也有两种：
bankaccount
+String owner
+BigDecimal balance
+deposit(amount)
+withdrawal(amount) 
classDiagram
class bankaccount{
+String owner
+BigDecimal balance
+deposit(amount)
+withdrawal(amount)
}
BankAccount
+String owner
+BigDecimal balance
+deposit(amount)
+withdrawal(amount) 
classDiagram
class BankAccount
BankAccount : +String owner
BankAccount : +BigDecimal balance
BankAccount : +deposit(amount)
BankAccount : +withdrawal(amount)

  1. 返回类型：可以用返回的数据类型来定义：
    BankAccount
    +String owner
    +BigDecimal balance
    +deposit(amount) : int
    +withdrawal(amount) : bool 
    classDiagram
class BankAccount{
+String owner
+BigDecimal balance
+deposit(amount)int
+withdrawal(amount)bool
}

  2. 通用类型：可以用通用类型来进行成员的定义，例如List<int>,用于字段，参数和返回类型，方法是将类型包含在~内，且该方法不支持嵌套：
    Class<Shape>
    int id
    List<int> position
    -List<String> messages
    setPoints(List<int> points)
    getPoints() : List<int>
    +setMessages(-List<String>messages)
    +getMessages() : List<Sring> 
    classDiagram
class Class~Shape~{
int id
List~int~ position
setPoints(List~int~ points)
getPoints() List~int~
}
Class : -List~String~ messages
Class : +setMessages(-List~String~messages)
Class : +getMessages() List~Sring~

  3. 可视度：对于一些有特殊可视性的类成员，一般把以下元素放置在成员名字之前：

    字符意义
    +公开
    -私人
    #受保护
    ~内部
    ClassName
    +Public
    -Private
    #Protected
    <Package/Internal 
    classDiagram
class ClassName{
+Public
-Private
#Protected
~Package/Internal
}

5.4.定义关系

  • 它是一种建立在类和项目图之上，包括特殊的逻辑链接的总称：
[ClassA][Arrow][ClassB]
  • 以下是目前在UML下所支持的关系定义：
样式描述
<|–实心三角箭头
*–菱形箭头
o–空心菱形箭头
–>向量箭头
–实线
…>虚线向量箭头
…|>虚线三角箭头
…虚线
classA
classB
classC
classD
classE
classF
classG
classH
classI
classJ
classK
classL
classM
classN
classO
classP 
classDiagram
classA <|-- classB
classC *-- classD
classE o-- classF
classG <-- classH
classI -- classJ
classK <.. classL
classM <|.. classN
classO .. classP
  • 我们还可以在两个关系之间使用描述性的标签：
[ClassA][Arrow][ClassB]:LabelText
Inheritance
Composition
Aggregation
Association
Link(Solid)
Dependency
Realization
Link(Dashed)
classA
classB
classC
classD
classE
classF
classG
classH
classI
classJ
classK
classL
classM
classN
classO
classP 
classDiagram
classA --|> classB : Inheritance
classC --* classD : Composition
classE --o classF : Aggregation
classG --> classH : Association
classI -- classJ : Link(Solid)
classK ..> classL : Dependency
classM ..|> classN : Realization
classO .. classP : Link(Dashed)
  • 双向箭头：
样式意义
<|--左实心三角箭头实线
<--左向量箭头实线
--*实心菱形箭头实线
--o空心菱形箭头实线
--|>右实心箭头实线
-->右向量箭头实线
样式意义
<|..左实心三角箭头虚线
<..左向量箭头虚线
..*实心菱形箭头虚线
..o空心菱形箭头虚线
..|>右实心箭头虚线
..>右向量箭头虚线

5.5.基数/关系的多重性

  • 类图中的多重性或基数表示一个类的实例链接到另一类的一个实体的数量，例如：
    一家公司将有一名或多名员工，但每一位员工只为一家公司工作。
  • 多重符号放置在定义关系的末端：
基数选项意义
1只有一个
0…1零或一
1…*一个或多个
*****许多
nn个
0…n零到n个
1…n一到n个
  • 我们将多重符号定义在**中：
[ClassA]"Number"[Arrow]"Number"[ClassB]:LabelText
1
n
A
B 
classDiagram
A"1"--|>"n"B

5.6.类的注释

  • 可以用特定的标记文本来注释类，就像类的元数据一样，清楚地表明其性质。一些常见的注释实例如下：
    1. <<Interface>>表示一个接口类
    2. <<abstract>>表示抽象类
    3. <<Service>>表示一个服务器
    4. <<enumeration>>表示一个举例类
  • 用法如下例：
«interface»
ClassName
Element!
Element!() 
classDiagram
class ClassName
<<interface>> ClassName
ClassName : Element!
ClassName : Element!()

这是一个比较复杂的用法，下面来一个简单的：

«interface»
ClassName
element!
element!() 
classDiagram
class ClassName{
<<interface>>
element!
element!()
}
  • 代码的注释：用%%进行注释，例如下：
ClassName
red
blue() 
classDiagram
%% class Classname{
%%red
%%blue()
%%}
class ClassName{
red
blue()
}

5.7.设置图表的方向

  • 我们可以很清楚的看出，类图中是包含有方向的，所以我们可以设置类图的方向：
comment
comment
Student
-idCard:IdCard
+id()
IdCard
-id : int
-name : string
+id()
Bike
-id : int
-name : String
+id() 
classDiagram
class Student{
-idCard:IdCard
+id()
}
class IdCard{
-id : int
-name : string
+id()
}
class Bike{
-id : int
-name : String
+id()
}
Student --o IdCard : comment
Bike --o IdCard : comment

6.状态图

  • 状态图是一种在计算机科学和相关领域中用于描述系统行为的图。状态图要求所描述的系统由有限数量的状态组成；有时情况确实如此，而在其他情况下有时这是一个合理的抽象。
  • Mermaid 可以渲染状态图。语法大体与plantUml 中使用的语法保持一致，因为这将使用户更容易在mermaid 和plantUml 之间共享图表。

例如下：
Still
Moving
Crash 
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]

比较旧的渲染器：

stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
  • 幸运的是，Typora能够兼容两者的渲染

6.1.状态

  • 一个状态能够以多种方式去声明，最简单的一种声明方式就是单独作为一个id描述：
s1 
stateDiagram-v2
s1
  • 另外一种方式就是用一个描述来简化id：
This is a state description 
stateDiagram-v2
state "This is a state description" as s2
  • 再或者我们可以用：来引出id:
This is a state description 
stateDiagram-v2
s2:This is a state description

6.2.状态转换

  • 我们通常用-->来作为状态转换的语法，当我们要定义两个状态之间的转换时：
s1
s2 
stateDiagram-v2
s1-->s2
  • 我们也可以在状态转换的同时添加一个描述：
This is a transition
s1
s2 
stateDiagram-v2
s1-->s2:This is a transition

6.3.开始和结束

  • 在Mermaid里面有两个特殊的状态——开始和结束，我们通常用[*]来表示它们：
A 
stateDiagram-v2
[*]-->A
A-->[*]

6.4.嵌套状态

  • 在实际生活中，我们经常运用多维的状态图来描述一个系统内部的状态关系，为了定义复合状态，我们需要使用到一个state关键字，后面跟一个id和{}，例如下：
A
S1
S2 
stateDiagram-v2
[*]-->A
state A{
	[*]-->S1
	S1-->S2
	S2-->[*]
}
  • 我们在来一个多层嵌套：
A
B
C
D
E 
stateDiagram-v2 
[*]-->A 
state A {
	[*]-->B
	state B {
		[*]-->C
		state C {
			[*]-->D
			state D {
				[*]-->E
				E-->[*]
			}
		}
	}
}
  • 我么还可以对其进行分支描述：
First
F
Second
S
Third
T 
stateDiagram-v2
[*]-->First
state First {
	[*]-->F
	F-->[*]
}
First-->Second
state Second {
	[*]-->S
	S-->[*]
}
First-->Third
state Third {
	[*]-->T
	T-->[*]
}
Second-->[*]
Third-->[*]

6.5.选择分支

  • 实际生活当中我们经常运用状态图中的选择分支来描述问题，例如下：
if n<0
if n>=0
IsPositive
if_else
False
True 
stateDiagram-v2
[*] --> IsPositive
IsPositive --> if_else
if_else --> False: if n<0
if_else --> True: if n>=0

6.6.叉

  • 可以使用 <<fork>> <<join>> 在图中指定一个叉：
State2
State3
State4 
stateDiagram-v2
    state fork_state <<fork>>
      [*] --> fork_state
      fork_state --> State2
      fork_state --> State3
      state join_state <<join>>
      State2 --> join_state
      State3 --> join_state
      join_state --> State4
      State4 --> [*]

6.7.添加笔记
The state with a note
Important information! You can write notes.
State2
This is the note to the left. 
stateDiagram-v2
    State1: The state with a note
    %%第一种方法
    note right of State1
        Important information! You can write notes.
    end note
    %%第一种方法
    State1 --> State2
    %%第二种方法
    note left of State2 : This is the note to the left.
    %%第二种方法

6.8.并发
Active
123
123
A
B
456
456
C
D
789
789
E
F 
stateDiagram-v2
    [*] --> Active
    state Active {
        [*] --> A
        A --> B : 123
        B --> A : 123
        --
        [*] --> C
        C --> D : 456
        D --> C : 456
        --
        [*] --> E
        E --> F : 789
        F --> E : 789
    }

6.9.注释

  • 和以前介绍的一样，我们在Mermaid里面用%%来进行语句的注释。

7.实体关系图

  • ER 建模的从业者几乎总是将实体类型简称为实体。例如，CUSTOMER实体类型将简称为CUSTOMER实体。但从技术上讲，实体是实体类型的抽象实例，这就是 ER 图所显示的 - 抽象实例，以及它们之间的关系。
  • 例如下：
customer order line-item delivery-adderss places contains uses 
erDiagram
customer ||--o{ order : places
order ||--|{ line-item : contains
customer }|..|{ delivery-adderss : uses
  • 箭头样式：
左箭头右箭头意义
`o``o
``
}oo{零个或者多个（无上限）
`}``

8.生活备忘录

  • 生活备忘录在Mermaid中算是最简单的图了，没有过多的语法，就下面这一个实例就能实现这样一个有趣的图像：
Cat Me
Go to work
Go to work Me
Make tea
Make tea Me
Go upstairs
Go upstairs Me Cat
Do work
Do work
Go home
Go home Me
Go downstairs
Go downstairs Me
Sit down
Sit down My working day 
journey
title My working day
%% section表示选择要做的事情大体方向，其下是事情的各个细节
section Go to work
%% Doing : number : poeple (number代表心情，5为满分，0为最低分)(poeple代表人物)
Make tea:5:Me
Go upstairs:3:Me
Do work:1:Me,Cat
section Go home
Go downstairs:5:Me
Sit down:5:Me

9.甘特图

  • 甘特图是一种条形图，由 Karol Adamiecki 于 1896 年首次开发，1910 年代由 Henry Gantt 独立开发，用于说明项目进度和完成任何项目所需的时间。 甘特图说明项目的终端元素和摘要元素的开始日期和完成日期之间的天数。

9.1.简述

  • 甘特图将每个计划任务记录为一个从左向右延伸的连续条。 x 轴代表时间，y 轴记录不同的任务及其完成的顺序。
  • **重要的是要记住，当特定于任务的日期、天数或时间集合被“排除”时，甘特图将通过向右扩展相同的天数来适应这些更改，而不是通过在内部创建间隙任务。 **
  • 然而，如果排除的日期在两个设置为连续开始的任务之间，则排除的日期将被图形跳过并留空，并且在排除的日期结束后将开始下一个任务。
  • 甘特图可用于跟踪项目完成前所需的时间，但它也可用于以图形方式表示“非工作日”，只需稍作调整。
2021-01-01 2021-02-01 2021-03-01 2021-04-01 2021-05-01 2021-06-01 A task Another task B task Another task A B A Gantt Diagram 
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section A
A task : a1,2021-01-01,30d
Another task : after a1,20d
section B
B task : 2021-03-21,40d
Another task : 40d

9.2.句法

2014-01-07 2014-01-09 2014-01-11 2014-01-13 2014-01-15 2014-01-17 2014-01-19 2014-01-21 2014-01-23 2014-01-25 2014-01-27 Completed task Completed task in the critical line Implement parser and jison Describe gantt syntax Active task Create tests for parser Add gantt diagram to demo page Add another diagram to demo page Future task Future task in critical line Describe gantt syntax Add gantt diagram to demo page Add another diagram to demo page Future task2 Create tests for renderer Add to mermaid Functionality added A section Critical tasks Documentation Last section Adding GANTT diagram functionality to mermaid 
gantt
    dateFormat  YYYY-MM-DD
    title       Adding GANTT diagram functionality to mermaid
    excludes    weekends
    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)

    section A section
    Completed task            :done,    des1, 2014-01-06,2014-01-08
    Active task               :active,  des2, 2014-01-09, 3d
    Future task               :         des3, after des2, 5d
    Future task2              :         des4, after des3, 5d

    section Critical tasks
    Completed task in the critical line :crit, done, 2014-01-06,24h
    Implement parser and jison          :crit, done, after des1, 2d
    Create tests for parser             :crit, active, 3d
    Future task in critical line        :crit, 5d
    Create tests for renderer           :2d
    Add to mermaid                      :1d
    Functionality added                 :milestone, 2014-01-25, 0d

    section Documentation
    Describe gantt syntax               :active, a1, after des1, 3d
    Add gantt diagram to demo page      :after a1  , 20h
    Add another diagram to demo page    :doc1, after a1  , 48h

    section Last section
    Describe gantt syntax               :after doc1, 3d
    Add gantt diagram to demo page      :20h
    Add another diagram to demo page    :48h
  • 我们也可以在已经有计划的项目过程中加入其他的项目：
2021-01-01 2021-01-03 2021-01-05 2021-01-07 2021-01-09 2021-01-11 2021-01-13 2021-01-15 2021-01-17 2021-01-19 2021-01-21 2021-01-23 2021-01-25 2021-01-27 2021-01-29 2021-01-31 2021-02-01 2021-02-03 2021-02-05 2021-02-07 apple banana dog cherry 
gantt
apple : a,2021-01-01,30d
banana : crit,b,2021-01-04,4d
cherry : active,c,after a,7d
dog : d,after b,3d
  • 标题：关键字——title
  • 您可以将图表分成不同的部分，例如将项目的不同部分（如开发和文档）分开。为此，请以section关键字开始一行并为其命名。（请注意，与整个图表的标题)不同，此名称是必需的。
  • 关键节点：我们还可以在图表里添加关键节点，类似于里程碑，他们表示单一的时刻，用关键字milestone来表示：
milestone_name milestone : milestone, m, BeginTime, KeepingTime
  • 如上例，关键节点的确切时间就是：

T I M E = B e g i n T i m e + K e e p i n g T i m e 2 TIME=\frac{BeginTime+KeepingTime}{2} TIME=2BeginTime+KeepingTime​

  • 实例如下：
17:50 17:55 18:00 18:05 18:10 18:15 Initial milestone taska2 taska3 Final milestone 
gantt 
dateFormat HH:mm
axisFormat %H:%M
Initial milestone : milestone, m1, 17:49,2min
taska2 : 10min
taska3 : 5min 
Final milestone : milestone, m2, 18:14, 2min

9.3.设置时间

  • 默认格式：dateFormat YYYY-MM-DD
  • 其他Mermaid支持的格式如下：
输入样例描述
YYYY2021四位数年份
YY21两位数年份
Q1……4季度
M MM1……12月份（数字）
MMM MMMMJanuary……Dec月份（英文）
D DD1……31日（月中）
Do1st……31st日（英文缩写排序）
DDD DDDD1……365日（年中）
X1410715640.579Unix 时间戳
x1410715640579Unix ms 时间戳
H HH0……23小时（24时制）
h hh1……12小时（12时制，和a、A搭配使用）
a Aam pm上、下午
m mm0……59分钟
s ss0……59秒
S0……9分秒
SS0……99厘秒
SSS0……999毫秒
Z ZZ+12:00时差
  • 时间的格式化输出：
axisFormat %Y-%m-%d
  • 其他Mermaid所支持的格式化输出：
%a - 缩写的工作日名称。
%A - 完整的工作日名称。
%b - 缩写的月份名称。
%B - 完整的月份名称。
%c - 日期和时间，如“%a %b %e %H:%M:%S %Y”。
%d - 十进制数 [01,31] 月份的零填充日期。
%e - 十进制数 [1,31] 的月份中以空格填充的日期；相当于 %_d。
%H - 小时（24 小时制），十进制数 [00,23]。
%I - 小时（12 小时制）作为十进制数 [01,12]。
%j - 以十进制数表示的一年中的第几天 [001,366]。
%m - 十进制数的月份 [01,12]。
%M - 十进制数 [00,59] 的分钟。
%L - 十进制数的毫秒数 [000, 999]。
%p - 上午或下午。
%S - 秒为十进制数 [00,61]。
%U - 一年中的周数（星期日作为一周的第一天）作为十进制数 [00,53]。
%w - 工作日为十进制数 [0(Sunday),6]。
%W - 一年中的周数（星期一作为一周的第一天）作为十进制数 [00,53]。
%x - 日期，如“%m/%d/%Y”。
%X - 时间，如“%H:%M:%S”。
%y - 没有世纪的年份，十进制数 [00,99]。
%Y - 以世纪为十进制数的年份。
%Z - 时区偏移量，例如“-0700”。
%% - 文字“%”字符。

10.饼状图(Pie)

  • 饼图（或圆图）是一种圆形统计图形，它被分成多个切片来说明数字比例。 在饼图中，每个切片的弧长（及其中心角和面积）与其代表的数量成正比。 虽然它因其类似于切片的馅饼而得名，但它的呈现方式有多种变化。
  • 如下例：
50% 40% 10% pie_title A B C 
pie title pie_title
"A":50
"B":40
"C":10

10.1.句法

  • 在Mermaid中画一个饼图是非常容易的：

关键字以pie开始，随后设置标题title，然后将每个标签Label用引号" "括起来，随后跟上冒号:，最后写上该标签所占比例即可。

pie 
titie TitleName
"ElementA":numberA
"ElementB":numberB
···

10.2.例子

18% 14% 10% 7% 8% 43% Mobile Phone Sumsung Apple Xiaomi Vivo OPPO Others 
pie 
title Mobile Phone
"Sumsung":18.4
"Apple":13.6
"Xiaomi":9.9
"Vivo":7.4
"OPPO":8.0
"Others":42.6

相关文章：

  • 十三、软考-系统架构设计师笔记-层次式架构设计理论与实践
  • QT使用RabbitMQ
  • sqllab第十八关通关笔记
  • 【研发日记】Matlab/Simulink技能解锁(二)——在Matlab Function编辑窗口Debug
  • 腾讯春招后端一面（八股篇）
  • 【数据结构与算法】：选择排序与快速排序
  • Cesium 获取 3dtileset的包围盒各顶点坐标
  • ​【已解决】npm install​卡主不动的情况
  • 深入浅出：Objective-C中使用MWFeedParser下载豆瓣RSS
  • git svn混用
  • 如何使用 CSS 中的 :root 伪类选择器
  • java学习之路-程序逻辑控制
  • 工具-百度云盘服务-身份认证
  • MySQL大小写敏感、MySQL设置字段大小写敏感
  • 【CKA模拟题】查询消耗CPU最多的Pod
  • CIDR网络地址、广播地址、网段区间计算说明与计算工具
  • ai智能外呼机器人的功能，机器人对话常用语模板搭建
  • SpringBoot使用log4j2将日志记录到文件及自定义数据库
  • C语言案例01, 输入两个整数,获得两个数加减乘除的值,持续更新中~
  • java操作HBase
  • 贵州省总工会党组成员、副主席梁伟接受审查调查
  • 中非民间对话在赞比亚举行
  • 工程院院士葛世荣获聘任为江西理工大学校长
  • 最快3天开通一条定制公交线路！上海推出服务平台更快响应市民需求
  • 中华人民共和国和俄罗斯联邦在纪念中国人民抗日战争、苏联伟大卫国战争胜利和联合国成立80周年之际关于进一步深化中俄新时代全面战略协作伙伴关系的联合声明
  • 范志毅跨界归来做青训，探索中国足球人才培养新模式