Диаграммы на GitHub с помощью Mermaid
GitHub недавно объявил о поддержке диаграмм, встроенных непосредственно в файлы markdown. Новая функция использует инструмент построения диаграмм и графиков Mermaid, который основан на JavaScript и поддерживает множество распространённых форматов диаграмм.
Использование Mermaid в GitHub Markdown
Чтобы начать использовать Mermaid, всё, что вам нужно сделать, это создать область кода, используя синтаксис тройной обратной кавычки, и указать, что ваш язык —
mermaid. Затем вам нужно указать, какую диаграмму вы создаете в первой строке. Например:```mermaidПоддерживаются следующие диаграммы:
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```
-
classDiagram – диаграмма классов для общего концептуального моделирования структуры приложения и для детального представления модели в программном коде.-
erDiagram – ER-диаграмма или диаграмма Сущность-Связь описывает взаимосвязанные вещи, представляющие интерес в конкретной области знаний.-
flowchart – базовый тип диаграмм в виде объектов и стрелок разной формы.-
graph – блок-схемы.-
gantt – тип гистограммы, который иллюстрирует график проекта и количество времени, которое потребуется для завершения любого проекта.-
journey – диаграмма пути пользователя, которая описывает с высоким уровнем детализации, какие именно шаги предпринимают разные пользователи для выполнения конкретной задачи в системе, приложении или на веб-сайте.-
pie – стандартная круговая диаграмма.-
requirementDiagram – диаграмма требований, которая обеспечивает визуализацию требований и их связей друг с другом и другими документированными элементами.-
sequenceDiagram – диаграмма взаимодействия, показывающая, как процессы взаимодействуют друг с другом и в каком порядке.-
stateDiagram-v2 – диаграмма состояний, описывающая поведение системы.После того как вы указали тип диаграммы, вы можете описать её, используя грамматику, специфичную для этого типа. Обратите внимание, что синтаксис несовместим между типами, поэтому, если вы знаете, как нарисовать стрелку с меткой, используя синтаксис
flowchart, вы обнаружите, что вам потребуется другой подход для выполнения той же задачи на диаграмме stateDiagram-v2.Обратите внимание, что вы можете задавать подсказки для типа диаграммы, например
TB (top-to-bottom - cверху вниз) или TD (top-down), либо LR (left-to-right – слева направо).Кроме того, поддерживаются темы и множество настроек цветовой схемы.
IDE также поддерживают Mermaid в предпросмотре файлов Markdown:
- В Visual Studio для предпросмотра файлов Markdown установите плагин Markdown Editor
- В Rider зайдите в Settings > Languages & Frameworks > Markdown (Настройки > Языки и Фреймворки > Markdown), в блоке Markdown Extensions установите и поставьте галочку у пункта Mermaid.
Источники:
- https://ardalis.com/github-diagrams-with-mermaid/
- https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/
- https://mermaid-js.github.io/mermaid