Анимированная диаграмма последовательности: от кода Mermaid до видео и сайта с озвучкой

Значимый прорыв формирует отрасль ИИ: Evsikoff 52 минуты назад Объяснить с Анимированная диаграмма последовательности: от кода Mermaid до видео и сайта с озвучкой Простой 6 мин 1. 2K UML Design * Я сделал редактор, в котором диаграмма последовательности превращается в презентацию с голосом диктора. Диаграмму можно писать кодом Mermaid или собирать мышью, а потом выгрузить как видео или как сайт на GitHub Pages.

Попробовать можно здесь: evsikoff. io/sequence-diagram-animator. Откуда взялась задачаВ моём проекте для хакатона есть окно с презентацией выдуманной интеграции с внешним сервисом.

Технические детали

Это диаграмма последовательности с озвучкой: пока диктор говорит, стрелки прорисовываются одна за другой. Прошлые сцены становятся серыми, схема прокручивается за последней стрелкой, а сцены переключаются автоматически или стрелками на клавиатуре. Сделано это было вручную: отдельный React-компонент на 500 строк и JSON со сценарием.

Для следующей такой презентации пришлось бы писать всё заново. Поэтому я решил сделать из этого инструмент. Что я хотел от инструмента:делить диаграмму на реплики диктора;для каждой реплики решать, какие элементы показать, какие подсветить и какую часть схемы видит камера;выгружать результат в видео;выгружать результат в web-приложение на GitHub, где, как в оригинале, переключаются эпизоды.

Сначала поискал готовоеХотелось взять инструмент с открытым кодом, в котором диаграмму можно править и кодом, и мышью, и добавить к нему анимацию. Вот что нашлось:ИнструментЛицензияКодомМышьюВ чём делоMermaidMITданетСтандарт «диаграмм как кода»: GitHub и GitLab рисуют его сами. Визуальный редактор есть только платныйPlantUMLGPL-3.

Отраслевые последствия

0 и другие сборкиданетСамый полный UML, но работает на JavaZenUMLMITданетСвой синтаксис, правка только текстомD2MPL-2. 0данетУмеет пошаговые сценарии, визуальный D2 Studio платныйdraw. 0разовый импортдаОбратной связи с кодом нетGaphorApache-2.

0Python APIдаНастоящий UML-моделлер, но десктопный и без анимацииsequencediagram. orgзакрытаядадаЛучше всех сочетает код и мышь, но код закрытВывод оказался простым. Веб-инструмента с открытым кодом, где диаграмма последовательности синхронно правится кодом и мышью, нет.

Анимации по репликам нет нигде. Поэтому за основу я взял язык Mermaid, а всё остальное сделал сам: визуальный редактор, анимацию и экспорт. Код диаграммы остаётся обычным Mermaid, его можно вставить в README на GitHub.

Событие, по словам экспертов, усилит конкуренцию в сфере ИИ.