AI+Mermaid语法结合PlantUML插件快速生成时序图

已于 2025-03-08 10:38:54 修改
阅读量1.1k 收藏 10
点赞数 29
分类专栏： AI Tools 文章标签： java 团队开发 敏捷流程 人工智能 ai
于 2025-03-08 10:36:46 首次发布
©辛勤耕耘，转载请注明来源。 || 自建博客: janycode.github.io || CSDN博客：simple.blog.csdn.net
本文链接：https://blog.csdn.net/sinat_36184075/article/details/146112228
版权

AI+Mermaid语法结合PlantUML插件快速生成时序图

参考资料：

  • PlantUML 官方文档：https://plantuml.com/zh/
  • PlantUML 在线渲染：https://www.min2k.com/tools/mermaid/

引言

最近在做系统设计的时候，发现要画不少时序图，以前我用的最顺手的工具是draw.io，后来也尝试了语雀自带的画图工具，感觉画画简单的图还行，但是复杂一点的，就比较吃力了。

image-20250308100842364

最开始看下官方文档，发现PlantUML类似MarkDown，似乎需要一点学习成本，简单用了一下，曲线还是挺平缓的，上手相当快！

一、什么是PlantUML？

PlantUML 是一个多功能组件，可快速、直接地创建图表。用户可以使用简单直观的语言起草各种图表。

PlantUML是一个开源工具，它允许我们用简单的文本描述来创建UML图，包括序列图、用例图、类图、对象图、活动图、组件图、部署图、状态图，以及我们今天要讲的时序图。

image-20250308101003697

除了UML图之外，PlantUML 还支持一系列其他图表，例如JSON数据、YAML数据、EBNF图表、架构图等等。PlantUML的一大优势，是图表完全用文本代码描述，这就意味着它可以作为文档嵌入到源代码中，也非常方便版本控制和多人协作，不管是迭代设计、文档编写、系统建模，PlantUML都能胜任。

二、快速入门

PlantUML插件

为了便捷地使用PlantUML，许多流行的IDE和代码编辑器提供了集成PlantUML的插件，如Visual Studio Code、IntelliJ IDEA、Eclipse等。插件提供了实时预览、语法高亮和图表导出等功能，能帮助我们更快捷，更高效地画图，整体上IDEA的插件用起来体验最好，但是IDEA大家懂的，太占内存了，VS Code相对而言，用起来就会轻量很多。

  • IntelliJ IDEA：比如 “PlantUML integration” 可以让我们直接在 IDE 中查看和编辑 PlantUML 图表

    image-20250308101106582

    • 插件使用效果

image-20250308101202924

  • VS Code也是一样，从插件市场搜索安装即可。

Hello World!

我们先来看个最简单的例子，通过-> 、-->和 :就可以在参与者之间传递消息，不用明确声明参与者。

@startuml
老张 -> 老王 : 老王，你好啊
老王--> 老张: 老张，你好啊

老张 -> 老王: 最近有空一起喝茶
老张 <-- 老王: OK
@enduml

image-20250308101457200

三、PlantUML时序图语法

声明参与者

我们使用关键字participant 来声明参与者，就可以对该参与者进行更多的控制。声明的顺序就是默认的显示顺序 。我们也可以用这些关键字来声明参与者，给参与者设置不同的形状。

  • actor（角色）
  • boundary（边界）
  • control（控制）
  • entity（实体）
  • database（数据库）
  • collections（集合）
  • queue（队列）

我们还可以通过 as关键字重命名参与者。

@startuml
participant Participant as Foo
actor       Actor       as Foo1
boundary    Boundary    as Foo2
control     Control     as Foo3
entity      Entity      as Foo4
database    Database    as Foo5
collections Collections as Foo6
queue       Queue       as Foo7
@enduml

image-20250308101756317

默认的颜色比较单调，也可以通过#来设置参与者的颜色：

@startuml
actor Bob #blue
' The only difference between actor
'and participant is the drawing
participant Alice #SkyBlue
participant "I have a really\nlong name" as L #00ff00

Alice->Bob: Authentication Request
Bob->Alice: Authentication Response
Bob->L: Log transaction
@enduml

image-20250308101842864

消息传递

在不同参与者之间，通过箭头+:来表示消息传递。

  • 同步消息：
