Mermaid в FlowEra: введение

Mermaid — это инструмент для создания диаграмм и графиков с помощью текстового синтаксиса, похожего на Markdown. В FlowEra Mermaid встроен в редактор базы знаний, что позволяет визуализировать процессы, архитектуру, зависимости и данные прямо внутри статей.

Что такое Mermaid

Mermaid позволяет описывать диаграммы в виде текста, который автоматически превращается в графическое представление. Вместо того чтобы рисовать стрелки вручную в графическом редакторе, вы просто пишете:

graph TD
    A[Задача создана] --> B{Назначена?}
    B -- Да --> C[В работе]
    B -- Нет --> D[Бэклог]
    C --> E[Готово]

И получаете готовую блок-схему, которая автоматически обновляется при изменении текста.

Как создать Mermaid-блок в базе знаний

Откройте статью в базе знаний FlowEra и введите / в редакторе — откроется меню команд. Выберите Mermaid или начните вводить mermaid для фильтрации.

Также можно вставить код напрямую, используя тройные обратные кавычки с типом mermaid:

```mermaid
graph LR
    A --> B --> C
```

После вставки редактор автоматически отобразит диаграмму в режиме предпросмотра. При клике на блок открывается редактор кода.

Поддерживаемые типы диаграмм

FlowEra поддерживает все основные типы диаграмм Mermaid:

Пример: флоу разработки фичи

Вот как можно визуализировать типичный процесс разработки фичи в вашей команде:

graph TD
    A[🎯 Идея фичи] --> B[Задача в бэклоге]
    B --> C{Оценка}
    C -- Сложно --> D[Декомпозиция]
    C -- ОК --> E[Итерация]
    D --> E
    E --> F[Разработка]
    F --> G[Code Review]
    G -- Замечания --> F
    G -- Одобрено --> H[QA]
    H -- Баги --> F
    H -- Прошло --> I[✅ Деплой]

Советы по работе

Используйте комментарии для документирования сложных диаграмм:

graph TD
    %% Это комментарий — не отображается на диаграмме
    A --> B

Разбивайте большие диаграммы на несколько блоков Mermaid — это улучшает читаемость статьи и упрощает обслуживание.

Называйте узлы осмысленно — используйте идентификаторы для ссылок и текст в скобках для отображения:

graph LR
    login[Экран входа] --> validate{Проверка данных}
    validate -- Успех --> dashboard[Дашборд]
    validate -- Ошибка --> login

Следующие шаги

Начните с самого распространённого типа — блок-схем. Они подходят для большинства случаев: описания процессов, пайплайнов, алгоритмов принятия решений.