0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

怎样使用PlantUML产生时序图呢

玩转单片机与嵌入式 来源:玩转单片机与嵌入式 作者:济南行远智能科技 2022-12-02 09:41 次阅读

7aaa1604-71ce-11ed-8abf-dac502259ad0.png

大家画时序图都在使用什么工具? 上图中的这个图片,有没有感觉很复杂?如果让您用Visio画图需要画多长时间? 本文共享一个VScode中可以产生各种图片的小插件“PlantUML”。 01

先说 VScode

相信做软件设计的同学,对VScode并不陌生,VScode的全称是:VisualStudioCode,是微软推出的跨平台编辑器。它采用经典的VS的UI布局,功能强大,扩展性很强。支持安装各种功能性的插件。

软件支持语法高亮、代码自动补全(又称IntelliSense)、代码重构功能,并且内置了命令行工具和Git版本控制系统

VScode的下载路径如下:https://code.visualstudio.com/Downloa。

安装后的界面图如下:

7ac18708-71ce-11ed-8abf-dac502259ad0.png

02

介绍plantuml

PlantUML 是一个开源工具,能让你通过纯文本的方式来生成 UML 图(Unified Model Language 统一建模语言)。这与大家较为熟悉的 Markdown 非常类似。

通过 PlantUML,你可以通过同一套 Scheme 但是不同的语法来描述和生成不同类型的图。除了UML图外,PlantUML也支持思维导图、甘特图等。我们本篇文章介绍使用PlantUML产生时序图。

7adfd816-71ce-11ed-8abf-dac502259ad0.png

03

使用VScode+PlantUML产生简单的时序图

在Vscode中安装PlantUML插件如下图:

7afa8418-71ce-11ed-8abf-dac502259ad0.png

新建txt文件后,输入如下内容:

@startuml
Title玩转单片机嵌入式
clock   "CLK"   as C0 with period 1


binary  "INTPUT"  as B
binary"RESET"asC
@0
B is high
Cishigh
@1
Cislow
@2.5
Cishigh
@4
Bislow
@6
Bishigh
@8
Bislow
@8
Bishigh
@8
Bislow
@8
C is low


@enduml

使用vscode打开新建的txt文件,选择【ctrl+shift+P】快捷键,选择【预览光标位置图表】

7b1886c0-71ce-11ed-8abf-dac502259ad0.png

就可以预览到上面代码产生的时序图。

7b2ca1fa-71ce-11ed-8abf-dac502259ad0.png

右侧的图片也可以进行保存,或者直接使用vscode的快捷键导出图表。

是不是很神奇?

下面是主图页面中时序图的脚本文件:

@startuml


Title 教你在VScode中用脚本语言画时序图。
concise "Client" as Client
concise "Server" as Server
concise "Response freshness" as Cache


Server is idle
Client is idle


@Client
0 is send
Client -> Server@+25 : GET
+25 is await
+75 is recv
+25 is idle
+25 is send
Client -> Server@+25 : GET
If-Modified-Since: 150
+25 is await
+50 is recv
+25 is idle
@100 <-> @275 : no need to re-request from server


@Server
25 is recv
+25 is work
+25 is send
Server -> Client@+25 : 200 OK
Expires: 275
+25 is idle
+75 is recv
+25 is send
Server -> Client@+25 : 304 Not Modified
+25 is idle


@Cache
75 is fresh
+200 is stale
@enduml

图片如下

7aaa1604-71ce-11ed-8abf-dac502259ad0.png

PlantUML使画图变得如此简单。







审核编辑:刘清

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • UML
    UML
    +关注

    关注

    0

    文章

    122

    浏览量

    30873
  • vscode
    +关注

    关注

    1

    文章

    155

    浏览量

    7737

原文标题:你在用什么工具画时序图?教你在VScode中用C语言画时序图!

文章出处:【微信号:玩转单片机与嵌入式,微信公众号:玩转单片机与嵌入式】欢迎添加关注!文章转载请注明出处。

