查看原文
其他

卧槽:这款 IDEA 插件能搞,流程图、架构图,N种图... 简直神器!

磊哥 架构师专栏 2022-05-05

大家好,我是磊哥。


在写文档的过程中,经常需要进行画图。最近发现 IDEA 有一款插件 PlantUML, 它本质上是也算一门可以快速画图的设计语言,学习起来也很方便,这篇文章主要向大家介绍IDEA 安装 PlantUML 试用体验,希望对大家有所帮助。

PlantUML 简介

一门可以快速画图的设计语言:

http://plantuml.com/zh/state-diagram

PlantUML 是一个开源项目,支持快速绘制时序图、用例图、类图、活动图、组件图、状态图、对象图、部署图等。同时还支持非 UML 图的甘特图、架构图等。例如下面等用例图:

注 意
 文末有:7701页互联网大厂面试题 

PlantUml 是什么

PlantUml是一个支持快速绘制的开源项目。其定义了一套完整的语言用于实现UML关系图的描述,并基于强大的Graphviz图形渲染库进行UML图的生成。绘制的UML图还可以导出为图片,以及通用的矢量SVG格式文件。

PlantUML 的优点

完全文本方式编辑,无需控件拖拽,自动调节图元距离,简单美观

1、与开发平台完全无关,不受平台限制,只要有PlantUML jar包就能生成UML图

2、支持多种文本编辑器、ide的集成,例如idea、eclipse、notepad++等

3、作为一个Java coder,通常使用idea作为首选开发工具,我们以idea中的使用为主作介绍

安装 Graphviz

IDEA 安装PlantUML插件还需要安装 Graphviz 才能正常显示,先上 Graphviz 安装包的资源分享链接

graphviz-2.38.msi

百度网盘链接:

https://pan.baidu.com/s/1aPWSoa8iIGa0iQogprsgdA
提取码:1234

Graphviz 下载之后,疯狂下一步,就安装完了

如果不安装 Graphviz,画图的时候,会提示

IDEA 安装 PlantUML插件

IDEA 直接搜索安装:

File -> Settings -> Plugins 搜索 PlantUML ,搜索 PlantUML , 安装 PlantUML integration , 如下

或者你用,安装包,离线安装

下载插件包安装,地址

http://plugins.jetbrains.com/plugin/7017-plantuml-integration

使用 PlantUML 画流程图

File -> New -> PlantUML File -> 选择你要画的类型


输入内容,先看看效果

  1. @startuml

  2. skinparam rectangle {

  3.    BackgroundColor DarkSeaGreen

  4.    FontStyle Bold

  5.    FontColor DarkGreen

  6. }

  7. :User: as u

  8. rectangle Tool as t

  9. rectangle "Knowledge Base" as kb

  10. (Robot Framework) as rf

  11. (DUT) as dut

  12. note as ts

  13.    test script

  14. end note

  15. note as act

  16.    query

  17.    &

  18.    action

  19. end note

  20. note as t_cmt

  21.    - 执行测试脚本,

  22.    - 按照知识库响应消息

  23.    - 关注公众号:搜云库技术团队

  24.    - 回复:面试题,得3625页大厂面试题

  25. end note

  26. note as kb_cmt

  27.    - 根据当前消息确定响应方法

  28.    - 根据上下文填充消息

  29.    - 保存信息到相关上下文

  30. end note

  31. u --> rf

  32. rf =right=> ts

  33. ts =down=> t

  34. kb <=left=> act

  35. act <=up=> t

  36. t = dut

  37. t_cmt -- t

  38. kb_cmt -left- kb

  39. @enduml



时序图:

  1. @startuml

  2. Alice -> Bob: Authentication Request

  3. Bob --> Alice: Authentication Response

  4. Alice -> Bob: Another authentication Request

  5. Alice <-- Bob: another authentication Response

  6. @enduml

效果如图:

导出文件

设置不同的角色

时序图角色可以分为: actor, boundary, control, entity, database,每种角色呈现的图形也是不一样的。

  1. @startuml

  2. actor Foo1

  3. boundary Foo2

  4. control Foo3

  5. entity Foo4

  6. database Foo5

  7. collections Foo6

  8. Foo1 -> Foo2 : To boundary

  9. Foo1 -> Foo3 : To control

  10. Foo1 -> Foo4 : To entity

  11. Foo1 -> Foo5 : To database

  12. Foo1 -> Foo6 : To collections

  13. @enduml

图例注脚等

  1. @startuml

  2. header Page Header

  3. footer Page %page% of %lastpage%

  4. title Example Title

  5. Alice -> Bob : message 1

  6. note left: this is a first note

  7. Alice -> Bob : message 2

  8. @enduml

其他

如果不想装 graphviz,想直接用,可以下载chrome插件PlantUML Viewer,安装之后直接编辑文本,可以在浏览器直接显示。

最后

IDEA 上用 PlantUML 虽然不错,但是每次还需要打开IDEA,还是有点小麻烦。我在开发过程中用的更多的是用在线作图工具,如:ProcessOn, webchart ,等。

近期技术热文


往期推荐



免费版 IDEA 为啥不能使用 Tomcat ?

拼多多面试:如何用 Redis 统计独立用户访问量?

丢人不!还用System.out.println("");太 Low了!

除了Navicat:正版 MySQL 客户端,真香!


第3版:互联网大厂面试题

包括 Java 集合、JVM、多线程、并发编程、设计模式、算法调优、Spring全家桶、Java、MyBatis、ZooKeeper、Dubbo、Elasticsearch、Memcached、MongoDB、Redis、MySQL、RabbitMQ、Kafka、Linux、Netty、Tomcat、Python、HTML、CSS、Vue、React、JavaScript、Android 大数据、阿里巴巴等大厂面试题等、等技术栈!

阅读原文: 高清 7701页大厂面试题  PDF

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存