Skip to content

UML

January 9, 2025
April 14, 2015

Unified Modeling Language - Wikiwand
YANG Central

Allen Holub's UML Quick Reference
UML Diagram Types With Examples for Each Type of UML Diagrams
Practical UML: A Hands-On Introduction for Developers

UML and Software Modeling Tools

UML Diagram Course – How to Design Databases and Systems
Unified Modeling Language (UML) | An Introduction - GeeksforGeeks

Voxxed Athens 2017 :: Opening Ceremony + Keynote Software Architecture Diagramming - YouTube
The Art of Visualising Software Architecture - Coding the Architecture

UML class diagrams in draw.io - draw.io

Business Process Model and Notation (BPMN) is very similar to activity diagram
Web-based tooling for BPMN, DMN, CMMN, and Forms | bpmn.io

learn-to-code#Architecture Design

Text based tools

Top 6 Tools to Turn Code into Beautiful Diagrams - YouTube
Kroki! unified API with support for multiple text based diagram language

I used to use the GUI tool Dia. But it was very buggy and no longer updated. I then went on to look for alternatives.

I am frustrated with the UI diagram apps:

So I focused on tools that provides a DSL for drawing UML from plain text.
Candidates are (ranked according to the criteria below):

ToolLanguageDiagramsRemark
PlantUMLJavaActivity, State, Sequence, Component, Class, Object, Use Case, etclive, Language Reference
blockdiagPythonBlock, Activity, Sequence, Network, Rack, Packetlive
DiagramsPythonBlockexamples
Go-DiagramsGoBlockA loose port of diagrams
D2GoBlock, Sequencelive
mermaidJavaScriptFlowchart (Activity), Sequence, Ganttlive, Schachte/Mermrender
JUMLYJavaScriptSequence, Activitylive
StructurizrJavaBlocklive
js-sequence-diagramsJavaScriptSequencelive
flowchart.jsJavaScriptFlowchartlive
UMLGraphJavaSequence, Class
ckwnc?Sequencelive only, C-like syntax
GraphvizCDigraphlayout/rendering layer for PlantUML and UMLGraph, with browser port viz.js, dagre, dagre-d3

I ended up choosing PlantUML because:

BTW, blockdiag would be the first runner up. It also features several unique diagram types.

Draw More, Work Less
Making Mermaid Diagrams in Markdown | CSS-Tricks - CSS-Tricks

Protocol | An ASCII Header Generator for Network Protocols ASCII RFC-like header diagrams
luismartingarcia/protocol: An ASCII Header Generator for Network Protocols

Javascript List of Lists Visualization
websemantics/lolviz.js: A faithful (albeit optimized) port of Terence Parr List of Lists Visualization library, https://github.com/parrt/lolviz from Python to Javascript.

PlantUML

Welcome to The Hitchhiker’s Guide to PlantUML! — The Hitchhiker's Guide to PlantUML documentation
General and common command to handle graphic layout in diagrams.
Language specification pages
Use creole syntax to style your texts
Changing colors and fonts

PlantUML Standard Library icons
plantuml/plantuml-stdlib: Contains official Standard Library for PlantUML
tupadr3/plantuml-icon-font-sprites: plantuml-font-icon-sprites

Wrapper script to JAR file (from download page)

# !/bin/sh

java -Djava.awt.headless=true -jar /path/to/plantuml.jar -charset UTF-8 "$@"

The automatic layout of PlantUML (with GraphViz) is a curse and a blessing.
On one hand you are free of the hassle of arranging the elements, on the other hand you have little control over the position of how your elements.
Hackery like horizontalLineBetweenDifferentPackageAllowed and hidden links (-[hidden]-) are needed to tame the layout engine.

PlantUML also embed other tools besides UML:
DITAA, Salt, JCCKit, Sudoku, XEarth

Drawing UML with plantuml
PlantUML | DrawUML cheat sheet
PlantUML Pleasantness -Messages from mrhaki
PlantUML Diagrams | SAP Blogs
PlantUML Tips and Tricks | Codit
Make your documentation awesome with PlantUML! - Dawid Kotarba

Live Editor:
PlantUML Web Server
PlantUML Editor
PlantText UML Editor

PlantUML Viewer
UML Diagram Editor
PlantUML QEditor | SourceForge.net
nrekretep/pikturr: Simple tool to turn a swagger api spec into a uml class diagram.

Learn more - PlantUML Gizmo (add-on for Google Docs)

Graphviz | UX Design and Development course
dot - man page
Drawing graphs with dot PDF

Samples

Real World PlantUML gallery
ui-cs383/Class-Diagrams
hnakamur/asciidoctor-ditaa-graphviz-plantuml-example
jmbruel/basics: Basic UML concepts and diagrams in plantUML for easy modification/translation
BracketsUML/diagrams at master · KyleKorndoerfer/BracketsUML
Examples Gallery — PlantUML Client in Python 1.0.0 documentation

styling:
hackebrot/plantuml-snippets: Code snippets for drawing diagrams with PlantUML
mmmpa/colors_for_plantUML
templates/plantuml at master - mark.george/templates

Pikchr

Pikchr: Documentation
PIC (markup language) - Wikiwand

Pikchr: Pikchr User Manual

Diagrams

Python

Diagrams · Diagram as Code
mingrammer/diagrams: :art: Diagram as Code for prototyping cloud system architectures

go-diagram

blushft/go-diagrams: Create beautiful system diagrams with Go

Goa Model

goadesign/model: Create your software architecture models and diagrams in Go.

ASCII

Diagrams | Internet-Draft Author Resources

ASCIIFlow
lewish/asciiflow: ASCIIFlow

Textik - ASCII diagrams editor
astashov/tixi: Ascii charts editor

Introduction - Asciio
nkh/P5-App-Asciio: Plain ASCII diagram

Monodraw for macOS — Helftone MacOS, paid

GaaS (graph as a service)

With an HTTP client and scraping code, any DSL with web editor could be made as a service. This is especially easy if the DSL is provided as a library of course.

Your Graphviz, UMLGraph or PlantUML for your README

PlantUML's service mode, seejQuery and JavaScript async and sync integration.

Excalidraw
tldraw

Rough.js

Online Diagram Software & Visual Solution | Lucidchart
Online Collaborative Whiteboard | Sketchboard
HackerDraw | Diagramming Made Easy
Terrastruct | A diagramming tool crafted to visualize software architecture

Gaphor

Modeling for Everyone | Gaphor
Gaphor: Open Source Graphical Modeling Tool - It's FOSS

draw.io

diagrams.net Formerly draw.io

Blog - Generate diagrams from code

Solved: Is there a way to convert a plantUML diagram to a ...

GUI Tools

PlantUML's weakness (and strength, sort of) is the user cannot (and need not) specify location of the nodes. This became an issue for component diagrams where we need more control on node position and edge routing, which are crucial for component diagram for a better look and feel of the diagram.

UML Diagramming Tools | Diagramming.org
Our list of online modeling tools

yEd - Graph Editor
JustDerb/yed-aws-palettes: yED palettes imported from https://aws.amazon.com/architecture/icons/

Astah Community - Free UML Modeling tool | Astah.net
Gaphor UML Modelling (Python)
Modelio Open Source Community
ArgoUML the UI is bad
UMLet - Free UML Tool for Fast UML Diagrams
Violet UML Editor : easy to use, completely free

yEd

After trying out several GUI tools, yEd comes to my liking.

yed

Chrome Apps

Gliffy Diagrams: the diagram is saved as JSON
Sketchboard.io

Code Generation

lovasoa/dia2code: Dia2Code is a small utility used to generate code from a Dia diagram.