VSCode PlantUML 插件安装与配置指南

VSCode PlantUML 插件安装与配置指南

vscode-plantuml Rich PlantUML support for Visual Studio Code. 项目地址: https://gitcode.com/gh_mirrors/vs/vscode-plantuml

1. 项目基础介绍和主要编程语言

项目基础介绍

VSCode PlantUML 是一个为 Visual Studio Code 开发的插件，旨在为开发者提供丰富的 PlantUML 支持。PlantUML 是一种用于绘制 UML 图的工具，支持多种类型的图表，如类图、时序图、活动图等。通过该插件，开发者可以在 VSCode 中直接编写和预览 PlantUML 图表，极大地提高了开发效率。

主要编程语言

该项目主要使用 TypeScript 进行开发，TypeScript 是 JavaScript 的一个超集，添加了可选的静态类型和基于类的面向对象编程。

2. 项目使用的关键技术和框架

关键技术

• PlantUML: 用于生成 UML 图的工具。
• Java: 用于运行 PlantUML 的解释器。
• Graphviz: 用于生成图表的布局。

框架

• Visual Studio Code: 作为插件的宿主环境，提供代码编辑和预览功能。
• TypeScript: 用于插件的开发，提供类型安全和面向对象编程的支持。

3. 项目安装和配置的准备工作和详细安装步骤

准备工作

在安装 VSCode PlantUML 插件之前，需要确保以下软件已经安装：

• Java: 用于运行 PlantUML 的解释器。
• Graphviz: 用于生成图表的布局。

安装 Java

• Windows: 下载并安装 Java SE Development Kit。
• Mac: 使用 Homebrew 安装 Java：

  brew install --cask temurin
  

安装 Graphviz

• Windows: 下载并安装 Graphviz。
• Mac: 使用 Homebrew 安装 Graphviz：

  brew install graphviz
  

详细安装步骤

步骤 1：安装 Visual Studio Code

• 下载并安装 Visual Studio Code。

步骤 2：安装 PlantUML 插件

1. 打开 Visual Studio Code。
2. 按下 Ctrl+P 打开快速打开对话框。
3. 输入以下命令并按下回车：

   ext install plantuml
   

4. 等待插件安装完成。

步骤 3：配置 PlantUML 插件

1. 打开 VSCode 的设置（Ctrl+,）。
2. 搜索 plantuml，找到相关设置项。
3. 配置 plantuml.jar 路径（如果使用自定义的 PlantUML jar 文件）：

   "plantuml.jar": "path/to/your/plantuml.jar"
   

4. 配置 plantuml.includepaths（如果需要自定义包含路径）：

   "plantuml.includepaths": ["docs/diagrams/style", "docs/diagrams/src"]
   

步骤 4：验证安装

1. 创建一个新的 PlantUML 文件（扩展名为 .wsd, .pu, .puml, .plantuml, .iuml）。
2. 编写一个简单的 PlantUML 图表，例如：

   @startuml
   Alice -> Bob: Hello
   @enduml
   

3. 按下 Alt+D（Mac 上为 Option+D）预览图表。

常见问题

• Java 未安装: 如果提示 Java 未安装，请确保 Java 已正确安装并配置了环境变量。
• Graphviz 未安装: 如果提示 Graphviz 未安装，请确保 Graphviz 已正确安装并配置了环境变量。

通过以上步骤，您应该能够成功安装并配置 VSCode PlantUML 插件，开始在 VSCode 中编写和预览 PlantUML 图表。

vscode-plantuml Rich PlantUML support for Visual Studio Code. 项目地址: https://gitcode.com/gh_mirrors/vs/vscode-plantuml