ИИтог

Pele: открытая библиотека рисует диаграммы Mermaid в SVG с темами на CSS

инструментыРедакция ИИтогHacker News🔥63Рейтинг ИИтог63Влияние40Новизна55Релевантность80Неожиданность35Участники10Достоверность80

Pele, лёгкая библиотека с открытым исходным кодом, которая отрисовывает диаграммы Mermaid в SVG. Внешний вид задаётся через CSS-переменные.

По описанию на сайте проекта, у Pele нет зависимостей, она в 6 раз меньше и работает до 500 раз быстрее, чем Mermaid.js. Что именно измерялось (размер сборки, минифицированный или сжатый файл, какие диаграммы и на каком оборудовании), на сайте не уточняется. Оценка скорости дана как верхняя граница («до 500×»), типичный выигрыш не назван. Это самоописание проекта, независимых замеров в источнике нет.

Совместимость: Pele поддерживает все типы диаграмм, встроенные в Mermaid 12.1.0. Подробное сравнение синтаксиса, раскладки и возможностей вынесено на отдельную страницу «Compatibility», в самом источнике её содержания нет.

Как это работает: пишете текст на синтаксисе Mermaid (например, блок-схему flowchart TD), передаёте его в функцию render() и вставляете возвращённый SVG на страницу. Цвета и шрифты настраиваются CSS-переменными; на сайте показан набор переменных класса .pele: --pele-bg, --pele-fg, --pele-muted, --pele-line, --pele-surface, --pele-surface-alt, --pele-border. Смена цветов применяется без повторной отрисовки диаграммы.

На сайте также есть разделы с примерами поддерживаемых типов диаграмм, описанием API и настройки тем оформления. Проект разработан для Obsidian, чтобы быстро рисовать диаграммы и подстраиваться под тему пользователя. Название, в честь Пеле, богини вулканов и огня.

Ключевые факты

  • Pele, открытая библиотека, отрисовывающая диаграммы Mermaid в SVG; оформление задаётся CSS-переменными.
  • Заявлено самим проектом: ноль зависимостей, в 6 раз меньше и до 500 раз быстрее Mermaid.js; методика замеров не раскрыта.
  • Поддерживаются все встроенные типы диаграмм Mermaid 12.1.0.
  • Использование: передать синтаксис Mermaid в render() и вставить полученный SVG на страницу; смена цветов не требует повторной отрисовки.
  • Разработана для Obsidian, чтобы быстро рисовать диаграммы в цветах темы пользователя.

Почему это важно

Mermaid.js, привычный способ рисовать диаграммы из текста, и Pele предлагает ему замену с упором на малый размер и скорость: ноль зависимостей, в 6 раз меньше и до 500 раз быстрее. Для интерфейсов, где диаграммы отрисовываются часто или на слабых устройствах, такие заявки могут быть существенными, но пока это обещание самого проекта.

Кому это важно

Разработчикам приложений и редакторов заметок, где нужны диаграммы из Mermaid-текста, особенно если важны размер зависимостей и подгонка под тему оформления. Пользователям Obsidian, библиотека создавалась именно для него.

Как это применить

Передайте текст в синтаксисе Mermaid в функцию render() и вставьте возвращённый SVG в страницу. Цвета и шрифты настройте CSS-переменными (например, --pele-bg, --pele-fg, --pele-border); цвета меняются без повторной отрисовки. Перед заменой Mermaid.js стоит сверить свои диаграммы со страницей совместимости проекта. Лицензия, адрес репозитория и версия в источнике не указаны.

Можно ли доверять

Все цифры (6× меньше, до 500× быстрее, ноль зависимостей) взяты с сайта самого проекта. Методика замеров, оборудование и тестовые диаграммы не приведены, независимой проверки в источнике нет. Автор или организация-разработчик на странице не названы. Скорость указана как «до», а не типичная.

Риски и подводные камни

Поддержка заявлена для типов диаграмм Mermaid 12.1.0; какие возможности Mermaid не реализованы и чем отличается итоговая картинка, источник не раскрывает, это отправлено на отдельную страницу совместимости. Сравнивайте результат на своих диаграммах и самостоятельно замеряйте скорость и размер, прежде чем полагаться на заявленные цифры.