Диаграммы D2

Ниже приведены готовые примеры распространенных программных диаграмм, созданных с помощью D2 в VPasCode. Вы можете скопировать эти фрагменты кода непосредственно в редактор Live VPasCode, чтобы мгновенно создать чистые визуальные диаграммы.

Примечание: Вы можете задать направление компоновки с помощью direction: right или direction: down в начале блока кода D2.

1. Диаграмма архитектуры системы

Многоуровневая облачная веб-архитектура с вложенными серверами и компонентами хранения.

D2


Редактировать D2 в VPasCode
D2 Edit D2 in VPasCode 
direction: right

Пользователь: {
  shape: person
}

Веб-приложение: {
  CDN: {
    shape: cloud
  }
  
  Балансировщик нагрузки
  
  Серверы приложений: {
    Сервер 1
    Сервер 2
  }
  
  Уровень данных: {
    База данных PostgreSQL: {
      shape: cylinder
    }
    Кэш Redis: {
      shape: cylinder
    }
  }
}

Пользователь -> Веб-приложение.CDN: Запрос страницы
Веб-приложение.CDN -> Веб-приложение.Балансировщик нагрузки: Перенаправить трафик
Веб-приложение.Балансировщик нагрузки -> Веб-приложение.Серверы приложений.Сервер 1
Веб-приложение.Балансировщик нагрузки -> Веб-приложение.Серверы приложений.Сервер 2

Веб-приложение.Серверы приложений.Сервер 1 -> Веб-приложение.Уровень данных.Кэш Redis: Проверить кэш
Веб-приложение.Серверы приложений.Сервер 1 -> Веб-приложение.Уровень данных.База данных PostgreSQL: Запрос данных
Edit D2 in VPasCode



Редактировать D2 в VPasCode

D2 multi-tier cloud web system architecture featuring CDN, Load Balancer, App Servers, PostgreSQL, and Redis - Text to diagram editor - VPasCode

 

2. Схема базы данных (диаграмма таблиц SQL)

D2 имеет встроенную поддержку для отображения таблиц SQL и связей между сущностями с помощью sql_table формы.

D2


Редактировать D2 в VPasCode
D2 Edit D2 in VPasCode 
пользователи: {
  shape: sql_table
  id: int {constraint: primary_key}
  username: varchar
  email: varchar
  created_at: timestamp
}

заказы: {
  shape: sql_table
  id: int {constraint: primary_key}
  user_id: int {constraint: foreign_key}
  total_amount: decimal
  status: varchar
}

items_заказов: {
  shape: sql_table
  id: int {constraint: primary_key}
  order_id: int {constraint: foreign_key}
  product_name: varchar
  quantity: int
}

пользователи.id -> заказы.user_id: Один ко многим
заказы.id -> items_заказов.order_id: Один ко многим
Edit D2 in VPasCode



Редактировать D2 в VPasCode

D2 SQL table ERD diagram showing 1-to-Many entity relationships between users, orders, and order_items - Text to diagram editor - VPasCode

 

3. Автоматизированный путь развертывания (CI/CD)

Создайте схему шагов развертывания программного обеспечения от проверки кода до выпуска в живую производственную среду.

D2


Редактировать D2 в VPasCode
D2 Edit D2 in VPasCode 
direction: right

Разработчик -> GitHub: 1. Отправить код

GitHub Pipelines: {
  Шаг сборки -> Шаг тестирования -> Docker-образ
}

GitHub -> GitHub Pipelines: 2. Запустить действие
GitHub Pipelines.Docker-образ -> Docker Registry: 3. Сохранить сборку

Docker Registry -> Продуктовый сервер: 4. Развернуть контейнер
Edit D2 in VPasCode



Редактировать D2 в VPasCode

D2 CI/CD automated deployment workflow diagram mapping code push from GitHub to Docker Registry and Production Server - Text to diagram editor - VPasCode

 

Прокрутить вверх