Hacker News Digest

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.

Обсуждение подтверждает, что у оригинального 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, что упрощает контроль версий.

Reladraw — это текстовый язык для создания диаграмм с точным, но гибким позиционированием элементов. В отличие от Mermaid или Graphviz, где расположение автоматизировано, и draw.io, где нужно вручную перетаскивать узлы, Reladraw позволяет задавать относительные позиции: below, right of, level with — без ручного указания координат. Например, диаграмма архитектуры из 10 узлов и связей описывается всего 7 строками кода, что делает её легко редактируемой и версионируемой. Результат рендерится в SVG без внешних зависимостей.

Инструмент доступен как CLI-утилита через npm install -g reladraw и интегрируется с AI-агентами (Claude, Copilot и др.) через плагины. На данный момент версия 0.11.1 — ранняя, с нестабильным синтаксисом, но уже работает: парсер, движок макета и рендерер написаны на TypeScript. Проект открыт для обратной связи — особенно ценятся примеры диаграмм, которые невозможно выразить текущим синтаксисом. Лицензия Apache-2.0, но торговая марка «reladraw» не включена в разрешения.

Обсуждение подтверждает, что необходимость точного позиционирования в диаграммах действительно существует и Reladraw закрывает этот пробел, однако пользователи указывают на баги (тёмные темы, кривые стрелки), просят интеграцию в markdown и IDE, а также сравнивают его с D2/TALA и задаются вопросом, стоит ли создавать новый язык или расширять существующие инструменты вроде Mermaid.

• Большинство комментаторов считают, что текущие инструменты (Mermaid, Graphviz, draw.io) либо автоматизируют расположение, либо требуют ручного перетаскивания, и поэтому им не хватает детального контроля, который предоставляет Reladraw.

• Относительные позиции (below, right of, level with) воспринимаются как достаточный уровень точности для большинства диаграмм, избавляя от необходимости указывать абсолютные координаты.

