Mermaid Editor

Описывайте диаграммы текстом — получайте картинку. Mermaid — это компактный язык для построения блок-схем, диаграмм последовательностей, ER-моделей и многого другого. Редактор показывает результат сразу при наборе, без перезагрузок.

Пример: Тема:
Код
Превью
Ошибка синтаксиса 

        


        

            
Какие диаграммы умеет Mermaid

            
Mermaid поддерживает больше десяти типов диаграмм. Каждый описывается своим небольшим синтаксисом, который читается практически как обычный текст. Ниже — главные типы и для чего они подходят.

                            

                    
Flowchart — блок-схемы

                    
Алгоритмы, бизнес-процессы, ветвления решений. Узлы могут быть прямоугольниками, ромбами, кружками, цилиндрами, скруглёнными блоками. Поддерживаются разные направления (TD — сверху вниз, LR — слева направо).

                

                            

                    
Sequence diagram — последовательность вызовов

                    
Взаимодействие между акторами, сервисами или объектами во времени. Хорошо подходит для документирования API, авторизационных потоков, обмена сообщениями между микросервисами.

                

                            

                    
Class diagram — классы

                    
UML-диаграмма классов: поля, методы, видимость, связи (наследование, композиция, ассоциация). Используется в проектировании ООП-кода и документации архитектуры.

                

                            

                    
State diagram — конечный автомат

                    
Состояния и переходы между ними. Удобно для описания UI-флоу, жизненного цикла заказа, состояний фоновой задачи или модели данных с разными статусами.

                

                            

                    
ER diagram — модель данных

                    
Сущности базы данных и связи между ними (один-ко-многим, многие-ко-многим, обязательность). Поля показываются прямо внутри сущности — удобно для проектирования схемы БД.

                

                            

                    
Gantt — план задач

                    
График работ во времени с зависимостями и вехами (milestones). Подходит для проектных планов, релизных roadmap и спринт-планирования.

                

                            

                    
Pie — круговая диаграмма

                    
Простое отображение долей в процентах. Хорошо смотрится как иллюстрация распределения времени, бюджета, аудитории.

                

                            

                    
Mindmap — ментальная карта

                    
Иерархическая декомпозиция идей вокруг центральной темы. Подходит для брейнштормов, разбиения фичи на задачи, визуализации структуры контента.

                

                            

                    
Timeline — временная шкала

                    
События в хронологическом порядке. Хорошо подходит для истории продукта, биографических заметок, roadmap по годам.

                

                            

                    
GitGraph — история git

                    
Визуализация веток и коммитов в git. Удобно показывать стратегию ветвления (trunk-based, GitFlow) и иллюстрировать сложные merge-сценарии в документации.

                

                    


        

            
Бесплатный онлайн-редактор Mermaid с живым превью. Описывайте диаграммы простым текстовым синтаксисом — редактор мгновенно отрисовывает SVG. Ничего ставить не нужно: достаточно открыть страницу в браузере.

            
Поддерживаются все основные типы диаграмм: блок-схемы (flowchart), диаграммы последовательностей (sequence), классов (class), состояний (state), ER (entity-relationship), Gantt, pie, mindmap, timeline и git graph. Готовая диаграмма скачивается в SVG или PNG, а ссылка с закодированным кодом позволяет поделиться диаграммой одним кликом.

            
Редактор работает полностью в браузере — код диаграммы никуда не отправляется. Подходит разработчикам для документации API и архитектуры, менеджерам — для роадмапов и схем процессов, аналитикам — для моделей данных.