mermaid从入门到入土

Posted by spk xu on Wed 18 May 2022

概述

什么是Mermaid？
Mermaid是一种基于Javascript的绘图工具，使用类似于Markdown的语法，使用户可以方便快捷地通过代码创建图表。

项目地址：https://github.com/mermaid-js/mermaid（需要将梯子设置成全局模式才能访问）

怎么使用Mermaid？

使用特定的Mermaid渲染器；

使用集成了Mermaid渲染功能的Markdown编辑器，如Typora。使用时，需要将代码块的语言选择为Mermaid。

Typora是宇宙第一笔记软件，不接受反驳

作为转载者,我得说一句,自从丫的收费后,就不看了.所以我选择了Obsidian.目前用的也很high,个人版免费,还不限制功能.必须实力做一波广告.

Mermaid能绘制哪些图？

  • 饼状图：使用pie关键字，具体用法后文将详细介绍
  • 流程图：使用graph关键字，具体用法后文将详细介绍
  • 序列图：使用sequenceDiagram关键字
  • 甘特图：使用gantt关键字
  • 类图：使用classDiagram关键字
  • 状态图：使用stateDiagram关键字
  • 用户旅程图：使用journey关键字

讲解

朱元璋家谱简图，圆圈代表皇帝

graph LR
emperor((朱八八))-.子.->father(朱五四)-.子.->朱四九-.子.->朱百六
朱雄英--长子-->朱标--长子-->emperor
emperor2((朱允炆))--次子-->朱标
朱樉--次子-->emperor
朱棡--三子-->emperor
emperor3((朱棣))--四子-->emperor
emperor4((朱高炽))--长子-->emperor3
子
子
子
长子
长子
次子
次子
三子
四子
长子
朱八八
朱五四
朱四九
朱百六
朱雄英
朱标
朱允炆
朱樉
朱棡
朱棣
朱高炽

以上是概述，下面详细介绍饼状图和流程图的语法。其他图的语法可访问上文给出的项目地址，自行学习。（记得挂梯子）

饼状图

在线渲染器：Online FlowChart & Diagrams Editor（需要梯子）

语法

  • 从pie关键字开始图表
  • 然后使用title关键字及其在字符串中的值，为饼图赋予标题。（这是可选的）

  • 数据部分

    • 在" "内写上分区名。
    • 分区名后使用:作为分隔符
    • 分隔符后写上数值，最多支持2位小数——数据会以百分比的形式展示

  • 实例

    pie
title 为什么总是宅在家里？
"喜欢宅" : 15
"天气太热或太冷" : 20
"穷" : 500
3%4%93%为什么总是宅在家里？喜欢宅天气太热或太冷穷

流程图

在线渲染器：Online FlowChart & Diagrams Editor（需要挂梯子）

实例

graph LR
A[Start] --> B{Is it?};
B -- Yes --> C[OK];
C --> D[Rethink];
D --> B;
B -- No ----> E[End];
Yes
No
Start
Is it?
OK
Rethink
End

方向

用于开头，声明流程图的方向。

  • graph或graph TB或graph TD：从上往下
  • graph BT：从下往上
  • graph LR：从左往右
  • graph RL：从右往左

结点

  • 无名字的结点：直接写内容，此时结点边框为方形；节点内容不能有空格
  • 有名字的结点：节点名后书写内容，内容左右有特定符号，结点边框由符号决定；节点内容可以有空格

下面的实例中，没有为graph指定方向，因此默认是从上往下的。但是由于各个结点之前没有箭头，所以他们都处于同一排。

graph
默认方形
id1[方形]
id2(圆边矩形)
id3([体育场形])
id4[[子程序形]]
id5[(圆柱形)]
id6((圆形))
默认方形
方形
圆边矩形
体育场形
子程序形
圆柱形
圆形
graph
id1{菱形}
id2{{六角形}}
id3[/平行四边形/]
id4[\反向平行四边形\]
id5[/梯形\]
id6[\反向梯形/]
菱形
六角形
平行四边形
反向平行四边形
梯形
反向梯形

连线样式

  • 实线箭头：分为无文本箭头和有文本箭头，有文本箭头有2种书写格式
    graph LR
