Редактор диаграмм Mermaid — бесплатно
Создавайте блок-схемы, диаграммы последовательностей, диаграммы Ганта и другие в синтаксисе Mermaid с предпросмотром в реальном времени. Экспорт в SVG или PNG. Работает полностью в браузере.
Перетаскивайте или прокручивайте для сдвига. Щипок или Ctrl + прокрутка для масштаба. Потяните за нижний край, чтобы сделать предпросмотр выше.
💡 Пишите диаграммы на языке Mermaid — блок-схемы, диаграммы последовательностей, диаграммы Ганта, диаграммы классов и другие — и экспортируйте их в SVG или PNG. Всё работает в браузере: текст диаграммы никуда не отправляется, а движок Mermaid загружается с этого сайта, а не со стороннего CDN.
Частые применения
- Создать блок-схемуСоздайте блок-схему из текста и экспортируйте как изображение.
- Нарисовать диаграмму последовательностиДиаграмма того, как системы или люди взаимодействуют с течением времени.
- Добавить диаграмму в READMEСоздавайте диаграммы, которые GitHub отображает изначально в вашем README.
- Построить диаграмму ГантаРасположите временную шкалу проекта как диаграмму Ганта из текста.
- Создать диаграмму классаСхема классов и их отношений для проектирования программного обеспечения.
Как это работает
Mermaid позволяет вам писать диаграммы как текст и иметь их автоматически визуализированными — отлично для сохранения диаграмм в управлении версиями. Это живой редактор, который визуализирует по мере ввода.
- 1Модуль Mermaid загружаетсяБиблиотека Mermaid загружается с LibraTool при первом использовании инструмента, а затем браузер кеширует её.
- 2Вы написали код диаграммыБлок-схемы, диаграммы последовательности, диаграммы Gantt, диаграммы классов, круговые диаграммы и многое другое — используя синтаксис текста Mermaid.
- 3Она визуализируется вживуюВаш код разбирается и визуализируется в SVG в вашем браузере по мере ввода, со светлыми и темными темами.
- 4Экспортируйте SVG или PNGЗагрузите диаграмму как масштабируемый SVG или 2× PNG, чтобы переместить в документацию, слайды или README.
Код вашей диаграммы — который может описать внутренние системы — визуализируется полностью в вашем браузере и никогда не загружается.
Похожие инструменты
Редактор Markdown
Пишите и просматривайте Markdown в реальном времени. Поддерживает заголовки, жирный, курсив, блоки кода, таблицы и списки.
Генератор CSS Grid
Визуально спроектируйте CSS grid — дорожки, единицы и промежутки — и скопируйте сгенерированный CSS и HTML.
Генератор ASCII-деревьев
Превратите список с отступами в аккуратное дерево папок (├── └──) для README и документации. Вывод в Unicode или стандартном ASCII. Работает полностью в браузере.