在 Markdown 中玩转 UML 时序图：意外发现的 js-sequence-diagrams

最新推荐文章于 2025-02-17 11:13:48 发布

曾经去过跨越一个小时的地方

最新推荐文章于 2025-02-17 11:13:48 发布

阅读量9.4k

点赞数 2

分类专栏： JavaScript 文章标签： js-sequence-diagrams Markdown UML时序图 UML Seuqence Diagram UML

本文链接：https://blog.csdn.net/u012814856/article/details/81459939

版权

本文介绍了如何在 Markdown 中使用 js-sequence-diagrams 创建 UML 时序图，包括注释、参与者、记录和信息交互的语法，并提供实例展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、引言

最近在书写一个项目的开发记录文档的时候，突然想要加入一个 UML 时序图。

因为我都是使用 Typora 进行 Markdown 的书写的，所以习惯性的点开了 Typora 的 Markdown 帮助文档，其引导我去了这个网址：
Draw Diagrams With Markdown

在这个网页中，共介绍了 3 种图表的 Markdown 语法，如下表：

这里，因为我的需求只是想写个 UML 的时序图，因此本篇博客的重点还是介绍书写 UML 时序图的 js-sequence-diagrams。

js-sequence-diagrams 的首页非常简洁明了，网址如下（友情提示，需要科学上网，打不开也没事，我下面进行翻译）：
js-sequence-diagrams

接下来，简单翻译一下 js-sequence-diagrams 首页的内容。

小A->小蔡: 你好
Note right of 小蔡: 小蔡正在\n思考反应
小蔡-->小A: 你好吗？
小A->小蔡: 我很好，谢谢！

js-sequence-diagrams 是一个简单的用 javascript 编写的库，用来将文本转换为 UML 时序图。此项目启发于 websequencediagrams.com，并且由它提供了服务端的解决方案。我们使用 Jison 去解析文本，使用 Snap.svg 去绘制图像。

title: 这是标题
A->B: 正常的线
B-->C: 虚线
C->>D: 开口箭头
D-->>A: 虚线开口箭头