UML & Markdown Summary

Markdown Syntax

Links:

commonmark.org
markdownguide.org

Topic	Syntax	Result
Heading	`# Heading 1`	Heading 1
Heading	`## Heading 2`	Heading 2
Heading	`### Heading 3`	Heading 3
Heading	`#### Heading 4`	Heading 4
Formatting	`Normal Text`	Normal Text
Formatting	`Italic`	Italic
Formatting	`Bold`	Bold
Formatting	`*Italic Bold*`	Italic Bold
Inline-Code	`int i;`	`int i;`
Escape-Character	`\..` - example: `\<`	<
Images	`![Text](www.xyz.com/i.jpg)`	<Image>
Images	`![Text](www.xyz.com/i.jpg "Title")`	<Image>
(Text) Links	`[Text](www.xyz.com)`	<Link>
Image Links	`[![Text](abc.jpg)](www.xyz.com)`	<Image-Link>
Math	`$$ \int _a^b x^2 dx $$`	$$ \int _a^b x^2 dx $$
Comment	`<!-- A comment -->`

Tables

| Column 1 | Column 2 | Right Aligned | Center Aligned |
|----------|----------|--------------:|:--------------:|
| Cell     | Cell     |          Cell |      Cell      |
| Cell     | Cell     |          Cell |      Cell      |

Column 1	Column 2	Right Aligned	Center Aligned
Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell

Hint 1: Multiple lines per cell are currently not possible.

Hint 2: In Visual Studio Code with the plugin Markdown Table Formatter the keyboard shortcut Ctrl+Alt+F reformats the table to have nicely aligned columns.

Enumeration (Ordered List)

1. One
2. Two
   1. Three
   2. Four

One
Two
1. Three
2. Four

List (Unordered List)

* Item 1
* Item 2
    * Item 3    
      Second line of item 3

Item 1
Item 2
- Item 3
  Second line of item 3

ToDo List

* [ ] Item 1
* [x] Item 2
  * [x] Item 3

Item 1
Item 2
- Item 3

Quote Block

> This is a block quote ..
>
> ..  with a second paragraph ..
> 
>> .. and a nested quote.

This is a block quote ..

.. with a second paragraph ..

.. and a nested quote.

Code Block

```java
int i;
```

int i;

Language specification is optional and activates syntax highlighting.

Page break

<div style="page-break-after: always;" />

Creates a page break in pdf or other page based output.

UML Diagrams in Markdown: plantUML

Links UML Diagrams:

UML Diagrams: Wikipedia
UML Diagrams: uml-diagrams.org
UML Basic Notations: tutorialspoint.com
UML Quick Reference: nomagic.com
UML Notation Overview (German): oose.de

Links plantUML:

plantUML.com
plantUML Reference Guide: deepu.js.org
Hyperlinks in plantUML)

plantUML within a Markdown document

Within a markdown document a plantUML section is marked with the tags @startuml and @enduml.

Example:

@startuml
Class1 <|-- Class2 : Inheritance
@enduml

Result:

@startuml Class1 <|-- Class2 : Inheritance @enduml

plantUML Basic Syntax

See also https://plantuml.com/de/creole

@startuml skinparam legendFontName Consolas skinparam legendBackgroundColor white ' skinparam legendBorderColor white skinparam DiagramBorderColor black skinparam DiagramBorderThickness 2

title This is a diagram title
' This is a (one line) comment. This line will be ignored by plantUML.

/' This is ...
   ... a multiline comment.
'/

note left
    This is **bold**
    This is //italic//
    This is ""mono spaced""
    This is --stroked--
    This is __underlined__
end note

@enduml

title This is a diagram title

' This is a (one line) comment. This line will be ignored by plantUML.

/' This is ...
   ... a multiline comment.
'/

note left
        This is **bold**
        This is //italic//
        This is ""mono spaced""
        This is --stroked--
        This is __underlined__
end note

