Мои пять любимых функций диаграмм.net (ранее draw.io)
В этой статье я поделюсь своим рабочим процессом, а также некоторыми советами и приемами, которые я использую для создания диаграмм с помощью charts.net (ранее draw.io). Эта история не спонсируется, я просто показываю свой рабочий процесс.
· Getting started with diagrams.net · Icons from the major Cloud Providers are already included. · Styling · Auto Layouts · Integration of Text based charts · Easy sharing ∘ Versioning with GIT ∘ Sharing them as images and re-importing them
Начало работы с диаграммами.net
Вы можете скачать диаграмму.net с их официальной стороны или просто использовать онлайн-версию. Приложение работает на Linux, Windows и MacOS. Если этого требуют ваши требования соответствия, вы даже можете запустить свой собственный сервер в своей среде через их док-контейнер https://github.com/jgraph/docker-drawio.
Иконки от основных облачных провайдеров уже включены.
Когда вы запускаете приложение, вас приветствует этот экран:
Как вы можете видеть на скриншоте выше. Установка по умолчанию уже поставляется с предварительно загруженными значками основных облачных провайдеров. Это особенно полезно, если вы работаете с крупными облачными провайдерами, такими как AWS, Azure или Google, и вам нужно нарисовать множество эскизов архитектуры.
Если вы начинаете с пустой диаграммы, вы можете получить значки на панели инструментов, щелкнув «Дополнительные фигуры», а затем выбрав значки облачного провайдера.
Если вы используете другие инструменты, вы также можете получить эти значки. Например, Amazon предлагает их здесь бесплатно.
Стайлинг
Если вы проводите джем-сейшн по архитектуре, когда вы сидите вместе со своими коллегами и работаете над общим пониманием процесса или архитектуры, вы часто не хотите, чтобы диаграмма выглядела слишком отшлифованной. Для этого есть стиль эскиза, который можно включить на вкладке стилей:
На боковой панели вы можете найти больше стилей на выбор. Эти стили могут служить отправной точкой, если вы, например, хотите представить на диаграммах свой корпоративный дизайн.
Нажав на отдельные фигуры, вы также можете изменить их стили и сделать их стилем по умолчанию:
Автоматические макеты
диаграмма.net является редактором свободной формы и не выполняет неявную компоновку в стандартной конфигурации. Это означает, что вы можете свободно размещать свои формы и линии, где хотите. Но иногда вам нужно больше структуры. Или вы стремитесь к определенному стилю диаграммы и макета.
диаграмма.net поставляется с различными вариантами макета. Их можно найти в меню Упорядочить › Макет.
С интегрированными макетами мы можем легко перейти от этого:
К этому:
Я обнаружил, что макет подходит для большинства стандартных случаев использования. Но иногда стандартные варианты приводят к неработающим макетам с пересекающимися линиями или странным расположением фигур.
Чтобы решить эту проблему, я иногда использую опцию полной настройки макета. Это можно сделать через меню Упорядочить›Макет›Пользовательский. Настройки здесь взяты из библиотеки JGraph. Возможные варианты вы можете найти в своей документации.
Интеграция текстовых диаграмм
Я нахожу редактирование произвольной формы невероятным для таких вещей, как архитектурные диаграммы или описание процессов и создание быстрых эскизов.
Для типов диаграмм, таких как Диаграммы последовательности, Диаграммы Ганта или Диаграммы классов, которые более ограничены по своей природе, редактирование в свободной форме, на мой взгляд, не подходит. Это проблема не диаграммы в частности, а подхода к редактированию в свободной форме в целом.
Вот где сияет текстовая диаграмма. Один из таких инструментов называется mermaid.js.
Если вы хотите объединить свои текстовые диаграммы mermaid.js с вашими диаграммами произвольной формы, тогда вам поможет диаграмма.net. Глубоко в меню вы можете найти возможность вставки текстовых диаграмм mermaid.js (и других).
Перейдите в раздел Упорядочить›Вставить ›Дополнительно › Русалка
Откроется новое окно, в которое вы можете вставить код диаграммы. Если вставить пример диаграммы последовательности с сайта русалки, то результат будет выглядеть так.
К сожалению, диаграмму нельзя редактировать с помощью инструментов произвольной формы на диаграммах.net. Это будет следующий уровень… Но вы можете, однако, редактировать код диаграммы двойным щелчком на диаграмме. Это позволяет сочетать возможности текстовых диаграмм с гибкостью редактирования в свободной форме. Я часто использую этот подход для аннотирования своих текстовых диаграмм на диаграммах.net.
Легкий обмен
Управление версиями с помощью GIT
Инструмент сохраняет диаграммы в собственном формате. По умолчанию формат сжат для экономии места. Вы можете отключить это, перейдя в Файл›Настройки и сняв флажок «Сжатый».
После того, как вы это сделаете, инструмент создаст обычные XML-файлы, которые вы сможете прочитать и, что более важно, зарегистрировать в системе управления версиями и использовать в запросах на вытягивание и т.п. Если у вас есть специальное решение для сравнения, которое может читать сжатые файлы, это не так важно. Но все же полезно знать.
Делитесь ими как изображениями и повторно импортируйте их
Еще одна интересная функция заключается в том, что вы можете экспортировать свои диаграммы в виде изображений и сохранять их определение в изображении. Когда вы экспортируете их, вы можете установить флажок Включить копию моей диаграммы в диалоговом окне экспорта.
Это встроит определение диаграммы и позволит вам или вашим коллегам импортировать диаграмму позже.
Импорт можно выполнить с помощью перетаскивания:
Важное примечание. Эта функция встраивает все страницы текущего файла в изображение. Не только экспортированная диаграмма. Имейте это в виду, если ваш файл содержит что-то, чем вы не хотите делиться.
Это были мои пять любимых функций в диаграммах.net. Если вы используете другие инструменты и хотите поделиться ими, не стесняйтесь оставлять комментарии. Мне всегда интересно изучать новые инструменты и смотреть, как другие люди используют свои инструменты.
