Beautiful-Mermaid: Mermaid диаграммы прямо в терминале

30.01.2026 · 5 мин

Диаграммы в терминале звучат как костыль. Кто будет смотреть на ASCII-графику, когда есть красивые SVG? Но подумайте о контексте: вы в SSH-сессии на сервере, работаете в Claude Code, или ваш CI/CD пайплайн генерирует отчёт. Браузера нет. И тут ASCII — не компромисс, а единственный разумный выбор.

beautiful-mermaid — TypeScript библиотека, которая рендерит Mermaid диаграммы в SVG или ASCII. Без DOM-зависимостей, с 15 встроенными темами, и с поддержкой основных типов диаграмм.

Зачем это нужно

Mermaid стал стандартом для диаграмм-как-код. GitHub рендерит его в README, Notion и Obsidian поддерживают нативно, документация повсюду использует graph TD и sequenceDiagram. Но все эти инструменты работают в браузере.

А что если диаграмма нужна там, где браузера нет?

AI-ассистенты и LLM. Claude, GPT и другие модели отлично генерируют Mermaid-код. Но показать результат в чате они не могут — только текст. ASCII-рендеринг решает эту проблему: модель генерирует диаграмму, библиотека превращает её в читаемый Unicode-арт прямо в ответе.

CLI-инструменты. Вы пишете утилиту для визуализации зависимостей или архитектуры. Открывать браузер для каждого запуска — friction. Вывести диаграмму прямо в терминал — zero friction.

Логи и отчёты. CI/CD, мониторинг, автоматизация. Везде, где результат идёт в текстовый файл или stdout, ASCII-диаграмма встраивается естественно.

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

Установка:

npm install beautiful-mermaid

Минимальный пример:

import { renderMermaidAscii } from 'beautiful-mermaid'

const diagram = `
graph LR
    A[Запрос] --> B{Валидация}
    B -->|OK| C[Обработка]
    B -->|Ошибка| D[Ответ 400]
    C --> E[Ответ 200]
`

const ascii = await renderMermaidAscii(diagram)
console.log(ascii)

Результат в терминале:

┌─────────┐    ┌───────────┐    ┌───────────┐    ┌───────────┐
│ Запрос  │───→│ Валидация │───→│ Обработка │───→│ Ответ 200 │
└─────────┘    └─────┬─────┘    └───────────┘    └───────────┘
                     │
                     │ Ошибка
                     ▼
               ┌───────────┐
               │ Ответ 400 │
               └───────────┘

Читаемо? Вполне. Браузер не нужен? Именно.

SVG-рендеринг с темами

ASCII — не единственный режим. Для генерации картинок есть SVG-рендеринг с 15 встроенными темами:

import { renderMermaidSvg } from 'beautiful-mermaid'

const svg = await renderMermaidSvg(diagram, {
    theme: 'tokyo-night'
})

// Записать в файл или встроить в HTML

Доступные темы: Tokyo Night, Catppuccin (Latte, Frappé, Macchiato, Mocha), Nord, Dracula, GitHub Light/Dark, и другие. Выбираете под свой редактор или документацию — диаграммы выглядят консистентно.

Поддерживаемые типы диаграмм

Библиотека работает с основными типами Mermaid:

Flowcharts — блок-схемы и потоки данных

State diagrams — состояния и переходы

Sequence diagrams — взаимодействие компонентов

Class diagrams — структура кода

ER diagrams — схемы баз данных

Zero DOM Dependencies

Ключевая особенность — библиотека не требует браузерного окружения. Никакого jsdom, puppeteer или headless Chrome. Это означает:

Когда использовать

Используйте beautiful-mermaid, если:

Не используйте, если:

Итого

beautiful-mermaid закрывает конкретную нишу: Mermaid-диаграммы там, где нет браузера. ASCII-режим для терминалов и текстовых интерфейсов, SVG-режим с темами для генерации картинок.

Для AI-ассистентов и CLI-инструментов — это не костыль, а правильный инструмент для правильного контекста.

npm install beautiful-mermaid

Ссылки