本节我们来学习markdown的图表。
Markdown
本身并不支持图表,但 Markdown
在技术文章、文档、博客领域使用较多,所以非常多的 Markdown
解析器是支持图表扩展的。在支持图表扩展的 Markdown
解析器中,我们可以使用解析支持的图表语法来渲染图表。
由于图表不是 Markdown
标准,不同的Markdown
编辑器支持的图表类型也不同。
我们这里将会使用的是 Mermaid
。
图表的使用方法和围栏式代码块一样,但代码语言固定为
mermaid
,Markdown
解析器会把代码为mermaid
的代码块解析并渲染为图表。
流程图是一种用图形方式表示算法、程序或者工作流程的图形化工具。它使用不同的符号和线条来表示各个步骤、决策、输入输出和流程控制等。
在markdown中输入mermaid代码:
```mermaid
flowchart LR
A[直角矩形] -->|链接文本| B(圆角矩形)
B --> C{选择}
C -->|一| D[结果一]
C -->|二| E[结果二]
```
一个典型的流程图通常包含以下几个要素:
开始/结束符号:用来表示流程的开始和结束点,通常用一个椭圆形或者圆形来表示。
过程符号:用来表示具体的操作步骤,通常用矩形框来表示。矩形框中会写明具体的操作或者处理过程。
判断符号:用来表示决策或者判断的步骤,通常用菱形来表示。菱形中会写明判断条件,根据条件的不同,流程会分支到不同的路径。
输入/输出符号:用来表示输入或者输出的步骤,通常用梯形来表示。梯形中会写明输入或者输出的内容。
连接线:用来连接不同的步骤,表示流程的顺序和逻辑关系。连接线可以是直线、箭头线或者其他形状的线。
注释符号:用来添加说明或者注释,通常用矩形框或者椭圆形来表示。
```mermaid
sequenceDiagram
autonumber
par Action 1
Alice->>John: Hello John, how are you?
and Action 2
Alice->>Bob: Hello Bob, how are you?
end
Alice->>+John: Hello John, how are you?
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
Note right of John: John is perceptive
John-->>-Alice: I feel great!
loop Every minute
John-->>Alice: Great!
end
```
时序图主要由以下几个要素组成:
- 参与者(Actor):参与者是指在系统中扮演角色的实体,可以是人、软件模块、硬件设备等。在时序图中,参与者通常用一个矩形框来表示,框内写明参与者的名称。
- 对象(Object):对象是指在系统中具体的实例,可以是类的实例、组件的实例等。在时序图中,对象通常用一个矩形框来表示,框内写明对象的名称和类别。
- 生命周期(Lifeline):生命周期是指对象存在的时间段,在时序图中用一条垂直的虚线来表示。虚线上方表示对象的存在时期,下方表示对象不存在的时期。
- 消息(Message):消息是指对象之间的交互行为,可以是方法的调用、信号的发送等。在时序图中,消息通常用带箭头的直线来表示,箭头指向接收消息的对象。消息可以包含调用的方法名、参数和返回值等信息。
- 控制流(Control Flow):控制流是指消息的传递顺序和时序关系。在时序图中,控制流可以用数字或者条件语句来表示,表示消息的顺序执行或者分支执行。
```mermaid
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()
}
```
类图主要由以下几个要素组成:
- 类(Class):类是指具有相似属性和行为的对象的抽象。在类图中,类通常用一个矩形框来表示,框内写明类的名称。
- 属性(Attribute):属性是指类的特征或者状态,用于描述类的静态特性。在类图中,属性通常写在类的矩形框内,格式为“属性名 : 类型”。
- 方法(Method):方法是指类的行为或者操作,用于描述类的动态特性。在类图中,方法通常写在类的矩形框内,格式为“方法名(参数列表) : 返回类型”。
- 关系(Relationship):关系是指类之间的连接和依赖关系,用于描述类之间的交互和协作。常见的关系有继承、关联、聚合、组合和依赖等。
- 继承(Inheritance):表示一个类继承了另一个类的属性和方法,用一个带箭头的实线来表示,箭头指向父类。
- 关联(Association):表示类之间存在某种关联关系,用一条实线来表示。
- 聚合(Aggregation):表示类之间的关系是整体与部分的关系,用一条带空心菱形的实线来表示,菱形指向整体。
- 组合(Composition):表示类之间的关系是整体与部分的关系,并且部分不能独立存在,用一条带实心菱形的实线来表示,菱形指向整体。
- 依赖(Dependency):表示一个类依赖于另一个类,用一条带箭头的虚线来表示,箭头指向被依赖的类。
```mermaid
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
```
状态图由以下几个要素组成:
- 状态(State):状态是指对象所处的某种情况或条件。在状态图中,状态通常用一个圆角矩形框来表示,框内写明状态的名称。
- 转换(Transition):转换是指对象从一个状态转换到另一个状态的过程。在状态图中,转换通常用一个带箭头的实线来表示,箭头指向转换的目标状态。
- 事件(Event):事件是指触发状态转换的外部或内部事件。在状态图中,事件通常用一个小圆圈来表示,并与转换相连。
- 动作(Action):动作是指在状态转换过程中执行的操作或行为。在状态图中,动作通常写在转换的箭头上或者与转换相连。
```mermaid
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```
在实体关系图中,有以下几个基本要素:
- 实体(Entity):实体是指系统中具有独立存在和可区分性的事物或对象。在实体关系图中,实体通常用一个矩形框来表示,框内写明实体的名称。
- 属性(Attribute):属性是指实体所具有的特征或描述。在实体关系图中,属性通常用椭圆形框来表示,框内写明属性的名称。
- 关系(Relationship):关系是指实体之间的联系或连接。在实体关系图中,关系通常用菱形框来表示,框内写明关系的名称。
- 域(Domain):域是指属性的取值范围或约束条件。在实体关系图中,域通常用括号括起来,写在属性的旁边。
```mermaid
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
```
用户旅行图通常包括以下几个要素:
- 用户角色(User Role):用户旅行图中的用户角色指代使用产品或服务的不同用户类型,例如普通用户、管理员、游客等。
- 步骤(Steps):用户旅行图中的步骤描述了用户在使用产品或服务过程中所经历的各个阶段或环节,通常以时间顺序排列。
- 动作(Actions):动作表示用户在每个步骤中所执行的操作或行为,例如点击按钮、填写表单、查看信息等。
- 触点(Touchpoints):触点指代用户与产品或服务进行交互的方式或渠道,例如网站、手机应用、社交媒体等。
- 情感(Emotions):情感描述了用户在每个步骤中所感受到的情绪或体验,例如满意、困惑、失望等。
```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
```
甘特图通常包括以下几个要素:
- 任务(Tasks):甘特图中的任务表示项目中需要完成的具体工作,每个任务通常有一个名称和持续时间。
- 开始时间和结束时间(Start and End Dates):每个任务在甘特图中会用条形图的形式表示其开始时间和结束时间,通过条形图的长度来表示任务的持续时间。
- 依赖关系(Dependencies):任务之间可能存在着前后关系或依赖关系,甘特图可以通过箭头或连接线来表示任务之间的依赖关系。
- 里程碑(Milestones):里程碑是项目中的重要节点或关键事件,通常用一个特殊的符号或标记来表示在甘特图中。
- 资源分配(Resource Allocation):甘特图可以显示每个任务分配给哪些资源或团队成员,帮助项目经理进行资源调度和任务分配。
```mermaid
requirementDiagram
requirement test_req {
id: 1
text: the test text.
risk: high
verifymethod: test
}
element test_entity {
type: simulation
}
test_entity - satisfies -> test_req
```
需求图通常包括以下几个主要元素:
1.系统(System):需求图的核心是系统,它表示正在开发的软件系统或系统的一部分。
2. 角色(Actor):角色代表与系统进行交互的外部实体,可以是人、组织、其他系统等。角色可以是系统的用户、管理员、第三方服务提供商等。
3. 用例(Use Case):用例描述了系统与角色之间的交互场景或功能需求。每个用例表示一个系统功能或一个用户故事,用于描述系统对外部实体的响应和行为。
4. 关系(Relationship):需求图中的关系用于表示系统、角色和用例之间的关联和依赖关系。常见的关系包括关联关系、扩展关系、包含关系等。
```mermaid
gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
```
Git记录图通常包括以下几个主要元素:
- 提交节点(Commit Nodes):每个提交节点代表一个代码提交或一个版本的快照。提交节点通常由一串哈希值来标识,它们按照时间顺序排列,形成一个提交链。
- 分支(Branches):分支是代码仓库中的一个独立的开发线,它可以代表一个功能分支、修复分支或主线分支等。每个分支由一个指针来表示,指向最新的提交节点。
- 合并(Merge):合并表示将两个或多个分支的更改合并到一起。在记录图中,合并通常以箭头或连接线的形式表示,指示两个分支的合并点。
- 标签(Tags):标签是一个有意义的名称或标记,用于标识某个特定的提交节点。标签可以用来表示版本发布、重要的里程碑或稳定的快照。
```mermaid
C4Context
title System Context diagram for Internet Banking System
Enterprise_Boundary(b0, "BankBoundary0") {
Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
Person(customerB, "Banking Customer B")
Person_Ext(customerC, "Banking Customer C", "desc")
Person(customerD, "Banking Customer D", "A customer of the bank,
with personal bank accounts.")
System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
Enterprise_Boundary(b1, "BankBoundary") {
SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
System_Boundary(b2, "BankBoundary2") {
System(SystemA, "Banking System A")
System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
}
System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
Boundary(b3, "BankBoundary3", "boundary") {
SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
}
}
}
BiRel(customerA, SystemAA, "Uses")
BiRel(SystemAA, SystemE, "Uses")
Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
Rel(SystemC, customerA, "Sends e-mails to")
UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
```
C4模型图主要包括以下四个层次:
- 顶层上下文图(System Context Diagram):顶层上下文图是C4模型的最高层,用于展示系统与外部实体之间的关系。它将系统作为一个黑盒,与外部实体(如用户、其他系统)进行交互。顶层上下文图帮助团队理解系统的边界和外部依赖关系。
- 容器图(Container Diagram):容器图展示了系统内部的容器(Container)和它们之间的关系。容器可以是物理或虚拟的,如应用程序、数据库、Web服务等。容器图帮助团队理解系统的组成部分和它们之间的通信和依赖关系。
- 组件图(Component Diagram):组件图展示了容器内部的组件(Component)和它们之间的关系。组件是系统中的功能单元,可以是类、模块、库等。组件图帮助团队理解系统的内部结构和组件之间的关联。
- 代码级别图(Code Level Diagram):代码级别图是C4模型的最底层,用于展示组件内部的类、接口和代码级别的细节。代码级别图帮助团队理解组件的具体实现和代码之间的关系。