Typically when designing a software you need tool(s) which can help you to create multiple type of diagrams for documenting purposes. As an architect or developer you need to create typically diagrams for technical architecture, logical network, database schema, sequence diagram etc. There are lot of good diagramming and designing tools available for architects & developers and you should carefully evaluate which is good for the team and organization.
This blog post covers a few tools what I use and prefer when designing a software. I have evaluated these tools only from the software development point of view. These tools support diagramming also for other purposes as well.
Software architecture tools site provides a comprehensive list of tools for software design. Check that list!
Diagrams.net
Diagrams.net is an open-source diagramming / designing tool. You have probably heard earlier about Draw.io but nowadays Draw.io is known as Diagrams.net. I'm using Diagrams.net mainly diagramming charts and diagrams presented in this blog and other personal purposes. I prefer Diagrams.net because it's free, easy to use and it supports wide range of cloud storages where to persist your diagrams. I'm persisting diagrams to GitHub.
Favorite features
- If you use Visual Studio Code as a code editor, Draw.io integration extension enables creation and modification of Diagrams.net files directly from Visual Studio Code. This enables to locate ex. technical design diagrams close to code. Note extension is still using the name Draw.io!
- Both desktop and web clients are available.
- Supports Azure Icons by default and other cloud providers as well.
- Lot's of ready templates available for software development purposes (sequence diagrams, modelling database, UML etc.).
- You can decide where to store your diagrams (GitHub, OneDrive etc.).
- Open-sourced, free to use.
- Supports dark theme.
- Export supports large variation of formats HTML, PDF, image formats etc. It's also very handy that you can quickly share your diagram via URL.
User interface
Templates
Diagrams.net support large variation of diagram types
Miro
Miro is an online collaboration & diagramming tool which has very flexible canvas and it supports large range of different templates and diagram types. Amount of ready templates and diagrams is more comprehensive than in Diagrams.net. You can find ready templates for product road mapping, OKR planning, mindmapping and of course for designing a software.
I'm using Miro mostly for diagramming work related software diagrams. It's so easy to create a Miro Board and create ex. initial technical design and after that share board for the team and start collaborating.
Free version of Miro enables 3 editable boards for you. I'm referring here mostly features of paid subscriptions (Business, Enterprise).
Favorite features
- Superior collaboration features which support team work. Miro has built-in features for commenting, voting and work estimation.
- Frames enables a powerful way to organize your board to smaller pieces. When you have determined frames you can then easily export content based on frames to PDF, Iframe etc.
- Very comprehensive collection of templates.
- Supports custom templates created by other users of Miro.
- Data residency (USA, Europe) in Enterprise subscription.
- Built-in support of Azure icons.
Templates
Like said Miro provides a comprehensive collection of different kind of templates. Note! most of them are available only for paid subscriptions.
Frames
Frame is an area in Miro board which can contain multiple diagramming objects. Frames are those white areas in the below picture. If you have a large board it's recommended to divide content to multiple frames. Framing also helps you when you need to export content out of Miro.
Diagramming with mermaid + markdown
Mermaid is a JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically. One of the greatest feature of Mermaid is the diagram as a code support. It enables that diagrams are deeply integrated as part of your technical documentation written in markdown files.
You need to learn a specific syntax how to create diagrams but it's fairly easy to learn. I'm using Mermaid especially when creating small diagrams to my markdown based notes. You can read more about my note-taking tools from here.
Sample mermaid definition embedded to markdown file
```mermaid
gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
```Above definition renders this kind of branching strategy diagram.
Favorite features
- Supports typical diagram types (GitGraph, State, Sequence, Timeline etc.). Support is not as comprehensive than Miro or Diagrams.net but it's sufficient especially for software designing purposes.
- Deep integration with Markdown which enables that technical documentation and diagrams can be located close the code in the source control.
- Diagrams as a Code.
- Nice tool for quick diagramming.
Comments