О Mermaid Viewer

Кто ведёт этот сайт и зачем он существует.

Что это такое

Mermaid Viewer — бесплатный редактор диаграмм Mermaid, работающий прямо в браузере. Слева вы пишете или вставляете текст Mermaid, справа по мере набора появляется отрисованная диаграмма.

Отрисовка происходит в вашем браузере. Диаграмма не загружается на сервер, не хранится и не обрабатывается там: Mermaid работает как JavaScript на вашей машине, а перетащенный файл читается локально. Именно поэтому это подходит для диаграмм, которые вы не стали бы вставлять в облачный сервис: внутренняя архитектура, системы с именами клиентов в подписях, всё, что закрыто NDA.

Одна оговорка, которую я предпочитаю проговорить, а не спрятать: если включить ссылку для обмена, диаграмма кодируется прямо в URL, а отправленный кому-то URL идёт по сети. Всё остальное остаётся на вашей машине.

Зачем он появился

Мне нужно было документировать архитектуру программного обеспечения, и я хотел, чтобы диаграммы жили в репозитории рядом с кодом, а не в отдельном редакторе схем. Mermaid был для этого очевидным форматом. Чего у меня не было — так это удобного способа их смотреть.

Я не стал сначала искать инструмент. Я посмотрел на задачу, решил, что она небольшая, и прикинул, что за короткое время смогу сделать что-то аккуратное. Так и вышло — первый коммит в этом проекте датирован январём 2026 года.

Я сделал это для себя, и больше ни для кого. Мне хотелось открыть диаграмму, увидеть её отрисованной, приблизить нужный кусок и отправить кому-нибудь ссылку. Другие нашли сайт позже, и это изменило то, чем я занимаюсь, но не изменило того, чем инструмент является.

Как это работает

Отрисовкой занимается Mermaid. Этот сайт — всё, что вокруг: живой редактор с мгновенным предпросмотром, масштабирование и перетаскивание для диаграмм, не помещающихся на экран, три темы, экспорт в SVG и PNG, ссылки для обмена с кодированием в URL, перетаскивание файлов .mmd и .mermaid и интерфейс на 18 языках.

Пользование бесплатное, всё оплачивается ненавязчивой рекламой.

Контакты

Вопросы и сообщения об ошибках — на dominik@malsch.solutions. Реквизиты владельца указаны в разделе выходные данные.

Автор: Доминик Мальш · Обновлено:

Вернуться к просмотрщику