简单的时序图工具---Markdown

最新推荐文章于 2025-07-24 23:47:46 发布
最新推荐文章于 2025-07-24 23:47:46 发布
阅读量2.2k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ythunder/article/details/54615215
本文介绍如何使用Markdown语言轻松创建时序图，通过代码段格式和特定语法，实现直观的时序图展示，帮助读者理解并实践这种简便的方法。

用markdown画的时序图

效果图

Created with Raphaël 2.1.0CLientCLientServerServerHashtableHashtableMemcacheMemcacheSlabSlab1. set data(key, value)2. forearch(key)/not found3. Not found4. get mem(key, value)5. get slot link(total length)6. get item space,tianru data7.add to hashtable(key value)8.stored successa1. get data(key)a2. get value(key)a3. return valueboth A and B

用代码段格式，然后 三个点后加 sequence 

CLient->Server:1. set data(key, value)
Server->Hashtable: 2. forearch(key)/not found
Hashtable-->Server: 3. Not found
Server->Memcache: 4. get mem(key, value)
Memcache->Slab: 5. get slot link(total length)
Slab->Slab:6. get item space,tianru data
Slab-->Hashtable:7.add to hashtable(key value)
Server-->CLient: 8.stored success
CLient->Server: a1. get data(key)
Server->Hashtable: a2. get value(key)
Server-->CLient:a3. return value
note over Memcache,Hashtable: both A and B

读者自由感受简单语法

男神镇
这里写图片描述

