Pele: диаграммы Mermaid как темизируемый SVG

Mermaid давно стал стандартом для описания диаграмм прямо в тексте: пишешь несколько строк разметки — получаешь блок-схему. Проблема в весе: официальная библиотека Mermaid.js тянет за собой внушительный объём кода и зависимостей. Проект Pele предлагает альтернативу, нацеленную на компактность и управляемость.

Что это

Pele — легковесная библиотека с открытым исходным кодом, которая принимает синтаксис Mermaid и отдаёт SVG. Оформление задаётся через CSS-переменные: цвета фона, текста, линий и поверхностей описываются в одном блоке стилей. Важная деталь — смена цветов применяется без повторного рендеринга диаграммы.

Цифры

Авторы приводят сравнение с Mermaid.js. Размер сборки в сжатом виде — 230 КБ против 1,6 МБ. Время отрисовки — от 0,05 до 0,3 мс против 6–82 мс. Прямых зависимостей у Pele нет вовсе, тогда как у Mermaid.js их 23.

Различается и поведение на маленьких экранах: Pele перестраивает раскладку диаграммы, а Mermaid.js масштабирует её целиком. Темизация у первого построена на CSS-переменных, у второго — на отдельной конфигурации тем.

Как подключить

Библиотека ставится через привычные пакетные менеджеры — npm, pnpm, yarn или bun. Использование сводится к вызову функции render(), которой передают разметку Mermaid; она возвращает готовый SVG, который достаточно вставить в нужный элемент страницы.

На фоне тяжеловесного оригинала Pele выглядит как попытка оставить от Mermaid только самое нужное — синтаксис — и обойтись без громоздкого рантайма. Для сайтов, где важны вес бандла и скорость отрисовки, подход разумный; насколько полно Pele покрывает возможности оригинального Mermaid, покажет практика.

Источник: Hacker News