Awesome

Awesome Diagramming

A curated list of awesome diagramming tools available for software engineering teams. Feel free to contribute to this on-going list.

When diagrams are useful?

Diagrams are faster and compact way for knowledge transfer. It's much easier to communicate a system architecture with a diagram compared to writing an essay on it.

Following are the major categories diagrams used by most efficient software engineering teams (based on more than 30 interviews with engineers working in startups and big tech):

System Architecture Diagram - to visualize high-level structure of a software system and interactions between difference components
Sequence Diagram - to visualize data flow between different components in a sequential order
Database Schema Diagram - to visualize data models and relations between entities (ER Diagrams)
Gantt Chart - used for project planning and timeline estimation

Factors to consider before choosing the diagramming tool

Free / Freemium / Paid
Open source or Closed source
Ease of use
Diagram as code vs Hand drawn
Visual Appearance - Modern / Minimalistic / Outdated / Hand-drawn

General Purpose (flexible for all kinds of diagrams)

Kroki (Free, Open Source, Diagram as code, Ease of use - Easy, Visual Appearance - Flexible).
Examples - Link
Mermaid (Free, Open Source, Diagram as code, Ease of use - Easy, Visual Appearance - Modern).
Examples - Link
Eraser.io (Freemium, Closed Source, Hand drawn, Ease of use - Easy, Visual Appearance - Modern).
Examples - Link
Excalidraw (Freemium, Open Source, Hand drawn, Ease of use - Easy, Visual Appearance - Hand-drawn).
Examples - Link
PlantUML (Free, Open Source, Diagram as code, Ease of use - Intermediate, Visual Appearance - Outdated)
Examples - Link, Link
Draw.io (Free, Open Source (But Closed To Contribution), Hand drawn, Ease of use - Moderate, Visual Appearance - Modern).
Examples - Link
Nomnoml (Free, Open Source, Diagram as code. Ease of use - Easy, Visual Appearance - Minimalistic).
Examples - Link
Diagram.codes (Freemium, Closed Source, Diagram as code, Ease of use - Easy, Visual Appearance - Outdated).
Examples - Link
Lucidchart (Paid, Closed Source, Hand drawn, Ease of use - Easy, Visual Appearance - Modern).
Examples - Link
Blockdiag (Free, Open Source, Diagram as code, Ease of use - Easy, Visual Appearance - Outdated).
Examples - Link

Others - Miro, Gliffy, Inkscape, Plectica, Whimsical, ZenUML, Gleek, Structurizr, StarUML, Gaphor

System Architecture Diagram

Essential readings
C4 Model, 5 types of architecture diagrams

Diagrams (Free, Open Source, Ease of use - Easy, Visual Appearance - Modern).
Examples - Link
Terrastruct (Paid, Closed Source, Ease of use - Easy, Visual Appearance - Modern)
Examples - Link
IcePanel (Paid, Closed Source, Hand drawn, Ease of use - Easy, Visual Appearance - Modern) Examples - Link
Lucidscale (Paid, Closed Source, Ease of use - Intermediate, Visual Appearance - Modern).
Examples - Link

Others - Ilograph, Omnigraffle, Cloudcraft, CloudSkew

Sequence Diagram

Swimlanes (Free, Closed Source, Ease of use - Easy, Visual Appearance - Modern)
Examples - Link

Others - Websequencediagrams, Sequencediagram.org

Database Schema Diagram

Essential Readings
How to choose your ERD?

DbDiagram (Freemium, Closed Source, Ease of use - Easy, Visual Appearance - Modern)
Examples - Link
Azimutt (Free, Open Source, Ease of use - Easy, Visual Appearance - Modern).
Examples - Link

Azimutt is useful when you want to visualize existing database
QuickDBD (Free, Closed Source, Ease of use - Easy, Visual Appearance - Modern).
Examples - Link

Others - DrawSql, ERD Plus, Creately, SqlDBM

Gantt Chart

Markwhen (Free, Open Source, Ease of use - Easy, Visual Appearance - Minimalist)
Examples - Link