I think you agree that diagrams are the best way how to describe processes, architecture. โœ’๏ธ But software developers are writers, not artists. ๐Ÿ˜‰When someone asks us to draw a diagram to describe our solution, it`s not that task we will do with pleasure. Software developer feels better in writing code (text) and not moving boxes and arrows. ๐Ÿ˜‰

Before I found tools where I can make diagrams using text I used tools like Microsoft Visio, Draw.io, etc. But for all of them, I found that all diagrams look different. If you make diagrams in common style it mid be another team in the company making diagrams in a different style. When you have a few styles for diagrams in the company it takes time for newcomers to understand the diagram and read it fast. ๐Ÿค” Like we everybody knows Time Is Money. ๐Ÿ’ฐ Another important issue related to diagrams is versioning them. How I can compare two diagrams? Can I use git to blame all the changes team made? Making diagrams using text solves all problems I described, let`s look. ๐Ÿ’ก

Tools making diagrams from text

I have realized that sequence diagrams work for me the best. ๐Ÿงก It is the best way how to describe the interaction between objects, components, etc. That`s why I choose tools to cover more sequence diagrams making using text. My preference for tools is simple and easy to learn.

Tool: WebSequenceDiagrams

This is an online-based tool https://www.websequencediagrams.com/. ๐ŸŒŽ Built only for making sequence diagrams. They have a free and premium paid plan. I use free currently it fits my requirements. The syntax is very simple and easy to use. Documentation also is user friendly with examples. ๐Ÿ“„

Sequence diagram example

What I like a lot about this tool they have a lot of diagram styles, you can choose which fits your company the best.

Sequence diagram styles

Only one inconvenience I had using free subscription, when a diagram is quite large you can`t export it to an image in good quality. When the diagram grows bigger, the smaller they start to become, because canvas size is limited. This tool I use a lot.

Tool: Swimlanes

This is also an online-based tool https://swimlanes.io/. ๐ŸŒŽ Built only for making sequence diagrams. This tool is free. The syntax is very simple and easy to use. Documentation also is user friendly with examples. Swimlanes have more visual components than WebSequenceDiagram tool.

Swimlanes diagram example

This tool has only one diagram style. From features, I found interesting, that you can embed your diagram to your web page. Also, you can add a password to access your public diagram, when sharing with your team.

Tool: Mermaid

This is not the only tool, but framework https://github.com/mermaid-js. ๐Ÿš€ It contains an online diagrams editor, cli for generating diagrams from the command-line. Mermaid is free and opensource https://github.com/mermaid-js. Using available Mermaid libraries you can integrate it into your applications (example how to integrate). If you are using Visual Studio Code, Mermaid have a lot of extensions to make diagrams directly from editor. ๐Ÿค˜

Mermaid extensions for Visual Studio Code.

Online diagram editor is not very user friendly and easy to use, but make diagrams using the text you can https://mermaid-js.github.io/. ๐ŸŒŽ

Mermaid live editor https://mermaid-js.github.io/

Mermaid supports a lot of diagram types: flow chart, sequence diagrams, class diagrams, state diagrams, Gantt chart, pie chart, and ER diagrams. And it sounds much amazing when you know that everything is opensource and available for free.


Making diagrams using text it is much faster. One day I compare the time I spend to draw a sequence diagram using Draw.io and WebSequenceDiagrams. The difference was very big. Using WebSequenceDiagrams I spend 15 minutes and using Draw.io 1 hour. The benefits of time are very great. It is great that you can be versioning your diagrams using git.

For me, it is an excellent benefit that I can describe my ideas to my team much faster and we can understand the process in the same way.

Happy making diagrams using text!๏ธ ๐Ÿ“