Информационная архитектура в Mermaid

Пишем в блокнотик, а получаем красоту

IA (Information Architecture) — это структура продукта:
какие экраны/разделы есть, как они связаны, и что где лежит.

Вместо рисования в Miro или Figma можно использовать Mermaid, особенно если ты:

Работаешь с документацией (GitHub, Notion, Confluence)
Хочешь быстро обновлять и версионировать структуру
Любишь системность без лишней графики

Шаг 1: Выбери тип схемы

Для IA чаще всего используется:

graph TD

или

graph LR

TD — сверху вниз (Top Down)
LR — слева направо (Left to Right)

Шаг 2: Опиши узлы и связи

Пример IA для CRM-модуля "Программа лояльности":

graph TD
  Dashboard --> Customers
  Customers --> CustomerCard
  CustomerCard --> LoyaltyTab
  LoyaltyTab --> BonusHistory
  LoyaltyTab --> ConnectForm

Dashboard — главный экран
Customers — список клиентов
CustomerCard — карточка конкретного клиента
LoyaltyTab — вкладка "Программа лояльности"
BonusHistory — таблица операций
ConnectForm — форма подключения к программе

Шаг 3: Добавь вложенность (опционально)

Можно показать уровни иерархии:

graph TD
  A[CRM] --> B[Клиенты]
  B --> B1[Список клиентов]
  B --> B2[Карточка клиента]
  B2 --> B21[Вкладка "Лояльность"]
  B21 --> B211[История баллов]
  B21 --> B212[Подключение к программе]

Шаг 4: Добавь описание, если нужно

Mermaid позволяет делать простые комментарии:

graph TD
  A[Главная] --> B[Отчёты]
  B --> C[Детализация]
  C --> D[Экспорт]

  click B href "https://crm.example.com/reports"

Шаг 5: Вставляй в документацию

IA в виде Mermaid можно вставлять в:

Notion
GitHub
Obsidian
VS Code (расширение Mermaid)
https://mermaid.live для предпросмотра

Советы по проектированию IA

Каждый блок = экран или интерфейсный модуль
Стрелки показывают навигацию или вложенность
Используй группы (subgraph) для модулей, если нужно разделить зоны

Пример:

graph TD
  subgraph Клиенты
    A1[Список клиентов] --> A2[Карточка клиента]
    A2 --> A3[Редактирование]
  end

  subgraph Программа лояльности
    B1[Карточка клиента] --> B2[Вкладка "Бонусы"]
    B2 --> B3[История бонусов]
    B2 --> B4[Начислить вручную]
  end

Заключение

IA через Mermaid — это быстрый и текстовый способ показать структуру приложения.
Никакой возни с блоками в фигме, всё читаемо и версионируемо.

Используй IA на старте проектирования, чтобы:

Понять, какие экраны нужны
Обсудить с командой структуру продукта
Не забыть важные переходы и вложенности