Диаграммная система
Создавайте блок-схемы, диаграммы UML, сетевые диаграммы и подключайте любые визуальные элементы с помощью интеллектуальных разъемов.
[Диаграмма Flowchart] (…/images/diagram-flowchart.png)
Обзор
Система диаграмм обеспечивает:
- Формы диаграмм — Flowchart, UML и сетевые символы
- Умные коннекторы — автоматические стрелки маршрутизации, которые обновляются при движении форм
- Connect Anything — Ссылка на любые элементы холста (изображения, текст, формы, SVG)
- Auto-Layout — автоматически расставлять диаграммы
Доступ к панели диаграмм
- Нажмите кнопку Diagram в левой панели инструментов
- Открывается панель Diagram, показывающая доступные формы
[Панель диаграмм] (…/images/diagram-panel-shapes.png)
Создание диаграммных форм
Из группы
- Откройте панель Diagram
- Выберите категорию формы (Flowchart, UML, Network, Basic)
- Нажмите на форму, чтобы добавить ее в холст
- Перетаскивать на позицию
Формы категорий
| Категория | Формы | Использовать для |
|---|---|---|
| Flowchart | Процесс, Решение, Терминал, Данные, Документ, База данных | Flowcharts, рабочие процессы |
| ОМЛ | Класс, Случай использования, Актер | Диаграммы программного обеспечения |
| Сеть | Облако, Сервер | Архитектурные диаграммы |
| Базовый | Прямоугольник, круг, треугольник, звезда | Общая цель |
Соединяющие элементы
Быстрое подключение (любые предметы)
- Выберите исходный пункт
- Держите Shift и нажмите на целевой элемент
- Разъем создается автоматически
Использование Connect Mode
- Нажмите Connect в панели Diagram (или нажмите C)
- Нажмите на порт источника (синий круг)
- Перетащить в порт целевого объекта
- Выпуск для создания соединения
[Связать все] (…/images/diagram-connect-anything.png)
Работает с любым предметом
Коннекторы не ограничиваются фигурами диаграмм. Соедините:
- Изображения и импортные SVG
- Текстовые элементы
- Обычные формы (круги, звезды, прямоугольники)
- Генераторные элементы
Стили коннекторов
Стили маршрутизации
| Стиль | Описание | Лучшее для |
|---|---|---|
| Прямой | Прямая линия | Простые соединения |
| Ортогональный | Прямоугольные дорожки | Технические диаграммы |
| Искривленный | Гладкая мягкая кривая | Органические макеты |
Арроухед Стайлз
| Стиль | Внешний вид |
|---|---|
| Классика | Наполненный треугольник |
| Скрытность | Бриллиант с выемкой |
| Острый | Удлиненная точка |
| Открыть | V-образный контур |
| Алмаз | Алмазная форма |
| Круг | Заполненный круг |
| Никто | Нет наконечника стрелы |
[Стили коннектора] (…/images/diagram-connector-styles.png)
Автозакладка
Автоматически расставьте свою диаграмму:
- Выберите формы для организации (или не выберите ни одну для всех)
- Нажмите Auto-Layout в панели Diagram
- Выберите алгоритм макета
Типы планировок
| Планировка | Описание | Лучшее для |
|---|---|---|
| Иерархический | Слоеный сверху вниз | Flowcharts, org charts |
| Дерево | Иерархия родителей и детей | Семейные деревья, файловые структуры |
| Радиальный | Концентрические круги | Карты разума |
| Сетка | Регулярная сеть | Запасы, галереи |
| Принудительный | Основанный на физике | Сетевые диаграммы |
[Auto Layout] (…/images/diagram-auto-layout.png)
Примеры диаграмм
Flowchart
[Flowchart] (…/images/diagram-flowchart.png)
Простая блок-схема процесса с:
- Форма терминала для начала/конца
- Форма процесса для действий
- Алмаз для принятия решения об условиях
- Ортогональные соединители
Сетевая диаграмма
[Сетевая диаграмма] (…/images/diagram-network.png)
Сетевая архитектура, показывающая:
- Форма облака для интернета
- Форма сервера для инфраструктуры
- Дашированные разъемы для внутренних ссылок
Случай использования UML
[UML Diagram] (…/images/diagram-uml-usecase.png)
Диаграмма использования с:
- Актёрская фигура
- Используйте эллипсы
- Разъемы ассоциации
Анимированные коннекторы
Добавить эффект «болта» для анимированного потока:
- Выберите разъем
- Эффект Болта в свойствах
- Настройка настроек:
- Цвет — цвет болта
- Скорость — скорость анимации
- Размер Размер Bolt
Затвор проходит вдоль разъема, показывая направление потока данных.
Советы
Советы по диаграмме:
- Использование ортогональной маршрутизации для технических диаграмм
- Используйте изогнутую маршрутизацию для органических стилей Mind-Map
- Применяйте Auto-Layout после добавления всех форм
- Держите Shift во время перетаскивания для snap-to-grid
Клавишные ярлыки
| Ключ | Меры |
|---|---|
| C | Введите режим подключения |
| QEscape | Режим подключения выхода |
| Delete | Удалить выбранный соединитель/форму |
Связанный
- [Arrows & Connectors] (/features/arrows) — инструмент стрелок Legacy
- [Анимации] (/features/animations) — элементы анимированной диаграммы
- [Keyframe Editor] (/features/keyframes) — Сложные анимационные последовательности