🔼Всем привет, всем привет! 🔼

Небольшой пост о UML-диаграммах и диаграммах в целом 📉

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

Популярные сервисы вроде drawio, lucidchart, miro или axivion suite, конечно, справляются с этой задачей. Однако они перегружены, и нужно приложить усилия, чтобы всё выглядело аккуратно и читабельно. Плюс некоторые фичи доступны только по подписке. Короче, удобнее на листе бумаги все накидать 😁

Но имеется один отличный минималистичный и полностью бесплатный инструмент, который может помочь с диаграммами:

🔤🔤🔤🔤🔤🔤🔤

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

classDiagram
    class Character {
      -string name
    }

    class Supervillain {
      +doBadThings()
    }

    class WeaponComponent {
      -int damage
      +attack()
    }

    class HealthComponent {
      -int health
      +heal()
    }

    Character <|-- Supervillain : is-a
    Supervillain *-- WeaponComponent : has
    Supervillain *-- HealthComponent : has



Mermaid поддерживает разные типы диаграмм (не только UML):
• классов
• состояний
• последовательностей
• Ганта
• чарты
и другие.

У Mermaid имеется удобный live-редактор, в котором можно экспериментировать: https://mermaid.live

Доки отличные, все осваивается за пару часов, если знакомы с UML: https://mermaid.js.org/intro

Поддерживаются стили, так что внутренний художник будет удовлетворен 🎨

Инструмент легко интегрируется с платформами, такими как Notion, Jira, GitBook и многими другими, поскольку все рендирится на JavaScript. Загуглите, есть даже плагин для VSCode.

Плюс это ещё и open-source проект (зацените кстати их модный markdown, с интеграцией диаграмм):
https://github.com/mermaid-js/mermaid

Не хватает только кастомных координат. Хотелось бы иметь возможность двигать блоки самостоятельно. Возможно добавят со временем данную фичу. Тогда будет идеально.

В качестве бонуса есть ещё один мини сервис:
https://nomnoml.com

В вики все ссылки добавил

#lifeexe #tools #uml #code #gamedev #mermaid