Archy - 建築図面ビルダー

Archyは、Mermaid構文を用いて建築図を生成するMCP（Model Context Protocol）サーバーです。自然言語による記述とGitHubリポジトリのURLの両方を処理し、様々なタイプの図を作成できます。

特徴

• テキストの説明から図を生成する

• GitHubリポジトリから図を生成する

• すべての Mermaid ダイアグラム タイプのサポート:

  • フローチャート

  • シーケンス図

  • クラス図

  • 状態図

  • 実体関連図

  • ユーザージャーニー

  • ガントチャート

  • 円グラフ

  • 象限チャート

  • 要件図

  • Gitグラフ

  • C4図

Related MCP server: ArchiScribe MCP Server

インストール

前提条件

• Node.js (v16 以上)

• npm (v7以上)

• TypeScript (v5.8 以上、依存関係に含まれています)

ソースからインストール

1. リポジトリをクローンします。

   git clone https://github.com/phxdev1/archy.git
   cd archy

2. 依存関係をインストールします:

   npm install

3. プロジェクトをビルドします。

   npm run build

   これにより、TypeScript ソース ファイルがbuildディレクトリ内の JavaScript にコンパイルされます。

自動MCPインストール

Archy には、VS Code と Claude の両方に対して MCP サーバーを自動的に構成する便利なインストール スクリプトが含まれています。

npm run install-mcp

このスクリプト:

• オペレーティングシステムに適したMCP設定の場所を自動的に検出します

• VS CodeとClaudeのMCP構成ファイルを更新します

• リポジトリ分析用の GitHub トークンの入力を求める (オプション)

• サーバーを実行可能にする

洞窟に住む動物のように、JSON 設定ファイルを手動で編集する必要はありません。面倒な設定作業はすべてスクリプトが処理してくれるので、ファイルパスや権限の設定に悩まされることなく、美しいダイアグラムの作成に集中できます。

構成

構成

Archy は環境変数を使用して設定できます。

• GITHUB_TOKEN : 認証されたリクエスト用の GitHub API トークン (オプション)

• OPENROUTER_API_KEY : AI を活用したダイアグラム生成用の OpenRouter API キー (オプション)

OpenRouter統合

ArchyはLangChainを介してOpenRouterと連携し、AIを活用した高度なダイアグラム生成を可能にします。OpenRouter APIキーを設定すると、以下の追加ツールが利用可能になります。

• AI強化テキストからダイアグラム生成: テキスト記述からより洗練されたダイアグラムを生成します

• コードからダイアグラムへの生成: コードを解析し、適切なダイアグラムを生成します

• 差分可視化: コードバージョン間の差異を示す図を生成する

これらの機能を使用するには:

1. OpenRouterでアカウントを登録する

2. OpenRouterダッシュボードからAPIキーを取得します

3. Archyを実行する前にOPENROUTER_API_KEY環境変数を設定します。

画像のエクスポート

Archy は、Mermaid ダイアグラムをさまざまな画像形式でエクスポートすることをサポートしています。

• PNG : Webやドキュメントに適したラスター画像形式

• SVG : 品質を損なうことなく拡大縮小できるベクター画像形式

• PDF : 印刷や共有に適した文書形式

画像は、カスタマイズ可能な寸法と背景色でエクスポートできます。

リポジトリの進化の追跡

Archy は Git リポジトリを分析して、時間の経過に伴う変化を追跡できます。

• インメモリ Git : ファイルシステムに書き込まずにリポジトリをクローンして分析する

• コミット履歴: 複数のコミットにわたる変更を追跡します (デフォルトでは 10 件に制限されています)

• ファイルの進化: 特定のファイルが時間の経過とともにどのように変化するかを追跡します

• 進化の視覚化: リポジトリの進化を示す図を生成します

MCP統合

MCP クライアントで Archy を使用するには、マゾヒストであれば、MCP 設定ファイルに以下を追加します。

