В GitHub добавили поддержку диаграмм

24.02.2022      20138

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

Зачем нужны диаграммы

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

С помощью Mermaid можно создавать блок-схемы и графики для документации к программному обеспечению. На GitHub их получится вставить в markdown-файлы – документы с гипертекстовой разметкой. Это, например, README.md, который сервис предлагает добавить при создании каждого нового репозитория.

Что такое Mermaid

Mermaid – это инструмент для построения диаграмм и графиков на основе JavaScript. Он использует текстовые определения и превращает их в изображения, динамически создавая схемы в браузере.

С Mermaid можно создать диаграммы наиболее популярных форматов для программных проектов. В нем есть поддержка традиционных блок-схем, UML для моделирования процессов, графов ветвей в Git, путей пользователя (user journey) и диаграмм Ганта для иллюстрирования планов и графиков работ. Сервис работает и с круговыми диаграммами, ER-моделями для концептуальных схем предметной области, диаграммами состояний и последовательностей.

Вставка диаграмм Mermaid есть и в других сервисах для управления версиями программного обеспечения, непрерывной разработки и интеграции. В частности, их нативно поддерживают GitLab, Gitea. Также ее добавили в приложение для заметок Joplin и универсальный проектный блокнот Notion.

Как создать Mermaid-диаграмму

Чтобы добавить диаграмму в .md-файл, нужно включить ее код в текст. Блок начинается со строки «```mermaid» и завершается тремя обратными апострофами – «```».

Синтаксис самого Mermaid достаточно простой. Например, такой код с элементами гипертекстовой разметки рисует простую «алмазную» блок-схему:

```mermaid
  graph TD;
      A-->B;
      A-->C;
      B-->D;
      C-->D;
```

А вот результат:

 

 

Когда парсер markdown-файлов (с расширением .md) находит помеченные блоки кода, он создает объект типа iframe – аналогичным способом на странице вставляется видео с YouTube и другие интерактивные элементы. Код передается сервису Mermaid.js, который превращает его в диаграмму в локальном браузере – на стороне пользователя. При этом задействуется и HTML-конвейер GitHub, и внутренняя служба рендеринга файлов Viewscreen.

Разработчики подчеркнули: Mermaid – быстрые, легко редактируемые векторные диаграммы, которые можно вставить непосредственно в документацию. Сервис поддерживает команда энтузиастов во главе с Кнутом Свейдквистом.

Документация о создании диаграмм есть на официальном сайте проекта.


Автор:
Обозреватель


См. также

Новость ИТ-Новость

Российский Альянс по искусственному интеллекту обновил требования к специалистам по ИИ: вышла новая модель с основными профессиями и навыками. Теперь базовых профессий в сфере ИИ осталось только четыре.

01.11.2024    737    user1915669    0       

3

Новость ИТ-Новость

Система платежей «Волна» по планам сделает возможной бесконтактную оплату для владельцев IPhone в России, а BRICS Pay позволит совершать безналичные расчеты иностранцам по картам Visa и Mastercard.

23.10.2024    950    AnastasiaKl    0       

4

Новость ИТ-компания ИТ-Новость

Конструктор сайтов Wix уходит из России с 12 сентября 2024 года – перестанут работать все российский аккаунты. Сайты, привязанные к аккаунтам, также перестанут работать.

11.09.2024    974    user1915669    2       

2

Новость Искусственный интеллект ИТ-Новость

ИИ научат разработке цифровых интегральных микросхем – несколько российских научных институтов заявили об участии в проекте. Проект рассчитан на 3 года – с 2024 по 2026.

23.07.2024    622    user1915669    0       

2

Новость Дата-центры Искусственный интеллект ИТ-Новость

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

18.07.2024    767    AnastasiaKl    0       

1

Новость ИТ-Новость

В сентябре 2024 года видеоигры в России начнут маркировать – пока на добровольной основе. Геймерам будут сообщать о семи видах чувствительного (неприятного) контента в игре.

17.07.2024    820    user1915669    0       

1

Новость Законодательство ИТ-Новость

Депутаты Госдумы работают над законопроектом по ужесточению контроля за электросамокатами. Среди мер: обязательная регистрация СИМ (средств индивидуальной мобильности) и разработка системы отслеживания их перемещений.

10.07.2024    790    AnastasiaKl    2       

1

Новость Искусственный интеллект ИТ-Новость

В 2024 году «Сколково» выделит пилотным проектам в сфере искусственного интеллекта гранты на общую сумму 554 млн рублей. В результате отбора финансирование получат проекты с применением ИИ в областях производства, операционной деятельности и в работе предоставляемых сервисов.

12.04.2024    1732    AnastasiaKl    3       

3
Подписаться на ответы Инфостарт бот Сортировка: Древо развёрнутое
Свернуть все
Оставьте свое сообщение