VS Code 下C4-PlantUML安裝

安裝VS Code

直接官網(wǎng)下載安裝即可，過程略去。

安裝PlantUML插件

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

配置VS Code代碼片段

安裝完P(guān)lantUML之后，為了提高效率，我們最好安裝PlantUML相關(guān)的代碼片段。
打開VS Code菜單，層級(jí)為Code→Preferences→User Snippets，如下圖：

或者

在選擇Snippets File Or Create Snippets彈窗中，選擇New Global Snippets file，如下圖：

在接下來的彈窗中，輸入Snippets file的文件名，如下圖：

使用瀏覽器打開以下鏈接，并將瀏覽器返回的文本內(nèi)容粘貼到VS Code編輯區(qū)
github鏈接地址
內(nèi)容如下

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