Mermaid知识点总结1 - 基本知识点

Mermaid知识点总结1 - 基本知识点

之前总结Markdown时候看到的一个很好玩的工具，总结下方便以后的翻阅

这篇笔记主要是对Mermaid官网教程的翻译总结，想要查看原文可以访问此链接

mermaid n.美人鱼，也是项目的头像：

由于Mermaid内容较多，CSDN不支持那么长的博客，所以将分为几个部分进行叙述。

简介

基本介绍

Mermaid是一款基于JavaScript的绘图工具，基于Markdown语言动态渲染图标。

Mermaid的主要目的是帮助编写可视化文档，方便跟进项目进度。

图表类型

Flowchart

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

Sequence diagram

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

Gantt diagram

gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10

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

Class diagram

classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label

Git graph

gitGraph:
options
{
    "nodeSpacing": 150,
    "nodeRadius": 10
}
end
commit
branch newbranch
checkout newbranch
commit
commit
checkout master
commit
commit
merge newbranch

Entity Relationship Diagram

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

User Journey Diagram

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

安装

这一块基本没怎么看，安装Typora之后就可以直接编辑了

基本语法

在Mermaid官网上推荐了一个Mermaid在线编辑器，链接在此🔗

所有的图像都以图像类型的确定开始，之后是图像的相关定义和内容，这些语句决定了要生成图像的内容。

例：生成Entity Relationship Diagram，使用erDiagram确定图像类型，接下来定义其中的各个实体，如下内容所示：

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"

生成如下图像：

一些关键词可能会影响整个图片的生成，以下列出了一些关键词信息，要注意这些词汇或者标志的使用。

Diagram Breakers	Reason	Solution
Comments
%%{``}%%	与指令相似，渲染器报错	在%%包裹中，避免使用`{}
Flow-Charts、Sequence diagrams
‘end’	end可能会导致报错	将end使用引号包起来
Nodes inside Nodes	对于嵌套图形报错	使用引号包起来

所有图像类型在前文有所提及，概括为以下几种：

Flowchart

Sequence diagram

Class Diagram

State Diagram

Entity Relationship Diagram

User Journey

Gantt

Pie Chart

Requirement Diagram

Other Examples

对于以上这些图像，在Mermaid官网上均进行了分类介绍，下面的内容也将依据官网教程，进行分类总结。