plantuml简介

简介

最近在学习设计模式，但是在画类图的时候，有一堆的画图工具可以选择，但总感觉用的不顺手。于是在网上找到了这个神奇的语言。PlantUML是一个开源项目，支持时序图、用例图、类图、活动图、组件图、状态图、对象图等的绘制。简而言之，就是用写代码的方式画图。几行代码，输出标准结构图，不用再去考虑结构、对齐等琐事啦！

效果预览

如下简单的语法表达类图之间的关系

@startuml
Class01 <|-- Class02
Class03 <|.. Class04
Class05 *-- Class06
Class07 o-- Class08
Class09 <.. Class10
Class11 <-- Class12
@enduml

效果如下：

再看一下复杂一点的装饰者模式类图，代码如下

@startuml
namespace Decorator{
    interface Component
    interface Decorator
    Component : +operation():void
    ConcreateComponent : +opreation():void
    Decorator : -component:Component
    Decorator : +opreantion():void
    ConcreateDecorator1 : +opreation():void
    ConcreateDecorator1 : +addBehavior():void
    ConcreateDecorator2 : +opreation():void
    ConcreateDecorator2 : +addBehavior():void

    Decorator <|-- ConcreateDecorator1
    Decorator <|-- ConcreateDecorator2
    Component <|.. Decorator
    Component <|.. ConcreateComponent
    Decorator o-- Component

    note bottom of Decorator
        component.opreation();
    end note

    note bottom of ConcreateDecorator1
        super.operation();
        addBehavior();
    end note

    note bottom of ConcreateDecorator2
        super.operation();
        addBehavior();
    end note
}
@enduml

效果图：

时序图长这样：

@startuml
title 时序图

== 鉴权阶段 ==

Alice -> Bob: 请求
Bob -> Alice: 应答

== 数据上传 ==

Alice -> Bob: 上传数据
note left: 这是显示在左边的备注

Bob --> Canny: 转交数据
... 不超过 5 秒钟 ...
Canny --> Bob: 状态返回
note right: 这是显示在右边的备注

Bob -> Alice: 状态返回

== 状态显示 ==

Alice -> Alice: 给自己发消息
@enduml

环境配置

这里主要介绍 Mac + VS Code + Markdown Preview Enhanced 实现PlantUML预览的配置过程

Mac环境支持plantUML的markdown编译步骤

brew install libtool
brew link libtool
brew install graphviz
brew link --overwrite graphviz

如果没有gem，先安装gem。然后执行下面语句安装 asciidoctor。

gem install asciidoctor

安装完支持环境之后，VS Code里装上 Markdown Preview Enhanced 就可以在markdown里编辑和预览效果啦！

plantuml语法：http://plantuml.com/

目前，sublime、Atom、VS Code、Webstorm都有相对应的插件来实现在编辑器里编辑和预览plantUML。

plantuml编辑器整理

这里还有一些其他的编辑器推荐。大部分都是在线预览版本，也有编辑器插件。

1、https://www.planttext.com/
2、http://www.plantuml.com/plantuml
3、https://sujoyu.github.io/plantuml-previewer/
4、Chrome插件 UML Diagram Editor （渲染效果模糊，速度慢）
5、Intellij Idea 插件（Android Studio 当然也支持）：PlantUML integration

简介

效果预览

环境配置

plantuml编辑器整理

参考