Markdown Mermaid 流程图

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

Markdown语法

Mermaid 语法
代码块选择 mermaid 语言

sequenceDiagram

语法说明

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

sequenceDiagram
    Alice->>John: Hello John, how are you?
    activate John
    John-->>Alice: Great!
    deactivate 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

Flowchart

Flowchart

graph LR
   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]

graph TB
    A & B--> C & D

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

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.

Entity Relationship Diagram

语法说明

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : 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

Pie Charts

语法说明

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

相关支持

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