search

frontend9 / fe9-library

九部知识库
1.94k stars 138 forks source link

像用Markdown码字那样绘图: UML绘图语言PlantUML #79

Open yyyuki1995 opened 6 years ago

yyyuki1995 commented 6 years ago

用过Markdown的同学都知道，它是一门文本标记语言，即：使用指定的语法格式编写纯文本内容，事后（或同步预览）根据语法就可以自动生成富文本内容

Markdown简单易学，工具完善，已经是技术领域文档编写的事实标准，那么问题来了

有没有一门文本标记语言可以用于绘图呢？至少可以绘制技术类的图表

有，这就是PlantUML

话不多说，咱直接上一个时序图Demo瞧瞧

@startuml

skinparam handwritten true

actor 老王 as Wang
participant 奸商 as js
participant 支付宝 as alipay
participant 无良借款公司 as debit
participant 土 as dust

Wang -> js: 老板 来个iPhone2017
note left: 手机摔了\n买个新的吧

js -> Wang: 一口价 10000元
note right: 生意上门了\n看起来是个肥猪

alt 爷有钱
    Wang -> alipay: 付款 10000 元
    alipay -> js: 打款 10000 元
    js -> Wang: 手机是你的了
else 手头紧
    Wang -> debit: 借款 10000 元
    debit -> Wang: 月息 10% 的借款
    Wang -> js: 老板 给你钱
    js -> Wang: 手机是你的了
    loop 持续半年
        Wang -> dust: 吃土
    end
end

@enduml

视觉效果如下所示，支持的语法应付日常绘图足矣：

default

除了时序图以外，PlantUML还支持好几种常用的技术类图形的绘制：

详见官网文档，简单易学，分分钟上手：http://plantuml.com/

另外，这个网站也很不错，算是精华版或者Cookbook之类的教程：http://ogom.github.io/draw_uml/plantuml/

至于工具，我选择 VSCode 及其PlantUML插件：https://atom.io/packages/plantuml-viewer

来一发效果图感受下：（实时预览 + 导出文件）

default

fxs0126 commented 3 years ago

那能把plantuml集成在markdown语法里吧。