plantuml

PlantUML

Fri Apr 6, 2018 [Fri Jun 17, 2022]

Collection of PlantUML snippets that I find useful.

Table of Contents

Class with tree-structure in body
Class Composition
- Reference
Nested boxes
Forcing vertical ordering of rectangles
Simple Flowchart
- Activity Diagram
- Activity Diagram – Beta
Hyperlinked SVGs
Salt
- Tab Bar

Class with tree-structure in body #

class Foo {
**Bar(Model)**
|_ prop
|_ **Bom(Model)**
  |_ prop2
  |_ prop3
    |_ prop3.1
|_ prop4
--
}

Source

Class Composition #

Diagram to represent a class containing children classes.

class h-entry << (H,white) >> {
  Post Entry
  ==
  ""<div class="h-entry">..</div>""
}

class p-name << (P,orchid) >> {
  Title of the post
  ==
  ""<h1 class="p-name">..</h1>""
}

class u-url << (U,#7EC0EE) >> {
  Permalink of the post
  ==
  ""<a href=".." class="u-url">..</a>""
}

class u-syndication << (U,#7EC0EE) >> {
  Link where the post is syndicated
  ==
  ""<a href=".." class="u-syndication" rel="syndication">..</a>""
}

class dt-published << (D,green) >> {
  Publish date of the post
  ..
  Go Date/time format: "2006-01-02T15:04:05-0700"
  ==
  ""<time datetime=".." class="dt-published">..</time>""
}

class p-summary << (P,orchid) >> {
  Summary/description of the post
  ==
  ""<div class="p-summary">..</div>""
}

class u-author << (U,#7EC0EE) >> {
  Post author
  ==
  ""<a href="HOMEPAGE" class="u-author">..</a>""
}

class e-content << (E,red) >> {
  Post content
  ==
  ""<div class="e-content">..</div>""
}

class p-category << (P,orchid) >> {
  Tag, category, series name
  ==
  ""<a href="TAGPAGE" class="p-category">TAG</a>""
}

"p-name" -up-* "h-entry"
"u-url" -up-* "h-entry"
"u-syndication" -left-* "h-entry"
"h-entry" *-right- "p-summary"
"h-entry" *-right- "u-author"
"h-entry" *-down- "dt-published"
"h-entry" *-down- "e-content"
"h-entry" *-down- "p-category"

Figure 2: The h-entry object is shown to contain all other objects shown in the diagram — Figure 2: The `h-entry` object is shown to **contain** all other objects shown in the diagram

Reference #

http://plantuml.com/class-diagram

Nested boxes #

I’d like to document the nested HTML tags for my web page, and represent them as a diagram with nested blocks.
While searching for an existing representation like that online, I came across this.
Is there a way to draw something like the nested blocks in the center of that figure using PlantUML?

rectangle "<html>, <body>, etc." as a  {
  rectangle "<div>..." as b #antiquewhite {
    rectangle "<video>...\n\n\n" as c
  }
}

Figure 3: Depicting nesting of objects in PlantUML

Source

Forcing vertical ordering of rectangles #

Trying to nest rectangles within rectangles will give this:

rectangle a {
  rectangle b
  rectangle c
  rectangle d
}

Figure 4: Nested rectangles showing up in arbitrary horizontal/vertical arrangement

To force the vertical order and alignment of rectangles, use hidden arrows (b -[hidden]-> c).

Note that this is a hack, and must not be abused.

rectangle a {
  rectangle b
  rectangle c
  rectangle d
  b -[hidden]-> c
  c -[hidden]-> d
}

Figure 5: Forcing the nested rectangles to show up in vertical order using -[hidden]-> hack — Figure 5: Forcing the nested rectangles to show up in vertical order using `-[hidden]->` hack

Source

Simple Flowchart #

Activity Diagram #

Activity Diagram

(*) -> "First Activity"
-> "Second Activity"
-> "Third Activity"

I’d like to have the above diagram without that “start” dot. But if I remove it, it generates a sequence diagram:

"First Activity" -> "Second Activity"
-> "Third Activity"

Activity Diagram – Beta #

Activity Diagram – Beta

The activity diagram beta syntax does almost what I want — a horizontal flow chart — just that it is vertical. The good thing is that the “start” dot can be omitted using this syntax.

:First Activity;
:Second Activity;
:Third Activity;

Hyperlinked SVGs #

skinparam svgLinkTarget _parent
start
:[[http://plantuml.com PlantUML Homepage]];
stop

Figure 9: An inlined SVG with hyperlink

For the hyperlinks in SVGs to work, the SVGs need to be inlined, and not embedded in the <img> HTML tags — Reference.

Salt #

Salt is a subproject included in PlantUML that can be useful to create graphical interface mockups.

The Salt syntax is wrapped inside @startsalt and @endsalt keywords.

@startsalt
{
  <Salt syntax here>
}
@endsalt

Reference: https://plantuml.com/salt

Tab Bar #

A tab bar is added using the {/ .. } notation and each tab is separate using the | character.

The Creole markup for formatting works inside Slat syntax too.

@startsalt
{
  {/ <b>General | <back:orange>Fullscreen | Behavior | Saving }
}
@endsalt