以下は、VPasCodeでD2を使用して作成された一般的なソフトウェア図の使用可能な例です。これらのコードスニペットをそのままVPasCodeのライブエディタにコピーすることで、すばやくクリーンな視覚的図を生成できます。
メモ： レイアウト方向は以下の方法で設定できます。
direction: right または direction: down D2コードブロックの先頭に記述してください。1. システムアーキテクチャ図
ネストされたサーバーとストレージコンポーネントを備えた、マルチティアのクラウドWebアーキテクチャ。
direction: right
User: {
shape: person
}
Web Application: {
CDN: {
shape: cloud
}
Load Balancer
App Servers: {
Server 1
Server 2
}
Data Tier: {
PostgreSQL Database: {
shape: cylinder
}
Redis Cache: {
shape: cylinder
}
}
}
User -> Web Application.CDN: ページをリクエスト
Web Application.CDN -> Web Application.Load Balancer: トラフィックをルーティング
Web Application.Load Balancer -> Web Application.App Servers.Server 1
Web Application.Load Balancer -> Web Application.App Servers.Server 2
Web Application.App Servers.Server 1 -> Web Application.Data Tier.Redis Cache: キャッシュを確認
Web Application.App Servers.Server 1 -> Web Application.Data Tier.PostgreSQL Database: データを照会
2. データベーススキーマ（SQLテーブル図）
D2は、以下の形状を使用して、SQLテーブルとエンティティ関係をクリーンにレンダリングするための組み込みサポートを備えています。sql_table 形状。
users: {
shape: sql_table
id: int {constraint: primary_key}
username: varchar
email: varchar
created_at: timestamp
}
orders: {
shape: sql_table
id: int {constraint: primary_key}
user_id: int {constraint: foreign_key}
total_amount: decimal
status: varchar
}
order_items: {
shape: sql_table
id: int {constraint: primary_key}
order_id: int {constraint: foreign_key}
product_name: varchar
quantity: int
}
users.id -> orders.user_id: 1対多
orders.id -> order_items.order_id: 1対多
3. 自動デプロイパイプライン（CI/CD）
コードチェックインから本番環境リリースまでのソフトウェアデプロイ手順をマッピングします。
direction: right
Developer -> GitHub: 1. コードをプッシュ
GitHub Pipelines: {
ビルドステップ -> テストステップ -> Dockerイメージ
}
GitHub -> GitHub Pipelines: 2. アクションをトリガー
GitHub Pipelines.Dockerイメージ -> Dockerレジストリ: 3. ビルドを保存
Dockerレジストリ -> 本番サーバー: 4. コンテナをデプロイ