Темы Mermaid: от встроенных до кастомных

Темы Mermaid: от встроенных до кастомных

Mermaid рендерит диаграммы из текста, но как они выглядят — определяет тема. Из коробки четыре темы, а с themeVariables можно создать свою. Здесь все шесть в деле: переключай и сравнивай.

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

Нажми на кнопку темы — все диаграммы на странице перерисуются.

Флоучарт (Flowchart)

Классика: процесс, ветвления, обратная связь.

graph TD
    A["Написать черновик"] --> B{"Рецензия"}
    B -->|"Одобрено"| C["Опубликовать"]
    B -->|"Правки"| D["Отредактировать"]
    D --> B
    C --> E{"Аналитика"}
    E -->|"Много читают"| F["Продвижение"]
    E -->|"Мало читают"| G["Анализ причин"]
    G --> D

    style A fill:#3b82f6,color:#fff
    style C fill:#22c55e,color:#fff
    style F fill:#f59e0b,color:#000

Секвенс-диаграмма (Sequence)

Взаимодействие компонентов во времени.

sequenceDiagram
    participant U as Пользователь
    participant B as Браузер
    participant S as Сервер
    participant D as База данных
    U->>B: Открывает статью
    B->>S: GET /p/my-article/
    S->>D: SELECT article WHERE slug = ?
    D-->>S: article row
    S->>D: SELECT comments WHERE article_id = ?
    D-->>S: comments[]
    S-->>B: HTML + JSON
    B-->>U: Рендер страницы
    U->>B: Нажимает "Нравится"
    B->>S: POST /api/like/
    S->>D: INSERT like
    D-->>S: ok
    S-->>B: 200 OK

Класс-диаграмма (Class)

Структура данных блога.

classDiagram
    class User {
        +username: str
        +email: str
        +role: enum
        +avatar: Image
        +create_article()
    }
    class Article {
        +title: str
        +slug: str
        +content: Markdown
        +status: enum
        +created_at: datetime
        +publish()
    }
    class Tag {
        +name: str
        +slug: str
    }
    class Comment {
        +text: str
        +created_at: datetime
        +author: User
    }
    User "1" --> "*" Article
    Article "*" --> "*" Tag
    User "1" --> "*" Comment
    Article "1" --> "*" Comment

Диаграмма Ганта (Gantt)

Таймлайн проекта.

gantt
    title Разработка блога bl0g.ru
    dateFormat YYYY-MM-DD
    axisFormat %b %d
    section Backend
        Django модели     :a1, 2026-01-06, 14d
        Views и API       :a2, after a1, 10d
        Markdown-пайплайн :a3, after a2, 7d
        Импорт данных     :a4, after a3, 5d
    section Frontend
        CSS и дизайн      :b1, 2026-01-13, 12d
        JavaScript        :b2, after b1, 14d
        Темы оформления   :b3, after b2, 7d
    section Инфраструктура
        CI/CD webhook     :c1, after a4, 5d
        Nginx + SSL       :c2, after c1, 3d
        Тестирование      :c3, after c2, 7d

Круговая диаграмма (Pie)

Простая статистика.

pie title Статьи по тегам
    "Python" : 12
    "Django" : 8
    "DevOps" : 5
    "JavaScript" : 6
    "Дизайн" : 3
    "Прочее" : 4

Диаграмма состояний (State Diagram)

Жизненный цикл статьи.

stateDiagram-v2
    [*] --> Черновик
    Черновик --> На_рецензии : Отправить
    На_рецензии --> Правки : Замечания
    Правки --> На_рецензии : Исправлено
    На_рецензии --> Опубликовано : Одобрено
    Опубликовано --> Архив : Архивировать
    Архив --> Черновик : Переиздать

Встроенные темы

Кастомные темы

Встроенные темы — это отправная точка. С themeVariables можно задать свои цвета, шрифты и размеры.

Яркая (Custom Bright)

Насыщенные цвета для светлого режима:

mermaid.initialize({
  theme: 'base',
  themeVariables: {
    primaryColor: '#dbeafe',
    primaryTextColor: '#1e293b',
    primaryBorderColor: '#3b82f6',
    lineColor: '#64748b',
    secondaryColor: '#f0fdf4',
    tertiaryColor: '#fefce8',
    noteBkgColor: '#fef3c7',
    noteTextColor: '#92400e',
    fontSize: '14px'
  }
});

Киберпанк (Custom Dark)

Неоновые цвета на тёмном фоне:

mermaid.initialize({
  theme: 'base',
  themeVariables: {
    primaryColor: '#7c3aed',
    primaryTextColor: '#ffffff',
    primaryBorderColor: '#6d28d9',
    lineColor: '#06b6d4',
    secondaryColor: '#1e1b4b',
    tertiaryColor: '#0c4a6e',
    background: '#0f172a',
    noteBkgColor: '#1e293b',
    noteTextColor: '#e2e8f0',
    fontSize: '14px'
  }
});

Как создать свою тему

1. Начни с theme: 'base' — это базовая тема, которую можно переопределить
2. Задай themeVariables — объект с нужными цветами
3. Основные переменные:

• primaryColor — основной цвет узлов
• lineColor — цвет линий/стрелок
• secondaryColor, tertiaryColor — дополнительные цвета
• background — фон диаграммы
• primaryTextColor — цвет текста на primary-узлах
• fontFamily, fontSize — шрифт

Полный список переменных — в документации Mermaid.