Pele – Mermaid diagrams as themeable SVG

Pele — это новый рендерер диаграмм Mermaid в SVG, который работает без зависимостей и заметно быстрее и легче оригинала. Он поддерживает все типы диаграмм, встроенные в Mermaid 12.1.0, а тема оформления задаётся через CSS-переменные: цвета и шрифты меняются без повторного рендеринга. Достаточно передать синтаксис Mermaid в функцию render() и вставить полученный SVG в страницу.

Ключевые цифры впечатляют: сжатый размер сборки — 230 КБ против 1,6 МБ у Mermaid.js (в 6 раз меньше), время рендеринга — 0,05–0,3 мс против 6–82 мс (до 500 раз быстрее), а прямых зависимостей нет вовсе против 23 у Mermaid. На маленьких экранах Pele адаптирует компоновку, тогда как Mermaid просто масштабирует диаграмму.

Проект открыт, разработан для Obsidian и назван в честь богини вулканов и огня Пеле. Установка — через npm install pele.

Комментарии (39)

Обсуждение подтверждает, что у оригинального Mermaid есть серьёзные проблемы с автоматическим расположением элементов, а Pele предлагает открытый и более гибкий рендерер, однако пользователи отмечают недостатки в темной теме, возможные баги в playground и делятся советами по альтернативным библиотекам и интеграции с CI/CD.

Многие комментаторы (lukeify, tptacek, invokestatic) отмечают, что автоматический layout в Mermaid часто получается запутанным и топологически плохим, что делает его непригодным для сложных диаграмм.
Совет: invokestatic советует использовать Python‐библиотеку mermaidx для генерации диаграмм в CI/CD, но предупреждает, что её layout может быть непредсказуемым и иногда приходится экспортировать PNG.
Imustaskforhelp и blktiger подтвердили, что Pele является открытым проектом, размещённым в репозитории https://github.com/obsidianmd/pele, и предложили добавить видимую иконку GitHub для удобства.
Совет: kepano объяснил, что Pele рендерит SVG, следуя только синтаксису Mermaid, а не его алгоритму расположения, и предоставляет режим сравнения, что решает многие жалобы на плохой layout.
shellerik указал, что текущие примеры Pele недостаточно адаптированы к тёмной теме, что может затруднять использование в темных редакторах.
Совет: Ancapistani отметил, что в Pele подграфы сохраняют своё направление даже при соединении с внешними узлами, что является весомым аргументом для перехода с Mermaid, несмотря на возможную разницу в скорости.
kinduff сообщил о поломке предпросмотра Mermaid в playground Pele, а kepano запросил детали, указывая на необходимость исправления.
Совет: dbg31415 подчеркнул, что такие инструменты позволяют интегрировать генерацию диаграмм в AI‐ассистенты (например, Claude) и сохранять их в markdown, что упрощает контроль версий.