Pele — лёгкая альтернатива Mermaid.js

источник ↗ ·

Pele — zero-dependency библиотека, рендерящая Mermaid-синтаксис в SVG в 6 раз легче и до 500 раз быстрее Mermaid.js.

mermaid svg javascript obsidian diagram css-variables zero-dependency

privacy

Эта заметка участвует в semantic memory.

AI Summary

🚀 TL;DR Pele — компактная (230 кБ gzip) и быстрая (0,05–0,3 мс) библиотека, которая превращает Mermaid-синтаксис в SVG без внешних зависимостей.

📖 Что это такое Pele — open-source инструмент, созданный для Obsidian, чтобы мгновенно рендерить диаграммы и автоматически подстраиваться под тему оформления.

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

  • Поддерживает все типы диаграмм Mermaid 12.1.0
  • Размер: 230 кБ (gzip) против 1,6 МБ у Mermaid.js
  • Время рендера: 0,05–0,3 мс против 6–82 мс
  • Прямые зависимости: 0
  • Адаптация под маленькие экраны: Pele меняет layout, Mermaid.js масштабирует
  • Темизация: CSS-переменные вместо конфигурации темы

⚙️ Как это работает

  1. Импорт: import { render } from 'pele'
  2. Вызов: const { svg } = render('flowchart LR A-->B')
  3. Вставка: document.querySelector('#diagram').innerHTML = svg
  4. Цвета и шрифты задаются через CSS-переменные --pele-bg, --pele-fg, --pele-line и др.

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

📌 Важные детали

  • Название происходит от богини вулканов Пеле
  • Проект open-source
  • Доступны разделы: Examples, API, Theming, Compatibility

Мои мысли

graph

Карта связей