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

Other good curated collections of diagramming tools

• https://github.com/sw-yx/spark-joy/blob/master/README.md#diagramming
• https://xosh.org/text-to-diagram/