• Совет: Разработчикам рекомендуется создать плагины для популярных редакторов (VS Code, Obsidian) и поддержать блоки кода ```reladraw в markdown, чтобы упростить использование в документации.

• Совет: Полезно отделить топологическую часть языка (стрелки, группы) от инструкций по расположению, что позволит использовать Reladraw как слой раскладки для других DSL, например C43.

• В обсуждении отмечены баги: некорректный рендер кривой стрелки при указании from/to и проблемы с переключением тем в Safari, где тёмный фон делает текст нечитаемым.

• Совет: Необходимо добавить поддержку тем и исправить рендеринг в разных браузерах, а также обеспечить более стабильный веб‐интерфейс перед выпуском.

• Некоторые пользователи упомянули D2 с открытым движком TALA, который уже предоставляет ручной контроль над расположением и иногда генерирует более качественные макеты, чем Mermaid.

• Спор: Одна сторона считает, что вместо создания нового языка следует добавить ограничения размещения в Mermaid, чтобы не фрагментировать экосистему; другая сторона аргументирует, что только отдельный язык может гарантировать детерминированный результат без вмешательства движка раскладки.

• Есть интерес к автоматическому преобразованию описаний архитектуры, сказанных устно, в Reladraw‐диаграммы, что может облегчить взаимодействие с AI‐агентами.

• Совет: Рассмотреть возможность импорта/экспорта из/в форматы draw.io, чтобы пользователи могли мигрировать существующие схемы в Reladraw без потери информации.

This is very needed in the AI coding age! I find diagramming is one of the best ways for high bandwidth alignment between my mental model and the agent’s. I have been working on this problem a bit as I see good visuals as a key bottleneck in faster development while maintaining a real… — @apinstein

Команда SpiderMonkey разработала новый инструмент для визуализации компиляции JavaScript и WebAssembly, создав собственный алгоритм расположения графов вместо использования Graphviz или Mermaid. Когда оптимизирующий компилятор Ion активен, система генерирует интерактивные графики, показывающие обработку и оптимизацию функций. Пользователи могут писать JavaScript-код и видеть в реальном времени, как изменяется граф, с возможностью навигации, масштабирования и просмотра различных этапов оптимизации.

Автор статьи не был удовлетворен выводом существующих инструментов, которые не отражали структуру исходного кода и создавали нестабильные макеты. Новый алгоритм, реализованный менее чем в 1000 строк кода, прост, быстр и produces высококачественный результат. Он учитывает специфические ограничения графов управления потоком, такие как наличие хорошо определенных циклов и необратимость потока управления, что позволяет создавать более интуитивные визуализации.

Для разработки автор изучал алгоритм Сугиямы, используемый в Graphviz, но создал собственное решение, специально адаптированное под нужды компилятора. Интерактивный инструмент значительно упрощает анализ и отладку сложных графов компиляции, позволяя отслеживать инструкции и блоки кода на разных этапах оптимизации.

• Обсуждение показало, что специализированные решения для визуализации превосходят универсальные инструменты вроде Graphviz, но сообщество продолжает использовать последние из-за инерции и отсутствия альтернатив.
• Участники жалуются на то, что Graphviz и подобные инструменты не справляются с задачами даже средней сложности, и что их использование часто требует ручной доводки.
• Проект Microdiagram нацелен на создание DSL для каждого типа диаграмм вместо одного языка для всех типов диаграмм.
• Обсуждение также затронуло вопросы производительности и надежности инструментов, а также то, что сгенерированные ими диаграммы не всегда читаемы без дополнительной ручной работы.
• Участники поделились ссылкой на исходники на GitHub, где можно найти код, который может быть использован как стартовая точка для собственных экспериментов в этой области.

Obsidian минимизирует риски цепочек поставок, сознательно сокращая зависимости от стороннего кода. Приложение переиспользует или форкает небольшие модули, а для крупных библиотек вроде pdf.js или Mermaid использует версионно зафиксированные файлы с редкими обновлениями после тщательного тестирования. Это создаёт мелкую и контролируемую структуру зависимостей.

Все зависимости жёстко закреплены через lock-файлы, исключены пост-установочные скрипты, а обновления проводятся медленно и вручную — с изучением изменений, проверкой подзависимостей и тестами. Такой подход снижает вероятность попадания вредоносных обновлений и даёт время на обнаружение проблем до релиза.

• Пользователи выражают обеспокоенность уязвимой моделью безопасности плагинов Obsidian, которые имеют полный доступ к файлам.
• Обсуждается компромисс между использованием зависимостей и безопасностью: одни выступают за минимализм, другие — за осторожное обновление.
• Многие отмечают, что пост Obsidian игнорирует риски, связанные с плагинами, которые являются ключевой особенностью продукта.
• Высказывается критика в адрес Electron-архитектуры приложения из-за её ресурсоёмкости и потенциальных уязвимостей.
• Предлагаются альтернативы с меньшим количеством зависимостей и более нативными решениями, такие как Zim или Emacs.

ASCII-вывод в D2 0.7.1
Файлы с расширением .txt теперь рендерятся в ASCII. Пример: при сохранении .d2-файла Vim-плагин мгновенно показывает ASCII-превью.

Для документации кода
ASCII-диаграммы удобно вставлять в комментарии: выделите блок d2, плагин заменит его ASCII-версией.

Unicode или чистый ASCII
По умолчанию используются символы Unicode, но флаг --ascii-mode=standard вернёт строгий ASCII.

Ограничения (альфа-версия)

• Без стилей: animated, font, темы не поддерживаются; цвета в терминале — возможно позже.
• Неравномерные отступы из-за дискретной сетки.
  Сообщайте о багах: github.com/terrastruct/d2/issues.

Попробуйте сейчас
Откройте пример в D2 Playground.

• Представлена новая альфа-функция D2: рендеринг диаграмм в ASCII.
• Пользователи сравнивают D2 с Mermaid, отмечают лучший внешний вид и CLI без Chromium, но упрекают в отсутствии GitHub-рендеринга и сложных grid-раскладок.
• Появились вопросы о браузерной офлайн-работе, vim-/emacs-плагинах, Python-обёртке и возможности ручной подгонки элементов.
• Автор подтвердил, что WASM-версия (d2.js) уже работает в браузере, но пока неанонсирована; официальный релиз и поддержка PR-диаграмм ожидаются позже.