本文共 4489 字，大约阅读时间需要 14 分钟。

00. 目录

01. 序列图示例

基于实现了序列图，使用下列的格式声明一个序列图

Markdown代码

​```mermaidsequenceDiagramDHCP客户机-->>DHCP服务器: IP租约请求DHCP服务器-->>DHCP客户机: IP租约提供DHCP客户机-->>DHCP服务器: IP租约选择DHCP服务器-->>DHCP客户机: IP租约确认​```

网页显示效果

注意：所有的序列图代码需要放在一个语法类型为sequence的代码块中。

02. 序列图语法

序列图的语法如下图所示。

具体来说：

• 设置title，采用title: message。

MarkDown代码

title: 序列图标题

网页显示效果

• 设置participant，采用participant: actor

MarkDown代码

participant Aparticipant B

网页显示效果

• 设置note，

  • 左侧note： note left of acotor： message
  • 右侧note： note right of actor: message,
  • 覆盖note： note over actor:message

MarkDown代码

note left of A: 左侧notenote right of B: 右侧notenote over C: 覆盖notenote over A,B: 覆盖多个actornote over B,C: 测试下\n 换行

网页显示效果

• 设置会话，
  • 实线实箭头： actor->actor: message
  • 虚线实箭头： actor–>actor:message
  • 实线虚箭头： actor->>actor:message
  • 虚线虚箭头： actor–>>actor:message

MarkDown代码

A->A:自言自语 A->B:实线实箭头 A-->B:虚线实箭头 A->>B:实线虚箭头 A-->>B:虚线虚箭头

网页显示效果

下面的案例演示了序列图语法的混合使用，参见代码：

MarkDown代码

Title: 作业通知提交序列图教师-->班长: 通知明天交作业note left of 教师:通知班长-->同学们:记得明天交作业同学们->>班长:了解同学们-->教师: 交作业note right of 同学们:作业

网页显示效果

03. 流程图示例

CSDN Markdown基于实现流程图。一个简单的流程格式如下代码所示：

MarkDown代码

st=>start: Starte=>endop=>operation: My Operationcond=>condition: Yes or No?st->op->condcond(yes)->econd(no)->op

网页效果显示

注意：所有的流程图代码需要放在一个语法类型为flow的代码块中。

04. 流程图语法

格式如下：

一般节点连接：    节点->节点条件判断节点连接：    条件节点(yes)->正确应答节点    条件节点(no)->错误应答节点

MarkDown代码

start->isLoginisLogin(yes)->testisLogin(no)->login->testtest->end

网页显示效果

MarkDown代码

start=>start: 开始isLogin=>condition: 是否已登录？login=>operation: 登陆selectPic=>operation: 选择一张图片isPic=>condition: 格式是否正确？doIt=>operation: 完成资料isRight=>condition: 资料是否符合要求？end=>end: 完成start->isLoginisLogin(yes)->selectPicisLogin(no)->login->selectPicselectPic->isPicisPic(yes)->doIt->isRightisPic(no)->selectPicisRight(yes)->endisRight(no)->doIt

网页显示效果

05. Gravizo

在研究Markdown UML图的时候，找到了不少在线绘制UML图的方式，例如、和等方式，并且发现了一个不用使用任何插件就可调用图片的方式-。

例如，我们可以使用PlantUML的方式绘制一个用例图。

MarkDown代码

@startumlleft to right directionskinparam packageStyle rectactor customeractor clerkrectangle checkout {
     customer -- (checkout)  (checkout) .> (payment) : include  (help) .> (checkout) : extends  (checkout) -- clerk}@enduml

可以使用下面代码调用该图片

06. 甘特图样例

MarkDown代码

​```mermaid%% 语法示例        gantt        dateFormat  YYYY-MM-DD        title 软件开发甘特图        section 设计        需求                      :done,    des1, 2014-01-06,2014-01-08        原型                      :active,  des2, 2014-01-09, 3d        UI设计                     :         des3, after des2, 5d    未来任务                     :         des4, after des3, 5d        section 开发        学习准备理解需求                      :crit, done, 2014-01-06,24h        设计框架                             :crit, done, after des2, 2d        开发                                 :crit, active, 3d        未来任务                              :crit, 5d        耍                                   :2d        section 测试        功能测试                              :active, a1, after des3, 3d        压力测试                               :after a1  , 20h        测试报告                               : 48h​```

网页显示效果

07. 其它参考示例

7.1 UML标准时序图样例

MarkDown源码

​```mermaid%% 时序图例子,-> 直线，-->虚线，->>实线箭头  sequenceDiagram    participant 张三    participant 李四    张三->王五: 王五你好吗？    loop 健康检查        王五->王五: 与疾病战斗    end    Note right of 王五: 合理 食物 
看医生...    李四-->>张三: 很好!    王五->李四: 你怎么样?    李四-->王五: 很好!​```

网页显示效果

7.2 UML时序图源码复杂样例

MarkDown源码

​```mermaidsequenceDiagramTitle: 标题：复杂使用对象A->>对象B: 对象B你好吗?（请求）Note right of 对象B: 对象B的描述Note left of 对象A: 对象A的描述(提示)对象B-->>对象A: 我很好(响应)对象B->>小三: 你好吗小三-->>对象A: 对象B找我了对象A->>对象B: 你真的好吗？Note over 小三,对象B: 我们是朋友participant CNote right of C: 没人陪我玩​```

7.3 UML时序图源码样例

MarkDown源码

​```mermaidsequenceDiagram对象A->>对象B: 对象B你好吗?（请求）Note right of 对象B: 对象B的描述Note left of 对象A: 对象A的描述(提示)对象B-->>对象A: 我很好(响应)对象A->>对象B: 你真的好吗？​```

网页显示效果

7.4 标准流程图源码格式（横向）

MarkDown源码

​```mermaidflowchatst=>start: 开始框op=>operation: 处理框cond=>condition: 判断框(是或否?)sub1=>subroutine: 子流程io=>inputoutput: 输入输出框e=>end: 结束框st(right)->op(right)->condcond(yes)->io(bottom)->econd(no)->sub1(right)->op​```

网页显示效果

7.5 标准流程图源码格式

MarkDown源码

​```mermaidflowchatst=>start: 开始框op=>operation: 处理框cond=>condition: 判断框(是或否?)sub1=>subroutine: 子流程io=>inputoutput: 输入输出框e=>end: 结束框st->op->condcond(yes)->io->econd(no)->sub1(right)->op​```

网页显示效果

7.6 竖向流程图源码格式

MarkDown源码

​```mermaidgraph TDA[方形] --> B(圆角)    B --> C{
    条件a}    C --> |a=1| D[结果1]    C --> |a=2| E[结果2]    F[竖向流程图]​```

网页显示效果

7.7 横向流程图源码格式

MarkDown源码

​```mermaidgraph LRA[方形] -->B(圆角)    B --> C{
    条件a}    C -->|a=1| D[结果1]    C -->|a=2| E[结果2]    F[横向流程图]​```

网页显示效果

08. 附录

转载地址：https://dengjin.blog.csdn.net/article/details/107073187 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！