Онлайн-редактор Mermaid (диаграммы из текста)

Вставьте или напишите код Mermaid. Предпросмотр обновляется по мере ввода, а примеры показывают типы диаграмм.

Пишите диаграмму — смотрите рисунок

Примеры:

flowchart LR
    A[Ideia] --> B{Vale a pena?}
    B -- sim --> C[Planejar]
    B -- não --> D[Arquivar]
    C --> E[Executar] --> F((Pronto))

sequenceDiagram
    Cliente->>Loja: Faz o pedido
    Loja-->>Cliente: Confirma por e-mail

pie title Куда уходит бюджет
    "Aluguel" : 35
    "Equipe" : 40
    "Marketing" : 15
    "Outros" : 10

journey
    title Покупка на сайте
    section Знакомство
      Находит магазин в Google: 4: Клиент
      Смотрит товары: 5: Клиент
    section Покупка
      Заполняет адрес: 2: Клиент
      Оплачивает: 3: Клиент

quadrantChart
    title Приоритет задач
    x-axis Pouco esforço --> Muito esforço
    y-axis Pouco impacto --> Muito impacto
    quadrant-1 Запланировать
    quadrant-2 Сделать сразу
    quadrant-3 Отложить
    quadrant-4 Переосмыслить
    Новый сайт: [0.7, 0.85]
    Пост в Instagram: [0.2, 0.6]
    Сменить логотип: [0.6, 0.3]

gitGraph
    commit
    branch nova-tela
    checkout nova-tela
    commit
    commit
    checkout main
    merge nova-tela
    commit

Код Mermaid

Доступно на:

Следующий инструментГенератор примеров по математике→

Онлайн-редактор Mermaid (диаграммы из текста): для чего нужен

Пишите или вставляйте код Mermaid и смотрите, как диаграмма обновляется по мере ввода. Кнопки с примерами показывают блок-схему, последовательность, круговую диаграмму, пользовательский путь, квадрант и график git, а редактор поддерживает и другие типы Mermaid: классы, состояния, ER, Гант, ментальную карту и временную шкалу.

Как пользоваться

Напишите код Mermaid или выберите пример.
Измените текст и смотрите предпросмотр.
Скачайте в PNG или SVG либо скопируйте код.

Когда использовать

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

Частые вопросы

Что такое Mermaid?

Это открытый язык для описания диаграмм текстом. GitHub, GitLab, Notion и многие редакторы документации автоматически рисуют блоки Mermaid, поэтому один и тот же код подходит для документации проекта.

Какие типы диаграмм можно создавать?

Блок-схемы (flowchart), последовательности, классов, состояний, сущность-связь, Гант, круговые, пользовательский путь, квадрант, график git, ментальная карта, временная шкала и другие. Каждый тип начинается со слова в первой строке, например flowchart, sequenceDiagram или pie.

Сохраняется ли код?

Да, он сохраняется и остаётся здесь, когда вы вернётесь. После возвращения последняя диаграмма появится снова.

Правда бесплатно?

Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.