Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shubhamgrg04/awesome-diagramming
A curated collection of diagramming tools used by leading software engineering teams
https://github.com/shubhamgrg04/awesome-diagramming
List: awesome-diagramming
awesome-list diagram uml
Last synced: 3 days ago
JSON representation
A curated collection of diagramming tools used by leading software engineering teams
- Host: GitHub
- URL: https://github.com/shubhamgrg04/awesome-diagramming
- Owner: shubhamgrg04
- Created: 2022-09-19T06:02:59.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-25T06:42:40.000Z (5 months ago)
- Last Synced: 2025-01-02T02:05:12.699Z (10 days ago)
- Topics: awesome-list, diagram, uml
- Homepage:
- Size: 24.4 KB
- Stars: 2,945
- Watchers: 39
- Forks: 81
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- my-awesome-github-stars - shubhamgrg04/awesome-diagramming - A curated collection of diagramming tools used by leading software engineering teams (Others)
- awesomes - awesome diagramming tools
- awesome-list - shubhamgrg04/awesome-diagramming - A curated collection of diagramming tools used by leading software engineering teams (Misc)
README
# Awesome Diagramming [](https://github.com/sindresorhus/awesome)
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](https://kroki.io/) (Free, Open Source, Diagram as code, Ease of use - Easy, Visual Appearance - Flexible).
Examples - [Link](https://kroki.io/examples.html)
* [Mermaid](https://mermaid-js.github.io/mermaid/) (Free, Open Source, Diagram as code, Ease of use - Easy, Visual Appearance - Modern).
Examples - [Link](https://mermaid-js.github.io/mermaid/#/examples)
* [Eraser.io](https://www.eraser.io/) (Freemium, Closed Source, Hand drawn, Ease of use - Easy, Visual Appearance - Modern).
Examples - [Link](https://www.eraser.io/examples)
* [Excalidraw](https://excalidraw.com/) (Freemium, Open Source, Hand drawn, Ease of use - Easy, Visual Appearance - Hand-drawn).
Examples - [Link]()
* [PlantUML](https://plantuml.com/) (Free, Open Source, Diagram as code, Ease of use - Intermediate, Visual Appearance - Outdated)
Examples - [Link](https://plantuml.com/), [Link](https://real-world-plantuml.com/)
* [Draw.io](http://draw.io/) (Free, Open Source (But Closed To Contribution), Hand drawn, Ease of use - Moderate, Visual Appearance - Modern).
Examples - [Link](https://www.diagrams.net/example-diagrams)
* [Nomnoml](https://www.nomnoml.com/) (Free, Open Source, Diagram as code. Ease of use - Easy, Visual Appearance - Minimalistic).
Examples - [Link](https://www.nomnoml.com/)
* [Diagram.codes](https://playground.diagram.codes/) (Freemium, Closed Source, Diagram as code, Ease of use - Easy, Visual Appearance - Outdated).
Examples - [Link](https://playground.diagram.codes/)
* [Lucidchart](https://www.lucidchart.com/) (Paid, Closed Source, Hand drawn, Ease of use - Easy, Visual Appearance - Modern).
Examples - [Link](https://www.lucidchart.com/pages/tour)
* [Blockdiag](http://blockdiag.com/) (Free, Open Source, Diagram as code, Ease of use - Easy, Visual Appearance - Outdated).
Examples - [Link](http://blockdiag.com/en/blockdiag/examples.html)
Others - [Miro](https://miro.com/), [Gliffy](https://www.gliffy.com/), [Inkscape](https://inkscape.org/), [Plectica](https://www.plectica.com/), [Whimsical](https://whimsical.com/), [ZenUML](https://zenuml.com/), [Gleek](https://www.gleek.io/), [Structurizr](https://structurizr.com/dsl), [StarUML](https://staruml.io/), [Gaphor](https://gaphor.org)
### **System Architecture Diagram**
> **Essential readings**
[C4 Model](https://c4model.com/), [5 types of architecture diagrams](https://www.readysetcloud.io/blog/allen.helton/the-5-types-of-architecture-diagrams/)
- [Diagrams](https://diagrams.mingrammer.com/) (Free, Open Source, Ease of use - Easy, Visual Appearance - Modern).
Examples - [Link](https://diagrams.mingrammer.com/docs/getting-started/examples)
- [Terrastruct](https://terrastruct.com/) (Paid, Closed Source, Ease of use - Easy, Visual Appearance - Modern)
Examples - [Link](https://terrastruct.com/examples/1/)
- [IcePanel](https://icepanel.io/) (Paid, Closed Source, Hand drawn, Ease of use - Easy, Visual Appearance - Modern)
Examples - [Link](https://s.icepanel.io/vmHvBHr4BeMEOa/iyAG)
- [Lucidscale](https://lucidscale.com/) (Paid, Closed Source, Ease of use - Intermediate, Visual Appearance - Modern).
Examples - [Link](https://lucidscale.com/tutorial)
Others - [Ilograph](https://www.ilograph.com/), [Omnigraffle](https://sequencediagram.org/), [Cloudcraft](https://www.cloudcraft.co/), [CloudSkew](https://www.cloudskew.com/)
### **Sequence Diagram**
- [Swimlanes](https://swimlanes.io/) (Free, Closed Source, Ease of use - Easy, Visual Appearance - Modern)
Examples - [Link](https://diagrams.mingrammer.com/docs/getting-started/examples)
Others - [Websequencediagrams](https://www.websequencediagrams.com/), [Sequencediagram.org](https://sequencediagram.org/)
### **Database Schema Diagram**
> **Essential Readings**
[How to choose your ERD?](https://azimutt.app/blog/how-to-choose-your-entity-relationship-diagram)
- [DbDiagram](https://dbdiagram.io) (Freemium, Closed Source, Ease of use - Easy, Visual Appearance - Modern)
Examples - [Link](https://hackernoon.com/dbdiagram-io-a-database-diagram-designer-built-for-developers-and-analysts-975f310d4f13)
- [Azimutt](https://azimutt.app/) (Free, Open Source, Ease of use - Easy, Visual Appearance - Modern).
Examples - [Link](https://azimutt.app/blog/how-to-explore-your-database-schema-with-azimutt)
> `Azimutt` is useful when you want to visualize existing database
- [QuickDBD](https://app.quickdatabasediagrams.com/) (Free, Closed Source, Ease of use - Easy, Visual Appearance - Modern).
Examples - [Link](https://www.quickdatabasediagrams.com/quickdbd-as-mysql-design-tool/)
Others - [DrawSql](https://drawsql.app/), [ERD Plus](https://erdplus.com/), [Creately](https://creately.com/lp/er-diagram-tool-online/), [SqlDBM](https://sqldbm.com/Home/)
### **Gantt Chart**
- [Markwhen](https://markwhen.com/) (Free, [Open Source](https://github.com/kochrt/markwhen), Ease of use - Easy, Visual Appearance - Minimalist)
Examples - [Link](https://markwhen.com/rob/wedding)
### **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/