Sequence diagrams are so powerful
Tags: design, productivity, programming
Published: 2022-04-10 07:40:49

In this post, I would like to highlight the importance of sequence diagrams. As a tech lead, I'm involved in many projects in different teams. The team has an idea, they organize some brainstorming and they create some kind of documentation about what they would like to achieve with the shiny new stuff. Usually, that is the point where they ask me to make some design decision or just simply review what they have. In my experience, those initial design docs don't cover everything. This is the natural way of evolving a project but those blind spots don't help technical decisions. The devil lives in the details, you know (or would know). So usually I need a tool to find the missing part, which saves time for me and helps intelligibility of problems for the team at the same time. I'm not a visual person, I hate drawing or selecting the right colors for boxes. On the other hand, I also don't prefer non-reproducible, binary formats or hardly editable SVGs. I like to put the end result into version control, so I'm looking for a wooden wedge simply solution like sequence diagrams.

Please allow me to advise [https://sequencediagram.org/](https://sequencediagram.org/).


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ybmf9yimng8ud2szr7lf.png)

This looks good enough, team members should understand easily what is happening and helps investigate what is missing to make proper design decisions. It is [shareable](https://sequencediagram.org/index.html#initialData=C4S2BsFMAIGUEMC2AHK1kCcD2ArSBjYAKCPkKw2gFUBnSDI5eDUfEJgO2AHNsBXZNADEyEBwDW0AFRSAwuD41g9GUWjr0zVu3hdeWAcPAhuACx4ZIkDtKnqAYrvwBPADocAZti7WAJqo1A6A8sLngAd0gaLERIAFZLbj5wZmCABg8ADmh7b2UOXzUNPyL1JhYQNk4LA0EhYzNgACMFGBkHJzcOJrJxPwCg9XxQ4GxwaAAhXpLB9V94YHgeumgAEQWl+DpS6BnirjBnYV5IZwAuAEZoABVTEAxfTRZnIhKifUMhACYPL8gAdiacBiMEU9GgZFAoWE4Tuyh2SywAA9oFgAG7g273R7lYDnADqMFM8AxHAA5MBoPhTFgsCtdNAQCgoLEwlCODtaPQALQAPlyIz8Z1kxI43Bg0ViwDuYp2Ap8BT5U3wfQKZwAavBjPN4YFISA0QsYMrVYVAia-ErpmrNdqjTsLYreetFstIGcAAr0GggJQ7XyQfWG5STa1mjSO3wAHm53JdmzoZ3xC2p6G9vuU4fUQaNoZVe3UkZjzo2brO9kgwFTksrMu4DrDVvzNq1IB1MEgGIwzmlYnrevAlIAkjYa1StpAdubG-y8kLYH5oBwsKAPJUFiBocAsNAwQxZjk54q+byuRgzguCkuVyA1-gN6EdpBwCsAPLS8H37YHyN8+X5XxhUsXN4GgHAsCaKcNHwYCQwAKQgqDCxnBCmiAwNdVmVC+SxB4njxM4R2UDBIWgcIwFMaBezw3EXgPAMlGwZwfSgLhoFQpC81NP8j0Ay9HmXVd13ZKidz3Tj-0tE8zwvRdBNvYTNw5ejA0IA1c0jJ8ClebSgA) and finally, it is just simple code:

```
title Sample project

actor User
participantgroup #pink **Cluster**
    participantgroup #lightgreen **  Fancy\nfrontend**
        fontawesome5regular f0f8 Frontend
    end
    participantgroup #lightblue **  Fancy\nbackend**
        control Backend
        database Database
    end
    entity #grey:1 Third party
end

group #2f2e7b Some user action #white
    abox over Third party:We haven't choose an implementation
    User->Frontend:Change something
    Frontend->Backend:Validate
    activate Backend
    Backend->Backend:Validate
    Backend->Database:Persist
    deactivate Backend
    Backend<--Database:Watch persisted
    activate Backend
    Backend<->Database:Fetch something
    Backend->Backend:Validate everything
    alt In some case
        Backend->Frontend:Send notification to user
        Frontend-->>User:Send notification
    else Other case
        Backend->Frontend:Create a job
        create Job
        Backend->Job:Create
        Job->Third party:Interact with third party
        destroysilent Job
        Backend->Frontend:Send notification to user
        Frontend-->>User:Send notification
        deactivate Backend
    end
end

```