使用Markdown绘制UML图

已于 2023-01-23 17:47:25 修改
阅读量864 收藏 2
点赞数 2
分类专栏： Markdown 文章标签： uml
于 2023-01-23 17:42:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lsz441/article/details/128749741
版权

UML图是一种交互图，它显示了进程如何相互操作以及以什么顺序运行,更多详情

UML示例

爱丽丝 约翰 爱丽丝给约翰打电话. 约翰，最近怎样？ 约翰，你能听到我的声音吗? 嗨，爱丽丝，我能听到你的声音！ 我感觉很不错! 明天要去看比赛吗? 可以，明天见. 爱丽丝 约翰

消息类型

消息可以是两个实线或虚线显示。

格式:[参与者][消息类型][参与则]:Message text

目前支持六种类型的箭头:

类型描述
->不带箭头的实线
–>不带箭头的虚线
->>带箭头的实线
–>>带箭头的虚线
-x末端带有十字的实线
–x末端带有十字的虚线
-)末端带有开放箭头的实线(异步)
–)末端带有开放箭头的虚线(异步)

代码

sequenceDiagram
	participant  A
	participant  B
	actor C
	actor  D
	participant  F
	A->B:不带箭头的实线
	B-->A:不带箭头的虚线
	A->>C:带箭头的实线
	C-->>A:带箭头的虚线
	A-xD:末端带有十字的实线
	D--xA:末端带有十字的虚线
	A-)F:末端带有开放箭头的实线
	F--)A:末端带有开放箭头的虚线

示例

A B C D F 不带箭头的实线 不带箭头的虚线 带箭头的实线 带箭头的虚线 末端带有十字的实线 末端带有十字的虚线 末端带有开放箭头的实线 末端带有开放箭头的虚线 A B C D F

语法

关键字描述
sequenceDiagram用于声明生成序列图
%%用于注解代码片段
participant用于定义参与者(长方形)
actor用于定义参与者(人物模型)
as用于起别名
activate用于激活片段
Note用于注释事件
loop声明循环片段
alt声明事件的代替方案
par声明事件为并发事件
critical声明为重要事件
break声明跳出事件
rect声明区域颜色，进行高亮
link为参与者添加超级链接

sequenceDiagram

sequenceDiagram关键字用于声明当前生成图表类型为UML图

%%

使用%%来在代码片段是写注解

代码

sequenceDiagram
    participant 客户端
    participant 服务端
    %% 这是一个注解
    服务端->>客户端: 听到请回复
    客户端->>服务端: 收到！

示例

客户端 服务端 听到请回复 收到！ 客户端 服务端

participant

participant关键字用来定义参与者，如果在不使用participant关键字来声明参与者，参与者将会以代码中逻辑顺序呈现，如果使用participant关键字来声明参与者，会按照participant声明的顺序来声明。
代码

sequenceDiagram
    participant 客户端
    participant 服务端
    服务端->>客户端: 听到请回复
    客户端->>服务端: 收到！

示例

客户端 服务端 听到请回复 收到！ 客户端 服务端

actor

如果想用人形状而不是使用长方形形状来显示参与者，使用Actors关键字来声明参与者
代码

sequenceDiagram
    actor 客户端
    actor 服务端
    服务端->>客户端: 听到请回复
    客户端->>服务端: 收到！

示例

客户端 服务端 听到请回复 收到！ 客户端 服务端

as

使用as关键字可以对参与者取一个方便使用的标识符(别名)
代码

sequenceDiagram
    participant a as 客户端
    participant b as 服务端
    a->>b: 听到请回复
    b->>a: 收到！

示例

客户端 服务端 听到请回复 收到！ 客户端 服务端

activate

可使用activate激活和使用deactivate停用参与者。
代码

sequenceDiagram
    Alice->>John: Hello John, how are you?
    activate John
    John-->>Alice: Great!
     Alice-->>John: Fine!
    deactivate John
    Alice->>John:bye!

示例

Alice John Hello John, how are you? Great! Fine! bye! Alice John

于此同时，也可以通过使用在消息箭头后附加后缀+表示activate,使用-表示deactivate
代码

sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!

示例

Alice John Hello John, how are you? John, can you hear me? Hi Alice, I can hear you! I feel great! Alice John

Note

