vscode第二篇画图环境搭建

最新推荐文章于 2024-07-18 19:00:00 发布

写的更好

最新推荐文章于 2024-07-18 19:00:00 发布

阅读量338

点赞数

分类专栏：工具类文章标签： vscode ide 编辑器

本文链接：https://blog.csdn.net/zwy_992/article/details/134734871

版权

本文介绍了如何在VSCode中搭建UML和流程图的绘制环境，包括安装VSCode、PlantUML插件、Graphviz，以及配置C4-PlantUML代码片段，提供了详细的步骤和示例。

摘要由CSDN通过智能技术生成

UML

安装 VS Code

直接官网下载安装即可，过程略去。

安装 PlantUML 插件

同上，略。
官网：https://plantuml.com/zh/starting
下载得到一个.jar包，放在任意文件夹即可
点击VScode 右下角小齿轮->设置->用户->扩展->PlantUML配置
修改选项
Jar (自定义 plantuml.jar 的位置。留空则使用内置的版本。)修改为刚才下载的plantuml.jar文件所在的位置
Java(Java 可执行文件位置。)修改为java可执行文件的位置
再转到Graphviz Preview的设置，点击在setting.json中编辑，添加Graphviz的dot可执行文件的位置
“graphvizPreview.dotPath”: “D:/Programs/Graphviz 2.44.1/bin/dot.exe”,

安装 Graphviz

如果图形渲染出现问题，提示安装 graphviz 库，直接到 graphviz 官网安装即可。官网链接如下：
https://graphviz.gitlab.io/download/
Mac 系统推荐采用 MacPorts 安装。

官网：https://graphviz.gitlab.io/download/
同样把bin文件夹添加到环境变量
如果是2.44的版本，再在命令行中运行（之前的版本不需要）
dot -c

使用案例

官网有超级多示例：https://plantuml.com/zh/

C4-PlantUML

安装 VS Code
直接官网下载安装即可，过程略去。

安装 PlantUML 插件
同上，略。

安装 Graphviz
同上，略。

配置 VS Code 代码片段

安装完 PlantUML 之后，为了提高效率，我们最好安装 PlantUML 相关的代码片段。
配置用户代码片段
在这里插入图片描述
打开 VS Code 菜单，层级为 Code→Preferences→User Snippets，如下图：

在选择 Snippets File Or Create Snippets 弹窗中，选择 New Global Snippets file，如下图：

在接下来的弹窗中，输入 Snippets file 的文件名，如下图：

使用浏览器打开以下链接，并将浏览器返回的文本内容粘贴到 VS Code 编辑区

https://github.com/plantuml-stdlib/C4-PlantUML/blob/master/.vscode/C4.code-snippets

