Repolode
Предложить
mermaid-js

mermaid-js/mermaid

Mermaid создаёт диаграммы — например, блок-схемы, диаграммы последовательностей и диаграммы Ганта — по текстовым описаниям в стиле Markdown.

Open source альтернатива:Lucidchartdraw.io

Открыть на GitHubСайт
Звёзды
90,776
Форки
9,374
Открытые issues
1,938
Последний коммит
10 часов назад

Что это?

Mermaid — инструмент для создания диаграмм на JavaScript и TypeScript, который преобразует текстовые описания в готовые диаграммы. Вы пишете короткое описание, например блок-схемы или диаграммы последовательностей, а Mermaid отображает его в виде SVG в браузере или на этапе сборки. Поскольку диаграмма представлена обычным текстом, её можно хранить рядом с кодом, редактировать в pull request и заново генерировать при изменении описываемой системы.

Проект поддерживает множество типов диаграмм, включая блок-схемы, диаграммы последовательностей, классов, состояний, ER, Ганта, круговые диаграммы, графы Git, mindmap, временные шкалы, карты пользовательского пути и диаграммы C4. Mermaid можно использовать через npm-пакет, скрипт CDN или онлайн-редактор Live Editor; GitHub также отображает блоки с кодом Mermaid непосредственно в Markdown-файлах.

Mermaid по умолчанию санитизирует недоверенный ввод. Для сайтов, принимающих код диаграмм от внешних пользователей, доступен дополнительный режим рендеринга в изолированном iframe, однако в нём часть интерактивных возможностей недоступна.

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

  • 01Создаёт по текстовому описанию блок-схемы, диаграммы последовательностей, классов, состояний, ER, Ганта и многие другие типы диаграмм.
  • 02Диаграммы представлены обычным текстом, поэтому в системе контроля версий их удобно сравнивать и просматривать при ревью.
  • 03Работает в Markdown на GitHub, через npm-пакет или скрипт CDN.
  • 04Позволяет настраивать темы, цвета, шрифты и направление компоновки.
  • 05Предоставляет изолированный режим рендеринга для недоверенного кода диаграмм.

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

  • Хранение диаграмм архитектуры и последовательностей в репозитории рядом с описываемым ими кодом.
  • Встраивание диаграмм в README-файлы GitHub и сайты с документацией.
  • Создание диаграмм, например Ганта или круговых, в процессе сборки.
  • Создание черновиков диаграмм для пользователей без навыков программирования в онлайн-редакторе Live Editor.

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

  1. 1

    Мгновенно попробуйте создавать диаграммы в Mermaid Live Editor на mermaid.live

Темы

#diagrams#diagrams-as-code#flowchart#uml-diagrams#documentation#markdown#javascript#typescript#mindmap

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

Что такое mermaid?
Mermaid создаёт диаграммы — например, блок-схемы, диаграммы последовательностей и диаграммы Ганта — по текстовым описаниям в стиле Markdown. Mermaid — инструмент для создания диаграмм на JavaScript и TypeScript, который преобразует текстовые описания в готовые диаграммы. Вы пишете короткое описание, например блок-схемы или диаграммы последовательностей, а Mermaid отображает его в виде SVG в браузере или на этапе сборки. Поскольку диаграмма представлена обычным текстом, её можно хранить рядом с кодом, редактировать в pull request и заново генерировать при изменении описываемой системы.
mermaid можно использовать бесплатно? Какая у него лицензия?
mermaid распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.
mermaid всё ещё поддерживается?
Активно поддерживается. Последний коммит в mermaid — 20 окт. 2026 г..
Для чего можно использовать mermaid?
Хранение диаграмм архитектуры и последовательностей в репозитории рядом с описываемым ими кодом. Встраивание диаграмм в README-файлы GitHub и сайты с документацией. Создание диаграмм, например Ганта или круговых, в процессе сборки. Создание черновиков диаграмм для пользователей без навыков программирования в онлайн-редакторе Live Editor.
Как установить mermaid?
Мгновенно попробуйте создавать диаграммы в Mermaid Live Editor на mermaid.live
Где скачать mermaid?
Исходный код и инструкции по установке — на GitHub: https://github.com/mermaid-js/mermaid

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

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