@startuml skinparam legendFontName Consolas skinparam legendBackgroundColor white ' skinparam legendBorderColor white skinparam DiagramBorderColor black skinparam DiagramBorderThickness 2

note left
    note at the left side
end note

note right
    note at the right side
end note

note bottom
    note at the bottom
end note

note top
    note at the top
end note

legend plantUML: //note left// //note at the left side// //end note// //note right// //note at the right side// //end note// //note bottom// //note at the bottom// //end note// //note top// //note at the top// //end note// end legend @enduml

UML Diagrams

Hints:

The standard plantUML style does not perfectly comply with the UML standard. To be more compliant use skinparam style strictuml.
To get a non-colored diagram skinparam monochrome true can be used.

Sequence Diagram

@startuml skinparam legendFontName Consolas skinparam noteFontName Consolas skinparam noteBackgroundColor white skinparam legendBackgroundColor white ' skinparam legendBorderColor white skinparam DiagramBorderColor black skinparam DiagramBorderThickness 2 skinparam style strictuml 'skinparam monochrome true

' title Sequence Diagram

class1 -> class2 : DoSomething()

legend
    plantUML:
        //class1 -> class2 : DoSomething()//
end legend

@enduml

Use Case Diagram

@startuml skinparam legendFontName Consolas skinparam noteFontName Consolas skinparam noteBackgroundColor white skinparam legendBackgroundColor white ' skinparam legendBorderColor white skinparam DiagramBorderColor black skinparam DiagramBorderThickness 2 skinparam style strictuml ' skinparam monochrome true

left to right direction

' title Use Case Diagram

Actor --> (Use Case)
legend
    plantUML:
        //Actor --> (Use Case)//
end legend

@enduml

Class Diagram

Class Notation

@startuml skinparam noteFontName Consolas skinparam legendFontName Consolas skinparam noteBackgroundColor white skinparam legendBackgroundColor white ' skinparam legendBorderColor white 'skinparam DiagramBorderColor black 'skinparam DiagramBorderThickness 2 skinparam style strictuml 'skinparam monochrome true

skinparam classFontName Consolas    
skinparam classAttributeFontName Consolas
'hide empty members
'left to right direction

class ClassName
{
    ' {field} is used to explicitely mark a field, that contains () braces,
    ' so that it is not interpreted as a method.

    field1 : Type = DefaultValue
    {field} -private_field   : Type   //(private)//
    {field} #protected_field : Int32  //(protected)//
    ~internalMethod() : ReturnType //(internal)//
    +publicMethod()    : string    //(public)//
}

note right
    plantUML:
       //class ClassName//
       //{//
           //field1 : Type = DefaultValue//
           //-private_field    : Type//
           //#protected_field  : Int32//
           //~internalMethod() : ReturnType//
           //+publicMethod()    : string//
       //}//
end note

@enduml

Association

@startuml skinparam noteFontName Consolas skinparam legendFontName Consolas skinparam noteBackgroundColor white skinparam legendBackgroundColor white ' skinparam legendBorderColor white 'skinparam DiagramBorderColor black 'skinparam DiagramBorderThickness 2 skinparam style strictuml 'skinparam monochrome true

skinparam classFontName Consolas    
skinparam classAttributeFontName Consolas

hide empty members
left to right direction

class1 "1" -- "*" class2

note right 
    **__Association__**
        - "class1 and class2 are associated"
        - "The relation consists of 1 object of class1 
           and any number of objects (0 .. ∞) of class2"
    plantUML:
       //class1 "1" -- "*" class2//
end note

@enduml

@startuml skinparam noteFontName Consolas skinparam legendFontName Consolas skinparam noteBackgroundColor white skinparam legendBackgroundColor white ' skinparam legendBorderColor white 'skinparam DiagramBorderColor black 'skinparam DiagramBorderThickness 2 skinparam style strictuml 'skinparam monochrome true

hide empty members
left to right direction

Book "1..*" -- "1..*" Author: < wrote
note right
    **__Association: Example__**
    
    plantUML:
        //Book "1..*" -- "1..*" Author: < wrote//
