‎Mermaid позволяет создавать диаграммы, схемы и визуализации с использованием текста и кода.‎

Об инструменте

Если вы пишите код, то наверняка сталкивались с тем, что вам приходилось рассказывать, как  ваш код работает. Очень способствует такому рассказу схемы и диаграммы. Порой схемы и диаграммы даже лучше, чем слова рассказывают про то, как работает ваша программа, приложение, микросервисы, компонент, утилита и т.д. и .т.п.

Хочу расказать вам про один очень успешный, на мой взгляд, проект, который реализует возможность создавать схема прямо из текста. Это очень удобно! Более того, такие схемы поддреживаются, например, в GitHub. Это значит, что вы можете писать более "пооезную" документацию для разработчитов. Поверьте, схема лишними не бывают. 

Поддерживать схему, нарисованные в специальных графических редакторах, это очень сложно (а мне просто лень) и тратиться очень много времени. Куда проще изменить текст, причем, достаточно простой по формату, чтобы схема обновилась.

Достаточно слов. Вот ссылка: Mermaid pBmLP8UxJlU0p

Примеры

Flowchart

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

Sequence diagram

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

Class Diagram

classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label

Заключение

Mermaid умеет рисовать более 10 типов диаграм. Настоятельно рекомендую ознакомить с этим инструментом.