Просмотрщик диаграмм состояний Mermaid
Отображайте диаграммы состояний и конечные автоматы Mermaid в браузере. Предварительный просмотр переходов и экспорт в SVG или PNG. Бесплатный онлайн-инструмент.
Введите код Mermaid для предпросмотра вашей диаграммы
Диаграммы состояний моделируют поведение системы, показывая все возмольные состояния и переходы между ними, инициируемые событиями. Они необходимы для проектирования конечных автоматов, моделирования жизненных циклов компонентов пользовательского интерфейса, документирования рабочих процессов заказов и спецификации поведения встраиваемых систем. Синтаксис `stateDiagram-v2` от Mermaid широко используется ИИ-ассистентами, когда разработчики задают вопросы вроде «Смоделируй состояния заказа на оплату», «Покажи жизненный цикл компонента React» или «Разработай конечный автомат для светофора». Вставка результата в Zolkit немедленно показывает, завершены ли переходы, достижимы ли все состояния и правильно ли связаны основной путь и пути обработки ошибок. Просмотрщик диаграмм состояний Zolkit поддерживает функции `stateDiagram-v2`, включая начальные и конечные состояния (`[*]`), метки переходов, составные состояния (вложенные диаграммы состояний), параллельные состояния с использованием `--`, псевдосостояния выбора и заметки. Просмотрщик отображает как простые конечные автоматы, так и сложные иерархические конечные автоматы, встречающиеся в реальных приложениях.
Бесплатный онлайн-просмотрщик и экспортер диаграмм Mermaid
Просмотрщик диаграмм Mermaid от Zolkit позволяет вставлять любой код Mermaid и мгновенно видеть отрисованную диаграмму — без установки, регистрации и загрузки на сервер. Все работает в вашем браузере, что делает его самым быстрым способом проверки диаграмм, сгенерированных ИИ из Claude, ChatGPT или Gemini. Поддерживаются все основные типы диаграмм Mermaid: блок-схемы, диаграммы последовательности, диаграммы классов, ER-диаграммы, диаграммы Ганта, диаграммы состояний, ментальные карты, графы Git, круговые диаграммы и временные шкалы.
Мгновенный предпросмотр в реальном времени
Диаграммы отрисовываются автоматически по мере ввода с задержкой в 300 мс, поэтому работа никогда не кажется медленной.
100% конфиденциальность
Весь рендеринг происходит в вашем браузере с использованием mermaid.js. Ваш код никогда не отправляется на какой-либо сервер.
Экспорт SVG и PNG
Загрузите свою диаграмму в виде четкого векторного SVG или высококачественного PNG 2×, готового для документов и презентаций.
Все типы диаграмм Mermaid
Поддерживает блок-схемы, диаграммы последовательности, диаграммы классов, ER-диаграммы, диаграммы Ганта, ментальные карты, графы Git и многое другое.
Готовность к диаграммам от ИИ
Создан для эпохи ИИ — напрямую предпросматривайте диаграммы, сгенерированные Claude, ChatGPT, Gemini или любым другим LLM.
Всегда бесплатно
Учетная запись не требуется, нет ограничений на использование, нет водяных знаков. Просмотрщик Mermaid от Zolkit полностью бесплатен навсегда.
Как предпросмотреть диаграмму Mermaid
- 1
Вставьте ваш код Mermaid в редактор слева — вы можете скопировать его из ИИ-помощника или написать вручную.
- 2
Диаграмма мгновенно отрисовывается в панели предпросмотра справа. Если есть синтаксическая ошибка, сообщение объяснит проблему.
- 3
Нажмите «Экспорт SVG» или «Экспорт PNG», чтобы загрузить диаграмму в виде файла, готового для документации, презентаций или обмена.
Часто задаваемые вопросы
В чем разница между stateDiagram и stateDiagram-v2?
`stateDiagram-v2` — это текущий рекомендуемый синтаксис в Mermaid v10+. Он добавляет поддержку составных (вложенных) состояний, параллельных областей, псевдосостояний выбора, ветвлений и слияний — функций, отсутствующих в исходном `stateDiagram`. Синтаксис v1 по-прежнему работает для обратной совместимости, но все новые диаграммы должны использовать `stateDiagram-v2` для доступа ко всему набору функций.
Как показать вложенные (составные) состояния в Mermaid?
Используйте блок `state` с фигурными скобками: `state Processing { [*] --> Validating \n Validating --> Charging \n Charging --> [*] }`. Внешнее состояние 'Processing' содержит свою собственную внутреннюю машину состояний. Составные состояния моделируют сложные рабочие процессы, где состояние высокого уровня имеет внутренние подпроцессы, например, заказ, который проходит несколько подэтапов, находясь в статусе 'Processing'.
Как добавить метки к переходам состояний?
Добавьте двоеточие после стрелки перехода: `Idle --> Loading : пользователь отправляет форму`. Метка документирует событие или условие, которое инициирует переход. Хорошо размеченные переходы превращают диаграмму состояний в исполняемую спецификацию — разработчики могут напрямую сопоставить каждую метку с вызовом функции, обработчиком событий или ответом API в своей реализации.
Что такое параллельные состояния и когда их следует использовать?
Параллельные состояния (с использованием разделителя `--` внутри составного состояния) моделируют части системы, которые выполняются параллельно. Например, музыкальный плеер может иметь параллельные состояния для воспроизведения (играет/пауза) и отображения (полный экран/обычный). Используйте параллельные состояния, когда два независимых поведения сосуществуют, и каждому требуется своя машина состояний, вместо того чтобы моделировать каждую комбинацию как отдельное состояние верхнего уровня.