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 convey system architechture with a diagram compared to writing an essay on it.
Diagrams are especially useful in providing high level overview of software design. Following are the most-widely used diagrams by engineering teams:
- Sequence diagram - to visualize interaction between different components in a sequential order
- System architecture diagram - to visualize system architecture
- ER diagram - to visualize data models
- Gantt diagram - 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 -
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 - Intermediete, 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 Apperance - 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).
Exampes - Link
Others - Miro, Gliffy, Inkscape, Plectica, Whimsical, ZenUML, Gleek, Structurizr, StarUML
Sequence diagram
Others - Websequencediagrams, Sequencediagram.org
System design diagram
Essential readings
C4 Model, 5 types of acrchitecture diagrams
-
Diagrams (Free, Open Source, Ease of use - Easy, Visual Appearance - Modern).
Examples - Link -
Terrastruct (Paid, Open Source, Ease of use - Easy, Visual Appearance - Modern)
Examples - Link -
Icepanel (Paid, Closed Source, Hand drawn, Ease of use - Easy, Visual Appearance - Modern)
-
Lucidscale (Paid, Closed Source, Ease of use - Intermediete, Visual Appearance - Modern).
Examples - Link
Others - Ilograph, Omnigraffle, Cloudcraft, CloudSkew
ER 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 - LinkAzimutt
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