Mermaid之时序图语法

最新推荐文章于 2024-05-14 12:24:27 发布
最新推荐文章于 2024-05-14 12:24:27 发布
阅读量8.2k 收藏 11
点赞数 6
分类专栏： Markdown 文章标签： markdown
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37196887/article/details/112764646
版权

时序图(Sequence diagrams)

参与者

语法:
Actor角色,Object对象,统称为Participants参与者

participant [ActorName]/[ObjectName] as [AliasName]

participant:显示申明参与者
as:指定参与者的别名,别名是实际显示在时序图上的名称

示例:

%% 按照 Actor 出现的顺序,从左到右,展示 Actor 名称
Alice->>John: Hello John, how are you?
John->>Alice: Great!

Alice John Hello John, how are you? 1 Great! 2 Alice John

通过participant明确指出参与者,参与者展示的顺序按照participant什么的顺序

participant J as John
participant A as Alice
A->>J: Hello John, how are you?
J->>A: Great!

John Alice Hello John, how are you? 1 Great! 2 John Alice

消息

语法:

[Actor][arrow][Actor]:Message text

示例:
可能的箭头类型

A->B: 实线
A–>B: 虚线
A->>B: 箭头虚线,同步消息
A–>>B: 箭头虚线,同步返回消息
A-xB: 箭头虚线,删除消息(Mermaid 文档称为异步消息)
A–xB: 箭头虚线