A -> B: 同步消息文本

image-20250308101949606

  • 异步消息：由发送者A指向接收者B，表示A发送后不需要等待B立即处理。
A ->> B: 异步消息文本

image-20250308102006472

  • 返回消息：通常从接收者返回到发送者，标识一个回应。
A <-- B: 返回消息文本

image-20250308102025165

  • 自调用：一个参与者直接发送消息给自己，表示自我处理或运算。

    A ->A: 自调用

    image-20250308102042692

整体效果：

image-20250308102141209

生命线与激活条

生命线（Lifeline）与激活条（Activation Bar）

在时序图中，生命线表示对象在一段时间内的活动状态，也就是从参与者往下延伸的那条虚线。激活条用来表示参与者或对象在处理某个任务期间的活动状态，是生命线的一部分，矩形条形式出现。

  • 生命线的激活与撤销：可以用下面这些关键字来控制生命线的激活与撤销

    • activate: 显示参与者的活动状态开始
    • deactivate: 指示参与者的活动状态结束。
    • destroy: 用于表示参与者的生命线终结，通常表示对象生命周期的结束。
@startuml
participant User
User -> A: DoWork
activate A
A -> B: << createRequest >>
activate B
B -> C: DoWork
activate C
C --> B: WorkDone
destroy C
B --> A: RequestCreated
deactivate B
A -> User: Done
deactivate A
@enduml

image-20250308102215147

  • 生命线的嵌套与颜色：我们还可以使用嵌套激活条来表示内部调用，并可以给生命线添加颜色。
@startuml
participant User
User -> A: DoWork
activate A #FFBBBB
A -> A: Internal call
activate A #DarkSalmon
A -> B: << createRequest >>
activate B
B --> A: RequestCreated
deactivate B
deactivate A
A -> User: Done
deactivate A
@enduml

image-20250308102232088

  • 自动激活：在发送消息时自动显示激活条。
A->B++: 激活B并发送消息

image-20250308102251041

  • 自动去激活：在接收回应时自动隐藏激活条。
A->B++: 激活B并发送消息
A <--B--: B去激活并回应消息

image-20250308102304078

分组和替代

  • 分组：用于逻辑上分组一系列交互。
group 分组名
A -> B: 消息
...
end group

image-20250308102357436

  • 替代（Alt/Else）：表示基于条件的替代执行流程。
alt 条件1
A -> B: 满足条件1的消息
else 条件2
A -> B: 满足条件2的消息
end

image-20250308102407533

注释

注释用于添加说明性文本。

  • 可以用note left of，note right of或note over来控制注释相对节点的位置，还可以通过修改背景色来高亮显示注释。
@startuml
participant Alice
participant Bob
note left of Alice #aqua
This is displayed
left of Alice.
end note

note right of Alice: This is displayed right of Alice.

note over Alice: This is displayed over Alice.

note over Alice, Bob #FFAAAA: This is displayed\n over Bob and Alice.

note over Bob, Alice
This is yet another
example of
a long note.
end note
@enduml

image-20250308102422537

颜色

Choosing colors在 PlantUML 中，我们可以对时序图的各个元素自定义颜色，比如参与者（actors）、对象（objects）、激活条（activation bars)等，来让我们的时序图更加美观。在声明元素时，可以直接指定颜色，格式为#颜色代码。颜色代码可以是不同的形式：

  • 直接指定颜色：颜色代码可以是一个十六进制颜色值，也可以是预定义的颜色名称。
@startuml
actor 用户  #Green
participant 参与者  #B4A7E5

