Beauty Diagram

Что такое Beauty Diagram?

Beauty Diagram — это онлайн-редактор, который принимает исходный код Mermaid и PlantUML (и может импортировать определённые рабочие процессы draw.io) для рендеринга диаграмм с более чистой, готовой к презентациям раскладкой и стилизацией. Его основная цель — «приукрашивать» то, что уже производят эти языки диаграмм: перераспределять пробелы, перестраивать макет и готовить к экспорту — без необходимости вручную перерисовывать диаграммы пользователями.

Он поддерживает живой предпросмотр, однокликовое приукрашивание и экспорт в SVG или PNG для документации, презентаций и ревью. Страница также описывает типографику и темы, ориентированные на презентации, плюс предпросмотр «анимированного SVG» для подсказок движения в стиле последовательностей.

Ключевые возможности

• Редактор Mermaid с живым предпросмотром и однокликовым приукрашиванием: Вставьте исходный код Mermaid, сразу просмотрите результат и примените изменения форматирования без переписывания кода.
• Редактор PlantUML с рабочим процессом приукрашивания: Переключитесь на PlantUML, вставьте исходный код активности и примените форматтер, который выравнивает пробелы и элементы диаграммы.
• Импорт draw.io (Pro): Импортируйте .drawio или XML-экспорт (на сайте указано, что это доступно в Pro). Редактор парсит рабочий процесс в исходный код Mermaid для приукрашивания.
• Перестройка макета с ортогональным маршрутизированием для блок-схем/диаграмм активностей: Перераспределяет пробелы и маршрутизирует диаграммы на сетке с ортогональными соединениями (чтобы избежать диагональных стрелок, прорезающих узлы).
• Переключение тем для единообразной стилизации: Переключайтесь между темами (перечислены: modern, atlas, obsidian, atelier) без редактирования исходного кода диаграммы.
• Типографика и стилизация уровня презентаций: Страница выделяет Geist на 14px / 500, OpenType лигатуры, метки, выровненные по базовой линии, и предпочтение мягких теней вместо жёстких обводок в 1px.
• Анимированные предпросмотры SVG (тот же исходник, разные наложения движения): Накладывайте тонкое движение (примеры: charge, laser, pulse) на вывод Mermaid для уточнения последовательности/направления.
• Экспорт для документации и презентаций: Экспортируйте SVG и PNG. Страница также указывает 4× PNG-экспорт в Pro и отмечает, что SVG подходит для просмотра на экране, а PNG — когда целевые платформы не поддерживают SVG.
• Настройка узлов/линий на холсте через панель инструментов (исходник не трогается): На сайте описано клик по узлам/линиям для открытия плавающей панели инструментов, чтобы настроить фон, границу, цвет/ширину линий и цвет текста; кастомизации сохраняются с диаграммой и делятся по ссылке.

Как использовать Beauty Diagram

1. Откройте онлайн-редактор и выберите тип диаграммы (Mermaid или PlantUML; импорт draw.io указан как Pro).
2. Вставьте существующий исходный код Mermaid или PlantUML в редактор.
3. Используйте Beautify для применения форматтера: он перестраивает диаграмму и применяет выбранную тему/правила стилизации.
4. Просмотрите живой предпросмотр, при необходимости настройте цвета с помощью панели узлов/линий и переключите темы.
5. Экспортируйте как SVG или PNG для целевого рабочего процесса (документация/презентации/ревью, как описано на странице).

Сценарии использования

• Преобразовать блок-схему Mermaid в графику, готовую для слайдов: Вставьте код Mermaid, приукрасьте для ортогонального сеточного маршрутизирования и палитры/типографики презентаций, затем экспортируйте SVG для встраивания или просмотра с высоким зумом.
• Исправить сжатые диаграммы активностей PlantUML: Переключите вкладку редактора на PlantUML, вставьте диаграмму активности, приукрасьте для нормализации пробелов и деталей泳дорожек/макета.
• Поддерживать один исходник диаграммы для разных контекстов презентаций: Используйте переключение тем (modern/atlas/obsidian/atelier) для рендеринга одного контента Mermaid для презентации, страницы документации или README в тёмном режиме.
• Улучшить читаемость диаграммы за счёт снижения визуального шума: Примените палитру с одним акцентом, где ромбы решений/ветвления выделяются на сером фоне.
• Интегрировать рабочие процессы draw.io в конвейер форматирования на базе Mermaid (Pro): Импортируйте файл .drawio или XML-экспорт, парсите в исходный код Mermaid и продолжите редактирование/приукрашивание в рабочем процессе Mermaid.

Часто задаваемые вопросы

Как упростить Mermaid-диаграмму потока?
Вставьте исходный код Mermaid в редактор, нажмите Beautify и используйте живую предпросмотрку, чтобы подтвердить изменения в расположении и стилизации. На странице указано, что исходный код остаётся неизменным; меняется только рендеринг.

Можно ли улучшить PlantUML-диаграмму активности таким же образом?
Да. На странице описано переключение на вкладку PlantUML, вставка исходного кода активности и нажатие Beautify для выравнивания дорожек и нормализации сжатого стандартного интервала.

В чём разница между SVG и PNG для экспорта?
На сайте указано, что SVG лучше для просмотра на экране (документы/сайты/вставки в Figma), поскольку остаётся чётким при любом масштабе, а PNG полезен для слайдов, которые экспортируют в PDF/печатают, или если целевой инструмент не поддерживает SVG. Также упоминается экспорт 4× PNG в Pro.

Может ли Beauty Diagram импортировать файл draw.io?
Да, но это Pro: можно перетащить .drawio или XML-экспорт в редактор. На сайте сказано, что он парсит диаграмму потока/последовательности в исходный код Mermaid для последующего упрощения.

Это просто клон Mermaid Live Editor?
На странице явно противопоставляется Mermaid Live: Beauty Diagram постобработает вывод Mermaid — добавляя перерасположение, интервалы, типографику и изменения палитры, — а не только рендерит то, что Mermaid производит по умолчанию.

Альтернативы

• Mermaid Live Editor (или другие рендереры Mermaid): Полезны для живого рендеринга синтаксиса Mermaid, но источник подчёркивает, что Beauty Diagram фокусируется на постобработке стандартного рендерера для布局 и стилизации презентационного уровня.
• Инструменты для создания диаграмм/досок (например, инструменты для дизайна блок-схем): Они могут создавать графику для слайдов, но часто требуют ручного перерисовывания вместо упрощения существующего кода Mermaid/PlantUML.
• Универсальные инструменты для диаграмм с поддержкой экспорта: Они производят SVG/PNG, но обычно ориентированы на процесс рисования, а не на форматирование/перерасположение кода Mermaid/PlantUML.
• Встроенные рабочие процессы экспорта draw.io: Если диаграммы уже в draw.io, можно полагаться на встроенный экспорт; ценность Beauty Diagram описана конкретно в конвертации/импорте в Mermaid-рабочий процесс с последующим применением правил упрощения.