收藏 人收藏

    评论

    相关推荐

    请教很基础的时序问题

    如图示的时序,椭圆里的叉叉是什么意思,还有红色方框里那种交叉的是表示电平在变化吗?为什么很多时序图里面数据电平变化不画成严格与时钟变化一致
    发表于 04-11 16:21

    急,请问DSP怎样控制并行DAC(附型号和时序

    DSP型号:TI的 TMS320VC5509A(DSP5509)ADC型号:TI 的 DAC904(14位,时序如图) 时序很简单,但问题是需要15个GPIO口,而该DSP的GPIO口才有7个
    发表于 03-30 19:00

    急,请问DSP怎样控制并行DAC(附型号和时序

    DSP型号:TI的 TMS320VC5509A(DSP5509)ADC型号:TI 的 DAC904(14位,时序如图) 时序很简单,但问题是需要15个GPIO口,而该DSP的GPIO口才有7个
    发表于 03-30 19:02

    急,请问DSP怎样控制并行DAC(附型号和时序

    DSP型号:TI的 TMS320VC5509A(DSP5509)ADC型号:TI 的 DAC904(14位,时序如图) 时序很简单,但问题是需要15个GPIO口,而该DSP的GPIO口才有7个
    发表于 03-30 19:03

    怎样以代码形式去说明LCD的读写时序

    STM32F103的FSMC硬件有哪些怎样以代码形式去说明LCD的读写时序
    发表于 10-29 06:26

    ADS8326芯片的时序与软件如何去实现

    ADS8326是什么?有何优点?ADS8326芯片的时序与软件如何去实现
    发表于 01-25 07:44

    怎么用C语言根据芯片的时序编写驱动

    ADS7822工作的时序怎样的?怎么用C语言根据芯片的时序编写驱动?怎样用52单片机去读取PT100温度探头和K型热电偶的温度
    发表于 02-25 06:39

    怎样去编译u-boot产生错误的问题

    怎样去编译u-boot产生错误的问题怎样去编译kernel产生错误的问题
    发表于 03-04 06:47

    时序脉冲产生器电路

    时序脉冲产生器电路
    发表于 05-08 14:38 921次阅读
    <b class='flag-5'>时序</b>脉冲<b class='flag-5'>产生</b>器电路<b class='flag-5'>图</b>

    时序和类的关系

    时序是在软件系统设计中直接和程序代码相关联的,准确地说,程序代码是由类直接产生,而
    发表于 10-29 11:21 6812次阅读
    <b class='flag-5'>时序</b><b class='flag-5'>图</b>和类<b class='flag-5'>图</b>的关系

    什么是时序_时序怎么看_教你如何看懂时序

    时序在有些教材上,又被翻译为顺序,两者在表述上虽然有一些差别,但是大体都是准确的,可能称之为时序会更加书面语话,听起来高大上的感觉。其
    发表于 12-11 19:31 17w次阅读
    什么是<b class='flag-5'>时序</b><b class='flag-5'>图</b>_<b class='flag-5'>时序</b><b class='flag-5'>图</b>怎么看_教你如何看懂<b class='flag-5'>时序</b><b class='flag-5'>图</b>

    使用PlantUml绘制逻辑时序/波形

    使用PlantUml绘制时序,波形的简单说明如下。
    的头像 发表于 05-14 09:28 2125次阅读
    使用<b class='flag-5'>PlantUml</b>绘制逻辑<b class='flag-5'>时序</b><b class='flag-5'>图</b>/波形<b class='flag-5'>图</b>

    SMT贴片空洞是怎样产生

    站在SMT贴片加工的观点来说空洞率是避免不了的。任何厂家也不能说自己的贴片焊接焊点没有一点空洞。 那么空洞是怎样产生产生空洞的原因有哪些
    的头像 发表于 06-15 14:14 1233次阅读
    SMT贴片空洞是<b class='flag-5'>怎样</b><b class='flag-5'>产生</b>的

    完美时序-时钟产生和分发设计指南

    电子发烧友网站提供《完美时序-时钟产生和分发设计指南.pdf》资料免费下载
    发表于 11-18 10:27 0次下载
    完美<b class='flag-5'>时序</b>-时钟<b class='flag-5'>产生</b>和分发设计指南

    VSCode中Markdown借助plantuml绘制流程

    VSCode中Markdown里通过plantuml绘制流程,简直不要太方便。
    的头像 发表于 10-28 11:19 973次阅读