画图之C4架构图idea和vscode环境搭建篇

VS Code 下C4-PlantUML安装

安装VS Code

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

安装PlantUML插件

在VS Code的Extensions窗口中搜索PlantUML，安装PlantUML插件。

配置VS Code代码片段

安装完PlantUML之后，为了提高效率，我们最好安装PlantUML相关的代码片段。
打开VS Code菜单，层级为Code→Preferences→User Snippets，如下图：

或者

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

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

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

{
	"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": {