diagrams-mcp

概要

diagrams-mcpは、テキストやJSON構造から自動的に図を生成できるMCPです。現在、以下をサポートしています：

• クラス図 (UML)

• エンティティ関係図 (ER)

• 自然言語による生成

• Mermaidを使用したSVGへのエクスポート

• MCPエージェント向けの統合

目的は、エージェントやユーザーがシステムを説明するだけで、手動でMermaidを書くことなく対応する図を取得できるようにすることです。

インストール

1. リポジトリをクローンする

git clone https://github.com/nacho-mazzoni/diagrams-mcp.git
cd diagrams-mcp

2. 依存関係をインストールする

npm install

3. Mermaid CLIをインストールする（未インストールの場合）

npm install -g @mermaid-js/mermaid-cli

4. インストールの確認

mmdc -h

使用方法

このMCPはエージェントと連携するように設計されています。推奨されるフローは以下の通りです：

1. エージェントにプロジェクトのコードを分析するように依頼する。

2. エージェントに以下の内容を含むJSONを生成するように依頼する：

   • 検出されたクラス

   • エンティティ

   • 属性

   • 関係性

   • 行われた変更

3. そのJSONを直接MCPに渡す。

4. MCPが自動的に対応する図を生成する。

これにより、手動でMermaidを書く必要なく、コードの実際の状態やエージェントによって導入された変更に基づいて図を構築できます。

MCPは以下を受け付けます：

• エージェントによって生成された構造化JSON

• モデルを説明する自然言語テキスト

• 既存の図を更新するための部分的なデータ

エージェントとの統合

ユーザーは以下のフローに従って、diagrams-mcpをエージェントに統合できます：

1. ユーザーがエージェントにコードの分析やシステムの記述を依頼する。

2. エージェントがエンティティ、クラス、属性、関係性を含む構造化JSONを生成する。

3. エージェントがそのJSONをMCPに送信する。

4. diagrams-mcpが自動的に図を生成する。

5. エージェントが生成されたSVGをユーザーに返す。

概念的なフロー：

Usuario -> Agente -> JSON -> diagrams-mcp -> SVG -> Usuario

これにより、図がコードの実際の状態やエージェントによって行われた変更を反映できるようになります。

エージェントによって生成されたJSONの例

{
  "entities": [
    { "name": "Usuario", "attributes": ["id", "nombre"] },
    { "name": "Pedido", "attributes": ["id", "fecha"] }
  ],
  "relations": [
    {
      "from": "Usuario",
      "to": "Pedido",
      "fromCard": "1",
      "toCard": "1..*",
      "label": "realiza"
    }
  ]
}

このJSONを直接MCPに渡すことで、図が生成されます。

プロジェクト構造

diagrams-mcp
│
├── tools
│   ├── classDiagram.js
│   └── erDiagram.js
│
├── parsers
│   ├── textToClass.js
│   └── textToER.js
│
├── index.js
└── package.json

プロジェクトの目的

• MCPエージェントとの統合

• 開発中の自動図生成

• 自然言語のサポート

• 今後のさらなる図の種類への拡張

現在の状態

• カーディナリティ、PK、FKを備えたER図

• UMLクラス図

• テキストからのパーサー

• SVGエクスポート

補足

MCPは、空行で区切られたテキストブロックによる属性、主キー(PK)、外部キー(FK)を持つエンティティ定義もサポートしており、構造化された説明から完全なER図を生成することが可能です。