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 다이어그램을 생성할 수 있습니다.