Всем здарова! Немного отвлечемся от темы AI и поговорим про более приземленные вещи (но не менее важные!)

Термин mermaid диаграммы вам о чем-нибудь говорит?

Если вы когда-нибудь сталкивались с необходимостью рисовать диаграммы классов или компонентов, то вы точно знаете про uml. Так вот, mermaid - это библиотека на js, которая позволяет создавать разного рода диаграммы с помощью простого текстового синтаксиса! Нужна sequence диаграмма? Есть! Просто необходим flowchart? Тоже есть! Хотите нарисовать C4 модель?!?! Даже такое можно!

Конечно есть свои приколы. Например, синтаксис C4 взят прямиком из uml, поэтому документация по С4 uml подходит и для mermaid... но не вся! Некоторые функции просто отсутствуют в mermaid, и познается это только через практику 🌚

А еще рендер некоторых типов диаграмм плохо позиционирует блоки и проводит стрелки, из-за чего получается каша на готовой диаграмме (особенно это заметно на C4) 😬

Зато есть много других плюсов: 1️⃣ Очень крутая песочница, где в реальном времени можно посмотреть результат 2️⃣ Можно встроить интерактивную схему прямо на свой сайт 3️⃣ AI-инструменты хорошо понимают такие схемы и более того, AI'шка может сама рисовать такие схемы при необходимости (ладно, от AI отвлечься не вышло) 4️⃣ Obsidian из коробки поддерживает рендер mermaid диаграмм

И самый главный плюс лично для меня: В какой-то момент жизни оказалось проще рисовать диаграммы таким образом, чем двигать блоки в miro и думать, а как это все красиво расставить, чтобы всем было понятно, что имел ввиду автор (я) 😁

🔥➕🔁