architecture

アーキテクチャ図ジェネレーター

クイックスタート： 柔軟なレイアウト（1列／2列／3列）で HTML 構造を作成 → レイヤーとグリッドの CSS スタイルを定義 → 分類したパネルにコンテンツを追加 → 各レイヤーに意味のある色を使用します。

重要なルール

ルール 1：HTML を直接埋め込む

重要： アーキテクチャ図は Markdown 内に HTML を直接記述してください。コードブロック（```html）は絶対に使用しないでください。HTML はフェンスで囲まず、ドキュメント内に直接埋め込んでください。

ルール 2：HTML 構造内に空行を入れない

最重要： HTML アーキテクチャ図の構造内に空行を入れないでください。解析エラーを防ぐため、HTML ブロック全体を連続した状態に保ってください。

ルール 3：段階的に作成する

推奨： アーキテクチャ図は複数のステップに分けて作成してください。

1. 最初に： 全体の枠組み（ラッパー、サイドバー、メイン構造）を作成し、すべての CSS スタイルを定義します
2. 次に： レイヤーのコンテナーとタイトルを追加します
3. 3番目に： レイヤーごとにコンポーネントを追加します
4. 最後に： 詳細なコンテンツと調整を追加します

ルール 4：柔軟なレイアウト構造

アーキテクチャ図では、複雑さに応じて柔軟なレイアウトを使用できます。

• 1列： メインコンテンツのみ（シンプルなアーキテクチャ向け）
• 2列： メインコンテンツと片側のサイドバー（左または右）
• 3列： 両側にサイドバーを配置した全体レイアウト（複雑なシステム向け）
  • 左サイドバー： サポートシステム（監視、運用、分析）
  • メインコンテンツ： 中核となるアーキテクチャレイヤー（ユーザー、アプリケーション、データ、インフラストラクチャ）
  • 右サイドバー： 横断的な関心事（セキュリティ、コンプライアンス、ガバナンス）

ルール 5：レイヤーごとに整理する

各レイヤーには次の要素を含めてください。

• 明確な意味（ユーザー、アプリケーション、AI／ロジック、データ、インフラストラクチャ）
• 一貫した色分け
• コンポーネント用のグリッドレイアウト
• サブコンポーネントに適した入れ子構造

ルール 6：色の意味

レイヤーには一貫した意味を持たせてください。色の正確なパレットはスタイルによって異なります（例を参照）。標準的な意味の割り当ては次のとおりです。

• ユーザーレイヤー — ユーザー向けインターフェースとクライアント
• アプリケーションレイヤー — ビジネスロジックと API サービス
• AI／ロジックレイヤー — インテリジェンス、ルール、処理エンジン
• データレイヤー — データベース、キャッシュ、ストレージ
• インフラストラクチャレイヤー — コンテナー、ネットワーク、DevOps
• 外部サービス — サードパーティ API、クラウドサービス（通常は破線の境界線）

スタイル例

プロジェクトのトーンや対象読者に合ったビジュアルスタイルを選んでください。各例には、そのままコピーして使える完全な HTML テンプレートが含まれています。

#	スタイル	ファイル	適した用途
1	Steel Blue	styles/steel-blue.md	コンサルティングレポート、銀行・金融、政府プロジェクト、RFP 提案書
2	Ember Warm	styles/ember-warm.md	小売・Eコマース、教育プラットフォーム、ライフスタイルブランド、文化施設
3	Neon Dark	styles/neon-dark.md	テックトーク、開発者カンファレンス、ゲームプラットフォーム、サイバーセキュリティダッシュボード
4	Stark Block	styles/stark-block.md	クリエイティブスタジオ、教育プラットフォーム、インディー開発者、テックブログ
5	Ocean Teal	styles/ocean-teal.md	旅行プラットフォーム、物流・配送、グリーンテック、気象・海洋プロジェクト
6	Dusk Glow	styles/dusk-glow.md	ソーシャルメディア、エンターテインメントプラットフォーム、マーテック、コンテンツ制作ツール
7	Rose Bloom	styles/rose-bloom.md	ファッション・美容、高級ブランド、ウェディングプラットフォーム、プレミアム会員サービス
8	Sage Forest	styles/sage-forest.md	ヘルスケア、アグリテック、クリーンエネルギー、サステナビリティ、バイオインフォマティクス
9	Frost Clean	styles/frost-clean.md	デザインツール、開発者向けドキュメント、API リファレンス、ミニマリストな SaaS
10	Indigo Deep	styles/indigo-deep.md	ブランドに統一感のあるシステム、エンタープライズ向けホワイトペーパー、社内プラットフォーム
11	Pastel Mix	styles/pastel-mix.md	SaaS 製品、スタートアップ、一般的なテックアーキテクチャ、製品ドキュメント
12	Slate Dark	styles/slate-dark.md	エンタープライズ向けダークモード、社内ツール、開発者向けダッシュボード

レイアウト例

アーキテクチャの複雑さに適したレイアウト構造を選んでください。レイアウトはワイヤーフレーム形式（色なし）で、構造的なパターンに焦点を当てています。上記のスタイルと任意のレイアウトを組み合わせられます。

#	レイアウト	ファイル	最適な用途
1	3 カラム	layouts/three-column.md	横断的な関心事やモニタリング用サイドバーを含む複雑なシステム
2	単一スタック	layouts/single-stack.md	シンプルなサービス、マイクロサービスの詳細ビュー、焦点を絞ったドキュメント
3	左サイドバー	layouts/left-sidebar.md	運用／モニタリングを重視するシステム、DevOps 中心のビュー
4	右サイドバー	layouts/right-sidebar.md	セキュリティ／コンプライアンスを重視するシステム、ガバナンス中心のビュー
5	パイプライン	layouts/pipeline.md	データパイプライン、CI/CD フロー、ETL プロセス、水平方向のステージベースのフロー
6	2 カラム分割	layouts/two-column-split.md	変更前後の比較、2 つのシステムのビュー、移行アーキテクチャ
7	ダッシュボード	layouts/dashboard.md	KPI を含むシステム概要、モニタリングダッシュボード、エグゼクティブサマリー
8	グリッドカタログ	layouts/grid-catalog.md	サービスカタログ、コンポーネントライブラリ、同等の重要度を持つマイクロサービス
9	バナー＋中央	layouts/banner-center.md	ゲートウェイ中心のアーキテクチャ、共有インフラストラクチャを備えたユーザー向けシステム
10	ネストされたコンテナー	layouts/nested-containers.md	クラウドデプロイ、VPC／ネットワークトポロジー、環境の分離
11	レイヤーレイアウト	layouts/layer-layouts.md	レイヤーごとのレイアウトパターン：グリッド、サブグループ、製品グループ、KPI、縦積み、ゾーン、インラインパイプライン、幅の混在
12	コネクター	layouts/connectors.md	コンポーネント間に SVG オーバーレイのコネクターを表示：実線／破線、矢印、ラベル、曲線および直交パス

高度な機能

注記：これらの高度なコンポーネントには追加の CSS スタイルが必要です。以下を <style scoped> セクションに追加してください。

.arch-product-group { display: flex; gap: 10px; }
.arch-product { flex: 1; border-radius: 8px; padding: 10px; background: rgba(255, 255, 255, 0.6); border: 1px dashed #d97706; }
.arch-product-title { font-size: 12px; font-weight: bold; color: #92400e; margin-bottom: 8px; text-align: center; }
.arch-subgroup { display: flex; gap: 8px; margin-top: 8px; }
.arch-subgroup-box { flex: 1; border-radius: 6px; padding: 8px; background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(0, 0, 0, 0.08); }
.arch-subgroup-title { font-size: 10px; font-weight: bold; color: #374151; text-align: center; margin-bottom: 6px; }
.arch-user-types { display: flex; gap: 4px; justify-content: center; margin-top: 6px; }
.arch-user-tag { font-size: 9px; padding: 2px 6px; border-radius: 10px; background: rgba(59, 130, 246, 0.15); color: #1d4ed8; }
/* SVG connector lines between components */
.arch-conn { stroke: #94a3b8; stroke-width: 1.5; fill: none; }
.arch-conn-dashed { stroke: #94a3b8; stroke-width: 1.5; fill: none; stroke-dasharray: 6 4; }
.arch-conn-label { font-size: 9px; fill: #64748b; font-family: sans-serif; }

カスタム製品グループ

複数の製品／モジュールを含む複雑なアプリケーション向け：

<div class="arch-product-group">
  <div class="arch-product">
    <div class="arch-product-title">🎯 Product A</div>
    <div class="arch-grid arch-grid-2">
      <div class="arch-box">Feature 1<br><small>Description</small></div>
      <div class="arch-box highlight">Feature 2<br><small>Key Feature</small></div>
    </div>
  </div>
  <div class="arch-product">
    <div class="arch-product-title">📊 Product B</div>
    <div class="arch-grid arch-grid-2">
      <div class="arch-box">Feature 3<br><small>Description</small></div>
      <div class="arch-box">Feature 4<br><small>Description</small></div>
    </div>
  </div>
</div>

サブグループ化されたコンポーネント

レイヤー内の詳細な内訳向け：

<div class="arch-subgroup">
  <div class="arch-subgroup-box">
    <div class="arch-subgroup-title">Component Group A</div>
    <div class="arch-grid arch-grid-3">
      <div class="arch-box tech">Service 1<br><small>Details</small></div>
      <div class="arch-box tech">Service 2<br><small>Details</small></div>
      <div class="arch-box tech">Service 3<br><small>Details</small></div>
    </div>
  </div>
  <div class="arch-subgroup-box">
    <div class="arch-subgroup-title">Component Group B</div>
    <div class="arch-grid arch-grid-2">
      <div class="arch-box tech">Service 4<br><small>Details</small></div>
      <div class="arch-box tech">Service 5<br><small>Details</small></div>
    </div>
  </div>
</div>

ユーザータイプ／タグ

<div class="arch-user-types">
  <span class="arch-user-tag">Admin Users</span>
  <span class="arch-user-tag">End Users</span>
  <span class="arch-user-tag">API Clients</span>
  <span class="arch-user-tag">Partners</span>
</div>

メトリクスと KPI

<div class="arch-sidebar-item metric">99.9% Uptime</div>
<div class="arch-sidebar-item metric">&lt;200ms Response</div>
<div class="arch-sidebar-item metric">1M+ Users</div>

コンポーネント間の SVG コネクター

SVG オーバーレイを使用して、コンポーネント間に直交（直角）のコネクターを描画します。**水平方向と垂直方向のみのセグメントには、必ず M／L コマンドを使った <path> を使用してください。<line>、ベジェ曲線、斜めの線は使用しないでください。**詳細は layouts/connectors.md を参照してください。

<div style="position: relative;">
  
  
  <svg style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible;">
    <defs>
      <marker id="arrowhead" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
        <path d="M0,0 L8,3 L0,6" fill="none" stroke="#94a3b8" stroke-width="1"/>
      </marker>
    </defs>
    
    <path d="M 200,72 L 200,90 L 400,90 L 400,108" class="arch-conn" marker-end="url(#arrowhead)"/>
    
    <path d="M 600,72 L 600,90 L 600,90 L 600,108" class="arch-conn-dashed" marker-end="url(#arrowhead)"/>
    
    <text x="420" y="86" class="arch-conn-label">data flow</text>
  </svg>
</div>

スタイルのリファレンス

共通クラス（すべてのスタイルで共有）

• .arch-wrapper — サイドバーとメインレイアウト用のフレックスコンテナー
• .arch-sidebar — 固定幅のサイドバーカラム
• .arch-main — 柔軟なメインコンテンツ領域
• .arch-layer — レイヤーコンテナー（意味を表すクラスを追加します：.user、.application、.ai、.data、.infra、.external）
• .arch-box — コンポーネントボックス。主要項目には .arch-box.highlight、小さな技術項目には .arch-box.tech を使用します
• .arch-grid-2 ～ .arch-grid-6 — グリッドのカラムレイアウト
• .arch-sidebar-panel — サイドバーパネルのコンテナー
• .arch-sidebar-item — サイドバー項目。強調するメトリクスには .arch-sidebar-item.metric を使用します

ベストプラクティス

HTML の使用ガイドライン

1. 直接埋め込む — HTML は常に Markdown に直接埋め込み、```html のコードブロックは使用しないでください
2. 構造内に空行を入れない — HTML ブロック全体を、空行を挟まず連続させてください
3. 段階的に開発する — 図は段階を追って作成してください：
   • 基本的なフレームワークとレイアウト構造（必要に応じて 1、2、3 列）から始めます
   • 適切な CSS クラスを指定して、空のレイヤーコンテナを追加します
   • 上から下へ、レイヤーごとにコンテンツを追加します
   • 最後にコンテンツを調整し、強調表示を追加します

アーキテクチャ設計

1. レイヤーを論理的に分離する — 各レイヤーが明確なアーキテクチャ階層を表すようにします
2. 一貫した命名を使用する — コンポーネントとサービスの命名規則に従います
3. 主要なコンポーネントを強調する — 重要なコンポーネントには .highlight クラスを使用します
4. 技術的な詳細を追加する — 技術スタックの情報を <small> タグに含めます
5. 情報密度のバランスを取る — コンポーネントにテキストを詰め込みすぎないでください
6. アイコンは控えめに使用する — 視覚的な階層を示すため、タイトルに絵文字を追加します
7. 色の意味を維持する — 定められた色の意味に従います
8. レスポンシブデザインを考慮する — グリッドはコンテンツに合わせて自動的に調整されます