end note

@enduml

@startuml skinparam noteFontName Consolas skinparam legendFontName Consolas skinparam noteBackgroundColor white skinparam legendBackgroundColor white ' skinparam legendBorderColor white 'skinparam DiagramBorderColor black 'skinparam DiagramBorderThickness 2 skinparam style strictuml 'skinparam monochrome true

hide empty members
left to right direction

class1 "1" -- "*" class2
(class1, class2) .. "AssociationClass"
    
note right of class2
    **__Attributed Association__**
    plantUML:
       //class1 "1" -- "*" class2//
       //(class1, class2) .. "AssociationClass"//
end note

@enduml

Dependency

@startuml skinparam noteFontName Consolas skinparam legendFontName Consolas skinparam noteBackgroundColor white skinparam legendBackgroundColor white ' skinparam legendBorderColor white 'skinparam DiagramBorderColor black 'skinparam DiagramBorderThickness 2 skinparam style strictuml 'skinparam monochrome true

hide empty members
left to right direction

class1 ..> class2 : uses >

note bottom of class1
    Dependent
end note

note bottom of class2
    Independend
end note

note right of class2
    **__Dependency__**
    plantUML:
       //class1 ..> class2 : uses >//
end note

@enduml

Aggregation

@startuml skinparam noteFontName Consolas skinparam legendFontName Consolas skinparam noteBackgroundColor white skinparam legendBackgroundColor white ' skinparam legendBorderColor white 'skinparam DiagramBorderColor black 'skinparam DiagramBorderThickness 2 skinparam style strictuml 'skinparam monochrome true

hide empty members
left to right direction

class1 --o class2 : < has

note right
    **__Aggregation__**
        - class1 is part of class2.
        - class1 can exist independent of class2.
    plantUML:
       //class1 --o class2 : < has//
end note

@enduml

Composition

@startuml skinparam noteFontName Consolas skinparam legendFontName Consolas skinparam noteBackgroundColor white skinparam legendBackgroundColor white ' skinparam legendBorderColor white 'skinparam DiagramBorderColor black 'skinparam DiagramBorderThickness 2 skinparam style strictuml 'skinparam monochrome true

hide empty members
left to right direction

class1 --* class2 : < owns

note right
    **__Composition__**
        - class1 is part of class2.
        - class1 can //not// exist without class2.
    plantUML:
       //class1 *-- class2 : < owns//
end note

@enduml

Inheritance

@startuml skinparam noteFontName Consolas skinparam legendFontName Consolas skinparam noteBackgroundColor white skinparam legendBackgroundColor white ' skinparam legendBorderColor white 'skinparam DiagramBorderColor black 'skinparam DiagramBorderThickness 2 skinparam style strictuml 'skinparam monochrome true

hide empty members
left to right direction

class1 <|-- class2

note right
    **__Inheritance__**
      - "class2 inherits from class1"
      - "class2 extends class1"
    
    plantUML: 
       //class1 <|-- class2//
    or:
       //class class2 **extends** class1//
end note

@enduml

Interface Realization (Interface Inheritance)

@startuml skinparam noteFontName Consolas skinparam legendFontName Consolas skinparam noteBackgroundColor white skinparam legendBackgroundColor white ' skinparam legendBorderColor white 'skinparam DiagramBorderColor black 'skinparam DiagramBorderThickness 2 skinparam style strictuml 'skinparam monochrome true

hide empty members
left to right direction

interface interface1
interface1 <|.. class2

note right 
    **__Interface Realization__**
        **__(Interface Inheritance)__**
        - "class2 implements interface1"
        - "class2 realizes interface1"
        - "class2 inherits from interface1"
    
    plantUML: 
       //interface interface1//
       //interface1 <|.. class2//
    or:
       //class class1 **implements** interface1//
end note

@enduml

Activity Diagram (Flow Chart)

plantUML: NEW Activity Diagram Syntax

