我要评论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
-
VSCode
-
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
本文地址：https://blog.csdn.net/qq_36962569/article/details/108171310
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论