Коротко: mermaid-ascii — Go-библиотека, скомпилированная в WebAssembly, которая конвертирует Mermaid-диаграммы в ASCII-арт прямо в браузере. Поддерживает цвета через classDef, не требует сервера, работает с flowchart, sequence и другими типами. Готова к использованию в CI/CD логах, README и технической документации.
Зачем переводить Mermaid-диаграммы в ASCII
Mermaid давно стал стандартом для описания схем текстом — архитектуры, пайплайны, последовательности действий. Обычно он рендерится в SVG или PNG. Но в ряде рабочих сценариев изображения просто не работают:
- Терминал и CI/CD логи — только текст
- Plain-text документация — Markdown без рендера
- Чаты и мессенджеры — проще вставить текст, чем загружать картинку
- README в репозиториях — ASCII читается в любом просмотрщике без плагинов
ASCII-рендеринг решает эти случаи: диаграмма остаётся читаемой везде, где есть моноширинный шрифт.
Как работает mermaid-ascii
Библиотека AlexanderGrooff/mermaid-ascii написана на Go. Чтобы запустить её в браузере без сервера, она скомпилирована в WebAssembly: браузер получает .wasm-файл и исполняет его напрямую, без серверных запросов при каждом рендеринге.
Результат — клиентское веб-приложение: вставляешь Mermaid-разметку, сразу получаешь ASCII-схему. Кнопка «Copy as text» копирует готовый текст, «Copy link» — ссылку с закодированной диаграммой для шеринга.
Поддержка цветов: главное отличие от аналогов
Большинство ASCII-рендереров монохромны. mermaid-ascii понимает classDef и применяет ANSI-цвета к тексту узлов. Практический пример:
```
graph LR
Build:::good --> Test:::good
Test --> Deploy:::warn
Deploy --> Rollback:::bad
classDef good color:#3fb950
classDef warn color:#e3b341
classDef bad color:#ff7b72
```
В терминале «Build» и «Test» отображаются зелёным, «Deploy» — жёлтым, «Rollback» — красным. Это делает инструмент применимым для CI/CD статусов, где цвет несёт смысловую нагрузку.
Параметры настройки и типы диаграмм
Инструмент предоставляет несколько ручек:
| Параметр | Описание |
|---|---|
| Padding X | Горизонтальный отступ внутри блоков |
| Padding Y | Вертикальный отступ |
| Box padding | Отступ прямоугольника узла |
| ASCII only | Только базовые ASCII-символы |
Поддерживаемые типы диаграмм:
- Flowchart (LR, TD)
- Sequence
- Subgraph
- Multi-line labels
- Alt fragment, Loop + note
- Parallel flows
Где реально применять в бизнесе
Техническая документация — ASCII-схемы в Confluence, Notion или GitLab Wiki отображаются без зависимостей от рендера изображений.
CI/CD пайплайны — визуализация статусов сборки прямо в логах, с цветовой индикацией по состоянию узлов.
Архитектурные обзоры в чатах — вставь схему в Slack или Telegram без загрузки файла.
Обучающие материалы — ASCII-диаграммы воспроизводимы в любом текстовом редакторе, их легко версионировать в Git.
Часто задаваемые вопросы
Нужен ли сервер для работы mermaid-ascii?
Нет. Библиотека работает полностью на клиенте через WebAssembly. После загрузки страницы все вычисления происходят в браузере пользователя.
Какой Mermaid-синтаксис поддерживается?
Flowchart, Sequence, Subgraph, Multi-line labels, Alt fragment, Loop + note, Parallel. Поддержка classDef с цветами — одна из ключевых функций.
Чем mermaid-ascii отличается от стандартного рендеринга Mermaid?
Стандартный рендер даёт SVG/PNG — красиво, но не работает в терминале и plain-text форматах. ASCII-версия теряет в визуальном качестве, но выигрывает в универсальности и совместимости.
Можно ли использовать библиотеку программно, без веб-интерфейса?
Да, исходная Go-библиотека доступна отдельно и может быть интегрирована в любой Go-проект или скомпилирована в WASM под свои нужды.
---
Ещё инструменты и кейсы по теме →
<a href='https://t.me/contentrunbot'>ИИ Инструменты</a> | <a href='https://contentrun.ai/'>Контент-завод</a> | <a href='https://platform.contentrun.ai/'>База знаний</a>