@startuml skinparam legendFontName Consolas skinparam noteFontName Consolas skinparam noteBackgroundColor white skinparam legendBackgroundColor white ' skinparam legendBorderColor white skinparam DiagramBorderColor black skinparam DiagramBorderThickness 2 'skinparam style strictuml 'skinparam monochrome true

'hide empty members
'left to right direction

start
note right
    //plantUML://
        start
end note

:Step01;
note right
    //plantUML://
        :Step01;
end note

if (CONDITION) then (yes)
    :StepA;
else (no)
    :StepB;
endif
note right
    //plantUML://
        if (CONDITION) then (yes)
            :StepA;
        else (no)
            :StepB;
        endif
end note

:Step02
Second line;
note right
    //plantUML://
       :Step02
       Second line;
end note

while (CONDITION)
    note right
        //plantUML://
            while (CONDITION)
                :Step03;
                :Step04;
            endwhile
    end note
    :Step03;
    :Step04;
endwhile

repeat
    note
        //plantUML://
            repeat
                :Step05;
                :Step06;
            repeat while (CONDITION)
    end note
    
    :Step05;
    :Step06;
repeat while (CONDITION)

stop
note right
    //plantUML://
        stop
end note

@enduml

@startuml

title Connector & Detach

start :Step01; (A) detach note right: Connector

(A) :Step02; stop @enduml

@startuml

title Grouping (partitions)

start partition Group1{ :Step01; :Step02; } partition Group2{ :Step03; :Step04; } stop @enduml

@startuml

title Fork

:start; fork :foo1; :foo2; fork again :foo3; detach endfork

stop

@enduml

Component Diagram

@startuml skinparam legendFontName Consolas skinparam noteFontName Consolas 'skinparam noteBackgroundColor white skinparam legendBackgroundColor white ' skinparam legendBorderColor white skinparam DiagramBorderColor black skinparam DiagramBorderThickness 2 skinparam style strictuml 'skinparam monochrome true

title Component Diagram

interface "Interface1 \n(provided \n interface)" as Interface1

interface "Interface2 \n(Used\nInterface)" as Interface2

Interface1 - [Component] : provide
[Component] ..> Interface2 : use

[Component]
legend
    plantUML:
        //interface Interface1//
        //interface Interface2//
        //[Component]//

        //Interface1 - [Component] : provide//
        //[Component] ..> Interface2 : use//
end legend

@enduml

State Diagram

@startuml skinparam legendFontName Consolas skinparam noteFontName Consolas 'skinparam noteBackgroundColor white skinparam legendBackgroundColor white ' skinparam legendBorderColor white skinparam DiagramBorderColor black skinparam DiagramBorderThickness 2 skinparam style strictuml 'skinparam monochrome true

title State Diagram

[*] -> State1

State1: **entry** action
State1: **do** action
State1: **exit** action

State1 -> State2
State2 -> State1
State2 -> [*]

legend
    plantUML:
        [*] -> State1
        State1 -> State2
        State2 -> State1
        State2 -> [*]

        State1: **entry** action
        State1: **do** action
        State1: **exit** action
end legend

@enduml

The option hide empty description hides the state description if empty.

Object Diagram

@startuml skinparam legendFontName Consolas skinparam noteFontName Consolas 'skinparam noteBackgroundColor white skinparam legendBackgroundColor white ' skinparam legendBorderColor white skinparam DiagramBorderColor black skinparam DiagramBorderThickness 2 skinparam style strictuml 'skinparam monochrome true

title Object Diagram

hide empty members

object __Object__ {
    field1 = 5
    field2 = "abc"
}

class Class1

legend
    plantUML:
        //object __Object__ {//
            //field1 = 5//
            //field2 = "abc"//
        //}//

        //class Class1//
end legend

@enduml

Deployment Diagram

Timing Diagram

@startuml skinparam noteFontName Consolas skinparam legendFontName Consolas 'skinparam noteBackgroundColor white skinparam legendBackgroundColor white ' skinparam legendBorderColor white skinparam DiagramBorderColor black skinparam DiagramBorderThickness 2 skinparam style strictuml 'skinparam monochrome true

