【计算机基础】通过插件plantuml,实现在VScode里面绘制状态机

📢:如果你也对机器人、人工智能感兴趣,看来我们志同道合✨

📢:不妨浏览一下我的博客主页【https://blog.csdn.net/weixin_51244852

📢:文章若有幸对你有帮助,可点赞 👍 收藏 ⭐不迷路🙉

📢:内容若有错误,敬请留言 📝指正!原创文,转载请注明出处

文章目录


前言

一开始接触状态机这一名词还不太理解,看了网上的介绍有点模棱两可、众说纷纭的感觉,其实对于程序员来说,状态机无非就是代码之间逻辑关系,实际上就是UML中的状态机图,它有开始状态,也有结束的状态,放几张示例图:



活动图:

PlantUML简介

PlantUML是一个开源工具,允许用户使用纯文本描述来创建UML(统一建模语言)图形。这种基于文本的图形描述方法具有许多优点。首先,它可以直接与源代码一起存储在版本控制系统中,从而使得代码和图形的同步变得更加简单。其次,PlantUML可以支持多种输出格式,包括PNG、SVG和LaTeX,满足了不同的需求。此外,由于其文本基础的特性,PlantUML还可以与各种工具进行集成,如Wikis、论坛、文档生成工具等。

一、如何绘制状态机?

1、安装插件plantuml和JAVA。

首先,在vscode的扩展商城中输入Plantuml, 点击进行安装。

并且需要注意如果你的电脑上没有安装java需要进行安装。

为什么需要java?因为 PlantUML 是用 java 写的,执行PlantUML 的代码需要 java。java 的安装方法本文就不再阐述了。

2、编写伪编程语言

在Plantuml中我们使用伪编程语言来生成图表。代码的文件的扩展名可以如一下:*.wsd, *.pu, *.puml, *.plantuml, *.iuml
基本格式

bash 复制代码
@startumla 
伪代码
@enduml

示例:

bash 复制代码
@startuml

start

if (Graphviz installed?) then (yes)
  :process all\ndiagrams;
else (no)
  :process only
  __sequence__ and __activity__ diagrams;
endif

stop

@enduml

3、预览生成的图表

Alt+D 或者Option+D可预览生成的图表。其次,如果写好代码后发现VScode没有更新的话,也可以按上述快捷键进行手动更新。

二、补充

2.1 Puml 官网地址

🔎Puml 官网地址:https://plantuml.com/zh/

2.2 报错:"Error: Could not register serviceworkers: InvalidstateError: Failed to regist"

vscode加载web 视图,报错:"Error: Could not register serviceworkers: InvalidstateError: Failed to regist"
解决办法

1、关闭vscode

2、按WIN + R,输入cmd,打开终端,然后输入命令 code --no-sandbox

3、会重启vscode,就可以正常使用了。

reference

参考博客

相关推荐
ZHANG13HAO8 小时前
Android 13 特权应用(Android Studio 开发)调用 AOSP 隐藏 API 完整教程
android·ide·android studio
wwww.wwww9 小时前
ArmCompilerForEmbedded6.24无法使用的问题
编辑器
NQBJT9 小时前
嵌入式从零开始(第十二篇):调试与工具链 —— 从 IDE 到逻辑分析仪
ide·stm32·单片机·嵌入式硬件·c#
小魏小魏我们去那里呀12 小时前
Java2Flowchart:一款把 Java 方法一键转换成 Mermaid 流程图的 IntelliJ 插件
java·ide·intellij-idea
WHS-_-202212 小时前
Pycharm 使用经验
ide·python·pycharm
Highcharts.js12 小时前
抉择之巅:从2029年回望2026年——企业可视化“战略分水岭”?
前端·javascript·信息可视化·编辑器·echarts·highcharts
ntGrace13 小时前
Windows环境下,在Vscode里利用ESP-IDF开发ESP32S3项目时,不能构建的问题1及解决方法
vscode·编辑器
AIBox36513 小时前
vscode api 配置怎么做:第三方大模型接入 VS Code 的完整方法
ide·人工智能·vscode·gpt·语言模型·编辑器
sz49723859914 小时前
WSL2+VSCode搭建ESP-IDF 开发环境
ide·vscode·编辑器·esp32·wsl
学Linux的语莫15 小时前
vscode连接linux服务器,linux环境编程开发。
linux·vscode·ubuntu·编辑器