{
	"C4_Include_Context": {
		"scope": "plantuml",
		"prefix": "Include C4 Context Diagram",
		"body": [
			"!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml"
		],
		"description": "Include C4 Context Diagram"
	},
	"C4_Include_Container": {
		"scope": "plantuml",
		"prefix": "Include C4 Container Diagram",
		"body": [
			"!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml"
		],
		"description": "Include C4 Container Diagram"
	},
	"C4_Include_Component": {
		"scope": "plantuml",
		"prefix": "Include C4 Component Diagram",
		"body": [
			"!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml"
		],
		"description": "Include C4 Component Diagram"
	},
	"C4_Include_Deployment": {
		"scope": "plantuml",
		"prefix": "Include C4 Deployment Diagram",
		"body": [
			"!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml"
		],
		"description": "Include C4 Deployment Diagram"
	},
	"C4_Include_Dynamic": {
		"scope": "plantuml",
		"prefix": "Include C4 Dynamic Diagram",
		"body": [
			"!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Dynamic.puml"
		],
		"description": "Include C4 Dynamic Diagram"
	},
	"C4_Person": {
		"scope": "plantuml",
		"prefix": "Person",
		"body": [
			"Person(${1:alias}, \"${2:label}\")"
		],
		"description": "Add Person to C4 diagram"
	},
	"C4_Person_Descr": {
		"scope": "plantuml",
		"prefix": "Person with Description",
		"body": [
			"Person(${1:alias}, \"${2:label}\", \"${3:description}\")"
		],
		"description": "Add Person with Description to C4 diagram"
	},
	"C4_Person_Ext": {
		"scope": "plantuml",
		"prefix": [
			"External Person",
			"Person (External)"
		],
		"body": [
			"Person_Ext(${1:alias}, \"${2:label}\")"
		],
		"description": "Add External Person to C4 diagram"
	},
	"C4_Person_Ext_Descr": {
		"scope": "plantuml",
		"prefix": [
			"External Person with Description",
			"Person (External) with Description"
		],
		"body": [
			"Person_Ext(${1:alias}, \"${2:label}\", \"${3:description}\")"
		],
		"description": "Add External Person with Description to C4 diagram"
	},
	"C4_Container": {
		"scope": "plantuml",
		"prefix": "Container",
		"body": [
			"Container(${1:alias}, \"${2:label}\", \"${3:technology}\")"
		],
		"description": "Add Container to C4 diagram"
	},
	"C4_Container_Descr": {
		"scope": "plantuml",
		"prefix": "Container with Description",
		"body": [
			"Container(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")"
		],
		"description": "Add Container with Description to C4 diagram"
	},
	"C4_Container_Ext": {
		"scope": "plantuml",
		"prefix": [
			"External Container",
			"Container (External)"
		],
		"body": [
			"Container_Ext(${1:alias}, \"${2:label}\", \"${3:technology}\")"
		],
		"description": "Add External Container to C4 diagram"
	},
	"C4_Container_Ext_Descr": {
		"scope": "plantuml",
		"prefix": [
			"External Container with Description",
			"Container (External) with Description"
		],
		"body": [
			"Container_Ext(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")"
		],
		"description": "Add External Container with Description to C4 diagram"
	},
	"C4_ContainerDb": {
		"scope": "plantuml",
		"prefix": "Database Container",
		"body": [
			"ContainerDb(${1:alias}, \"${2:label}\", \"${3:technology}\")"
		],
		"description": "Add Database Container to C4 diagram"
	},
	"C4_ContainerDb_Descr": {
		"scope": "plantuml",
		"prefix": "Database Container with Description",
		"body": [
			"ContainerDb(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")"
		],
		"description": "Add Database Container with Description to C4 diagram"
	},
	"C4_ContainerDb_Ext": {
		"scope": "plantuml",
		"prefix": [
			"External Database Container",
			"Database Container (External)"
		],
		"body": [
			"ContainerDb_Ext(${1:alias}, \"${2:label}\", \"${3:technology}\")"
		],
		"description": "Add External Database Container to C4 diagram"
	},
	"C4_ContainerDb_Ext_Descr": {
		"scope": "plantuml",
		"prefix": [
			"External Database Container with Description",
			"Database Container (External) with Description"
		],
		"body": [
			"ContainerDb_Ext(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")"
		],
		"description": "Add External Database Container with Description to C4 diagram"
	},
	"C4_ContainerQueue": {
		"scope": "plantuml",
		"prefix": "Queue Container",
		"body": [
			"ContainerQueue(${1:alias}, \"${2:label}\", \"${3:technology}\")"
		],
		"description": "Add Queue Container to C4 diagram"
	},
	"C4_ContainerQueue_Descr": {
		"scope": "plantuml",
		"prefix": "Queue Container with Description",
		"body": [
			"ContainerQueue(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")"
		],
		"description": "Add Queue Container with Description to C4 diagram"
	},
	"C4_ContainerQueue_Ext": {
		"scope": "plantuml",
		"prefix": [
			"External Queue Container",
			"Queue Container (External)"
		],
		"body": [
			"ContainerQueue_Ext(${1:alias}, \"${2:label}\", \"${3:technology}\")"
		],
		"description": "Add External Queue Container to C4 diagram"
	},
	"C4_ContainerQueue_Ext_Descr": {
		"scope": "plantuml",
		"prefix": [
			"External Queue Container with Description",
			"Queue Container (External) with Description"
		],
		"body": [
			"ContainerQueue_Ext(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")"
		],
		"description": "Add ExternalQueue Container with Description to C4 diagram"
	},
	"C4_Container_Boundary": {
		"scope": "plantuml",
		"prefix": [
			"Container Boundary",
			"Boundary for Container"
		],
		"body": [
			"Container_Boundary(${1:alias}, \"${2:label}\"){",
			"\t$0",
			"}"
		],
		"description": "Add a Container Boundary to C4 diagram"
	},
	"C4_Component": {
		"scope": "plantuml",
		"prefix": "Component",
		"body": [
			"Component(${1:alias}, \"${2:label}\", \"${3:technology}\")"
		],
		"description": "Add Component to C4 diagram"
	},
	"C4_Component_Descr": {
		"scope": "plantuml",
		"prefix": "Component with Description",
		"body": [
			"Component(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")"
		],
		"description": "Add Component with Description to C4 diagram"
	},
	"C4_Component_Ext": {
		"scope": "plantuml",
		"prefix": [
			"External Component",
			"Component (External)"
		],
		"body": [
			"Component_Ext(${1:alias}, \"${2:label}\", \"${3:technology}\")"
		],
		"description": "Add External Component to C4 diagram"
	},
	"C4_Component_Ext_Descr": {
		"scope": "plantuml",
		"prefix": [
			"External Component with Description",
			"Componen