PlantUML Skinparam: Diagram Styling Guide

Customizing PlantUML Diagrams with Skinparam

The skinparam command controls every visual aspect of PlantUML diagrams. Professional diagrams often need consistent branding and readable styling.

Global Settings

@startuml
skinparam backgroundColor #FAFAFA
skinparam defaultFontName "Segoe UI"
skinparam defaultFontSize 13
skinparam shadowing false
skinparam roundcorner 8
@enduml

Class Diagram Styling

skinparam class {
  BackgroundColor White
  BorderColor #333333
  ArrowColor #666666
  FontColor #333333
  StereotypeFontColor #888888
  AttributeFontSize 11
  FontSize 14
}

Sequence Diagram Styling

skinparam sequence {
  ParticipantBackgroundColor #E3F2FD
  ParticipantBorderColor #1565C0
  ArrowColor #424242
  LifeLineBorderColor #BDBDBD
  LifeLineBackgroundColor #F5F5F5
  GroupBackgroundColor #FFF3E0
}

Color Schemes

Dark Theme:

skinparam backgroundColor #1E1E2E
skinparam defaultFontColor #CDD6F4
skinparam class {
  BackgroundColor #313244
  BorderColor #89B4FA
  FontColor #CDD6F4
}

Corporate Blue:

skinparam backgroundColor White
skinparam class {
  BackgroundColor #E3F2FD
  BorderColor #1565C0
  HeaderBackgroundColor #1565C0
  HeaderFontColor White
}

Arrow Customization

skinparam ArrowColor #666666
skinparam ArrowThickness 1.5
skinparam ArrowFontSize 11
skinparam ArrowFontColor #888888

Removing Shadows

skinparam shadowing false

Flat designs (no shadows) render better in dark mode and high-contrast settings. They also produce smaller SVG files.

Handwritten Style

skinparam handwritten true

The handwritten style gives diagrams an informal, whiteboard-sketch look that works well for early-stage design discussions where you want to signal "this is not final."