PlantUML Viewer Guide
Omni Viewer renders PlantUML previews in the browser with puml-canvas-js. This page ports the package demo into the docs so you can edit each source and compare local SVG output with the plantuml.com reference rendering.
puml-canvas-js
Pipeline: source -> lexer -> parser -> AST -> layout -> scene -> renderer (SVG)
1. Basic Examples
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
2. Declaring participant #1
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
3. Declaring participant #2
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
4. Declaring participant #3
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
5. Declaring participant on multiline
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
6. Use non-letters in participants
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
7. Message to Self #1
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
8. Message to Self #2
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
9. Text alignment
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
10. Text of response message below the arrow
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
11. Stick man (by default)
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
12. Awesome man
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
13. Hollow man
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
14. Change arrow style
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
15. Change arrow color
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
16. Message sequence numbering #1
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
17. Message sequence numbering #2
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
18. Message sequence numbering #3
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
19. Message sequence numbering #4
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
20. Message sequence numbering #5
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
21. Message sequence numbering #6
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
22. Page Title, Header and Footer
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
23. With newpage
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
24. %page% and %lastpage% variables
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
25. Ignore newpage
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
26. Grouping message
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
27. Secondary group label
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
28. Messages not grouped horizontally (default)
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
29. Grouping horizontally (teoz mode)
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
30. Notes on messages
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
31. Some other notes
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
32. Changing notes shape [hnote, rnote]
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
33. Note over all participants [across]
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
34. Without `/` (notes not aligned)
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
35. With `/` (notes aligned)
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
36. Creole and HTML
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
37. Divider or separator
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
38. Reference
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
39. Delay
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
40. Text wrapping
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
41. Without sequenceMessageSpan (default)
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
42. With sequenceMessageSpan (teoz mode)
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
43. Space
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
44. Lifeline Activation and Destruction #1
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
45. Lifeline Activation and Destruction #2
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
46. Lifeline Activation and Destruction #3
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
47. Return
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
48. Participant creation
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
49. Shortcut syntax for activation, deactivation, creation #1
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
50. Shortcut syntax for activation, deactivation, creation #2
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
51. Shortcut syntax for activation, deactivation, creation #3
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
52. Incoming and outgoing messages #1
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
53. Incoming and outgoing messages #2
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
54. Short arrows for incoming and outgoing messages
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
55. Anchors and Duration
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
56. Stereotypes and Spots #1
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
57. Stereotypes and Spots #2
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
58. Stereotypes and Spots #3
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
59. Top position (default)
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
60. Bottom position
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
61. More information on titles #1
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
62. More information on titles #2
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
63. More information on titles #3
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
64. Participants encompass #1
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
65. Participants encompass #2
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
66. Removing Foot Boxes
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
67. Skinparam #1
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
68. Skinparam #2
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
69. Changing padding
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
70. Normal arrow
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
71. Itself arrow
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
72. Incoming messages (with '[')
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
73. Outgoing messages (with ']')
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
74. Short incoming (with '?')
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
75. Short outgoing (with '?')
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
76. By default
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
77. Style strictuml
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
78. LifelineStrategy
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
79. Hide unlinked participant #1
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
80. Hide unlinked participant #2
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
81. Color a group message
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
82. Mainframe
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
83. Slanted or odd arrows #1
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
84. Slanted or odd arrows #2
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
85. Slanted or odd arrows #3
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
86. Slanted or odd arrows #4
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
87. Parallel messages (with teoz)
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
88. By default (style)
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...
89. Solid Lifeline using style
puml-canvas-js
Rendering...
plantuml.com (original)
Loading plantuml.com...