D2は、明確で読みやすい図を描くための現代的なテキストベースのツールです。これは「宣言型図示」を意味します。VPasCodeでは、D2を使用することで、ソフトウェア開発者やソリューションアーキテクトが、手動で図形を描くことなく、シンプルなコードテキストをきれいな視覚的モデルに変換できます。
ヒント： D2構文は、シンプルで読みやすいように設計されています。図形、接続、ラベル、グループはすべて、複雑な設定なしに基本的なテキスト行で記述できます。
1. 基本的な図形と接続
図形を作成するには、名前をそのまま入力するだけです。図形を接続するには、矢印（-> で片方向、<-> で双方向）を使用します。
# 簡単な接続
ユーザー -> Webサーバー: HTTPリクエスト
Webサーバー -> データベース: データ取得
データベース -> Webサーバー: 結果を返す
Webサーバー <-> キャッシュ: 読み書き同期
2. 図形の種類とカスタムラベル
デフォルトでは、図形は標準的なボックスとして表示されます。図形のアイコンタイプを簡単に変更したり、カスタムラベルを設定したりするには、shapeプロパティを使用します。
# 図形の種類を定義
クライアント: {
shape: person
}
クラウドサービス: {
shape: cloud
}
メインDB: {
shape: cylinder
label: "プライマリデータベース (PostgreSQL)"
}
クライアント -> クラウドサービス -> メインDB
3. クラス定義
D2は、class図形を使用して、オブジェクト指向構造設計をネイティブにサポートしています。
顧客アカウント: {
shape: class
accountId: 文字列
emailAddress: 文字列
isActive(): ブール値
}
4. ネストされたコンテナ（グループ化）
D2では、標準の波かっこ（”）を使用して、コンテナ内にアイテムをグループ化するのが簡単です。{}）。また、ドット表記を使用して、異なるグループ間の要素をリンクできます。
# コンテナによるグループ化
フロントエンドアプリケーション: {
React UI -> ステートマネージャ
}
バックエンドインフラストラクチャ: {
APIゲートウェイ -> 認証マイクロサービス
APIゲートウェイ -> 注文マイクロサービス
}
# グループ間の接続
フロントエンドアプリケーション.ステートマネージャ -> バックエンドインフラストラクチャ.APIゲートウェイ: RESTコール
5. スタイリングと色
カスタムの背景色、線の色、フォントスタイルは、ブロック内ですべて直接指定できます。styleキーワードを使用して。
サービスA: {
style: {
fill: "#e0e7ff"
stroke: "#4338ca"
border-radius: 8
}
}
サービスB: {
style: {
fill: "#fef3c7"
stroke: "#d97706"
}
}
サービスA -> サービスB: メッセージ送信
6. クイック構文チートシート
| 概念 | コード例 | 機能 |
|---|---|---|
| 方向付き接続 | A -> B |
AからBへ向かう矢印を描画します。 |
| 線ラベル | A -> B: データ送信 |
接続の矢印の上にテキストを追加します。 |
| 双方向矢印 | A <-> B |
両方向を指す矢印を描画します。 |
| コンテナ／グループ | サーバー: { ... } |
複数の形状を1つのボックスにグループ化します。 |
| 形状選択 | 形状: シリンダー |
標準のボックスをデータベースアイコン、人物、クラウド、クラスなどに変更します。 |
| コメント | # 私のコメント |
1行コメントはレンダリング時に無視されます。 |