Встраивание диаграмм Mermaid
Создайте диаграмму Mermaid и получите iframe-код, которым можно поделиться и встроить на любой сайт. Бесплатно, мгновенно, без аккаунта.
Встраивание диаграмм Mermaid
Создайте диаграмму Mermaid и получите iframe-код, которым можно поделиться и встроить на любой сайт. Бесплатно, мгновенно, без аккаунта.
Ваш код Mermaid
Живой предпросмотр
Код для встраивания
<iframe
src="https://mermaideditor.com/embed?code=Z3JhcGglMjBURCUwQSUyMCUyMCUyMCUyMEElNUJTdGFydCU1RCUyMC0tJTNFJTIwQiU3QklzJTIwaXQlMjB3b3JraW5nJTNGJTdEJTBBJTIwJTIwJTIwJTIwQiUyMC0tJTIwWWVzJTIwLS0lM0UlMjBDJTVCU2hpcCUyMGl0JTVEJTBBJTIwJTIwJTIwJTIwQiUyMC0tJTIwTm8lMjAtLSUzRSUyMEQlNUJEZWJ1ZyU1RCUwQSUyMCUyMCUyMCUyMEQlMjAtLSUzRSUyMEI=&theme=default"
width="100%"
height="400"
frameborder="0"
style="border-radius:8px;overflow:hidden"
></iframe>Для разработчиков
Вы можете программно генерировать URL для встраивания без использования этого редактора. Код диаграммы кодируется в URL-безопасный base64.
Формат URL
https://mermaideditor.com/embed?code={encoded}&theme={theme}Как кодировать
// JavaScript const encoded = btoa(encodeURIComponent(mermaidCode)) const embedUrl = `https://mermaideditor.com/embed?code=${encoded}&theme=default` // Python import base64, urllib.parse encoded = base64.b64encode(urllib.parse.quote(mermaid_code).encode()).decode() embed_url = f"https://mermaideditor.com/embed?code={encoded}&theme=default"Поддерживаемые темы: default · dark · forest · neutral
Как встроить диаграмму Mermaid
Напишите код диаграммы Mermaid в редакторе выше
Скопируйте сгенерированный код iframe одним кликом
Вставьте его на любой сайт, в запись блога или страницу документации
Где использовать
GitHub и GitLab
Встраивайте живые диаграммы на страницы wiki, в описания задач или документацию проекта.
Сайты документации
Добавляйте интерактивные диаграммы в Confluence, Notion или любую HTML-платформу документации.
Записи блога
Обогащайте технические статьи архитектурными диаграммами, блок-схемами и диаграммами последовательности.
Внутренние wiki
Поддерживайте командные базы знаний визуальными и актуальными с помощью встроенных диаграмм.
Часто задаваемые вопросы
Функция встраивания бесплатна?
Да, полностью бесплатна. Нет ограничений по использованию, аккаунт не требуется, а сгенерированные iframe URL работают бессрочно.
Какие браузеры поддерживают встроенную диаграмму?
Просмотрщик встраивания работает во всех современных браузерах, включая Chrome, Firefox, Safari и Edge. Он использует стандартные HTML5 и JavaScript.
Можно ли настроить размер iframe?
Да — просто отредактируйте атрибуты width и height в сгенерированном коде iframe под ваш макет. Также можно добавить CSS, чтобы сделать его адаптивным.