DevChoreo — システムアーキテクチャ可視化

Web
DevChoreo — システムアーキテクチャ可視化

DevChoreo — システムアーキテクチャ可視化

DevChoreo は、WSO2 Choreo プラットフォーム向けに設計された「AI 補助の RAG（Retrieval-Augmented Generation）アシスタント」のアーキテクチャを視覚的に示すリポジトリです。対話型のアーキテクチャ図と関連資料をまとめ、開発者がシステム全体の構成・データフロー・コンポーネント間の相互作用を直感的に理解できるようにしています。静的な HTML をベースに、Netlify でのホスティングや Dockerfile、GitHub Actions などの CI/CD 用意が見られ、ドキュメント兼デモとして使える軽量なアーキテクチャ可視化ツールです（約300字）。

https://github.com/NadeeshaMedagama/dev-choreo_architecture

概要

DevChoreo は、RAG（Retrieval-Augmented Generation）を使った文脈認識型 AI アシスタント「DevChoreo」のシステムアーキテクチャを視覚化・説明するためのリポジトリです。README にあるバッジや Netlify へのデモリンクから分かる通り、主に静的なウェブページ（HTML）でアーキテクチャ図を提供しており、WSO2 Choreo プラットフォーム上で動作する各コンポーネント（API ゲートウェイ、ドキュメントストレージ、検索インデックス、生成モデルインターフェース等）の接続とデータフローを対話的に理解できるように設計されています。Dockerfile や .github ディレクトリが含まれており、ローカルビルドや CI/CD の踏み台も想定されています。

GitHub

リポジトリの統計情報

  • スター数: 4
  • フォーク数: 0
  • ウォッチャー数: 4
  • コミット数: 30
  • ファイル数: 8
  • メインの言語: HTML

主な特徴

  • 対話的なシステムアーキテクチャ図：RAG アシスタントの主要コンポーネントとデータフローを視覚化。
  • 静的サイトベース：HTML を中心に軽量に構成され、Netlify 等で簡単にホスティング可能。
  • 開発／デプロイ準備：Dockerfile や .github ワークフローによるビルド・デプロイの出発点を提供。
  • ドキュメント志向：README に図・バッジ・デモリンクを備え、アーキテクチャ説明を兼ねた資料として利用可。

技術的なポイント

このリポジトリは「ドキュメント兼デモ」としての役割を重視した作りになっており、以下の点が技術的に興味深いところです。

まず、メイン言語が HTML であることから、静的サイトとして設計されている可能性が高く、追加のサーバーサイド実装が不要な形でアーキテクチャ図をホスティングできる点が特徴です。Netlify などの静的ホスティングを想定した構成なら、CDN 配信やプレビュー URL の自動生成が容易で、チーム内での共有やデモが直観的になります。

次に、RAG（Retrieval-Augmented Generation）という設計思想に基づき、アーキテクチャ図は少なくとも次の主要要素を示しています：ドキュメントリポジトリ（ナレッジベース）、検索インデックス（ベクトル検索）、クエリ処理（Retriever）、生成モデル（Generator / LLM）とのインターフェース、API レイヤー（WSO2 Choreo 上のプロキシやファンクション）、およびユーザーインターフェース。これらの役割を明確に図示することで、どのコンポーネントがデータを保持し、どのようにコンテキストが取得・連結され、最終的に応答生成に使われるかが把握できます。

リポジトリに Dockerfile が含まれている点は、ローカルでの検証や CI 上でのビルドイメージ作成を想定していることを示唆します。静的サイトであっても、ビルドステップ（アセット圧縮や図生成ツールの利用）がある場合、コンテナ化することで再現性の高いビルド環境を確保できます。.github ディレクトリがあることから、GitHub Actions を使った自動ビルド・デプロイのワークフローを追加しやすく、Netlify か GitHub Pages への継続的デプロイを組み合わせることで、ドキュメントの更新が即座に反映される運用が可能です。

また、README の文言やバッジ（WSO2 ロゴや DevChoreo の表示）から、特定プラットフォーム（WSO2 Choreo）向けのアーキテクチャ最適化が意識されていることが分かります。WSO2 Choreo を使うケースでは、API 管理、認証、オーケストレーションといった機能がプラットフォーム側で担保されるため、図ではこれらを外部サービスとして扱い、RAG 特有の検索と生成の流れを強調する設計が有効です。

最後に、ドキュメントとしての可搬性と拡張性について。HTML ベースの静的資料は、将来的に Mermaid や PlantUML、あるいはインタラクティブな D3.js ベースの図に置き換えられる余地があり、図の自動生成（コードベースからのアーキテクチャ抽出）や、実稼働のメトリクスをオーバーレイ表示するなど、監視・説明双方の役割を持たせることができます。現時点では軽量なドキュメントとしてまとめられているため、まずは設計共有用のリファレンスとして活用し、必要に応じて実装ドキュメントや運用手順を追加していく流れが自然です。（約700〜1000字の技術解説）

プロジェクトの構成

主要なファイルとディレクトリ：

  • .dockerignore: file
  • .github: dir
  • .idea: dir
  • Dockerfile: file
  • README.md: file

…他 3 ファイル

上記から読み取れる構成意図：

  • .github: CI/CD やワークフロー定義を置くディレクトリ。自動ビルドやデプロイの設定が想定されます。
  • Dockerfile / .dockerignore: ビルド環境の再現・コンテナ化。静的サイトやビルドツールの実行用。
  • README.md: プロジェクトの説明、デモリンク、バッジなどドキュメントの中心。
  • .idea: 開発者が IntelliJ 系 IDE で作業している痕跡。プライベート設定の混入に注意が必要です。

まとめ

RAG ベースの AI アシスタント向けアーキテクチャを静的にわかりやすく示す、軽量で実用的な可視化リポジトリです（約50字）。

リポジトリ情報：

READMEの抜粋：

DevChoreo Architecture

🏗️ DevChoreo — System Architecture Diagram

Interactive Architecture Visualization for the DevChoreo AI-Powered RAG Assistant
Built for the WSO2 Choreo Platform