Как включить диаграммы русалки в ваш проект GitHub

Популярная платформа для обмена кодом GitHub объявила о поддержке нового типа встроенного контента. В файлах уценки теперь можно использовать синтаксис Mermaid, чтобы легко создавать блок-схемы, диаграммы последовательности и многое другое.

Разновидность уценки GitHub уже работает с изображениями, списками задач и короткими кодами смайликов. Благодаря поддержке общих диаграмм GitHub вносит свой вклад в создание более информативной и полезной документации.

Что нового в GitHub?

Теперь вы можете встроить код Mermaid в свой README.md и другие файлы уценки. Если вы это сделаете, GitHub отобразит диаграмму, описанную этим кодом. Код русалки использует простой синтаксис, который описывает отдельные части каждой диаграммы в виде простого текста.

Смотрите также: Что такое Гитхаб? Введение в его основные функции

Как вы включаете диаграммы?

1. Либо выберите существующий файл уценки, либо создайте новый, чтобы добавить его в свой репозиторий. Используйте либо .мд или .уценка расширения.
2. Добавьте в этот файл код Mermaid. Какой именно код зависит от вас; вот простой пример для начала:
   instagram viewer

   график ТД;
    А-->Б;
    А-->С;
    Б-->Д;
    С-->Д;

3. Просмотрите файл на GitHub. Вы должны увидеть хорошую визуализацию вашей диаграммы.

Теперь вам просто нужно изучить множество диаграмм, которые доступны в Mermaid. Или вы можете просто обратиться к Русалка документации, как и когда вам нужна диаграмма.

Какие виды диаграмм можно использовать?

Mermaid поддерживает следующие типы диаграмм:

• Блок-схема
• Последовательность
• Сорт
• Состояние
• Отношения сущностей
• Путь пользователя
• Ганта
• пирог
• Требование

Смотрите также: Диаграмма Ганта по сравнению с Диаграмма PERT: в чем отличия?

Каждый из них имеет собственный синтаксис, отражающий тип данных, отображаемых на диаграмме. Например, вот код простой диаграммы последовательности:

Диаграмма последовательности
 Барт->>Гомер: Не заводи корову, чувак.

Что выглядит так при рендеринге:

А вот код базовой диаграммы состояний:

stateDiagram-v2
 [*] --> Новый
 Новое --> Готово: допущено
 Готово --> Выполняется: отправка планировщика
 Выполняется --> Готово: прерывание
 Выполняется --> Ожидание: ожидание ввода/вывода или события
 Ожидание --> Готово: ввод-вывод или завершение события
 Выполняется --> Прекращено: выход
 Прекращено --> [*]

Что отображается как таковое:

Добавьте ценности своим проектам GitHub с помощью диаграмм Mermaid

Диаграммы русалок — полезное дополнение к GitHub, особенно потому, что мы считаем, что они способствуют улучшению документации. Многие проекты можно улучшить с помощью наглядных пояснений прямо в их документации или файлах README.

GitHub сейчас такой популярный сервис, его возможности и изменения затрагивают многих разработчиков по всему миру. К счастью, поддержка диаграмм Mermaid есть, если вам это нужно, и невидима, если вам это не нужно. Но, надеюсь, вы, по крайней мере, начнете видеть более качественную документацию.

Как бесплатно разместить веб-сайт с помощью GitHub Pages

Если у вас простой веб-сайт, вам не нужно платить за веб-хостинг. Вы можете использовать GitHub Pages бесплатно!

Читать дальше

Об авторе