在MacOS上安装GraphViz并用PlantUML绘制UML图

￡神魔★判官ぃ 2022-09-07 12:28 21阅读 0赞

### 文章目录 ###

*  在MacOS上安装GraphViz并用PlantUML绘制UML图
 *   *  在MacOS上安装Graphviz
     *  在VSCode上安装PlantUML插件
     *  用PlantUML绘制UML图

# 在MacOS上安装GraphViz并用PlantUML绘制UML图 #

## 在MacOS上安装Graphviz ##

# install graphviz
    brew install graphviz
    
    # verity
    dot -V

如果有用了Homebrew镜像源的Homebrew-bottles，需要先unset环境变量才能安装成功，否则会出现安装特别慢且因为缺少包而安装失败的问题。

# unset env vars
    unset HOMEBREW_BOTTLE_DOMAIN
    
    # verify
    echo $HOMEBREW_BOTTLE_DOMAIN

参见：

*  [brew install graphviz, then Error: Failed to download resource “libpng”][brew install graphviz_ then Error_ Failed to download resource _libpng]
 *  [Homebrew-bottles 镜像使用帮助][Homebrew-bottles]
 *  [Homebrew / Linuxbrew 镜像使用帮助][Homebrew _ Linuxbrew]

## 在VSCode上安装PlantUML插件 ##

在VSCode上安装PlantUML插件，用“UML as code"的方式来绘制UML图。

PlantUML依赖GraphViz和Java。如果没有安装GraphViz，在生成UML类图时会报错“Can’t find GraphViz"。

参见：

*  [UML Made Easy with PlantUML & VS Code][UML Made Easy with PlantUML _ VS Code]

## 用PlantUML绘制UML图 ##

在VSCode上新建文件，文件后缀名为`*.puml`。  
以DDD领域模型为例：

@startuml
    namespace user-context { 
        User <<Aggregate Root>>
        VerfifyCode <<Aggregate Root>>
        Authorization <<Aggregate Root>>
    }
    
    namespace question-context { 
        Question <<Aggregate Root>>
        Answer <<Entity>>
        Question "1" *-- "N" Answer
    }
    
    namespace space-context { 
        Space <<Aggregate Root>>
        SpaceMember <<Entity>>
        Space "1" *-- "N" SpaceMember
        SpaceApply <<Entity>>
        Space "1" *-- "1" SpaceApply
    }
    
    @enduml

按下`Option` \+ `D` 键生成UML图。

![DDD UML diagram][]

PlantUML文档参见：[https://plantuml.com/zh/][https_plantuml.com_zh]

[brew install graphviz_ then Error_ Failed to download resource _libpng]: https://githubmemory.com/repo/Homebrew/homebrew-core/issues/75213
[Homebrew-bottles]: https://mirrors.tuna.tsinghua.edu.cn/help/homebrew-bottles/
[Homebrew _ Linuxbrew]: https://mirrors.tuna.tsinghua.edu.cn/help/homebrew/
[UML Made Easy with PlantUML _ VS Code]: https://contentlab.io/uml-made-easy-with-plantuml-vs-code/
[DDD UML diagram]: /images/20220829/3ac51fccbe2b4a4cb1acf2bfdf13ef44.png
[https_plantuml.com_zh]: https://plantuml.com/zh/