'skinparam LegendFontSize 12

title Timing Diagram

clock clk with period 1

binary "Binary" as B
@0
B is low
@1
B is high
@2
B is low

robust "Robust" as R
@0
R is state1
@1
R is state2
@2
R is state3
@3
R is state1

concise "Concise" as C
@0
C is state1
@1
C is state2
@2
C is state3

@1
R -> B@2 : message1

legend
    plantUML:
        //clock clk with period 1//

        //binary "Binary" as B//
        //@0//
        //B is low//
        //@1//
        //B is high//
        //@2//
        //B is low//

        //robust "Robust" as R//
        //@0//
        //R is state1//
        //@1//
        //R is state2//
        //@2//
        //R is state3//
        //@3//
        //R is state1//

        //concise "Concise" as C//
        //@0//
        //C is state1//
        //@1//
        //C is state2//
        //@2//
        //C is state3//

        //@1//
        //R -> B@2 : message1//
end legend

@enduml

plantUML formatting / styles

Border around the diagrams

@plantuml
    skinparam DiagramBorderColor black
    skinparam DiagramBorderThickness 2
    ...

Black White diagrams

@plantuml
    skinparam monochrome true
    ...

@startuml skinparam monochrome true class Class1 @enduml

UML compliant appearance

The default style of plantUML does not completely match the official UML definition. To change the style to comply as far as possible with the official UML definition, set the strictuml style.

@startuml class Class1 note right plantUML: //class Class1// end note @enduml

@startuml skinparam style strictuml class Class1 note right plantUML: //skinparam style strictuml// //class Class1// end note @enduml

@startuml skinparam style strictuml hide empty members class Class1 note right plantUML: //skinparam style strictuml// //hide empty members// //class Class1// end note @enduml

together

To influence how multiple classes are arranged in large diagrams, the ´Together{}´ keyword can be used:

Together{
    class A
    class B
}

Non-UML Diagrams

MindMap Diagram

Basic MindMap syntax

@startmindmap

Root node '* A second root node is not allowed ** Node *** Sub-sub-node **_ Node without box

left side

** left side node ** second

@endmindmap

@startmindmap

Root Node ++ Alternative notation with ++ -- '--' Chooses the left side ---_ Sub-node ---_ Sub-node -- ~~Strike through~~ @endmindmap

Headers etc.

@startmindmap

header My Header title My Title

one ** two ** three

legend right My Legend end legend

caption My Caption center footer My Footer @endmindmap

Markdown compliant

@startmindmap

Markdown syntax
- indented by TAB
- intention by space\n is currently not possible
  - one
  - two
- three @endmindmap

Symbols

@startmindmap

Symbols
- <&flag> <&flag >
- <&globe> <&globe >
- <&graph> <&graph >
- <&pulse> <&pulse >
- <&people> <&people >
- <&star> <&star >

@endmindmap

Files

uml_markdown_summary.md

Latest commit

History

uml_markdown_summary.md

File metadata and controls

UML & Markdown Summary

Table of Contents

Markdown Syntax

Heading 1

Heading 2

Heading 3

Heading 4

Tables

Enumeration (Ordered List)

List (Unordered List)

ToDo List

Quote Block

Code Block

Page break

UML Diagrams in Markdown: plantUML

plantUML within a Markdown document

plantUML Basic Syntax

UML Diagrams

Sequence Diagram

Use Case Diagram

Class Diagram

Class Notation

Association

Dependency

Aggregation

Composition

Inheritance

Interface Realization (Interface Inheritance)

Activity Diagram (Flow Chart)

Component Diagram

State Diagram

Object Diagram

Deployment Diagram

Timing Diagram

plantUML formatting / styles

Border around the diagrams

Black White diagrams

UML compliant appearance

together

Non-UML Diagrams

MindMap Diagram

Basic MindMap syntax

Headers etc.

Markdown compliant

Symbols