mermaid流程图工具_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

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

GitHub

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

本文地址：https://blog.csdn.net/qq_36962569/article/details/108171310

希望与广大网友互动？？

点此进行留言吧！