用户-[#red]>参与者:消息
activate 参与者 #Blue

@enduml

image-20250308102437424

  • 使用 skinparam 设置颜色：除了直接为特定元素指定颜色外，还可以使用 skinparam 全局设置时序图中的颜色。用这种方式更改元素的默认颜色比较方便：
@startuml
skinparam ActorBorderColor #DarkOrange
skinparam ParticipantBackgroundColor #SkyBlue

actor 用户
participant 参与者
@enduml

image-20250308102454757

当使用 skinparam 时，我们可以设置许多不同属性的颜色，如边框颜色（BorderColor）、背景颜色（BackgroundColor）、字体颜色（FontColor）和激活条颜色（SequenceGroupBodyBackgroundColor）。更多语法可以直接查看官方文档：顺序图的语法和功能，目前这些内容，已经足够我们常见的时序图需求了。

四、完整实例

我们接下来看一个稍微完整一点的例子，在这个例子中，我们的需求，是要在原本的登录的基础上，引入Google登录。

@startuml
skinparam ParticipantBackgroundColor #DeepSkyBlue

actor 用户 as c  #DeepSkyBlue
participant "客户端" as client
participant "服务网关" as ga
participant "用户服务" as user
database "数据库" as DB  #DeepSkyBlue
participant "Google服务" as google  #LightCoral

activate c #DeepSkyBlue
activate client #DeepSkyBlue

c->client:用户登录

group#LightCoral #LightCoral Google登录客户端流程
  client -> google : 请求Google OAuth登录
            activate google #DeepSkyBlue
            google-->client:登录url
            client->google:跳转登录页
            google -> google : 用户登录
            google --> client : Google登录Token
            deactivate google
end

|||

client -> ga : 登录请求
note right#LightCoral:新增登录方式，三方登录请求实体
activate ga #DeepSkyBlue
ga ->user:请求转发
activate user #DeepSkyBlue


alt#DeepSkyBlue 常规登录
    user -> DB : 查询用户信息
    activate DB #DeepSkyBlue
    DB -> user : 用户信息
    deactivate DB
    user->user:登录密码校验

|||
else Google登录
    group#LightCoral #LightCoral Google登录服务端流程
          user->google:验证token
          activate google #DeepSkyBlue
          google-->user:用户信息
          deactivate google
          user->user:存储或更新用户信息
    end group
end


user-->ga:登录结果
deactivate user
ga -> client : 响应
deactivate ga
alt#DeepSkyBlue 成功
        client -> c : 登录成功
else 失败
        client -> c : 登录失败
end
deactivate client
|||
@enduml

image-20250308102520473

五、总结

PlantUML使用起来整体上还是非常舒服的，对我而言，这几个特点让我爱不释手：

  • 提供了类似MarkDown的所见即所得的使用体验，免去调整图形之扰
  • PlantUML本质是文本，可以进行版本控制，多人协同
  • 语雀支持文本画图的功能，可以嵌入PlantUML文本，支持在语雀文档里直接修改

PlantUML还有很强大的扩展性和灵活性，我们可以通过 官方文档：https://plantuml.com/zh/ 继续探索更多高级语法和技巧，来绘制更加复杂和丰富的图表。

附：AI+Mermaid

AI 如 deepseek 生成 mermaid 语法，然后直接使用 PlantUML 进行渲染，画图效率直接成倍提升。

而且修改起来也很便捷，因为从面向画图工具变成面向文本语言了。
在这里插入图片描述

DeepSeek进阶应用（一）：结合Mermaid绘图（流程图、时序图、类图、状态图、甘特图、饼图）
Code_流苏：在代码中寻诗意
03-09 4384
纯干货，DeepSeek结合Mermaid绘制各类图（流程图、时序图、类图、状态图、甘特图、饼图）
【实战篇】零基础也能玩转！用DeepSeek+Mermaid秒变专业图表大师（保姆级万字教程）
02-10 1121
嘿伙计们！今天要给你们安利一个王炸组合——DeepSeek（深度求索）这个国产AI神器，加上程序员都爱的Mermaid图表工具。这两个组合起来简直就是职场外挂！我上周用这个组合半天搞定了过去要三天才能做完的系统架构图+流程图，老板还以为我偷偷加班了…（才没有！本文包含：手把手配置指南/20+个真实案例/独家调教prompt秘籍/常见报错解决。
画图神器之争：PlantUML和Mermaid那个更适合你？
程序员野蛮成长
02-23 6731
选择PlantUML还是Mermaid取决于个人偏好、项目需求以及你所使用的工具和平台。对于需要详细和复杂UML图表的场景，PlantUML可能是更好的选择。而如果你希望有一个轻量且易于集成到Web环境中的工具，Mermaid可能更符合需求。PlantUML和Mermaid都是流行的工具，用于通过文本描述快速创建图表，特别是UML图。
如何使用DeepSeek + PlantUML/Mermaid 生成专业图表
u011186532的专栏
02-15 4296
在日常工作中，图表不仅能直观展示数据与流程，还能帮助我们更好地沟通思路和规划项目。今天，给大家分享一套高效制作专业图表的方案：利用DeepSeek生成Mermaid语法，再借助Mermaid在线工具快速渲染成图。本文将详细介绍操作步骤、技巧分享以及实际应用场景，助你在工作中事半功倍！
PlantUML 绘制时序图
技术分享
06-24 5123
介绍如何使用plantUML 进行绘制时序图
PlantUML画时序图，真香！
三分恶的博客
05-17 1556
PlantUML是一个多功能组件，可快速、直接地创建图表。用户可以使用简单直观的语言起草各种图表。PlantUML是一个开源工具，它允许我们用简单的文本描述来创建UML图，包括序列图、用例图、类图、对象图、活动图、组件图、部署图、状态图，以及我们今天要讲的时序图。除了UML图之外，PlantUML 还支持一系列其他图表，例如JSON数据、YAML数据、EBNF图表、架构图等等。
【PlantUML】- 时序图
记忆、理解、表达和融会贯通。
01-13 3645
时序图，是我们梳理复杂系统交互或设计的一大法宝。本篇文章，我们来介绍一下PlantUML的时序图。这个相对类图来讲，比较简单，也不需要布局。概念不多解释，直接上示例。读完文章，相信你就能实际操作了。
捣鼓PlantUML（三、时序图）
热门推荐
To build a better world !
05-24 6万+
简单介绍时序图（Sequence Diagram），又名序列图、循序图、顺序图，是一种UML交互图。它通过描述对象之间发送消息的时间顺序显示多个对象之间的动态协作。它可以表示用例的行为顺序，当执行一个用例行为时，其中的每条消息对应一个类操作或状态机中引起转换的触发事件。PlantUML使用->箭头将一条消息连接两个对象（参与者）。对象本身不需要特别声明。如果想使用虚线箭头，则使用–>。箭头方向调转<
PlantUML——时序图
weixin_55850954的博客
11-17 2859
在注册链路中，首先用户在浏览器上填写注册表单，点击发送按钮，会调用后端的注册服务去创建注册信息，在注册服务中，会调用账号服务创建对应的账号信息，以及绑定一些关联关系，创建成功后，调用登录服务去生成对应的登录token，下发登录态，最后发送相关的注册消息给下游。在时序图中，一般我们还会对每一个参与的角色，画上相关的生命线，用于表示对象的调用过程。首先，打开IDEA，找到setting，然后选择plugins，搜索PlantUML，找到如下插件，点击下载，然后重启idea，即可使用plantUML插件。
DeepSeek+Mermaid快速生成常用办公图表
最新发布
ylmx5201314的博客
04-09 930
本文介绍了饼图、流程图、思维导图、四象限图等常见图表类型，阐述了它们的应用场景及特点，并提供了DeepSeek指令生成Mermaid格式图表的示例。这些图表工具在数据分析、项目管理、学习辅助等多方面发挥着重要作用。
IDE/Mermaid + VSCode + Deepseek 生成可视化流程图和UML图
river.qu
02-26 4229
Mermaid 是一个基于JavaScript的图表和图表工具，在大语言模型的加持下，其优势被加倍凸显出来。本文详细讲解了在 VSCode 平台安装和使用 Mermaid 的方式方法。并结合大语言模型如，DeepSeek、ChatGPT 的使用，粗浅地探讨了 Mermaid 在可视化生成过程中，尤其是在软件设计和开发过程中的重要作用。
告别手绘：用 Mermaid + Cursor IDE，秒速绘制精美流程图
weixin_73790979的博客
01-22 2936
Mermaid 是一种基于文本的图表绘制工具，它使用简单的 Markdown 语法，就可以绘制出各种精美的图表。而 Cursor 作为一款强大的 AI IDE，可以完美地集成 Mermaid，让你在编写代码的同时，轻松绘制流程图。这段代码定义了一个简单的流程：从“开始”到“处理”，经过“判断”，如果判断为“是”则“结束”，否则回到“处理”步骤。但是，传统的流程图绘制工具往往操作繁琐，需要花费大量的时间和精力。输入你的需求，例如：“画一个流程图，从登录到主页，如果登录失败显示错误信息，然后回到登录页面”。
1.PlantUML-时序图
axylp123的专栏
01-19 1万+
1.1 简单示例 符号 说明 -> 表示参与者之间传递的消息，而不必显示地声明参与者 <- 同->，可提高阅读性 –> 绘制虚线箭头 <– 同<–，可提高阅读性 @startuml 用户 -> 认证中心: 登录操作 认证中心 -> 缓存: 存放(key=token+ip,value=token)token 用户 <- 认证中心 : 认证成功返回token 用户 -> 认证中心: 下次访问头部携带token认证 认证中
PlantUML 教程：绘制时序图
keyboard专栏
07-13 1604
绘制时序图是 PlantUML 的一个强大功能，下面是详细的 PlantUML 时序图教程，帮助你理解如何使用它来创建清晰的时序图。
使用 PlantUML 绘制时序图
rs勿忘初心的博客
04-09 7687
目录 一、简介 二、安装 1.1 安装插件到PyCharm 2.2 验证 2.2.1 插件检查是否安装 2.2.2新建PlantUML文件 一、简介 Github地址：https://github.com/plantuml/plantuml 官方网站：Sequence Diagram syntax and features 在线使用：PlantUMLServer PlantUML中文文档：PlantUML_Language_Reference_Guide_zh.pdf 链接.
PlantUML权威教程-时序图
AndrewYZWang的博客
07-28 9564
文章目录PlantUML时序图简单的时序图participant改变先后顺序使用as重命名参与者order改变参与者的顺序使用非字母符号修改箭头样式修改箭头的箭头的颜色对消息序列进行编号组合消息添加注释改变注释的形状使用ref实现引用延时效果使用`|||`增加空间像素生命线的开始和撤销生命线的嵌套创建参与者进入和发出消息构造类型和圈点多行标题hide footbox增加外观参数 PlantUML ...
时序图-plantuml
NeverSayNever
02-17 272
http://archive.3zso.com/archives/plantuml-quickstart.html#sec-5-1
PlantUML 时序图全面指南：从基础到高级
qq_41934990的博客
10-09 3426
startumltitle 多行定义参与者=title----""参与者""A -> B@enduml。
Android自动生成时序图
01-09
### Android开发中自动生成时序图 在Android开发过程中，为了更好地理解应用程序内部组件之间的交互过程，尤其是异步通信机制，使用时序图是一种非常有效的方式。对于Activity、Looper以及Handler之间复杂的消息传递关系[^3]，可以通过图形化表示使这些概念更加直观。 一种可行方案是采用支持Markdown扩展语法的工具——Mermaid.js来绘制此类图表。此JavaScript库允许开发者以简洁易读的文字形式定义序列图结构，而无需依赖复杂的绘图软件[^2]。具体到Android环境中应用这一技术，则涉及到以下几个方面： #### 集成Mermaid至项目文档体系内 由于Mermaid主要应用于网页端展示，因此如果希望将其融入本地IDE（如Android Studio），最直接的办法是在项目的README.md或其他说明文件里嵌入相应的代码片段。当这些文件被托管平台渲染时即可看到效果良好的可视化图像。 ```markdown %%{init: {'theme': 'default'}}%% sequenceDiagram participant A as Activity participant L as Looper participant H as Handler Note over A,L,H: App Launches A->>L: Create Message Queue & Loop A->>+H: Instantiate without specifying Looper H-->>A: Uses current thread's Looper by default ``` 上述例子展示了如何用简单的几行文本构建出清晰表达三者关联性的时序图[^4]。 #### 利用插件增强IDE功能 除了静态地编写MD文件外，还可以探索一些第三方提供的集成解决方案。例如，在JetBrains系列编辑器中有专门针对Mermaid的支持插件，安装之后便可以在源码旁边即时预览所生成的画面；甚至某些情况下还能导出为图片保存下来作为调试辅助资料。 值得注意的是，虽然这种方法能极大地方便日常记录和分享设计思路，但对于自动化程度更高的需求来说可能还不够完善。目前市面上并没有特别成熟的产品可以直接从Java/Kotlin源码分析并自动生成对应的UML/Sequence Diagrams。不过随着AI技术和自然语言处理能力的发展，未来或许会出现更加强大且易于使用的工具满足这类高级别的要求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

姜源Jerry

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值