Діаграма системи

4 min read

Створіть потік, UML діаграми, мережеві діаграми та з’єднайте будь-які візуальні елементи з смарт-роз’ємами.

Diagram Flowchart

Огляд

Система Діаграма забезпечує:

  • Diagram Shapes — Flowchart, UML та мережеві символи
  • Smart Connectors* — Автоматичні маршрутні стрілки, які оновлюються при переході фігур
  • Connect Anything — Посилання на будь-які предмети полотна (зображення, текст, форми, SVG)
  • Авто-Layout — Автоматично влаштовує схеми

Доступ до панелі діаграм

  1. Натисніть кнопку Diagram у лівій панелі інструментів
  2. Панель Діаграма відкриває доступні форми

Діаграма панелі

Створення діаграмних форм

Від панелі

  1. Відкрийте панель Діаграм
  2. Виберіть категорію (Flowchart, UML, Мережа, Basic)
  3. Натисніть форму, щоб додати її до полотна
  4. Перетягніть позицію

Форма категорії

Категорії Шапки Використання
Флоучарт Процес, Рішення, Термінал, Дані, Документ, База даних Flowcharts, робочі процеси
УМЛ Клас, Використання Case, Actor Програми
Мережа Статус на сервери Архітектурні схеми
Головна Прямокутник, коло, трикутник, зірка Загальна мета

Роз’єми

Швидкий роз’єм (Any Items)

  1. Виберіть пункт джерела
  2. Hold Shift і натисніть кнопку цільовий елемент
  3. Роз’єм створюється автоматично

Використання режиму підключення

  1. Клацніть Connect* в панелі Діаграм (або натисніть C)
  2. Натисніть на вихідний пункт (синій коло)
  3. Перетягніть до порту цільового елемента
  4. Випускають для створення з’єднання

Підключення будь-якого

Працює з будь-яким предметом

Роз’єми не обмежуються формами діаграм. Підключення:

  • Зображення та імпортні SVGs
  • Елементи тексту
  • Спеціальні форми (схеми, зірки, прямокутники)
  • Генератор-створені елементи

Стиль роз’єму

Стиль маршрутизації

Стиль Опис Кращий для
Головна Пряма лінія Прості з’єднання
Ортогінал Правокутні доріжки Технічні схеми
Пробити Гладкі бджільни криві Органічні макети

Стрілкові стилі

Стиль Прозорість
Класика Заповнений трикутник
Статист Алмазний з ноткою
Хмарно Подовжена точка
Відкрито V-подібний контур
Албанія Алмазна форма
Коломия Заповнений коло
Ніна Немає стріли

Стилі підключення

Автопрокат

Автоматично влаштуйте схему:

  1. Виберіть форми для облаштування (або вибрати ні для всіх)
  2. Клацніть Auto-Layout в панелі Діаграм
  3. Виберіть алгоритм макета

Типи маршруту

Прованс Опис Кращий для
Ієрархія Шарований топ-знизу Flowcharts, org діаграми
Дерево Ієрархія батьківського піклування Сімейні дерева, файлові структури
Радіальні Концентричні кола Карта сайту
Сітка Звичайна сітка Інвентари, галереї
Примушені Фізика Мережеві схеми

Авто Лайут

Приклади діаграм

Флоучарт

Flowchart

Простий процес течії з:

  • Параметри терміналу для Start/End
  • Процесні форми для дій
  • Рішення алмазу для умов
  • Ортогональні роз’єми

Діаграма мережі

Network Діаграма

Архітектура мережі показує:

  • Хмарна форма для інтернету
  • Серверні форми для інфраструктури
  • Роз’єми для внутрішніх посилань

UML Використання Case

UML Діаграма

Схема використання з:

  • Актор палиця фігури
  • Використовуйте кейс еліпсів
  • Роз’єми асоціації

Анімовані роз’єми

Додати ефект “bolt” для анімаційного потоку:

  1. Виберіть роз’єм
  2. Увімкнути Bolt Effect в Властивості
  3. Налаштування налаштування:
    • Color* — Колір Bolt
    • Speed* — Швидкість анімації
    • Size* — Розмір Bolt

Болт проходить вздовж роз’єму, показує напрямок потоку даних.

Навігація

ХККСНУМКСК

Поради Діаграма:

  • Використання ортогонального маршруту для технічних схем
  • Використовуйте вигнуті маршрути для органічних, стилів карти
  • Застосувати автозапуск після додавання всіх форм
  • Hold Shift в той час як драгінси для оснащення

ХККСНУМКСК

Клавіатури клавіатури

Головна Дія
C Режим підключення
Escape Режим підключення
Delete Видалити вибраний роз’єм / форма

Схожі

  • [Переряди та роз’єми] (/features/arrows) — Інструмент стріли Legacy
  • Анімації — Елементи діаграми анiмату
  • Keyframe Editor — Комплексна анімація послідовностей