Skip to content

Instantly share code, notes, and snippets.

Last active January 1, 2024 06:23
Show Gist options
  • Save jerieljan/4c82515ff5f2b2e4dd5122d354a82b7e to your computer and use it in GitHub Desktop.
Save jerieljan/4c82515ff5f2b2e4dd5122d354a82b7e to your computer and use it in GitHub Desktop.
PlantUML with Style -- How I do PlantUML
# Sequence Diagram Example
'General Defaults
!$BASEPATH = ".."
!include $BASEPATH/globals/stylesheet.iuml
'Actor Definitions
autonumber 1 "0:"
title Sequence Diagram
A -> B: Perform Action
B --> A: (Response)

I use PlantUML a lot. It's what I use for drawing all sorts of diagrams and it's handy because of its easy markup (once you get used to it) while making things easy to maintain as projects grow (thanks to version control)

This gist explains how I do my PlantUML workspace in a project.

  • The idea is to keep a globals directory for all diagrams to follow (like the "stylesheet" below) to keep things consistent.
  • I use a stylesheet.iuml file that keeps the use of colors consistent through use of basic FOREGROUND, BACKGROUND and ACCENT colors.
  • The style-presets.iuml file defines these colors so you can make "presets" or "themes" out of them.
  • As stated in the stylesheet.iuml, you'll need the Roboto Condensed and Inconsolata fonts for these to work properly.
  • You can choose to either run the PlantUML jar over your file/s, or use an IDE like VSCode with the PlantUML extension. Here's a preview of example-sequence.puml for example:

Assume the following directory structure:

$ tree
├── globals
│   ├── style-presets.iuml
│   └── stylesheet.iuml
└── diagrams
    ├── example-sequence.puml
    ├── etc...

Once you have this configured, just run

# If you don't have PlantUML yet, install it!
# In macOS, you can just brew it
brew install plantuml

# Assuming you're in the base path already
plantuml diagrams/example-sequence.puml

# Done. You should have diagrams/example-sequence.png after running.



  • Updated variable definitions to match with PlantUML's standard and corrections. Thanks GabrielF-C!
  • Made sure this gist still works as of 2023/07/31, on version PlantUML version 1.2023.10 (Wed Jul 12 23:54:07 PST 2023)
  • Added instructions.


  • Added a preview of how it looks like when it's exported / viewed with PlantUML:
  • Added a quick tip to use an IDE or the PlantUML jar to get this to work.
  • Corrected the filename - example-sequence.puml. It was .iuml before. The extensions don't really matter from what I can tell though.
  • Added this changelog.
