怎样使用PlantUML产生时序图呢
大家画时序图都在使用什么工具？ 上图中的这个图片，有没有感觉很复杂？如果让您用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 1binary intput as bbinary reset as c@0b is highc is high@1c is low@2.5c is high@4b is low@6b is high@8b is low@8b is high@8b is low@8c is low@enduml
使用vscode打开新建的txt文件，选择【ctrl+shift+p】快捷键，选择【预览光标位置图表】
就可以预览到上面代码产生的时序图。
右侧的图片也可以进行保存，或者直接使用vscode的快捷键导出图表。
是不是很神奇？
下面是主图页面中时序图的脚本文件：
@startumltitle 教你在vscode中用脚本语言画时序图。concise client as clientconcise server as serverconcise response freshness as cacheserver is idleclient is idle@client0 is sendclient -> server@+25 : get+25 is await+75 is recv+25 is idle+25 is sendclient -> server@+25 : getif-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 okexpires: 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使画图变得如此简单。
区块链技术应用于央行中不会影响金融的稳定性反而会受益
强者之争，华为云大数据BI助企业冲破信息孤岛
特斯拉市值蒸发近475亿美元
什么是图像分割？图像分割的体系结构和方法
哲讯科技SAP医疗器械行业ERP解决方案
怎样使用PlantUML产生时序图呢
汽车零部件EMC开发流程以及测试项目缩写简介
用什么加快计算速度？异构处理器来助力
高岘案例——江西龙南行政办事大楼
WWW主页制作实验
RV减速机磨合期的注意事项
努比亚新品发布会不用看了，三款新品努比亚M2+N2+M2青春版真机图全在这儿了！
CDMA低噪声放大器设计关键问题及解决措施
投影机的输入/输出端子/屏幕宽高比例/画面尺寸
I2C总线的电平逻辑
深度解读555集成芯片的诞生及电路应用
低成本的电池测试设备数字控制方案
揭秘allegro线宽、角度、圆弧的切换及右键snap pick to快捷键的设置
全球首款可折叠的柔性触控屏手机FlexPai
江苏移动施伟：未来，智能工厂将更柔性、更灵活
先说 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 1binary intput as bbinary reset as c@0b is highc is high@1c is low@2.5c is high@4b is low@6b is high@8b is low@8b is high@8b is low@8c is low@enduml
使用vscode打开新建的txt文件，选择【ctrl+shift+p】快捷键，选择【预览光标位置图表】
就可以预览到上面代码产生的时序图。
右侧的图片也可以进行保存，或者直接使用vscode的快捷键导出图表。
是不是很神奇？
下面是主图页面中时序图的脚本文件：
@startumltitle 教你在vscode中用脚本语言画时序图。concise client as clientconcise server as serverconcise response freshness as cacheserver is idleclient is idle@client0 is sendclient -> server@+25 : get+25 is await+75 is recv+25 is idle+25 is sendclient -> server@+25 : getif-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 okexpires: 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使画图变得如此简单。
区块链技术应用于央行中不会影响金融的稳定性反而会受益
强者之争，华为云大数据BI助企业冲破信息孤岛
特斯拉市值蒸发近475亿美元
什么是图像分割？图像分割的体系结构和方法
哲讯科技SAP医疗器械行业ERP解决方案
怎样使用PlantUML产生时序图呢
汽车零部件EMC开发流程以及测试项目缩写简介
用什么加快计算速度？异构处理器来助力
高岘案例——江西龙南行政办事大楼
WWW主页制作实验
RV减速机磨合期的注意事项
努比亚新品发布会不用看了，三款新品努比亚M2+N2+M2青春版真机图全在这儿了！
CDMA低噪声放大器设计关键问题及解决措施
投影机的输入/输出端子/屏幕宽高比例/画面尺寸
I2C总线的电平逻辑
深度解读555集成芯片的诞生及电路应用
低成本的电池测试设备数字控制方案
揭秘allegro线宽、角度、圆弧的切换及右键snap pick to快捷键的设置
全球首款可折叠的柔性触控屏手机FlexPai
江苏移动施伟：未来，智能工厂将更柔性、更灵活