a-->b--文本1-->c-->|文本2|d
文本1
文本2
a
b
c
d
  • 粗实线箭头：分为无文本箭头和有文本箭头
    graph LR
a==>b==文本==>c
文本
a
b
c
  • 虚线箭头：分为无文本箭头和有文本箭头
    graph LR
a-.->b-.文本.->c
文本
a
b
c
  • 无箭头线：即以上三种连线去掉箭头后的形式
    graph LR
a---b
b--文本1---c
c---|文本2|d
d===e
e==文本3===f
f-.-g
g-.文本.-h
文本1
文本2
文本3
文本
a
b
c
d
e
f
g
h
  • 其他连线：需要将graph关键字改为flowchart，除了新增加的连线形式外，上面三种线的渲染效果也会不同
    flowchart LR
A o--o B
B <--> C
C x--x D

旧连线 --文本--> 也会不同
文本
A
B
C
D
旧连线
也会不同
  • 延长连线：增加相应字符即可，如下图中的B到E，连线中增加了一个-。字符可多次添加。
    graph LR
A[Start] --> B{Is it?};
B -->|Yes| C[OK];
C --> D[Rethink];
D --> B;
B --->|No| E[End];
Yes
No
Start
Is it?
OK
Rethink
End

连线形式

  • 直链
    graph LR
A -- text --> B -- text2 --> C
text
text2
A
B
C
  • 多重链：可以使用&字符，或单个描述
    graph 
   a --> b & c--> d

   A & B--> C & D

    X --> M
    X --> N
    Y --> M
    Y --> N
a
b
c
d
A
B
C
D
X
M
N
Y

其他

  • 子图：需要将graph关键字改为flowchart，在代码段的开始加入subgraph，尾部加入end
    flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
    one --> two
    three --> two
    two --> c2
three
one
c2
c1
two
b2
b1
a2
a1
  • 注释：在行首加入%%即可。
    graph LR
%%这是一条注释，在渲染图中不可见
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]
Link text
One
Two
Hard edge
Round edge
Decision
Result one
Result two

示例

1.Flowcharts

graph LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
Link text
One
Two
Hard edge
Round edge
Decision
Result one
Result two

2.Sequence diagrams

sequenceDiagram
    autonumber
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
AliceJohnBobloop[Healthcheck]Rational thoughts!Hello John, how are you?1Fight against hypochondria2Great!3How about you?4Jolly good!5AliceJohnBob

3.Class diagrams

     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()

4.State diagrams

    stateDiagram-v2
        [*] --> First
        First --> Second
        First --> Third

        state First {
            [*] --> fir
            fir --> [*]
        }

        state Second {
            [*] --> sec
            sec --> [*]
        }

        state Third {
            [*] --> thi
            thi --> [*]
        }
First
fir
Second
sec
Third
thi

5.Entity Relationship Diagrams

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
CUSTOMERORDERLINE-ITEMDELIVERY-ADDRESSplacescontainsuses
    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"
CUSTOMERDELIVERY-ADDRESSORDERINVOICEORDER-ITEMPRODUCT-CATEGORYPRODUCThasplacesliable forreceivescoversincludescontainsordered in

6.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
My working dayCatMe
Go to work
Go to workMe
Make tea
Make teaMe
Go upstairs
Go upstairsMeCat
Do work
Do work
Go home
Go homeMe
Go downstairs
Go downstairsMe
Sit down
Sit downMy working day

7.Gantt diagrams

    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

        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
Adding GANTT diagram functionality to mermaid2014-01-072014-01-092014-01-112014-01-132014-01-152014-01-172014-01-192014-01-212014-01-232014-01-252014-01-27Completed 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 A sectionCritical tasksDocumentationLast sectionAdding GANTT diagram functionality to mermaid

8.Pie chart diagrams

    pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15
79%17%3%Pets adopted by volunteersDogsCatsRats

git

    gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    commit
    checkout main
    merge develop
    commit
    commit
maindevelop0-55a7a4d1-2a6064a2-a5582e73-c89b9715-a256aec6-db40741

tags: 转载