你在用什么工具画时序图？教你在VScode中用C语言画时序图！

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

先说 VScode

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

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

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

安装后的界面图如下：

02

介绍plantuml

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

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

03

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

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

新建txt文件后，输入如下内容：

• 
  

@startumlTitle玩转单片机与嵌入式clock   "CLK"   as C0 with period 1
binary  "INTPUT"  as Bbinary"RESET"asC@0B is highCishigh@1Cislow@2.5Cishigh@4Bislow@6Bishigh@8Bislow@8Bishigh@8Bislow@8C is low
@enduml

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

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

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

是不是很神奇？

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

• 
  

@startuml
Title 教你在VScode中用脚本语言画时序图。concise "Client" as Clientconcise "Server" as Serverconcise "Response freshness" as Cache
Server is idleClient is idle
@Client0 is sendClient -> Server@+25 : GET+25 is await+75 is recv+25 is idle+25 is sendClient -> Server@+25 : GET\nIf-Modified-Since: 150+25 is await+50 is recv+25 is idle@100 <-> @275 : no need to re-request from server
@Server25 is recv+25 is work+25 is sendServer -> Client@+25 : 200 OK\nExpires: 275+25 is idle+75 is recv+25 is sendServer -> Client@+25 : 304 Not Modified+25 is idle
@Cache75 is fresh+200 is stale@enduml

图片如下

PlantUML使画图变得如此简单。