Инструкция кастомизации Mermaid-диаграмм

Введение

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

В рамках этой инструкции мы подготовили несколько основных диаграмм, которые могут встречаться в документациях.

Полезные ссылки

• Документация Mermaid
• Песочница Mermaid

Основные условия

• Диаграммы Mermaid применимы только на yfm-страницах.
• Любая вставка начинается с ```mermaid и заканчивется ```.
• Каждая диаграмма заполняется отдельно.

Sequence diagram

• Документация Mermaid
• Песочница Mermaid

Блок кода

```mermaid
%%{
  init: {
    'theme': 'base',
    'themeVariables': {
      'primaryColor': '#4DA0FF',
      'secondaryColor': '#0667D8',
      'noteBkgColor': '#D3DCFD'
    }
  }
}%%

sequenceDiagram
    rect rgba(233, 237, 254, 1)
    note right of Alice: Alice calls John.
    Alice->>+John: Hello John, how are you?
    rect rgba(77, 160, 255, 1)
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    end
    John-->>-Alice: I feel great!
    Alice ->>+ John: Did you want to go to the game tonight?
    John -->>- Alice: Yeah! See you there.
    end
```

Параметры для цветовой кастомизации:

• 'primaryColor':: — цветовое значение для «акторов» диаграммы «Alice» и «John» и соединяющих их линий. В соответствии с дизайн-проектом указываем '#4DA0FF'.
• 'secondaryColor': — цветовое знание для блоков после стрелок. В соответствии с дизайн-проектом указываем '#0667D8'.
• 'noteBkgColor': — цветовое значение для обозначения блоков формата «Alice calls John». В соответствии с дизайн-проектом указываем '#D3DCFD'.
• rect rgba(233, 237, 254, 1) — цветовое значение для подложки диаграммы. Действие ограничивается вторым end.
• rect rgba(77, 160, 255, 1) — цветовое значение для темно-синего блока посередине диаграммы. Действие ограничивается первым end.

Flowchart

• Документация Mermaid
• Песочница Mermaid

Блок кода

```mermaid
---
title: Работа напрямую
---
flowchart LR
%% Nodes
A("DNS-сервер. 
MX указывает на шлюз"):::orange
B("Почтовый шлюз
SMTP mx.yandex.net."):::orange


%% Edges
A --> B

%% Styling
classDef orange fill:#FEEEE7,stroke:#FEEEE7,stroke-width:2px;
```

Параметры для цветовой кастомизации:
Для каждого «набора» цветов необходимо задавать параметры в строке

%% Styling
classDef orange fill:#FEEEE7,stroke:#FEEEE7,stroke-width:2px;

Где:

• orange — текстовое значение для цветового набора, которым мы задаем. Значение может быть любым.
• fill: — цветовое значение для блоков с текстом. В соответствии с дизайн-проектом указываем #FEEEE7.
• stroke: — цветовое значение для рамки блоков. В соответствии с дизайн-проектом указываем #FEEEE7.
• stroke-width: — ширина рамки. В соответствии с дизайн-проектом указываем 2px.

Чтобы присвоить значения «набора» цветов для конкретного элемента, укажите название этого «набора». На примере
A("DNS-сервер. MX указывает на шлюз"):::orange, где :::orange — название цветового «набора».

Entity Relationship Diagram

• Документация Mermaid
• Песочница Mermaid
• Ссылка на шаблон - TBD

Блок кода

```mermaid
%%{
  init: {
    'theme': 'base',
    'themeVariables': {
      'primaryColor': '#FF7F4D',
      'tertiaryColor': '#D3DCFD'
    }
  }
}%%

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```

Параметры для цветовой кастомизации:

• 'primaryColor': — цветовое значение для основных блоков с текстом. В соответствии с дизайн-проектом указываем '#FF7F4D'.
• 'tertiaryColor': — цветовое значение для второстепенных блоков с текстом, которые расположены на стрелках. В соответствии с дизайн-проектом указываем '#D3DCFD'.

Mindmaps

• Документация Mermaid
• Песочница Mermaid

Блок кода

```mermaid
mindmap
  root((mindmap))
    Origins
      Long history
      Popularization
        British popular psychology author Tony Buzan
    Research
      On effectiveness<br/>and features
      On Automatic creation
        Uses
            Creative techniques
            Strategic planning
            Argument mapping
    Tools
      Pen and paper
      Mermaid
```

Block Diagram

• Документация Mermaid
• Песочница Mermaid

Блок кода

```mermaid
graph TD
A["Start"]
A --> C["Stop"]
style A fill:#FEEEE7,stroke:#FEEEE7,stroke-width:4px
style C fill:#FEEEE7,stroke:#FEEEE7,stroke-width:4px
```

Цветовые значения в этой диаграмме задаются для каждого отдельного блока через строку вида:

• style A — название блока, который нужно перекрасить.
• fill: — цветовое значение для блока. В соответствии с дизайн-проектом указываем #FEEEE7.
• stroke: — цветовое значение для рамки блока.
• stroke-width: — значение ширины рамки. По умолчанию указываем 4px.