Раньше я их в чём только не делал: от примитивной раскраски ячеек в Excel до монструозного MS Visio. Но в последние годы нравится вести почти все рабочие заметки в Markdown, и на сей раз покидать уютный редактор Typora тоже не хотелось. К счастью, в нём нашлось подходящее решение 👇🏼
Typora поддерживает Mermaid — библиотечку на JS для рендеринга различных диаграмм по простому текстовому описанию (как PlantUML, но без сервера). Идея внедрения этой штуки в Markdown-документ сводится к тому, что вы добавляете блок кода с указанием языка
mermaid, пишите в нём "код" диаграммы, а редактор сам на лету отрисовывает её сразу же под блоком кода. При этом в финальном документе кода видно не будет — он как бы спрятан за диаграммой. Выглядит код примерно так:gantt
dateFormat YYYY-MM-DD
axisFormat %d.%m %a
excludes weekends
title Примерный календарный план работ до демо
section Бэкенд
П.13 :done, 2026-01-27, 1d
П.6 (лист) :active, list-back, 2026-01-28, 2d
П.9 (граф) : des3, after list-back, 2d
П.19 (мониторинг): des4, after des3, 3d
П.20 (управление): control, after des4, 2d
Именно диаграммы Гантта я рисовал с помощью Mermaid впервые.
Что понравилось (основное):
✅ понятный синтаксис — можно разобраться, просто взглянув на готовый пример
✅ гибкость задания сроков — можно произвольно связывать начала и концы этапов между собой, и при сдвиге одного остальные пересчитаются сами
✅ учёт выходных — их можно автоматически разметить серым фоном и исключить из расчётов
Чего не хватило (основное):
❌ управления масштабом — при авторасчёте он нередко "схлопывает" границы дней, делая диаграмму менее наглядной
❌ гибкости описания секций — чтобы можно было написать секцию и исполнителя разными стилями для читабельности
❌ простановки отдельных дат — в документации для этого описан тег
vert, но похоже, он ещё не везде поддерживается.Конечно, возможности Mermaid сильно не дотягивают до полноценных графических редакторов. Но всегда ли это нужно? Зачастую гораздо проще и быстрее накидать что-то несложное прямо в коде/документе, и вот здесь такие #инструменты, как Mermaid, подходят как нельзя кстати 👍🏼