Mermaid---Text-based diagram tool

0 Preface/Foreword

基于文本的图形工具

1 Graphviz

Graphviz：Graph visualization software，图形可视化软件

Pros: 

• Flexible
• Extendible

Cons:

• learning curve

Graphviz

2 Mermaid

 Mermaid，美人鱼，一个类似markdown，用文本语言来描述文档图形（流程图、时序图、甘特图）的工具，可以在文档中嵌入一个段mermaid文本来生成SVG形式的图形。

SVG：Scalable Vector Graphics，可缩放矢量图形，是一种描述二维图形的语言。

Pros:

• Native support in GitLab
• Easy to learn

Cons:

• Not flexible

GitLab Flavored Markdown (GLFM) | GitLab

2.1 绘制的图形类别

• 流程图，Flowchart
• 状态图，State Diagram
• 时序图/顺序图，Sequence Diagram
• 甘特图，Gantt
• ER图/实体关系图，Entity Relationship
• 类图，Class Diagram
• 饼图，Pie Chart
• 需求图，Requirement Diagram
• GitGraph
• C4C图
• 思维导图，Mindmaps
• 时间线，Timelines

Mermaid的基本语法结构如下：

 #Diagrams definitions begin with a declaration of the diagram type

        #Define the blocks

        #Link the blocks

2.2 基本图形元素

2.2.1 节点（Node）

```mermaid
graph
    id
```

2.2.2 含有描述的节点

```mermaid
graph
    id[This is text in the box]
```