还能这么玩？我用VsCode画类图、流程图、时序图、状态图不要太爽！

时间 2020-07-15 标签还能 vscode 流程图时序状态不要

文章每周持续更新，各位的「三连」是对我最大的确定。能够微信搜索公众号「后端技术学堂」第一时间阅读（通常比博客早更新一到两篇）html

软件设计中，有好几种图须要画，好比流程图、类图、组件图等，我知道大部分人画流程图通常都会用微软的viso绘制，我以前也是这个习惯。程序员

viso画图有个很差的地方是须要时刻去调整线条和边框已达到简洁美观，今天我给你们介绍一款程序员画图神器PlantUML，一款你用了就爱上的画图软件！web

VsCode以插件的形式支持了这款画图神器，还不知道VsCode？面试

VsCode 强大地自定义功能，已经成为程序员最爱编辑器。
Microsoft在2015年4月30日Build 开发者大会上正式宣布了 Visual Studio Code 项目:一个运行于 Mac OS X、Windows和Linux之上的，针对于编写现代 Web 和云应用的跨平台源代码编辑器。编程

该编辑器也集成了全部一款现代编辑器所应该具有的特性，包括语法高亮(syntax high lighting)，可定制的热键绑定(customizable keyboard bindings)，括号匹配(bracket matching)以及代码片断收集(snippets)。Somasegar 也告诉笔者这款编辑器也拥有对 Git 的开箱即用的支持。引用360百科后端

主角出场

PlantUML

PlantUML是一个开源项目，支持快速绘制：微信

时序图
用例图
类图
活动图 (旧版语法在此处)
组件图
状态图
对象图
部署图
定时图
…架构

同时还支持如下非UML图:编辑器

线框图形界面
架构图
规范和描述语言 (SDL)
Ditaa diagram
甘特图
MindMap diagram
以 AsciiMath 或 JLaTeXMath 符号的数学公式svg

经过简单直观的语言来定义这些示意图,与MarkDown有类似的做用，这两种语言一个主要面向文本渲染一个主要用于图形绘制。

语法

语法简单明了，查看如下官方教程
我截取几个官网的事例图片在这里：

活动图
类图
时序图
用例图
状态图

图中的图片都是用源代码’ ‘写’’ 出来的哦！是否是很cool

PlantUML赶上VsCode

安装

安装graphviz-2.38.msi
安装2个vscode插件:

PlantUML、Graphviz Preview

例子

@startuml
Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response

Alice -> Bob: Another authentication Request
Alice <-- Bob: another authentication Response
@enduml

预览

Alt+D

文件格式

.wsd, .pu, .puml, .plantuml, .iuml

如何导出

F1/ctrl+shift+p; PlantUML:导出当前图表；选择导出格式png；导出便可。

好了，这么好用工具赶忙用起来吧！

原创不易，看到这里动动手指，各位的「三连」是对我持续创做的最大支持。

能够微信搜索公众号「后端技术学堂」回复「资料」有我给你准备的各类编程学习资料。文章每周持续更新，咱们下期见！