🔼Всем привет, всем привет!
🔼Небольшой пост о 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
