Repolode
Предложить
lukilabs

lukilabs/beautiful-mermaid

Библиотека на TypeScript для рендеринга диаграмм Mermaid в настраиваемый по темам SVG или текст в ASCII/Unicode без зависимости от DOM.

Открыть на GitHub
Звёзды
11,200
Форки
411
Открытые issues
93
Последний коммит
6 месяцев назад

Что это?

beautiful-mermaid преобразует исходный код диаграмм Mermaid в строки SVG или текстовые схемы в ASCII/Unicode. Поддерживаются блок-схемы, диаграммы состояний, последовательностей, классов и ER-диаграммы, а также XY-графики со столбчатыми, линейными и комбинированными рядами.

Рендеринг выполняется синхронно, поэтому SVG можно вычислять прямо во время рендеринга React с помощью useMemo. Темы строятся на основе двух цветов — фона и переднего плана; также можно задать дополнительные акцентный и приглушённый цвета. Цвета доступны как CSS custom properties, поэтому тему можно менять без повторного рендеринга. В библиотеку также входят 15 встроенных тем, а любую тему Shiki (VS Code) можно преобразовать в цвета диаграммы.

ASCII-рендерер — это порт на TypeScript Go-проекта mermaid-ascii с поддержкой диаграмм последовательностей, классов и ER-диаграмм. Он выводит символы Unicode для рамок и линий либо чистый ASCII; для терминалов доступны также цвета ANSI или HTML.

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

  • 01Рендеринг блок-схем, диаграмм состояний, последовательностей, классов, ER-диаграмм и XY-графиков
  • 02Вывод SVG для веб-интерфейсов или текста в ASCII/Unicode для терминалов
  • 03Синхронный API, который можно использовать при рендеринге React с useMemo
  • 04Темы на основе двух цветов и 15 встроенных тем
  • 05Поддержка любой темы Shiki/VS Code через fromShikiTheme
  • 06Мгновенное переключение тем с помощью CSS custom properties

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

  • Показ сгенерированных блок-схем и диаграмм в интерфейсе AI-чата или агента
  • Отображение диаграмм Mermaid в приложении React без асинхронной загрузки
  • Вывод архитектурных диаграмм и диаграмм состояний в CLI-инструментах и терминале
  • Подбор цветов диаграмм под существующую тему редактора или приложения

Быстрый старт

  1. 1

    Установите пакет с помощью npm

    npm install beautiful-mermaid
  2. 2

    Преобразуйте блок-схему в SVG в коде

Что важно знать

  • Рендеринг выполняется синхронно, но раскладка ELK.js запускается через обходной механизм FakeWorker, поэтому обработка очень больших диаграмм может занимать больше времени.
  • В README перечислены только шесть типов диаграмм; остальные типы диаграмм Mermaid не рассматриваются.

Темы

#mermaid#diagram#svg#ascii#typescript#theming#charts

Частые вопросы

Что такое beautiful-mermaid?
Библиотека на TypeScript для рендеринга диаграмм Mermaid в настраиваемый по темам SVG или текст в ASCII/Unicode без зависимости от DOM. beautiful-mermaid преобразует исходный код диаграмм Mermaid в строки SVG или текстовые схемы в ASCII/Unicode. Поддерживаются блок-схемы, диаграммы состояний, последовательностей, классов и ER-диаграммы, а также XY-графики со столбчатыми, линейными и комбинированными рядами.
beautiful-mermaid можно использовать бесплатно? Какая у него лицензия?
beautiful-mermaid распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.
beautiful-mermaid всё ещё поддерживается?
Обновлялся за последние 6 месяцев. Последний коммит в beautiful-mermaid — 6 мая 2026 г..
Для чего можно использовать beautiful-mermaid?
Показ сгенерированных блок-схем и диаграмм в интерфейсе AI-чата или агента Отображение диаграмм Mermaid в приложении React без асинхронной загрузки Вывод архитектурных диаграмм и диаграмм состояний в CLI-инструментах и терминале Подбор цветов диаграмм под существующую тему редактора или приложения
Как установить beautiful-mermaid?
Установите пакет с помощью npm: npm install beautiful-mermaid Преобразуйте блок-схему в SVG в коде
Где скачать beautiful-mermaid?
Исходный код и инструкции по установке — на GitHub: https://github.com/lukilabs/beautiful-mermaid

Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.

Похожие проекты