{
  "mcpServers": {
    "archy": {
      "command": "node",
      "args": ["/path/to/archy/build/index.js"],
      "env": {
        "GITHUB_TOKEN": "your-github-token"
      }
    }
  }
}

利用可能なツール

テキストから図を生成する

テキストの説明からマーメイド ダイアグラムを生成します。

パラメータ:

• description : 生成する図のテキスト説明

• diagramType : 生成するダイアグラムのタイプ (例: 'flowchart'、'classDiagram' など)

例：

{
  "description": "A user authentication system with login, registration, and password reset",
  "diagramType": "flowchart"
}

githubから図を生成する

GitHub リポジトリから Mermaid ダイアグラムを生成します。

パラメータ:

• repoUrl : GitHubリポジトリのURL

• diagramType : 生成するダイアグラムのタイプ (例: 'classDiagram'、'sequenceDiagram' など)

例：

{
  "repoUrl": "https://github.com/username/repository",
  "diagramType": "classDiagram"
}

サポートされている図の種類の一覧

サポートされているすべてのダイアグラムの種類と説明を一覧表示します。

**パラメータ:**なし

AI搭載ツール

OpenRouter API キーが設定されている場合、次のツールが利用できます。

AIを使ってテキストから図を生成する

AI (LangChain と OpenRouter) を使用して、テキスト記述から Mermaid ダイアグラムを生成します。

パラメータ:

• description : 生成する図のテキスト説明

• diagramType : 生成するダイアグラムのタイプ (例: 'flowchart'、'classDiagram' など)

• useAdvancedModel : (オプション) 複雑な図に、より高度な AI モデルを使用するかどうか

例：

{
  "description": "A microservice architecture with user service, product service, and order service communicating through a message queue",
  "diagramType": "flowchart",
  "useAdvancedModel": true
}

コードから図を生成する

AI を使用してコードからマーメイド ダイアグラムを生成します。

パラメータ:

• code : 分析して図を生成するコード

• diagramType : 生成する図のタイプ (例: 'classDiagram'、'flowchart' など)

例：

{
  "code": "class User { ... } class AuthService { ... }",
  "diagramType": "classDiagram"
}

差分図を生成する

2 つのコード バージョン間の違いを示す Mermaid ダイアグラムを生成します。

パラメータ:

• beforeCode : 変更前のコード

• afterCode : 変更後のコード

• diagramType : 生成する図のタイプ (例: 'classDiagram'、'flowchart' など)

例：

{
  "beforeCode": "class User { ... }",
  "afterCode": "class User { ... additional methods ... }",
  "diagramType": "classDiagram"
}

図を画像にエクスポート

Mermaid ダイアグラムを画像形式 (PNG、SVG、または PDF) にエクスポートします。

パラメータ:

• mermaidCode : エクスポートするMermaidダイアグラムコード

• format : (オプション) エクスポートする画像形式 ('png'、'svg'、'pdf'、デフォルト: 'png')

• width : (オプション) 画像の幅（ピクセル単位）（デフォルト: 800）

• height : (オプション) 画像の高さ（ピクセル単位）（デフォルト: 600）

• backgroundColor : (オプション) 画像の背景色 (CSS カラーまたは「透明」、デフォルト: '#ffffff')

例：

{
  "mermaidCode": "flowchart TD\n  A[Start] --> B[End]",
  "format": "svg",
  "width": 1200,
  "height": 800,
  "backgroundColor": "#f0f0f0"
}

リポジトリ進化図を生成する

リポジトリの経時的な変化を示す図を生成します。

パラメータ:

• repoUrl : GitHubリポジトリのURL

• diagramType : 生成するダイアグラムのタイプ (例: 'gitGraph'、'flowchart' など)

• filepath : (オプション) 追跡する特定のファイルへのパス

• commitLimit : (オプション) 分析するコミットの最大数 (デフォルト: 10)

例：

{
  "repoUrl": "https://github.com/username/repository",
  "diagramType": "gitGraph",
  "filepath": "src/main.js",
  "commitLimit": 5
}

例

テキストからクラス図を生成する

generate_diagram_from_text({
  "description": "Create a class diagram for a library system with Book, Author, and Library classes. Books have titles and ISBNs. Authors have names and can write multiple books. Libraries contain many books.",
  "diagramType": "classDiagram"
})

結果：

classDiagram
  class Book {
    +String title
    +String ISBN
    +getDetails()
  }
  class Author {
    +String name
    +List books
    +addBook(Book)
  }
  class Library {
    +List books
    +addBook(Book)
    +findBookByISBN(String)
  }
  Author "1" -- "n" Book: writes
  Library "1" -- "n" Book: contains

GitHubからフローチャートを生成する

generate_diagram_from_github({
  "repoUrl": "https://github.com/username/api-service",
  "diagramType": "flowchart"
})

結果：

flowchart TD
  A[Client] --> B[API Gateway]
  B --> C{Authentication}
  C -->|Valid| D[Route Request]
  C -->|Invalid| E[Return 401]
  D --> F[Service 1]
  D --> G[Service 2]
  D --> H[Service 3]
  F --> I[Database]
  G --> I
  H --> I

発達

開発モードで実行

自動リロード付きの開発モードでサーバーを実行するには:

npm run dev

これはnodemonとts-nodeを使用して、個別のビルド ステップなしで TypeScript コードを直接実行し、ファイルが変更されると自動的に再起動します。

TypeScriptコンパイラの実行

次の方法を使用して、TypeScript コンパイラを直接実行できます。

ローカルにインストールされたTypeScriptを使用する

# Using npx to run the local TypeScript installation
npx tsc

# Compile with specific tsconfig file
npx tsc --project tsconfig.json

# Watch mode - automatically recompile when files change
npx tsc --watch

# Compile specific files
npx tsc src/index.ts src/server.ts

グローバルにインストールされたTypeScriptの使用

TypeScript がグローバルにインストールされている場合:

# Install TypeScript globally (if not already installed)
npm install -g typescript

# Run the TypeScript compiler
tsc

# Compile with specific tsconfig file
tsc --project tsconfig.json

# Watch mode
tsc --watch

一般的なTypeScriptコンパイラオプション

• --outDir <directory> : コンパイルされたファイルの出力ディレクトリを指定します

• --target <ES version> : ECMAScriptのターゲットバージョンを指定する（例：ES2020）

• --module <module system> : モジュール システムを指定します (例: NodeNext)

• --declaration : .d.ts 宣言ファイルを生成する

• --sourceMap : デバッグ用のソースマップファイルを生成する

• --strict : すべての厳密な型チェックオプションを有効にする

• --noEmit : 出力ファイルを生成せずにエラーをチェックする

• --noImplicitAny : 暗黙の 'any' 型を含む式でエラーを発生させます

コンパイラ オプションの完全なリストについては、 npx tsc --helpを実行するか、 TypeScript のドキュメントを参照してください。

TypeScriptの設定

Archy は次の構成を使用して TypeScript で構築されます。

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "esModuleInterop": true,
    "strict": true,
    "outDir": "build",
    "declaration": true,
    "sourceMap": true,
    "resolveJsonModule": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "build"]
}

使用される主な TypeScript 機能:

• 最新の JavaScript 機能のための ES2020 ターゲット

• Node.jsとの互換性のためのNodeNextモジュール解決

• より良い型サポートのための宣言ファイルの生成

• デバッグを容易にするソースマップ

プロジェクト構造

• src/ : TypeScriptソースファイル

  • src/index.ts : メインエントリポイントとサーバーの実装

  • src/server.ts : サーバーの実装

  • src/generators/ : ダイアグラム生成ロジック

  • src/utils/ : ユーティリティ関数とヘルパー

• build/ : コンパイルされたJavaScript出力

• examples/ : 使用例のスクリプト

• test/ : テストファイル