Mermaid

Недавно попробовал Mermaid-диаграммы. В целом ощущения похожи на markdown — прикольно делать что-то простое; хорошо, что это простой текст, который легко хранить в гите; генерируется SVG, в котором можно выделять текст.

Однако как только что-то не работает, то начинаются трудности. Например, у меня в схеме процесса образовалось много пересекающихся линий (хотя при этом граф планарный) и нет какого-то нормального способа это исправить, только случайная перестановка строк, пока не получится что надо. Другая проблема, с которой столкнулся — очень маленькое изображение из-за ограничения по ширине, а какой-то нормальной раскладки или “построчного” переноса нет. Нет и возможности увеличения по клику (из коробки). Поковырявшись почти час с разными настройками ширины на уровне CSS, графа и глобальных настроек в итоге плюнул, сменил направление с горизонтального на вертикальное и получил приемлемый результат. Ко всему этому можно добавить довольно нерегулярный синтаксис.

Однако, если отбросить перфекционизм, то вполне рабочий инструмент. Поиграться можно тут.

graph TD
    *>*] --x  **[/"_____"\]
    ** --- ***{{.}} --- _{{_}} --- .{{*}} 
    ** --- ****{{.}} --- _ --- ..{{*}}
    ** --- ***{{.}} --- __{{_}} --- ...
    ** --- ****{{.}} --- __ --- .
%% *** --- ****
    *** --- ___{{_}} --- .
    **** --- ___ --- ..
    *** --- _{{_}} --- ...{{*}}
    *** --- __{{_}} --- ..
    *** --- ___{{_}}
    **** --- _ --- ....{{*}}
    **** --- __ --- ....
    **** --- ___ --- ....
    ___ --- ...