Arc

実行方法

インストールは不要です — サーバーは stdio 経由で実行されます。

npx -y @hudsonkit/arc-mcp
# or: bunx @hudsonkit/arc-mcp

クライアントの設定

Node.js 22 以降が必要です。アカウント、API キー、環境設定は不要です。 PNG エクスポートにはローカルの Chrome/Chromium のインストールが必要です。アニメーションのエクスポートには ffmpeg も必要です。

Claude Code:

claude mcp add --scope project arc -- npx -y @hudsonkit/arc-mcp

Devin:

devin mcp add arc -- npx -y @hudsonkit/arc-mcp

任意の MCP クライアント（JSON 設定）:

{
  "mcpServers": {
    "arc": {
      "command": "npx",
      "args": ["-y", "@hudsonkit/arc-mcp"]
    }
  }
}

ツール

ツール	機能
validate_diagram	ArcDiagramData のコード化された診断情報 — code で処理し、supportedFixes の項目を適用して再検証します
auto_layout	図全体、または最小限の入力（nodeData + connectors + connectorStyles）を自動レイアウトします
diff_diagram	構造化された DiagramDelta — 差分をレンダリングするには、<ArcDiagram data={head} delta={delta} /> に渡します
render_svg	決定的な SVG エクスポート — 11 種類のテーマ、ライト／ダークに対応します。作成したフローは SMIL でアニメーション化するか、flowTime の時点でサンプリングできます
render_png	ローカルの Chrome/Chromium バイナリを使った PNG ラスタライズ（上書きするには ARC_CHROME、無効にするには ARC_CHROME=none を指定）。flowTime の時点でサンプリングします
render_animation	Chrome のフレームと ffmpeg を使って、output パスにフローの GIF/MP4 アニメーションを出力します（上書きするには ARC_FFMPEG を指定）
render_html	React コンポーネントのスニペット、iframe 埋め込み、またはスタンドアロン HTML ページ
render_ascii	ターミナルやドキュメント向けの Unicode/ASCII ボックスアート描画
diagram_to_typescript	型付きの ArcDiagramData TypeScript モジュールを出力します
editor_handoff	Arc スタジオで図を開く URL を作成します

リソース

URI	内容
arc://schema/diagram	ArcDiagramData 用に生成された draft-07 JSON Schema
arc://skill/diagrams	エージェント向け Arc 図生成スキル
arc://docs/llm	LLM 向けの簡潔なブリーフィング

HTTP 経由でのセルフホスト

公開済みのバイナリは stdio 経由で実行されます。ローカルクライアントにはこれだけで十分です。 ほかのマシンのクライアントに Arc を提供するには、リポジトリのチェックアウトから Streamable HTTP サーバーを実行します。

git clone https://github.com/hudsonkit/arc && cd arc
bun install
ARC_MCP_HOST=127.0.0.1 ARC_MCP_PORT=5190 bun run mcp:http
# MCP endpoint: http://127.0.0.1:5190/mcp · health: /health

変数	デフォルト	用途
ARC_MCP_PORT	5190	リッスンするポート
ARC_MCP_HOST	0.0.0.0	バインドするインターフェース。独自の認証の背後にない場合は、127.0.0.1 を使用してください
ARC_EDITOR_URL	http://localhost:5188	editor_handoff のリンク先となるスタジオのベース URL

Arc は公開 MCP エンドポイントを提供していません。ホスト型のエンドポイントが必要な場合は、 github.com/hudsonkit/arc で issue を作成してください。

MCP Registry

Arc のレジストリ ID は io.github.hudsonkit/arc です。インストールメタデータは server.json にあり、npm パッケージでも同じ mcpName を宣言しているため、レジストリで所有権を検証できます。

メンテナーは、MCP のみのパッチリリースにはパッケージスコープ mcp を指定して GitHub Actions ワークフロー Publish to npm を実行できます。協調リリースの場合は all を指定します。このワークフローはビルド前に両方のバージョンを設定し、パッケージ化したサーバーを検証して npm に公開した後、 GitHub OIDC を使ってレジストリメタデータを公開します。ドライランでは、公開せずに検証とパッケージ化を行います。 GitHub の選定 MCP カタログに掲載するには、公式 MCP Registry への公開後に 初回オンボーディング が必要です。

関連パッケージ

• @hudsonkit/arc — React レンダラー、ビジュアルスタジオ、arc CLI、ASCII レンダラー
• @hudsonkit/arc-viewer — ネイティブの Mermaid シーケンス図と Mermaid インポート
• @hudsonkit/arc-iso — バニラ JS とブラウザー向けのアイソメトリックレンダラー

スタジオとドキュメント：hudsonkit.com/arc · ソース：github.com/hudsonkit/arc

ライセンス

MIT