UML

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

learn-to-code#Architecture Design

Text based tools

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:

layout of components takes time
it is difficult to modify the diagrams in UI (especially for batch operations, e.g. rename, grouping)
application lock-in because of the binary file format
binary file is not trackable by VCS
hard to integrate to other system

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

Tool	Language	Diagrams	Remark
PlantUML	Java	Activity, State, Sequence, Component, Class, Object, Use Case, etc	live, Language Reference
blockdiag	Python	Block, Activity, Sequence, Network, Rack, Packet	live
mermaid	JavaScript	Flowchart (Activity), Sequence, Gantt	live, Schachte/Mermrender
JUMLY	JavaScript	Sequence, Activity	live
js-sequence-diagrams	JavaScript	Sequence	live
flowchart.js	JavaScript	Flowchart	live
UMLGraph	Java	Sequence, Class
ckwnc	?	Sequence	live only, C-like syntax
Graphviz	C	Digraph	layout/rendering layer for PlantUML and UMLGraph, with browser port viz.js, dagre, dagre-d3

I ended up choosing PlantUML because:

the syntax is more familiar and flexible
active development
generates beautiful diagrams
style-able
supports more diagram types
easy to setup
bindings to more projects indicates widespread usage

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
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 - Chrome Web Store
UML Diagram Editor - Chrome Web Store
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

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

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

draw.io

diagrams.net Formerly draw.io

Blog - Generate diagrams from code

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

Gaphor

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

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.

decent and non-buggy UI
better community support
can save as XML (graphml) format that can be edited manually or programmatically
provides (limited) transform with Properties Mapper

yed

Chrome Apps

Gliffy Diagrams - Chrome Web Store: the diagram is saved as JSON
Sketchboard.io - Chrome Web Store

Code Generation

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

UML