要素とスタイリング

各C4レベルは異なる要素タイプをサポートしています。これらを理解することで、正確で意味のあるアーキテクチャダイアグラムを作成できます。

レベル別の要素

レベル1: システムコンテキスト

最上位レベルで、システムとその環境を表示します:

レベル2: コンテナ

システム内の技術的な構成要素を表示します:

レベル3: コンポーネント

コンテナの内部構造を表示します:

レベル4: コード

実装の詳細を表示します:

要素の追加

追加ボタンを使用

1. ツールバーの追加をクリック
2. 要素タイプを選択
3. 名前と説明を入力
4. 作成をクリック

コンテキストメニューを使用

1. 空のキャンバス上で右クリック
2. [要素タイプ]を追加を選択
3. 詳細を入力
4. 作成をクリック

ドラッグ＆ドロップ

コンテナとコンポーネントの場合、サイドバーから要素をキャンバスに直接ドラッグできます。

要素のスタイリング

スタイルオプションへのアクセス

任意の要素を右クリックしてスタイリングにアクセス:

• 背景色: 要素の塗りつぶし色
• 境界色: アウトラインの色
• テキスト色: ラベルの色
• アイコン: 要素を表す視覚的アイコン

カラーパレット

Archylは厳選されたカラーパレットを提供:

• 青系: サービス、API
• 緑系: データベース、ストレージ
• 紫系: 外部システム
• オレンジ系: メッセージキュー、非同期
• グレー系: ユーティリティ、インフラストラクチャ

一貫したスタイリングのヒント

• 同様の要素タイプには同じ色を使用
• 組織の慣習に合わせた色を使用
• 色覚特性に配慮したパレットを考慮
• 色のスキームをプロジェクトノートに記録

オーバーレイ

オーバーレイは、ダイアグラム上の要素を整理するための色付きの視覚的グループです。

オーバーレイの作成

1. 追加をクリックし、オーバーレイを選択
2. 名前を付ける（例: 「バックエンドサービス」、「フロントエンドアプリ」）
3. パレットから色を選択
4. 作成をクリック

オーバーレイの使用

• オーバーレイ領域に要素をドラッグ
• オーバーレイは視覚的なグループ化を提供
• オーバーレイはレベル固有
• 各C4レベルで異なるグループ化が可能

オーバーレイのユースケース

• チームの責務でグループ化
• デプロイ単位でグループ化
• ドメイン（DDD境界づけられたコンテキスト）でグループ化
• クリティカルパスコンポーネントのハイライト
• セキュリティ境界の表示

オーバーレイのベストプラクティス

1. シンプルに保つ: レベルごとに最大3〜5個のオーバーレイ
2. 意味のある名前を使用: 「グループ1」ではなく「決済ドメイン」
3. 一貫した色: 関連するグループにはレベル間で同じオーバーレイ色
4. 重複を避ける: 重なり合うオーバーレイの混乱を回避

リレーションシップのスタイリング

リレーションシップもスタイリング可能です:

リレーションシップのスタイリングのヒント

• 非同期通信には破線を使用
• 主要なデータフローには太い線を使用
• プロトコル（HTTP、gRPC、イベント）で色分け

次のステップ

• リレーションシップ - 要素を接続する
• C4モデル概要 - モデルを理解する
• 最初のプロジェクトガイド - これらの概念を適用する