Skip to main content

小书匠语法说明之plantuml

概述

plantuml是一个非常方便的uml工具,只要简单的编写文本,就可以得到对应的UML图形。这样的功能,对于写技术类的文章,特别有帮助。再加上自身是一种纯文本的格式,更加方便了文件版本的管理。plantuml除了可以绘制标准的uml图之外,还能绘制界面布局图、结构图、甘特图乃至于数学公式等。可谓“plantuml在手,天下我有”。

plantuml 语法不是标准的 commonmark语法,不同编辑器或者博客对其支持的程度不一样, 目前小书匠提供了对该语法的完整支持,并且实现了实时预览的效果。

PlantUML is an open-source tool allowing users to create UML diagrams from a plain text language. The language of PlantUML is an example of an Application Specific Language.[3] It uses Graphviz software to lay out its diagrams. It has been used to allow blind students to work with UML.[4][5] PlantUML also helps blind software engineers to design and read UML diagrams.

使用

元数据标识: grammar_plantuml

想要使用该语法,需要在 设置>扩展语法 里把plantuml选项打开。或者在每篇文章的元数据里通过 grammar_plantuml 进行控制。系统默认关闭plantuml语法功能

更详细的语法使用,可以参考这里 http://plantuml.com/

plantuml 语法需要使用第三方服务器,系统默认指定小书匠自定义的服务器,内网用户可以通过 设置>扩展语法>plantuml 里的服务器选项,修改成自己的 plantuml 服务器地址

代码段内的文字将被encode成base64并被压缩后做为 :uml 内容提交到服务器。

示例

  1. 1```plantuml! 
  2. 2 Bob->Alice : hello 
  3. 3 ``` 

效果

BobBobAliceAlicehello

plantuml

基础

普通

  1. 1``` plantuml! 
  2. 2title Title 
  3. 3 
  4. 4( ) 
  5. 5note left : Note 
  6. 6 
  7. 7[ ] 
  8. 8note right : Note 
  9. 9 
  10. 10' single-line comment 
  11. 11 
  12. 12/' 
  13. 13 block comment 
  14. 14'/ 
  15. 15``` 
TitleNoteNote

参与者

  1. 1``` plantuml! 
  2. 2actor Actor 
  3. 3boundary Boundary 
  4. 4control Control 
  5. 5entity Entity 
  6. 6database Database 
  7. 7:Actor alias: 
  8. 8``` 
ActorBoundaryControlEntityDatabaseActor alias

箭头

  1. 1``` plantuml! 
  2. 2up -up-> right 
  3. 3-right-> down 
  4. 4-down-> left 
  5. 5-left-> up 
  6. 6``` 
uprightdownleft

颜色

  1. 1``` plantuml! 
  2. 2' ================= 
  3. 3' == Declaration == 
  4. 4' ================= 
  5. 5 
  6. 6[Component 1] 
  7. 7 
  8. 8node "Node 1" { 
  9. 9 package "Package 1" #Orange { 
  10. 10 [Component 4] 
  11. 11 [Component 3] 
  12. 12
  13. 13 [Component 2] 
  14. 14
  15. 15 
  16. 16 
  17. 17 
  18. 18' ==================== 
  19. 19' == Implementation == 
  20. 20' ==================== 
  21. 21 
  22. 22 
  23. 23node "Node 1" { 
  24. 24 [Component 2] .[#Green]-> [Component 4] 
  25. 25 [Component 3] <-left-> [Component 4] 
  26. 26 [Component 4] -- [Component 1] 
  27. 27
  28. 28``` 
Node 1Package 1Component 2Component 4Component 3Component 1

常见 UML 图

用例图

  1. 1``` plantuml! 
  2. 2actor Promoter 
  3. 3actor Entrant 
  4. 4 
  5. 5Promoter --> (Create Event) 
  6. 6Promoter -> (Attend Event) 
  7. 7 
  8. 8Entrant --> (Find Event) 
  9. 9(Attend Event) <- Entrant 
  10. 10 
  11. 11(Attend Event) <.. (Create Member) : <<include>> 
  12. 12``` 
PromoterEntrantCreate EventAttend EventFind EventCreate Member«include»

活动图

  1. 1``` plantuml! 
  2. 2(*) --> "Find Event" 
  3. 3"Find Event" -> "Attend Event" 
  4. 4 
  5. 5if "Capacity?" then 
  6. 6 ->[ok] "Create Ticket" 
  7. 7else 
  8. 8 -->[full] if "Standby?" then 
  9. 9 ->[ok] "Standby Ticket" 
  10. 10 else 
  11. 11 -->[no] "Cancel Ticket" 
  12. 12 "Cancel Ticket" --> (*) 
  13. 13 endif 
  14. 14endif 
  15. 15 
  16. 16"Create Ticket" --> ==show== 
  17. 17"Standby Ticket" --> ==show== 
  18. 18==show== --> "Show Ticket" 
  19. 19"Show Ticket" --> (*) 
  20. 20``` 
Find EventAttend EventCreate TicketStandby TicketCancel TicketShow TicketCapacity?okfullStandby?okno

状态图

  1. 1``` plantuml! 
  2. 2[*] --> active 
  3. 3 
  4. 4active -right-> inactive : disable 
  5. 5inactive -left-> active : enable 
  6. 6 
  7. 7inactive --> closed : close 
  8. 8active --> closed : close 
  9. 9 
  10. 10closed --> [*] 
  11. 11``` 
activeinactivecloseddisableenablecloseclose

