17----图表
本节我们来学习markdown的图表。
-
Markdown本身并不支持图表，但Markdown在技术文章、文档、博客领域使用较多，所以非常多的Markdown解析器是支持图表扩展的。在支持图表扩展的Markdown解析器中，我们可以使用解析支持的图表语法来渲染图表。 -
由于图表不是
Markdown标准，不同的Markdown编辑器支持的图表类型也不同。
我们这里将会使用的是Mermaid。
图表的使用方法和围栏式代码块一样，但代码语言固定为
mermaid,Markdown解析器会把代码为mermaid的代码块解析并渲染为图表。
1. 流程图：
-
流程图是一种用图形方式表示算法、程序或者工作流程的图形化工具。它使用不同的符号和线条来表示各个步骤、决策、输入输出和流程控制等。
-
在markdown中输入mermaid代码：
```mermaid
flowchart LR
A[直角矩形] -->|链接文本| B(圆角矩形)
B --> C{选择}
C -->|一| D[结果一]
C -->|二| E[结果二]
```
- 渲染后输出下表：
链接文本
一
二
直角矩形
圆角矩形
选择
结果一
结果二
一个典型的流程图通常包含以下几个要素：
开始/结束符号：用来表示流程的开始和结束点，通常用一个椭圆形或者圆形来表示。
过程符号：用来表示具体的操作步骤，通常用矩形框来表示。矩形框中会写明具体的操作或者处理过程。
判断符号：用来表示决策或者判断的步骤，通常用菱形来表示。菱形中会写明判断条件，根据条件的不同，流程会分支到不同的路径。
输入/输出符号：用来表示输入或者输出的步骤，通常用梯形来表示。梯形中会写明输入或者输出的内容。
连接线：用来连接不同的步骤，表示流程的顺序和逻辑关系。连接线可以是直线、箭头线或者其他形状的线。
注释符号：用来添加说明或者注释，通常用矩形框或者椭圆形来表示。
- 通过这些符号和线条的组合，流程图可以清晰地展示出一个算法、程序或者工作流程的执行过程和逻辑关系。它可以帮助人们更好地理解和分析复杂的流程，并且可以用于沟通、教学和文档编写等方面。
2. 时序图：
- 时序图（Sequence Diagram）是一种用于描述对象之间交互行为的图形化工具。它展示了对象之间的消息传递顺序和时序关系，能够清晰地展示系统或者软件的执行流程。
- 输入：
```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
```
- 输出：
Alice John Bob Hello John, how are you? 1 Hello Bob, how are you? 2 par [Action 1] [Action 2] Hello John, how are you? 3 John, can you hear me? 4 Hi Alice, I can hear you! 5 John is perceptive I feel great! 6 Great! 7 loop [Every minute] Alice John Bob
时序图主要由以下几个要素组成：
- 参与者（Actor）：参与者是指在系统中扮演角色的实体，可以是人、软件模块、硬件设备等。在时序图中，参与者通常用一个矩形框来表示，框内写明参与者的名称。
- 对象（Object）：对象是指在系统中具体的实例，可以是类的实例、组件的实例等。在时序图中，对象通常用一个矩形框来表示，框内写明对象的名称和类别。
- 生命周期（Lifeline）：生命周期是指对象存在的时间段，在时序图中用一条垂直的虚线来表示。虚线上方表示对象的存在时期，下方表示对象不存在的时期。
- 消息（Message）：消息是指对象之间的交互行为，可以是方法的调用、信号的发送等。在时序图中，消息通常用带箭头的直线来表示，箭头指向接收消息的对象。消息可以包含调用的方法名、参数和返回值等信息。
- 控制流（Control Flow）：控制流是指消息的传递顺序和时序关系。在时序图中，控制流可以用数字或者条件语句来表示，表示消息的顺序执行或者分支执行。
- 通过这些要素的组合，时序图可以清晰地展示对象之间的交互行为和时序关系，帮助人们理解和分析系统的执行流程。时序图通常用于需求分析、系统设计和软件开发等阶段，是一种非常重要的建模工具。
3. 类图：
- 类图（Class Diagram）是一种用于描述系统中类和类之间关系的图形化工具。它展示了系统中的类、类之间的关系以及类的属性和方法等信息，是面向对象分析与设计中最常用的建模工具之一。
- 输入：
```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()
}
```
- 输出：
Animal
+int age
+String gender
+isMammal()
+mate()
Duck
+String beakColor
+swim()
+quack()
Fish
-int sizeInFeet
-canEat()
Zebra
+bool is_wild
+run()
类图主要由以下几个要素组成：
- 类（Class）：类是指具有相似属性和行为的对象的抽象。在类图中，类通常用一个矩形框来表示，框内写明类的名称。
- 属性（Attribute）：属性是指类的特征或者状态，用于描述类的静态特性。在类图中，属性通常写在类的矩形框内，格式为“属性名 : 类型”。
- 方法（Method）：方法是指类的行为或者操作，用于描述类的动态特性。在类图中，方法通常写在类的矩形框内，格式为“方法名(参数列表) : 返回类型”。
- 关系（Relationship）：关系是指类之间的连接和依赖关系，用于描述类之间的交互和协作。常见的关系有继承、关联、聚合、组合和依赖等。
- 继承（Inheritance）：表示一个类继承了另一个类的属性和方法，用一个带箭头的实线来表示，箭头指向父类。
- 关联（Association）：表示类之间存在某种关联关系，用一条实线来表示。
- 聚合（Aggregation）：表示类之间的关系是整体与部分的关系，用一条带空心菱形的实线来表示，菱形指向整体。
- 组合（Composition）：表示类之间的关系是整体与部分的关系，并且部分不能独立存在，用一条带实心菱形的实线来表示，菱形指向整体。
- 依赖（Dependency）：表示一个类依赖于另一个类，用一条带箭头的虚线来表示，箭头指向被依赖的类。
- 通过这些要素的组合，类图可以清晰地展示系统中的类和类之间的关系，帮助人们理解和分析系统的结构和行为。类图通常用于需求分析、系统设计和软件开发等阶段，是一种非常重要的建模工具。
4. 状态图：
- 状态图（State Diagram）是一种用于描述系统中对象状态和状态之间转换的图形化工具。它主要用于建模和描述对象的行为，特别是在面向对象系统中。
- 输入：
```mermaid
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
```
- 输出：
Still
Moving
Crash
状态图由以下几个要素组成：
- 状态（State）：状态是指对象所处的某种情况或条件。在状态图中，状态通常用一个圆角矩形框来表示，框内写明状态的名称。
- 转换（Transition）：转换是指对象从一个状态转换到另一个状态的过程。在状态图中，转换通常用一个带箭头的实线来表示，箭头指向转换的目标状态。
- 事件（Event）：事件是指触发状态转换的外部或内部事件。在状态图中，事件通常用一个小圆圈来表示，并与转换相连。
- 动作（Action）：动作是指在状态转换过程中执行的操作或行为。在状态图中，动作通常写在转换的箭头上或者与转换相连。
- 通过这些要素的组合，状态图可以清晰地展示对象的状态和状态之间的转换关系，帮助人们理解和分析系统的行为。状态图通常用于需求分析、系统设计和软件开发等阶段，是一种非常重要的建模工具。
5. 实体关系图：
- 实体关系图（Entity-Relationship Diagram，简称ER图）是一种用于描述系统中实体、属性和实体之间关系的图形化工具。它主要用于数据库设计和数据建模，帮助人们理解和分析系统中的数据结构和关系。
- 输入：
```mermaid
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```
- 输出：
CUSTOMER ORDER LINE-ITEM DELIVERY-ADDRESS places contains uses
在实体关系图中，有以下几个基本要素：
- 实体（Entity）：实体是指系统中具有独立存在和可区分性的事物或对象。在实体关系图中，实体通常用一个矩形框来表示，框内写明实体的名称。
- 属性（Attribute）：属性是指实体所具有的特征或描述。在实体关系图中，属性通常用椭圆形框来表示，框内写明属性的名称。
- 关系（Relationship）：关系是指实体之间的联系或连接。在实体关系图中，关系通常用菱形框来表示，框内写明关系的名称。
- 域（Domain）：域是指属性的取值范围或约束条件。在实体关系图中，域通常用括号括起来，写在属性的旁边。
- 通过这些要素的组合，实体关系图可以清晰地展示实体、属性和实体之间的关系，帮助人们理解和设计系统的数据结构和关系。实体关系图通常用于数据库设计、系统分析和软件开发等阶段，是一种非常重要的数据建模工具。
6. 用户旅行图：
- 用户旅行图（User Journey Map）是一种用于描述用户在使用产品或服务过程中的体验和行为的图形化工具。它主要用于用户体验设计和产品开发，帮助团队了解用户的需求、期望和痛点，从而优化产品的设计和用户体验。
- 输入：
```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
```
- 输出：
Cat Me
Go to work Me
Make tea Me
Go upstairs Me Cat
Do work
Go home Me
Go downstairs Me
Sit down My working day
Go to work
Make tea
Go upstairs
Do work
Go home
Go downstairs
Sit down
用户旅行图通常包括以下几个要素：
- 用户角色（User Role）：用户旅行图中的用户角色指代使用产品或服务的不同用户类型，例如普通用户、管理员、游客等。
- 步骤（Steps）：用户旅行图中的步骤描述了用户在使用产品或服务过程中所经历的各个阶段或环节，通常以时间顺序排列。
- 动作（Actions）：动作表示用户在每个步骤中所执行的操作或行为，例如点击按钮、填写表单、查看信息等。
- 触点（Touchpoints）：触点指代用户与产品或服务进行交互的方式或渠道，例如网站、手机应用、社交媒体等。
- 情感（Emotions）：情感描述了用户在每个步骤中所感受到的情绪或体验，例如满意、困惑、失望等。
- 通过绘制用户旅行图，团队可以更好地理解用户在使用产品或服务过程中的体验和行为，发现用户的需求和痛点，从而进行产品的优化和改进。用户旅行图可以帮助团队深入了解用户的视角，提升产品的用户体验，增强用户忠诚度，并为产品的设计和开发提供指导和支持。
7. 甘特图：
- 甘特图（Gantt Chart）是一种用于展示项目进度和任务时间安排的图表工具。它以时间为横轴，任务为纵轴，通过条形图的形式来展示任务的开始时间、结束时间和持续时间。甘特图可以帮助团队和项目经理清晰地了解项目的进度、任务的依赖关系和时间安排，从而有效地进行项目管理和资源调度。
- 输入：
```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
```
- 输出：
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
甘特图通常包括以下几个要素：
- 任务（Tasks）：甘特图中的任务表示项目中需要完成的具体工作，每个任务通常有一个名称和持续时间。
- 开始时间和结束时间（Start and End Dates）：每个任务在甘特图中会用条形图的形式表示其开始时间和结束时间，通过条形图的长度来表示任务的持续时间。
- 依赖关系（Dependencies）：任务之间可能存在着前后关系或依赖关系，甘特图可以通过箭头或连接线来表示任务之间的依赖关系。
- 里程碑（Milestones）：里程碑是项目中的重要节点或关键事件，通常用一个特殊的符号或标记来表示在甘特图中。
- 资源分配（Resource Allocation）：甘特图可以显示每个任务分配给哪些资源或团队成员，帮助项目经理进行资源调度和任务分配。
- 通过甘特图，项目团队可以清晰地了解项目的时间安排、任务的依赖关系和进度情况，帮助团队成员更好地协调工作、分配资源和优化进度。甘特图也可以用于与利益相关者进行沟通和共享项目进展情况，提高项目的可视化和透明度。
8. 需求图：
- 需求图（Requirement Diagram）是一种用于描述系统需求的图形化表示工具，它是统一建模语言（UML）的一部分。需求图主要用于捕捉和可视化系统的需求，帮助团队和利益相关者更好地理解和沟通需求，以支持系统的设计和开发。
- 输入：
```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
```
- 输出：
<> test_req Id: 1 Text: the test text. Risk: High Verification: Test <> test_entity Type: simulation Doc Ref: None <>
需求图通常包括以下几个主要元素：
1.系统（System）：需求图的核心是系统，它表示正在开发的软件系统或系统的一部分。
2. 角色（Actor）：角色代表与系统进行交互的外部实体，可以是人、组织、其他系统等。角色可以是系统的用户、管理员、第三方服务提供商等。
3. 用例（Use Case）：用例描述了系统与角色之间的交互场景或功能需求。每个用例表示一个系统功能或一个用户故事，用于描述系统对外部实体的响应和行为。
4. 关系（Relationship）：需求图中的关系用于表示系统、角色和用例之间的关联和依赖关系。常见的关系包括关联关系、扩展关系、包含关系等。
- 通过需求图，团队可以清晰地了解系统的功能需求、角色的参与和系统与外部实体的交互方式。需求图可以帮助团队捕捉和分析系统需求，支持系统的设计和开发过程。同时，需求图也可以用于与利益相关者进行沟通和共享需求，以提高需求的共识和理解。
9. Git记录图：
- Git记录图（Git commit graph）是Git版本控制系统中的一种图形化表示工具，用于展示代码仓库中的提交记录和分支的演变历史。Git记录图可以帮助开发者更好地理解代码仓库的变化和分支之间的关系。
- 输入：
```mermaid
gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
```
- 输出：
- csdn好像无法输出，可能是不支持。
Git记录图通常包括以下几个主要元素：
- 提交节点（Commit Nodes）：每个提交节点代表一个代码提交或一个版本的快照。提交节点通常由一串哈希值来标识，它们按照时间顺序排列，形成一个提交链。
- 分支（Branches）：分支是代码仓库中的一个独立的开发线，它可以代表一个功能分支、修复分支或主线分支等。每个分支由一个指针来表示，指向最新的提交节点。
- 合并（Merge）：合并表示将两个或多个分支的更改合并到一起。在记录图中，合并通常以箭头或连接线的形式表示，指示两个分支的合并点。
- 标签（Tags）：标签是一个有意义的名称或标记，用于标识某个特定的提交节点。标签可以用来表示版本发布、重要的里程碑或稳定的快照。
- 通过Git记录图，开发者可以清晰地了解代码仓库中的提交历史、分支的演变和合并操作。记录图可以帮助开发者追溯代码的变化、理解分支之间的关系，并支持团队协作和代码版本管理。
10. C4模型图：
- C4模型图（C4 Model）是一种用于软件架构设计和可视化的简洁、层次化的模型。它由Simon Brown提出，旨在帮助团队更好地理解和沟通软件系统的架构。
- 输入：
```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")
```
- 输出：
- csdn好像无法输出，可能是不支持。
C4模型图主要包括以下四个层次：
- 顶层上下文图（System Context Diagram）：顶层上下文图是C4模型的最高层，用于展示系统与外部实体之间的关系。它将系统作为一个黑盒，与外部实体（如用户、其他系统）进行交互。顶层上下文图帮助团队理解系统的边界和外部依赖关系。
- 容器图（Container Diagram）：容器图展示了系统内部的容器（Container）和它们之间的关系。容器可以是物理或虚拟的，如应用程序、数据库、Web服务等。容器图帮助团队理解系统的组成部分和它们之间的通信和依赖关系。
- 组件图（Component Diagram）：组件图展示了容器内部的组件（Component）和它们之间的关系。组件是系统中的功能单元，可以是类、模块、库等。组件图帮助团队理解系统的内部结构和组件之间的关联。
- 代码级别图（Code Level Diagram）：代码级别图是C4模型的最底层，用于展示组件内部的类、接口和代码级别的细节。代码级别图帮助团队理解组件的具体实现和代码之间的关系。
- C4模型图的层次结构使得团队可以从高层次的概览逐步深入到系统的细节。它提供了一种简洁而直观的方式来描述和沟通软件架构，帮助团队成员共享和理解系统的设计和结构。
