PlantUML 教程

🌙
手机阅读
本文目录结构

为什么使用 PlantUML

以前我是用 Draw.io 这类工具来画流程图的。虽然说现在可视化画图工具都用起来还不错,但是还是要花费大量时间在拖拉组件上,效率十分低下。

在处理复杂一点的流程图上就不行了,推荐一款还算不错的绘图工具– Plantuml。VScode上就可以装。

VSCode内搜索 PlantUML 就可以找到了。

支持哪些?

PlantUML是一个开源项目,支持快速绘制:

  • 时序图
  • 用例图
  • 类图
  • 活动图 (旧版语法在此处)
  • 组件图
  • 状态图
  • 对象图
  • 部署图
  • 定时图

同时还支持以下非UML图:

  • JSON data
  • 线框图形界面
  • 架构图
  • 规范和描述语言 (SDL)
  • Ditaa diagram
  • 甘特图
  • 思维导图
  • Work Breakdown Structure diagram
  • 以 AsciiMath 或 JLaTeXMath 符号的数学公式
  • Entity Relationship diagram

通过简单直观的语言来定义这些示意图。 (语言参考指南).

新用户可以阅读快速开始. 也可以看看常见问题回答. 很多其他工具在使用 PlantUML.

可以生成PNG, SVG 或 LaTeX 格式的图片. 也可以生成 ASCII艺术图 (只针对时序图).

效果预览

比如下面代码

@startuml
朱安邦->阿西河 : 发布文章到
阿西河->朱安邦 : 发布完成
@enduml

可以渲染

朱安邦->阿西河 : 发布文章到
阿西河->朱安邦 : 发布完成

教程说明

本教程使用代码匹配效果图的形式,一段代码后面紧跟对应的渲染效果,后面不在重复说 代码可以渲染成下图样子 这种提示语。。

上面的例子,在以后的教程内会简写成下面的样子

@startuml
朱安邦->阿西河 : 发布文章到
阿西河->朱安邦 : 发布完成
@enduml
朱安邦->阿西河 : 发布文章到
阿西河->朱安邦 : 发布完成

更多效果

@startjson
{
  "firstName": "John",
  "lastName": "Smith",
  "isAlive": true,
  "age": 27,
  "address": {
    "streetAddress": "21 2nd Street",
    "city": "New York",
    "state": "NY",
    "postalCode": "10021-3100"
  },
  "phoneNumbers": [
    {
      "type": "home",
      "number": "212 555-1234"
    },
    {
      "type": "office",
      "number": "646 555-4567"
    }
  ],
  "children": [],
  "spouse": null
}
@endjson

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了