序列图

  1. 1``` plantuml! 
  2. 2actor Entrant 
  3. 3 
  4. 4Entrant -> Ticket : Attend Event Request 
  5. 5 
  6. 6activate Ticket 
  7. 7Ticket -> Member : Create Member Request 
  8. 8 
  9. 9activate Member 
  10. 10Member -> Member : Create Member 
  11. 11Ticket <-- Member : Create Member Response 
  12. 12deactivate Member 
  13. 13 
  14. 14Ticket -> Ticket : Create Ticket 
  15. 15Entrant <-- Ticket : Attend Event Response 
  16. 16deactivate Ticket 
  17. 17``` 
EntrantEntrantTicketTicketMemberMemberAttend Event RequestCreate Member RequestCreate MemberCreate Member ResponseCreate TicketAttend Event Response
  1. 1```plantuml! 
  2. 2 
  3. 3@startuml 
  4. 4skinparam backgroundColor #EEEBDC 
  5. 5skinparam handwritten true 
  6. 6 
  7. 7skinparam sequence { 
  8. 8 ArrowColor DeepSkyBlue 
  9. 9 ActorBorderColor DeepSkyBlue 
  10. 10 LifeLineBorderColor blue 
  11. 11 LifeLineBackgroundColor #A9DCDF 
  12. 12  
  13. 13 ParticipantBorderColor DeepSkyBlue 
  14. 14 ParticipantBackgroundColor DodgerBlue 
  15. 15 ParticipantFontName Impact 
  16. 16 ParticipantFontSize 17 
  17. 17 ParticipantFontColor #A9DCDF 
  18. 18  
  19. 19 ActorBackgroundColor aqua 
  20. 20 ActorFontColor DeepSkyBlue 
  21. 21 ActorFontSize 17 
  22. 22 ActorFontName Aapex 
  23. 23
  24. 24 
  25. 25actor User 
  26. 26participant "First Class" as A 
  27. 27participant "Second Class" as B 
  28. 28participant "Last Class" as C 
  29. 29 
  30. 30User -> A: DoWork 
  31. 31activate A 
  32. 32 
  33. 33A -> B: Create Request 
  34. 34activate B 
  35. 35 
  36. 36B -> C: DoWork 
  37. 37activate C 
  38. 38C --> B: WorkDone 
  39. 39destroy C 
  40. 40 
  41. 41B --> A: Request Created 
  42. 42deactivate B 
  43. 43 
  44. 44A --> User: Done 
  45. 45deactivate A 
  46. 46 
  47. 47@enduml 
  48. 48``` 
UserUserFirst ClassFirst ClassSecond ClassSecond ClassLast ClassLast ClassDoWorkCreate RequestDoWorkWorkDoneRequest CreatedDone

对像图

  1. 1``` plantuml! 
  2. 2object User 
  3. 3object Group 
  4. 4object Member 
  5. 5 
  6. 6object Event 
  7. 7object Ticket 
  8. 8 
  9. 9User . Group 
  10. 10User o.. Member 
  11. 11Group o.. Member 
  12. 12 
  13. 13Group o. Event 
  14. 14Event o.. Ticket 
  15. 15Member . Ticket 
  16. 16``` 
UserGroupMemberEventTicket

类图

  1. 1``` plantuml! 
  2. 2class User { 
  3. 3 username 
  4. 4 password 
  5. 5 +sign_in() 
  6. 6
  7. 7 
  8. 8class Group { 
  9. 9 name 
  10. 10
  11. 11 
  12. 12class Member { 
  13. 13 roles 
  14. 14
  15. 15 
  16. 16User .. Member 
  17. 17Group .. Member 
  18. 18``` 
Userusernamepasswordsign_in()GroupnameMemberroles

组件图

  1. 1``` plantuml! 
  2. 2cloud "Cloud" { 
  3. 3 package "Package" { 
  4. 4 [register] 
  5. 5 frame "frame" { 
  6. 6 [backup] 
  7. 7
  8. 8
  9. 9
  10. 10 
  11. 11node "Node" { 
  12. 12 database "Database" { 
  13. 13 [store] 
  14. 14
  15. 15 folder "Folder" { 
  16. 16 [File] 
  17. 17
  18. 18
  19. 19 
  20. 20[register] .. [store] : HTTP 
  21. 21[backup] .. [File] : FTP 
  22. 22``` 
CloudPackageframeNodeDatabaseFolderregisterbackupstoreFileHTTPFTP

时间图

  1. 1``` plantuml! 
  2. 2@startuml 
  3. 3robust "DNS Resolver" as DNS 
  4. 4robust "Web Browser" as WB 
  5. 5concise "Web User" as WU 
  6. 6 
  7. 7@0 
  8. 8WU is Idle 
  9. 9WB is Idle 
  10. 10DNS is Idle 
  11. 11 
  12. 12@+100 
  13. 13WU -> WB : URL 
  14. 14WU is Waiting 
  15. 15WB is Processing 
  16. 16 
  17. 17@+200 
  18. 18WB is Waiting 
  19. 19WB -> DNS@+50 : Resolve URL 
  20. 20 
  21. 21@+100 
  22. 22DNS is Processing 
  23. 23 
  24. 24@+300 
  25. 25DNS is Idle 
  26. 26@enduml 
  27. 27``` 
DNS ResolverIdleProcessingWeb BrowserIdleProcessingWaitingWeb UserIdleWaiting0100300400700URLResolve URL

疑问

相关

  1. plantuml 官网
  2. plantuml使用参考文档(PDF格式)
  3. plantuml 官方语法