A B 实线 1 虚线 2 箭头虚线 3
最低0.47元/天 解锁文章
Feng乍起
关注
  • 6
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
Mermaid之流程图语法（一）
qq_37196887的博客
01-18 1219
流程图(FlowCharts) 方向 流程图中可选的方向如下: TB(top-bottom)/TD(top-down) 从上到下 graph TB Start --> Stop #mermaid-svg-B53PtSLrYznlulbB .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-B53PtSL
Mermaid在线生成时序图
ezsxrtghjmk的博客
08-30 4630
参与者可以显式定义或者像上述例子一样隐式定义，显式定义语法如下participant 小李participant 小王小李->>小王: Hi 小王小王->>小李: 你好，小李//participant 是参与者的关键字，关键字后是定义的参与者名称fill:#333;小李小王Hi 小王你好，小李小李小王。
【Mermaid 语法详细教程 02】时序图 SequenceDiagram
Tuing_的博客
03-31 3393
介绍markdown中mermaid的语法的第二种常用图形 ： 时序图
2024年最新Mermaid画图教程（一）_mermaid绘图(1)，2024年最新大厂Offer拿到手软啊
最新发布
2401_84975963的博客
05-14 739
flowchart不能自定义风格（也许是我不会，哈哈），下面是graph的自定义风格。
【Markdown】【mermaid】Mermaid时序图基础语法Sequence Diagrams - Basic Syntax
hmywillstronger的博客
03-21 1305
时序图是一种交互图，显示了流程如何相互操作以及它们的执行顺序。它可以用来描述用例场景或设计一个良好的面向对象系统。Mermaid可以渲染时序图。时序图的代码如下所示：fill:#333;Great!
mermaid sequenceDiagram使用指南
Yang的专栏
03-19 5708
mermaid sequenceDiagram 序列图使用指南
原来使用代码也可以画时序图，用这个Mermaid就行，真香
无处不在
12-12 2402
强烈推荐这个东西，它可以实现代码生成时序图，Mermaid是一个开源的图表库，它允许我们使用简单的文本语法来定义和绘制各种类型的图表，包括流程图、时序图、甘特图等。
OD(9)之Mermaid序列图(Sequence diagrams)使用详解
Once_day的回忆
02-22 2060
序列图是一种用于展示系统中对象之间如何交互的UML（统一建模语言）图。它们主要用于展现对象之间交互的顺序，这些交互以时间顺序排列，通常用于系统分析和设计阶段来捕捉系统的动态行为。序列图描述了参与交互的对象集合以及它们之间消息传递的时间顺序，非常直观地表示了各个组件或对象在整个流程中的作用和活动。序列图的功能在于能够清晰地显示多个对象在某个业务流程或用例中的交互方式。它可以帮助开发者和系统分析师理解系统运行的具体细节，便于发现系统设计中的问题，并且为代码实现提供参考。
Typora上使用Mermaid语法展示流程图、时序图、甘特图
08-26
Typora上使用Mermaid语法展示流程图、时序图、甘特图
小书匠语法说明之mermaid1
08-04
小书匠语法说明之mermaid1主要介绍了如何使用Mermaid语法在小书匠编辑器中创建各种图表，如流程图、序列图、甘特图等。Mermaid是一种强大的文本到图表的工具，允许用户通过纯文本的方式绘制图表，极大地提高了绘图...
MarkDown时序图.md
11-26
根据给定文件的信息，本文将详细介绍如何在Markdown文档中使用Mermaid.js库来绘制时序图，包括基本概念、语法元素以及一个具体的案例演示。 ### 一、概述 时序图（Sequence Diagram）是一种用于展示对象之间交互...
mermaid-filter:Pandoc过滤器，用于在Markdown文档中的美人鱼语法块中创建图
05-12
mermaid-filter是一个pandoc过滤器，它在markdown中添加了对语法图的支持。 像往常一样，在受保护的代码块中编写图表，如下所示： ~~~mermaid sequenceDiagram Alice->>John: Hello John, how are you? John--&...
vue-mermaid:Vue组件的美人鱼流程图
04-30
美人鱼Vue Componet的美人鱼流程图要求安装安装程序# install dependenciesnpm install --save vue-mermaid用法注册组件import VueMermaid from "vue-mermaid" ;Vue . use ( VueMermaid ) ;使用组件export default {...
markdown mermaid 画图
suveng's blog
09-11 1132
markdown mermaid 画图 流程图 flow chart 时序图代码如下, 写到typroa下面即可, 查看源码是这种格式即可 ```mermaid flowchat st=>start: 开始 op=>operation: 普通操作 cond=>condition: 结果是否成功? op2=>operation: 操作2 op3=>operation: 操作3 sub1=>subroutine: 子程序1:>url i1=>inputoutput
Markdown 进阶语法：Mermaid 绘图 (二) - 顺序图 (Sequence Diagram)
小嗷犬的博客
07-06 2009
Mermaid是一个基于 JavaScript 的图表绘制工具，它使用类似 Markdown 的简单语法来编写，并动态地将它们渲染成图表。流程图(Flowchart) : 用关键词graph或flowchart表示顺序图(Sequence Diagram) : 用关键词表示类图(Class Diagram) : 用关键词表示状态图(State Diagram) : 用关键词表示实体关系图(Entity Relationship Diagram) : 用关键词erDiagram表示用户旅程图。
mermaid画时序图sequenceDiagram的常用功能
lijwen的博客
04-24 999
mermaid画时序图sequenceDiagram的常用功能序列图（时序图）参考网址 序列图（时序图） 序列图是一种交互图，它显示了进程如何相互操作以及按什么顺序操作。 sequenceDiagram participant l as 大灰狼 participant y as 小羊 l->>y:小坏蛋，弄脏我喝的水 y->>l:狼先生，你在上游，我在下游 l->>y:听说去年你说我的坏话 y->>l:去年我还没出生呢 l->>y:
【PlantUML】语法之时序图
码农印象
11-08 3735
文章目录 前言 `-> -->` 信息传递 声明参与者的几个关键字 `as` 重命名参与者 `#` 添加颜色 `order` 定义参与者顺序 `“”` 参与者名字 给自己发信息 修改传达信息的箭头样式 修改箭头颜色 `autonumber` 消息序列 自定义编号的格式 暂停、启用自动编号 设置标题、页眉、页脚 分割页面 组合信息 给信息添加注释 改变注释框的外观 使用 html 分割符 延迟 空间 生命线激活、撤销 Return 创建参与者 进入和发出消息 包裹参与者 移除脚注 skinpar
markdown画图之二：时序图（mermaid）
热门推荐
googgirl的专栏
09-01 1万+
接下来继续
mermaid时序图带x箭头
05-09
Mermaid时序图中带有箭头的语法如下所示： ``` sequenceDiagram Alice->>John: Hello John, how are you? John-->>Alice: I'm good thanks! ``` 在上面的例子中，箭头 `->>` 表示 Alice 发送消息给 John，箭头 `-->>` 表示 John 回复消息给 Alice。如果需要在箭头上添加一个 `x`，表示消息被拒绝或者取消，可以使用语法 `x->>` 或者 `x-->>`，例如： ``` sequenceDiagram Alice->>John: Hello John, can you help me with this task? x-->>Alice: Sorry, I'm busy right now. ``` 在上面的例子中，箭头 `->>` 表示 Alice 发送消息给 John，箭头 `x-->>` 表示 John 拒绝了 Alice 的请求。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值