Рекомендации по диаграммам

Предпочитаемый формат файла

Для сложных диаграмм используйте формат .drawio.svg.

Файлы с расширением .drawio.svg являются SVG-файлами со встроенным исходным кодом draw.io. Использование этого формата способствует удобной работе разработчика: это допустимый SVG, хорошо работает с git diff и может редактироваться синхронно с помощью различных онлайн и оффлайн версий draw.io. Если вы используете VS Code, вы можете использовать расширение расширение для интеграции draw.io.

Файлы в формате .drawio.svg могут обрабатываться оффлайн.

Вставка диаграммы в Markdown

Для вставки файла .drawio.svg в Markdown используйте ту же синтаксическую конструкцию, что и для любого изображения. Пример: ![My diagram](my-diagram.drawio.svg)

Обратите внимание, что GitHub не допускает стилизации в документах Markdown. В тех случаях, где стилизация разрешена (например, в экспортированной версии документации brew.sh), всегда устанавливайте фоновый цвет диаграммы white. Это цвет, который предполагает draw.io и делает диаграмму легко читаемой в тёмном режиме без дополнительной настройки. Вы можете использовать CSS-селектор img[src$=".drawio.svg"] для стилизации.

Пример

Пример вставки SVG-изображения в Markdown:

![Example diagram: Managing Pull Requests](/assets/img/docs/managing-pull-requests.drawio.svg)

Результат:

Example diagram: Managing Pull Requests

Пример стилизации (где разрешено):

img[src$=".drawio.svg"] {
  background-color: white;
  margin-bottom: 20px;
  padding: 5%;
  width: 90%;
}

@media (prefers-color-scheme: dark) {
  img[src$=".drawio.svg"] {
    filter: invert(85%);
    -webkit-filter: invert(85%);
  }
}