Визуализация данных и сравнения

Для тех моментов, когда обычный текст не справляется. Эти блоки помогут наглядно показать разницу между подходами, объяснить структуру или сравнить характеристики.

Правильно / Неправильно

Покажите читателю частую ошибку и сразу же дайте верное решение. Два визуальных блока с красной и зеленой окантовкой отлично с этим справляются. Компонент хорошо сочетается с математическими формулами.

Как писать:

<DoDontGrid>
  <DoDont type="do">
    Интегральная формула Коши для $n$-й производной аналитической функции в ТФКП (с учетом факториала и правильной степени):
    $$
    f^{(n)}(z_0) = \frac{n!}{2\pi i} \oint_{\gamma} \frac{f(z)}{(z - z_0)^{n+1}} \, dz
    $$
  </DoDont>
  <DoDont type="dont">
    Грубая ошибка студентов на экзамене по Вышмату — потеря факториала и смещение степени в знаменателе:
    $$
    f^{(n)}(z_0) = \frac{1}{2\pi i} \oint_{\gamma} \frac{f(z)}{(z - z_0)^n} \, dz
    $$
  </DoDont>
</DoDontGrid>

Как выглядит:

Умная матрица сравнения

Компонент <CompareMatrix> оборачивает обычную Markdown-таблицу. Он автоматически находит плюсы, минусы, слова "Да" и "Нет", и заменяет их на иконки галочек и крестиков.

Как писать:

<CompareMatrix>
| Критерий | Духовка | Сковорода |
| --- | --- | --- |
| Быстрота | - | + |
| Равномерная прожарка | Да | Нет |
| Требует масла | Нет | Да |
</CompareMatrix>

Как выглядит:

Радар-диаграмма (Диаграмма характеристик)

Идеальный способ визуализировать баланс сильных и слабых сторон чего-либо (например, блюда, автомобиля, программы). Вы пишете параметры и их оценку от 0 до 100, а компонент рисует красивую «паутинку».

Как писать:

<StatsRadar data={{ 
  'Сладость': 80, 
  'Сложность': 30, 
  'Калорийность': 90, 
  'Польза': 40 
}} />

Как выглядит:

Интерактивная архитектура (Блок-схемы)

Если вам нужно описать цепочку процессов, не стоит писать это обычным списком. Нарисуйте интерактивную блок-схему! При клике на каждый элемент читатель увидит подробное описание именно этого шага.

Как писать:

<FlowMap nodes={[
  { id: '1', title: 'Подготовка', desc: 'Моем продукты и нарезаем их.' },
  { id: '2', title: 'Термообработка', desc: 'Жарим на среднем огне 15 минут.' },
  { id: '3', title: 'Сервировка', desc: 'Украшаем зеленью и подаем к столу.' }
]} />

Как выглядит:

Список параметров

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

Как писать:

<Properties>
  <Property name="Сахар" type="граммы" required={true}>
    Обязательно для сладкого вкуса.
  </Property>
  <Property name="Корица" type="щепотка">
    По желанию, для аромата.
  </Property>
</Properties>

Как выглядит:

• СахарграммыОбязательно

  Обязательно для сладкого вкуса.

• Корицащепотка

  По желанию, для аромата.

Дерево папок и файлов

Отлично подходит для того, чтобы показать структуру проекта или папку с рецептами. Если написать расширение (например .txt), появится иконка файла. Если не писать — будет иконка папки.

Как писать:

<FileTree>
- Рецепты
  - Выпечка
    - Торт.pdf
    - Пирог.pdf
  - Супы
    - Борщ.pdf
</FileTree>

Как выглядит:

Блоки кода (Для разработчиков)

Если вам нужно написать программный код, вы можете красиво его оформить. Поддерживается подсветка любых языков программирования.

Подсветка строк кода (!mark)

Используйте комментарий // !mark в конце строки, чтобы подсветить её синим фоном и выделить на фоне остального кода. (Обратите внимание: в блоке "Как писать" мы добавили пробел после знака восклицания, чтобы код отобразился как текст. В реальном использовании пишите слитно: // !mark)

Как писать:

```javascript app.js
function startEngine() {
  checkFuel();
  ignite(); // ! mark
}
```

Как выглядит:

function startEngine() {
  checkFuel();
  ignite(); 
}

Фокус на строках (!focus)

Если кода много, вы можете сфокусировать внимание зрителя только на нужной строке с помощью комментария // !focus. Эта строка будет выделена серым фоном, а все остальные строки в блоке будут размыты и затемнены.

Как писать:

```javascript app.js
function checkSystems() {
  checkNavigation(); // ! focus
  checkLifeSupport();
}
```

Как выглядит:

function checkSystems() {
  checkNavigation(); 
  checkLifeSupport();
}

Интерактивное объяснение кода (CodeWalkthrough)

Самый крутой способ объяснить длинный кусок кода. Разделите экран: слева вы пишете понятный текст, а справа висит блок кода. Когда читатель скроллит текст вниз, код справа прилипает к экрану и всегда остается перед глазами.

Как писать:

<CodeWalkthrough>
  <WalkthroughText>
    Сначала мы добавляем муку.
    
    Затем разбиваем яйца.
    
    В конце всё тщательно перемешиваем.
  </WalkthroughText>
  <WalkthroughCode>

```javascript
function makeDough() {
  addFlour();
  addEggs();
  mixAll();
}
```

  </WalkthroughCode>
</CodeWalkthrough>

Как выглядит:

function makeDough() {
  addFlour();
  addEggs();
  mixAll();
}