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]
```

2.2.3 图形（graph）

```mermaid
graph
    start-->stop
```

 ```mermaid
graph
    start---->stop
```

 

2.2.4 comment（注释，解释） 

注释符号：使用两个%% 

2.2.5 subgraph（子图） 

```mermaid
graph LR
    %% This is a comment from A to B node
    start-->stop
    subgraph ide
    new-->stop
    end
```

2.3  流程图方向（Flowchart orientation）

2.3.1 从上到下

TB(Top to Bottom)/TD(Top to Down)

2.3.2 从下到上

BT（Bottom to Top）

2.3.3 从左到右

LR（Left to Right）

2.3.4 从右到左

RL（Right to Left）

2.3.5 指向自己 

 

2.4 节点形状（Node Shape）  

2.4.1 sharp edges

默认节点为尖角边。

2.4.2 Round edges

 2.4.3 stadium-shaped（体育场形状）

 

 2.4.4 Subroutine（子程序）

 2.4.5 Circle（圆）

2.4.6 cylindrical（圆柱形）

 

2.4.7 asymmeric（不对称的）

2.4.8 hexagon（六边形）

2.4.9 diamond/rhombus（菱形）

2.4.10 parallelogram（平行四边形）

 

2.4.11 parallelogram alt（反平行四边形）

2.4.11 trapezoid alt（反梯形）

2.4.11 trapezoid（梯形）

 

2.5 连接方式（Link）

2.5.1 Open link（开口连接）

2.5.2 link with text（带有文本的连接）

2.5.3 Arrow-head（箭头）

2.5.4 Arrow-head with text（带文本的箭头）

2.5.5 Dotted link

2.5.6 Dotted link with text

2.5.7 Thick link

2.5.8 Thick link with text

2.5.9 Chaining links

2.6 Rank & Minimum length

 规则如下：

• Each node is assigned to a rank
• links can span any number of ranks
• extra dashes result in higher rank

2.7 Style & Class

2.7.1 Style

2.7.2 Class

 

2.8 流程图 Flowchart 

流程图由节点（Nodes）、形状（Edges）、箭头（Arrows）、线条（Lines）组成。

2.9 ER diagram

代码如下： 

 ```mermaid
erDiagram
    CUSTOMER }|..|{ DELIVERY-ADDRESS : has
    CUSTOMER ||--O{ ORDER : places
    CUSTOMER ||--O{ INVOICE : "liable for"
    DELIVERY-ADDRESS ||-- O{ ORDER : receives
    INVOICE ||--|{ ORDER : covers
    ORDER ||--|{ ORDER-ITEM : includes
    PRODUCT-CATEGORY ||--|{ PRODUCT : contains
    PRODUCT ||--O{ ORDER-ITEM : "ordered in"
```

图形如下：