PlantUML For Sublime：为代码加图

最近的一个项目，需要使用UML图来表达架构&细节的设计，以确保团队内部成员在理解和实现上保持一致性。之前使用的 StarUML 感觉不是很方便（个人电脑的系统是OSX），所以找到了PlantUML。

PlantUML可以通过简单直观的语言来定义各种图，不需要考虑布局等因素。由于PlantUML借助的文本语法，因此还可以将这些图以文本文件的方式保存在项目仓库中，作为文档的一部分。

PlantUML官网提供了多种类型下载文件，其中有 Eclipse 插件可以直接使用。但是对于一个前端同学来说， Eclipse 是不可能会想用的。那么还有一种解决方案：Plant​Uml​Diagrams For Sublime Text

Plant​Uml​Diagrams 是 Sublime 的一个插件，但是由于插件文档不是最新的，因此本文着重介绍如何安装并成功运行使用 Plant​Uml​Diagrams 插件。

前置依赖安装

0. Java - 由于 PlantUML 基于 Java 开发，因此需要你的机器上装有Java。一般情况下 OSX 是自带 Java 的，如果没有参考Java官网进行安装
1. Graphviz - PlantUML 依赖的绘图库，建议使用 homebrew install graphviz 进行安装
   • 关于如何使用 homebrew 安装 Graphviz，参考 homebrew 官网
2. plantuml.jar - PlantUML 的转换 jar 包，需下载到本地并配置给 Plant​Uml​Diagrams 使用，下载地址

安装 Plant​Uml​Diagrams 插件

这一步建议使用 Sublime 的 Package Control 插件进行安装。

0. 先安装 Package Control 插件：packagecontrol.io/installatio…
1. 再通过 Cmd + Shift + P 命令面板中的 Package Control: Install Package 命令，安装 Plant​Uml​Diagrams

配置

刚安装完的 Plant​Uml​Diagrams插件是无法正常运行的，会报 No diagrams overlap selections. 的错误。而 Plant​Uml​Diagrams 插件的这部分文档开始不准确，可能会在这里卡住。

以 Sublime Text 3 为例，需要打开 Sublime Text > Preferences > Package Setting > Plant​Uml​Diagrams > Setting - User，在其中添加如下配置：

{
    "plantuml_server": "http://www.plantuml.com/plantuml/",
    "jar_file": "path/to/plantuml.jar",
    "charset": "UTF-8"
}
复制代码

配置含义：

• plantuml_server - 将 PlantUML 描述语言转换为图形的服务地址
• jar_file - 描述语言转换为图形的 jar 包库的文件路径

Plant​Uml​Diagrams 的运行机制是先调用 plantuml_server 配置的服务进行转换，如果不行再调用 jar_file 的 jar 包来转换。

上文中的 plantuml_server 是 PlantUML 的官方服务，如果涉及到一些项目机密等情况，你也可以提供一个自建的服务。具体查看：github.com/plantuml/pl…

使用

1.在 Sublime Text 中，新建文件，输入：

Bob -> Alice : Hello, how are you
Alice -> Bob : Fine, thank you, and you?
复制代码

2.全选，按下 Alt + M（Plant​Uml​Diagrams 的快捷键）

3.即可看到如下效果：

PlantUML官网中有很多示例效果可以查看，这里不一一列举

Language specification 列明了各种图形的语法文档

问题&注意事项

• Alt + M 转换图形的时候，一定要选中需要转换的文本，否者会报错。
• 插件使用上还是有挺多不便捷的地方，不支持像 markdown 一样实时预览。

最后

除了 PlantUML ，其实还有很多类似功能的库（只是库）能够实现将文本描述转换为UML图形。比较知名的有：mermaid、js-sequence-diagrams、flowchart.js。这些库会被一些 markdown 软件集成，这样就能在 markdown 中插入 UML 等图形了。如此看来，PlantUML 还有一个好处是可以比较方便的在各处迁移，毕竟语法都是类似甚至一样的。

参考

• PlantUML官网
• PlantUmlDiagrams

转载于:https://juejin.im/post/5b7697b5f265da27d57e523b