Markdown 时序图绘制详解
小北的博客
01-16 3381
通过 Mermaid 绘制「时序图」。时序图 (Sequence Diagram) ，用来体现对象之间的时间顺序关系，可以表达出对象的交互过程，也就是 “从哪到哪” 的图形化描述。类型描述->无箭头实线–>无箭头虚线->>带箭头实线–>>带箭头虚线-x带×的实线–x。
Markdown画时序图
weixin_45326892的博客
01-09 1134
时序图是一种用来描述对象之间交互过程的图形工具，主要用于展示各个参与者之间的交互顺序和时间顺序。参与者（Participants）：可以是人、类对象、系统等。消息（Messages）：表示参与者之间的交互，用箭头表示。激活框（Activation Boxes）：表示参与者在处理消息时的活动状态。生命线（Lifelines）：表示参与者在交互过程中的存在。
简单入门时序图
VCanna的博客
01-17 720
什么是时序图 时序图是一个二维图，横轴代表对象，纵轴表示时间。消息在各对象之间横向传递，依照时间顺序纵向排列。 时序图的元素 1.角色 可以是人，也可以是系统 2.对象 ① 包括对象名和类名 ② 只显示类名不显示对象名，即表示他是一个匿名对象； ③ 只显示对象名不显示类名； 3.时间线 虚线表示，代表对象存活的时间。 4.控制焦点/激活器 表示时间段的符号，在这个时间段内对象将执行相应的操作，用小矩形表示。 5.消息 包括同步消息、异步消息、返回消息和自关联消息 同步消息 @startuml title 同
markdown学习笔记（个人向） Part.2
最新发布
ozawacai的博客
07-24 1050
主要介绍在markdown中使用mermaid的情况。其提供了多种的图表供人说明并使用。
markdown 绘制流程图、时序图、甘特图
Bingo
06-25 1万+
这些复杂图形的绘制都是使用代码块实现的，指定代码块的解析语言，按照响应的绘制语法即可实现。 流程图——指定 mermaid（样式流程图） 或 flow （标准流程图）解析语言 时序图——指定 sequence（标准时序图） 或 mermaid（样式时序图） 解析语言 甘特图——指定 mermaid 解析语言 一、流程图 1. 样式流程图 基本语法...
Markdown如何画时序图，一篇就够了
zhw21w的博客
07-12 1万+
markdown 语法画时序图(UML)， 饼图怎么画
简单明了的时序图
m0_61350679的博客
06-14 245
时序图示例，总结特别好：“任何复杂的交互，都可以分解为自己与自己、自己与别人、别人与别人的多个简单交互”。 时序图正体现了这种逻辑，所以，它表达交互逻辑时，非常清晰简单。 ...
时序图在线工具
lqb3732842的博客
01-05 2305
实用的在线时序图制作工具
【Android -- 写作工具】Markdown 时序图
Kevin Learn Android
05-31 655
Markdown 的原生语法不支持绘制图形，但通过扩展模块，我们可以将一些格式化的文字渲染成我们需要的图形。常用的图形有 “流程图”、“时序图”、“类图”、“状态图”、“甘特图”、”饼图” 等。...
Markdown时序图的使用方法
cheese的博客
01-08 1461
arkdown 的原生语法不支持绘制图形，但通过扩展模块，我们可以将一些格式化的文字渲染成我们需要的图形。常用的图形有 “流程图”、“时序图”、“类图”、“状态图”、“甘特图”、“饼图” 等。本节将重点介绍如何通过 Mermaid 绘制「时序图」。时序图 (Sequence Diagram) ，用来体现对象之间的时间顺序关系，可以表达出对象的交互过程，也就是 “从哪到哪” 的图形化描述。
【高效工具】《三》Typora直接使用MarkDown语法绘制流程图、时序图、甘特图
热门推荐
黑白猿的琐碎日常
03-16 2万+
使用Typora撰写内容的时候，偶尔会用到流程图，原来一直使用Word来作图，在插入到文档中，昨天偶然间了解到Typora支持使用mermaid来绘制流程图，才发现自己差点Out了。此处整理一下如何使用Typora进行图表的绘制。mermaid支持三种图形的绘制：流程图、 时序图、甘特图。
MarkDown之时序图并行、条件、循环、可选高级语法(三十)
Android系统攻城狮
04-02 2401
本篇目的：MarkDown之时序图并行、条件、循环、可选等高级语法，分享之。Markdown时序图，作为Markdown语法的一个扩展功能，以其直观、简洁的方式，在描述和呈现事件顺序或消息传递流程方面发挥着重要作用。时序图，又称序列图或顺序图，是UML（统一建模语言）中的一种图形表示法，用于显示对象之间交互的顺序。而Markdown时序图则提供了一种在纯文本环境中绘制这种图形的方法，使得在编写文档或交流想法时，能够方便地展示事件或消息的时序关系。
画出属于你的最漂亮的数字时序图—WaveDrom
果果小师弟的博客
01-21 7143
摘要：WaveDrom是一个免费开源的在线数字时序图渲染引擎。它可以使用JavaScript, HTML5和SVG来将时序图的WaveJSON描述转成SVG矢量图形，从而进行显示。WaveDrom可以嵌入到任何网页中。WaveDrom编辑器可在浏览器中运行，也可以安装在系统上，渲染引擎可以嵌入到任何网页中。 一、WaveDrom功能 绘制数字时序图、绘制寄存器图、绘制逻辑电路图 二、WaveDrom的使用 在线编辑器 https://wavedrom.com/editor.html 官网 https
如何画时序图
06-28 2万+
信息量还是不少，我给你总结下。时序图，用来描述多个对象参与实现业务目标时，彼此之间按时间顺序进行交互的过程。常见的应用场景，是在支付领域。用好时序图，能帮我们，搞清楚业务规则、系统逻辑，提高工作效率。1、画时序图的方法1）定目标，指定用例或业务目标展开分析2）找对象，找出参与实现目标的对象/角色3）列消息，按时间顺序列出对象的交互消息2、画时序图的经验1）给交互消息加序号，方便阅读沟通2）触发交互的对象画在最左，交互频繁的走近些3）同一个流程，画不同视图，理解更全面、深刻。
在线时序图工具推荐
weixin_34087503的博客
11-03 622
2019独角兽企业重金招聘Python工程师标准>>> ...
007高级用法-使用MD来画时序图和流程图
m0_52475295的博客
04-06 3957
使用MarkDown来画图 sequence时序图 小案例 代码如下: ```mermaid sequenceDiagram title: 成员定义 participant A as a participant B as b a–>>b : A指向B b->>a : B指向A 显示结果: #mermaid-svg-mIdeiGMw0LvcDBlx {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16p
时序图示例
不以物喜，不以己悲
04-15 4157
markdown 使用说明 markdown时序图
在md-editor-v3中实现mermaid的zenuml时序图渲染
gitblog_07527的博客
06-22 864
在md-editor-v3中实现mermaid的zenuml时序图渲染 时序图作为UML中的重要组成部分，能够直观展示对象间的交互过程。在md-editor-v3这款markdown编辑器中，通过合理配置可以完美支持mermaid的zenuml时序图语法，为技术文档编写提供更强大的可视化支持。 核心原理 md-editor-v3通过editorExtensions配置项支持mermaid图表渲染扩...
markdown 基本语法与 memraid 图
PancrasG的博客
01-13 512
一些markdown基础语法
markdown时序图语法
04-04
### 绘制 Markdown 时序图的语法与使用教程 Markdown 的原生语法并不支持直接绘制图形，但借助扩展模块（如 Mermaid 或 PlantUML），可以通过特定的标记语言实现时序图的创建[^1]。 #### 基本概念与时序图的作用 时序图是一种用于展示对象间时间顺序关系的工具，能够清晰地表达交互过程中的 “从哪到哪”。它适用于描述系统的动态行为以及对象之间的通信方式[^2]。 #### 时序图的基本语法结构 以下是构建时序图的核心语法规则： - **实线 `-`**：表示主动发送的消息，通常用于发起请求的操作。例如 `A -> B: request` 表示 A 发送了一个名为 `request` 的消息给 B[^3]。 - **虚线 `--`**：表示返回消息，通常是响应操作的结果。例如 `B -->> A: response` 表示 B 返回了一个名为 `response` 的消息给 A[^4]。 - **同步箭头 `>` 和异步箭头 `>>`**： - 同步消息使用单向箭头 `->>` 来表示，意味着调用方会等待被调用方完成处理后再继续执行其他逻辑。 - 异步消息使用开放箭头 `-x` 来表示，表明调用不会阻塞当前进程。 #### 示例代码 以下是一个简单的时序图实例，展示了如何定义参与者及其交互过程： ```mermaid sequenceDiagram participant User as 用户 participant Server as 服务器 Note over User,Server: 登录流程开始 User ->> Server: POST /login {username="admin", password="password"} activate Server Server -->> User: {"status": "success", "token": "abc123"} deactivate Server ``` 上述代码片段解释如下： - 定义两个参与者：`User` 和 `Server`。 - 描述了用户向服务器发送登录请求的过程，并接收来自服务器的成功响应。 - 使用 `activate` 和 `deactivate` 关键字来标注某个阶段内的活动状态变化。 #### 扩展功能 除了基本的消息传递外，还可以利用注释 (`Note`) 对某些复杂场景加以说明；或者引入循环、条件分支等功能进一步增强图表的表现力。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值