Markdown 常用图例(流程图 时序图 甘特图)

Posted 顧棟

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Markdown 常用图例(流程图 时序图 甘特图)相关的知识,希望对你有一定的参考价值。

流程图语法

标准流程图

竖向

文字部分三个`后面增加mermaid

flowchat
open=>start: Open:>http://www.baidu.com
userInput=>inputoutput: User Input
processes=>operation: Processes
results=>condition: Yes or No?
regis=>condition: GoSignUp,Yes or No?
userr=>operation: SignUp
end=>end: End
open->userInput->processes->results
results(yes)->end
results(no)->regis
regis(yes)->userr
regis(no)->userInput

效果图

Created with Raphaël 2.3.0 Open User Input Processes Yes or No? End Go SignUp,Yes or No? SignUp yes no yes no

横向

文字部分

flowchat
st=>start: Start|past:>http://www.baidu.com
e=>end: End:>http://www.baidu.com
op1=>operation: My Operation|past
op2=>operation: Stuff|current
sub1=>subroutine: My Subroutine|invalid
cond=>condition: Yes or No?|approved:>http://www.baidu.com
c2=>condition: Good idea|rejected
io=>inputoutput: catch something...|request

st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e

效果图

Created with Raphaël 2.3.0 Start My Operation Yes or No? Good idea catch something... End Stuff My Subroutine yes no yes no

简化流程图

竖向

文字部分

graph TD
F[竖向流程图]
A[方形] -->B(圆角)

  B --> C条件a

    C -->|a=1| D[结果1]

    C -->|a=2| E[结果2]

效果图

a=1 a=2 竖向流程图 方形 圆角 条件a 结果1 结果2

横向

文字部分

graph LR
 F[横向流程图]
A[方形] --> B(圆角)
    B --> C条件a
    C --> |a=1| D[结果1]
    C --> |a=2| E[结果2]
   

效果图

a=1 a=2 横向流程图 方形 圆角 条件a 结果1 结果2

UML时序图

文字部分

sequenceDiagram

对象A->>对象B: 给你发请求(请求)

Note right of 对象B: 对象B的描述

Note left of 对象A: 对象A的描述(提示)

对象B-->>对象A: 收到你的消息(响应)

效果图

MarkDown画图(实例讲解) —— 流程图、序列图、饼图、甘特图

利器 之 PlantUML

Markdown Mermaid

Markdown Mermaid 实用教程

使用Mermaid画图

如何在Markdown中画流程图