可以在序列图中使用Note关键字添加注释。
注释格式为`Note [ right of | left of | over ] [参与者]:Text in note content
代码

sequenceDiagram
	participant a as note
	Note left of a:注解1
	Note right of a:注解2
	Note over a:注解3
	客户端->服务端:收到请回复
	Note over 客户端,服务端:这是一个交互式注解

示例

note 客户端 服务端 注解1 注解2 注解3 收到请回复 这是一个交互式注解 note 客户端 服务端

loop

在UML中可以使用loop关键字来表示循环

循环的格式为:

loop [循环内容]
...消息...
end

代码

sequenceDiagram
    客户端->服务端:收到请回复!
    loop 每分钟任务
        服务端-->客户端:检查是否连接成功!
    end

示例

客户端 服务端 收到请回复! 检查是否连接成功! loop [每分钟任务] 客户端 服务端

alt

在序列图中可以使用alt声明代替项，代替项用来表示多种情况
代码

sequenceDiagram
	participant client as 客户端
	participant server as 服务端
	client->>server :尝试连接
	alt 连接成功
		server ->>client:建立连接
	else 连接失败
		server -->>client:连接失败
	end
	opt 拨号连接
		server ->>client:每分钟重连一次
	end

示例

客户端 服务端 尝试连接 建立连接 连接失败 alt [连接成功] [连接失败] 每分钟重连一次 opt [拨号连接] 客户端 服务端

par

使用par关键字来表示这是一个并发事件

par的格式为:

par [并行消息注解1]
---消息内容---
and [并行消息注解2]
---消息内容---
end

代码

sequenceDiagram
   actor user as 用户
   participant client as 客户端
   participant sever as 服务端
	par 用户到客户端
		user ->>client :帮我呼叫服务端
	and 用户到客户端
		user ->>sever :是否收到客户端呼叫
	end
	sever -->>user:收到客户端消息

示例

用户 客户端 服务端 帮我呼叫服务端 是否收到客户端呼叫 par [用户到客户端] [用户到客户端] 收到客户端消息 用户 客户端 服务端

critical

使用critical关键字声明此区域为重要区域，部分引擎可能不支持使用此关键字。

格式:

critical [Action that must be performed]
... statements ...
option [Circumstance A]
... statements ...
option [Circumstance B]
... statements ...
end

代码

sequenceDiagram
	critical 建立于数据库的连接
		server->>DB:连接
	option 连接超时
		server-->>server:超时异常
	option 连接被拒绝
		server-->>server:权限异常
	end

示例

sequenceDiagram
	critical 建立于数据库的连接
		server->>DB:连接
	option 连接超时
		server-->>server:超时异常
	option 连接被拒绝
		server-->>server:权限异常
	end

break

在序列图中表示条件终止(通常用于模块异常中),部分引擎中无法使用此关键字。

格式:

break [something happened]
... statements ...
end

代码

sequenceDiagram
	participant Consumer as 消费者
	participant  API as 程序接口
	participant BookingService as 订购服务
	participant BillingService as 计费服务
    Consumer-->>API: 预订一些东西
    API-->>BookingService: 开始预订流程
    break 预订进程失败
        API-->>Consumer: 显示失败
    end
    API-->>BillingService: S开始计费流程

示例

sequenceDiagram
	participant Consumer as 消费者
	participant  API as 程序接口
	participant BookingService as 订购服务
	participant BillingService as 计费服务
    Consumer-->>API: 预订一些东西
    API-->>BookingService: 开始预订流程
    break 预订进程失败
        API-->>Consumer: 显示失败
    end
    API-->>BillingService: S开始计费流程

rect

使用rect关键字可以高亮当前事件

格式:

rect rgb(0, 255, 0)
... content ...
end
rect rgba(0, 0, 255, .1)
... content ...
end

代码

sequenceDiagram
    participant Alice as 爱丽丝
    participant John as 约翰

    rect rgb(191, 223, 255)
    note right of Alice:爱丽丝给约翰打电话.
    Alice->>+John: 约翰，最近怎样？
    rect rgb(200, 150, 255)
    Alice->>+John: 约翰，你能听到我的声音吗?
    John-->>-Alice:嗨，爱丽丝，我能听到你的声音！
    end
    John-->>-Alice: 我感觉很不错!
    end
    Alice ->>+ John: 明天要去看比赛吗?
    John -->>- Alice: 可以，明天见.

示例

爱丽丝 约翰 爱丽丝给约翰打电话. 约翰，最近怎样？ 约翰，你能听到我的声音吗? 嗨，爱丽丝，我能听到你的声音！ 我感觉很不错! 明天要去看比赛吗? 可以，明天见. 爱丽丝 约翰

link

使用link可以增加超级链接,增加的超级连接会变成一个下拉菜单

格式:link <actor>: <link-label> @ <link-url>

代码

sequenceDiagram
    participant a as 搜索引擎
    participant b as mermaid学习
	link a :百度 @ https://www.baidu.com/
	link a :必应 @ https://cn.bing.com/?mkt=zh-cn
	link b:mermaid @ https://mermaid.js.org
	a->>b:可以通过搜索查找Mermaid的相关学习

示例

搜索引擎 mermaid学习 可以通过搜索查找Mermaid的相关学习 搜索引擎 mermaid学习 百度 必应 mermaid
lsz441
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在VSCode使用Markdown绘制UML图
07-20 1670
在VSCode使用Markdown绘制UML图 需要插件 Markdown All in One Markdown Preview Enhanced PlantUML markdownlint Markdown All in One,VSCode中支持Markdown(键盘快捷键、目录、自动预览等) Markdown Preview Enhanced可以对Markdown做增强预览...
joven.site-在VSCode使用Markdown绘制UML图1
08-03
在Visual Studio Code (VSCode) 中使用Markdown进行UML图的绘制，可以极大地提升开发者的工作效率，尤其是对于软件设计和文档编写。以下是一些关键知识点： 1. **Markdown All in One**：这是一个VSCode的插件，...
MarkDown 流程图 ... ...
HongDaYu的搬砖之路
02-09 359
下面的流程图, 如果是较为简单的逻辑还可以 上面的流程图, 可以用于复杂的逻辑流程图
在vscode中使用Markdown写文档，uml画图或者graphviz画图，实现markdown预览
Keep Coding,Keep Foolish!
02-02 590
推荐使用本地jar包的方式。这种方式会出现卡顿的情况。比较复杂，会出现配置不成功。
MarkDown绘制UML图
ip_v5的专栏
02-15 7669
1. 前言 Markdown是一种轻量级的标记语言，把作者从繁杂的排版工作中解放出来，实现易读易写的文章写作，已经逐渐成为事实上的行业标准。CSDN博客支持Markdown可以让广大博友更加专注于博客内容，大赞。但是，不少博友可能对Markdown比较生疏，本博接下来用一个系列文章《Markdown简明教程》扼要介绍Markdown，希望可以对大家有所帮助。 系列教程目录 关
UML之在Markdown中使用Mermaid绘制类图
最新发布
ifadai的博客
02-05 2231
本文主要演示Mermaid类图的画法
Markdown绘制UML图
rayylee
06-18 5198
下面介绍一种可以在Markdown中使用的绘制UML工具 —— PlantUML，以及渲染引擎 Gravizo 1. PlantUML简介 可以登陆 PlantUML官网 看一下，里面有支持的UML类型以及使用方法。 点击下载 使用 PlantUML 绘制 UML 语言参考指南 中文版[http://s.plantuml.com/PlantUML_Language_Reference_Guide_ZH.pdf]。 2. 使用方法 打开在线作图网址，在上面的代码框里面输入代码。 完成后点击 Submit 按钮
MarkDown中写UML图的方法
Sig的博客
02-26 2633
使用Mermaid在Markdown中画UML图
markdown基本使用和流程图、甘特图、UML图的用法
qq_24726043的博客
01-01 2185
Markdown的基本用法使用和mermaid、Flowchart、甘特图、饼图的用法
Markdown 之 UML图的实用画法
小异常的博客
04-11 1万+
平常我们画 UML图 时，需要借助像 StarUML、Visio 等这一类的工具软件，其实我们完全可以借助 Markdown 就可以快速的画出漂亮的UML图了。 　　本篇以实用为主，不对画图中的细节作过多的描述，
【Markdown语法】UML 图（序列图和流程图）
惊鸿若梦一书生
08-29 2404
序列图 简单的序列图建议在markdown里面写，可以很方便，但是对于非常复杂的序列图建议还是在Visio中画比较便捷。可以渲染序列图，例如： ```sequence 张三-&gt;李四: 嘿，小四儿, 写博客了没? Note right of 李四: 李四愣了一下，说： 李四--&gt;张三: 忙得吐血，哪有时间写。 ``` 效果如下： Created with Raphaël 2...
gitbook-plugin-uml:gitbook的PlantUml插件可以在markdown HTML和PDF中绘制UML图
05-04
Gitbook Honkit PlantUml插件用于从markdown uml中进行选择，并将其转换为图片格式svg。安装安装honkit而不是gitbook-cli（不建议使用）。 请安装JRE或JDK。 确保您的系统具有Java。 它会自动下载plantuml jar文件...
Markdown模板参考
01-16
另外，通过第三方工具或插件，如Mermaid，可以绘制UML图。 ### 10. 横屏滑动幻灯片 Markdown可以用于创建幻灯片，比如使用Reveal.js库。通过特殊的分隔符和布局，可以创建具有横屏滑动效果的幻灯片。 文件`HTML与...
StartUML时序图画法教程
11-12
在完成时序图的绘制后，StartUML提供了导出功能，可以将图保存为图片格式，方便在报告或演示中使用。你也可以选择将整个项目导出为Markdown或HTML，以便分享或在线查看。 总结来说，"StartUML时序图画法教程"将详细...
Markdown使用方法
09-08
Markdown编辑器还支持绘制UML图，如序列图和流程图。示例语法如下： **序列图**： ```sequence 张三 -> 李四: 嘿，小四儿, 写博客了没? Note right of 李四: 李四愣了一下，说： 李四 --> 张三: 忙得吐血，哪有...
20201127 使用Markdown 画uml图，Graphviz 安装经历吐血整理
童年纸飞机的博客
11-27 821
1 visio code 编辑器，最好有 2 visio code markdownlint插件安装上，这个插件可以比visio code自带的markdown预览展示的更好。 这个工具是看预览的 3 markdown是可以支持 plantuml语言去画各种图的。并且markdownlint插件可以预览部分其形成的图片。但是，只是非常简单的可以预览。例如类图这类复杂的，是会预览失败的。所以你的电脑需要安装另外一个图像相关工具—Graphviz 这家伙的安装，我整个过程中遇到了巨大的坑啊！ 4 通常 Gr
如何优雅的使用MarkDown画UML图
Be yourself.
12-03 9400
前言 前段时间写设计模式的总结，需要用到类图。但是如果使用OmniGraffle这类的图画出来，再导入。实在有点慢，又有点low。于是摸索出一个比较好的方案。 方案 Plantuml+MarkDown 先在 http://www.plantuml.com/plantuml/uml 上画出需要的UML图，然后将地址通过UML的写法导入。由于本人将plantuml的纪录放在&lt;details...
Markdown支持UML
sheadon的博客
06-23 2026
Markdown支持UML现在不少在线的Markdown编辑器都开始支持UML的序列图和流程图了，但是真正用过的才知道，这真的只是看起来很美。大致会遇到下列坑： 1. 除了序列图和流程图，没有其他图… 2. 在流程图中，只要多出现了一个判断，那么行数就多一行。逻辑复杂后，连线相互跨越，极不美观。 3. 使用JS，导致无法离线生成其他格式文档解决方案：使用plantuml-markdown搞定。
打造VS Code(支持Markdown/UML/脑图/代码模板)
热门推荐
寒风的技术博客
12-12 2万+
Visual Studio Code是一个文本编辑器，除了写代码和编辑普通文本外，借助插件还可以实现一些常用图形化的功能。下面介绍下，在 VS Code 中支持一下几种常用的功能： Markdown 思维导图 UML Markdown Markdown是一种轻量级的文本标记语言。使用简单符号，即可编辑出带有有格式的文本，让文编编辑者专注于编辑的内容本身，而不用花费额外的经历调整文本格式。CSDN、简书、Github等网站都支持这种格式。语法参考 要在 VS Code 中支持 Markdown 格式的显示
markdown画UML图
09-01
要使用Markdown画用例图，可以参考《Markdown简明教程》系列教程的第4篇《Markdown UML图》。该篇教程详细解释了如何使用Markdown绘制序列图、流程图以及使用Gravizo在线绘制UML图。通过学习该教程，你可以了解到使用Markdown绘制用例图的方法。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值