Markdown mermaid种草(1)_ mermaid简介

Markdown mermaid种草(1)_ mermaid简介

1 为什么要推荐mermaid

​ 本小白最近特别迷恋markdown及markdown相关的工具. 可能是因为正牌的编程技巧学不会，只能学学这种用来锦上添花（zhuangbility)的技巧. 开个玩笑，好的笔记好的呈现，可以为学习效果添砖加瓦.

​ Markdown语言怎么说呢，简直可以说是程序员之友了. 不管是github还是你现在正在查看的CSDN，以及各种笔记类产品，都支持这种图文并茂的编辑格式. 本小白首先推荐一款人人都推荐的markdown神器typora，这款产品目前是我使用markdown语言的主打产品，在体会了几种线上编辑器和几种笔记类软件之后，我还是觉得typora是本地端markdown编辑器的最优解（本小白个人见解，高手轻喷）.

​ 言归正传，来讲本篇的主角mermaid. 本小白之前以为，markdown也只能在文本、表格层面耍得很精彩了，直到最近偶然间发现了mermaid这个markdown语言的加成神器.

​ 可以说，mermaid基本上满足了程序员对工作中常用图表的编辑需求.冲这一点，就值得本小白的墙裂推荐.

2 mermaid简介

​ 直接先上一个mermaid的主页：mermaid传送门.

​ mermaid目前提供了以下类型的图形绘制：

编号	英文图名	中文图名
1	Flowchart	流程图
2	Sequence Diagram	序列图
3	Class Diagram	类图
4	State Diagram	状态图
5	Entity Relationship Diagram	实体关系图
6	User Journey	流水账
7	Gantt	甘特图
8	Pie Chart	饼图

Mermaid lets you represent diagrams using text and code.

​ mermaid的目标是让你可以用文本编辑器和代码来绘制图表. OK，既然是简介，那就每种图来一个示例吧(以下示例摘抄来的，没有版权保护)：

感谢CSDN支持了mermaid的多数绘图，但是甘特图是不是没有支持？？？

2.1 流程图

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

2.2 序列图

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!

2.3 类图

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

2.4 状态图

   stateDiagram-v2
    state fork_state <<fork>>
      [*] --> fork_state
      fork_state --> State2
      fork_state --> State3

      state join_state <<join>>
      State2 --> join_state
      State3 --> join_state
      join_state --> State4
      State4 --> [*]

2.5 实体关系图(ER图)

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

2.6 用户体验地图

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

2.7 甘特图

gantt
dateFormat  YYYY-MM-DD
axisFormat  %m-%d
title Adding GANTT diagram to mermaid
excludes weekdays 2021-01-10

section A section
Completed task            :done,    des1, 2021-01-16,2021-01-28
Active task               :active,  des2, 2021-01-29, 3d
Future task               :         des3, after des2, 5d
Future task2               :         des4, after des3, 5d

2.8 饼图

pie
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5