Markdown Mermaid 流程图

Markdown Mermaid 流程图语法笔记，以及 GitHub、Hexo-Next-Theme 和相关编辑器的支持
一切从简，少用图，多用流程图

Markdown语法

Mermaid 语法
代码块选择 mermaid 语言

sequenceDiagram

语法说明

sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!

Alice John Hello John, how are you? Great! Alice John

sequenceDiagram
    Alice->>John: Hello John, how are you?
    activate John
    John-->>Alice: Great!
    deactivate John

Alice John Hello John, how are you? Great! Alice John

%% Example of sequence diagram
  sequenceDiagram
    Alice->>Bob: Hello Bob, how are you?
    alt is sick
    Bob->>Alice: Not so good :(
    else is well
    Bob->>Alice: Feeling fresh like a daisy
    end
    opt Extra response
    Bob->>Alice: Thanks for asking
    end

Alice Bob Hello Bob, how are you? Not so good :( Feeling fresh like a daisy alt [is sick] [is well] Thanks for asking opt [Extra response] Alice Bob

Flowchart

Flowchart

graph LR
   a --> b & c--> d

a

b

c

d

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

One

Two

Hard edge

Round edge

Decision

Result one

Result two

graph TB
    A & B--> C & D

A

B

C

D

graph TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end

three

two

one

c2

c1

b2

b1

a2

a1

State Diagram

语法说明

stateDiagram-v2
    State1: The state with a note
    note right of State1
        Important information! You can write
        notes.
    end note
    State1 --> State2
    note left of State2 : This is the note to the left.

The state with a note

Important information! You can write
notes.

State2

This is the note to the left.

Entity Relationship Diagram

语法说明

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

CUSTOMER ORDER LINE-ITEM DELIVERY-ADDRESS places contains uses

User Journey

语法说明

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

Cat Me

Go to work

Go to work Me

Make tea

Make tea Me

Go upstairs

Go upstairs Me Cat

Do work

Do work

Go home

Go home Me

Go downstairs

Go downstairs Me

Sit down

Sit down My working day

Pie Charts

语法说明

pie
    title Pie Chart
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 150 

62% 14% 24% Pie Chart Dogs Cats Rats

相关支持

Editors

• VSCode

  • 安装插件 Markdown-preview-enhanced

• Typora

  • 默认支持

GitHub

尚不支持，需要安装 Chrome 第三方插件 GitHub + Mermaid

Hexo

Next 主题 （最新版本）直接在 next/_config.yml 中 808 行左右修改 enable: true

# Mermaid tag
mermaid:
  enable: true # Default false
  # Available themes: default | dark | forest | neutral
  theme: forest

安装依赖库

npm install hexo-filter-mermaid-diagrams -s