# Style Presets
' Preset Styles by Jeriel Jan
' Preset: Monochrome
' Preset: Material Light Blue (200)
!$STYLE_LIGHT_FGC = "#000"
' Preset: Material Light Blue (800)
!$STYLE_DARK_FGC = "#000"
' Preset: Material Light Blue (800)
skinparam {
' This field left intentionally blank.
# Project Stylesheet
' Load preset styles.
!include $STYLEPATH/style-presets.iuml
' Color Definition
' Choose the style you want by applying them here.
' See Custom Style section below to override items here.
skinparam {
' Global Options
DPI 200
Shadowing false
DefaultFontName Roboto Condensed
DefaultMonospacedFontName Inconsolata
DefaultFontColor $STYLE_FGC
' Styles - Borders
ActivityBorderColor $STYLE_ACCENT
ActivityDiamondBorderColor $STYLE_ACCENT
ActorBorderColor $STYLE_ACCENT
AgentBorderColor $STYLE_ACCENT
ArtifactBorderColor $STYLE_ACCENT
BoundaryBorderColor $STYLE_ACCENT
ClassBorderColor $STYLE_ACCENT
CloudBorderColor $STYLE_ACCENT
CollectionsBorderColor $STYLE_ACCENT
ComponentBorderColor $STYLE_ACCENT
ControlBorderColor $STYLE_ACCENT
DatabaseBorderColor $STYLE_ACCENT
EntityBorderColor $STYLE_ACCENT
FileBorderColor $STYLE_ACCENT
FolderBorderColor $STYLE_ACCENT
FrameBorderColor $STYLE_ACCENT
InterfaceBorderColor $STYLE_ACCENT
LegendBorderColor $STYLE_ACCENT
NodeBorderColor $STYLE_ACCENT
NoteBorderColor $STYLE_ACCENT
ObjectBorderColor $STYLE_ACCENT
PackageBorderColor $STYLE_ACCENT
ParticipantBorderColor $STYLE_ACCENT
PartitionBorderColor $STYLE_ACCENT
QueueBorderColor $STYLE_ACCENT
RectangleBorderColor $STYLE_ACCENT
SequenceBoxBorderColor $STYLE_ACCENT
SequenceDividerBorderColor $STYLE_ACCENT
SequenceGroupBorderColor $STYLE_ACCENT
SequenceLifeLineBorderColor $STYLE_ACCENT
SequenceReferenceBorderColor $STYLE_ACCENT
StackBorderColor $STYLE_ACCENT
StateBorderColor $STYLE_ACCENT
StorageBorderColor $STYLE_ACCENT
SwimlaneBorderColor $STYLE_ACCENT
UsecaseBorderColor $STYLE_ACCENT
' Styles - Backgrounds
ActivityBackgroundColor $STYLE_BGC
ActivityDiamondBackgroundColor $STYLE_BGC
ActorBackgroundColor $STYLE_BGC
AgentBackgroundColor $STYLE_BGC
ArtifactBackgroundColor $STYLE_BGC
BackgroundColor $STYLE_BGC
BoundaryBackgroundColor $STYLE_BGC
ClassBackgroundColor $STYLE_BGC
ClassHeaderBackgroundColor $STYLE_BGC
CloudBackgroundColor $STYLE_BGC
CollectionsBackgroundColor $STYLE_BGC
ComponentBackgroundColor $STYLE_BGC
ControlBackgroundColor $STYLE_BGC
DatabaseBackgroundColor $STYLE_BGC
EntityBackgroundColor $STYLE_BGC
FileBackgroundColor $STYLE_BGC
FolderBackgroundColor $STYLE_BGC
FrameBackgroundColor $STYLE_BGC
IconPackageBackgroundColor $STYLE_BGC
IconPrivateBackgroundColor $STYLE_BGC
IconProtectedBackgroundColor $STYLE_BGC
IconPublicBackgroundColor $STYLE_BGC
InterfaceBackgroundColor $STYLE_BGC
LegendBackgroundColor $STYLE_BGC
NodeBackgroundColor $STYLE_BGC
NoteBackgroundColor $STYLE_BGC
ObjectBackgroundColor $STYLE_BGC
PackageBackgroundColor $STYLE_BGC
ParticipantBackgroundColor $STYLE_BGC
PartitionBackgroundColor $STYLE_BGC
QueueBackgroundColor $STYLE_BGC
RectangleBackgroundColor $STYLE_BGC
SequenceBoxBackgroundColor $STYLE_BGC
SequenceDividerBackgroundColor $STYLE_BGC
SequenceGroupBackgroundColor $STYLE_BGC
SequenceGroupBodyBackgroundColor $STYLE_BGC
SequenceLifeLineBackgroundColor $STYLE_BGC
SequenceReferenceBackgroundColor $STYLE_BGC
SequenceReferenceHeaderBackgroundColor $STYLE_BGC
StackBackgroundColor $STYLE_BGC
StateBackgroundColor $STYLE_BGC
StereotypeABackgroundColor $STYLE_BGC
StereotypeCBackgroundColor $STYLE_BGC
StereotypeEBackgroundColor $STYLE_BGC
StereotypeIBackgroundColor $STYLE_BGC
StereotypeNBackgroundColor $STYLE_BGC
StorageBackgroundColor $STYLE_BGC
TitleBackgroundColor $STYLE_BGC
UsecaseBackgroundColor $STYLE_BGC
' Other Settings
' These settings are included in the language specs, but
' it's not recommended to be applied.
'TitleBorderColor $STYLE_ACCENT
'DiagramBorderColor $STYLE_ACCENT
' All items below can be safely commented out.
' This will override the options listed above.
roundcorner 8
'Monochrome true
NoteFontName Roboto Condensed
NoteFontStyle Italic
'NoteBackgroundColor $STYLE_BGC
Copy link

This is a great explanation, I was looking for something like this for almost an entire week.
I don't use styles a lot, but I do prefer a custom style which is different than the default one in PlantUML.

Copy link

AZLisme commented Nov 26, 2020

Exactly what I want, big thumbs to you. 👍

Copy link

This is what I need for my diagrams. We want to save everything in a central file and use the style in all .plantuml diagram files.

Copy link

UTPALBHATT commented Jan 7, 2021

What's the use of style-presets.iuml here?

!define BASEPATH ..
!include BASEPATH/globals/stylesheet.iuml

So basically, example-sequence.puml calls stylesheet.iuml and stylesheet.iuml internally calls style-presets.iuml.
Why can't we just use keep things simple and use only stylesheet.iuml? What is the benefit of using style-presets.iuml?

Copy link

Thanks to share with us!! 🤗

Copy link

GabrielF-C commented Mar 25, 2023

According to PlantUML documentation :

Even if some legacy features are still supported with the actual preprocessor, you should not use them any more (they might be removed in some long term future).

You should not use !define and !definelong anymore. Use !function, !procedure or variable definition instead.

  • !define should be replaced by return !function
  • !definelong should be replaced by !procedure.


So maybe consider changing !define to variables, here's an example :

' Preset: Monochrome

For more info on variables, see :

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment