アーチー | Glama

Archy - 建築図面ビルダー

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

特徴

テキストの説明から図を生成する
GitHubリポジトリから図を生成する
すべての Mermaid ダイアグラムタイプのサポート:
- フローチャート
- シーケンス図
- クラス図
- 状態図
- 実体関連図
- ユーザージャーニー
- ガントチャート
- 円グラフ
- 象限チャート
- 要件図
- Gitグラフ
- C4図

インストール

前提条件

Node.js (v16 以上)
npm (v7以上)
TypeScript (v5.8 以上、依存関係に含まれています)

ソースからインストール

リポジトリをクローンします。
git clone https://github.com/phxdev1/archy.git cd archy
依存関係をインストールします:
npm install
プロジェクトをビルドします。
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強化テキストからダイアグラム生成: テキスト記述からより洗練されたダイアグラムを生成します
コードからダイアグラムへの生成: コードを解析し、適切なダイアグラムを生成します
差分可視化: コードバージョン間の差異を示す図を生成する

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

OpenRouterでアカウントを登録する
OpenRouterダッシュボードからAPIキーを取得します
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"
})

結果：

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

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

結果：

発達

開発モードで実行

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

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/ : テストファイル

Integrations

Archy - 建築図面ビルダー

特徴

インストール

前提条件

ソースからインストール

自動MCPインストール

構成

構成

OpenRouter統合

画像のエクスポート

リポジトリの進化の追跡

MCP統合

利用可能なツール

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

githubから図を生成する

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

AI搭載ツール

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

コードから図を生成する

差分図を生成する

図を画像にエクスポート

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

例

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

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

発達

開発モードで実行

TypeScriptコンパイラの実行

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

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

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

TypeScriptの設定

プロジェクト構造

Related MCP Servers

obsidian-mcp

Obsidian MCP REST Server

tavily-mcp

Maya MCP

New MCP Servers