아치 | Glama

Archy - 건축 다이어그램 빌더

Archy는 Mermaid 구문을 사용하여 아키텍처 다이어그램을 생성하는 MCP(Model Context Protocol) 서버입니다. 자연어 설명과 GitHub 저장소 URL을 모두 처리하여 다양한 유형의 다이어그램을 생성할 수 있습니다.

특징

텍스트 설명에서 다이어그램 생성
GitHub 저장소에서 다이어그램 생성
모든 인어 다이어그램 유형 지원:
- 흐름도
- 시퀀스 다이어그램
- 클래스 다이어그램
- 상태 다이어그램
- 엔터티 관계 다이어그램
- 사용자 여정
- 간트 차트
- 파이 차트
- 사분면 차트
- 요구 사항 다이어그램
- Git 그래프
- C4 다이어그램

설치

필수 조건

Node.js(v16 이상)
npm(v7 이상)
TypeScript(v5.8 이상, 종속성에 포함됨)

소스에서 설치

저장소를 복제합니다.지엑스피1
종속성 설치:
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 강화 텍스트-다이어그램 생성 : 텍스트 설명에서 더욱 정교한 다이어그램 생성
코드-다이어그램 생성 : 코드를 분석하고 적절한 다이어그램을 생성합니다.
Diff Visualization : 코드 버전 간 차이점을 보여주는 다이어그램 생성

이러한 기능을 사용하려면:

OpenRouter 에 계정을 등록하세요
OpenRouter 대시보드에서 API 키를 받으세요
Archy를 실행하기 전에 OPENROUTER_API_KEY 환경 변수를 설정하세요.

이미지 내보내기

Archy는 인어 다이어그램을 다양한 이미지 형식으로 내보내는 기능을 지원합니다.

PNG : 웹 및 문서에 적합한 래스터 이미지 형식
SVG : 품질 저하 없이 확장 가능한 벡터 이미지 형식
PDF : 인쇄 및 공유에 적합한 문서 형식

사용자 정의 가능한 크기와 배경색으로 이미지를 내보낼 수 있습니다.

저장소 진화 추적

Archy는 Git 저장소를 분석하여 시간 경과에 따른 변화를 추적할 수 있습니다.

메모리 내 Git : 파일 시스템에 쓰지 않고 저장소를 복제하고 분석합니다.
커밋 기록 : 여러 커밋에 걸쳐 변경 사항 추적(기본적으로 10개로 제한됨)
파일 진화 : 특정 파일이 시간 경과에 따라 어떻게 변경되는지 추적
진화 시각화 : 저장소의 진화를 보여주는 다이어그램 생성

MCP 통합

MCP 클라이언트와 함께 Archy를 사용하려면 마조히스트인 경우 MCP 설정 파일에 Archy를 추가하세요.

{
  "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 저장소에서 인어 다이어그램을 생성합니다.

매개변수:

repoUrl : GitHub 저장소의 URL
diagramType : 생성할 다이어그램의 유형(예: 'classDiagram', 'sequenceDiagram' 등)

예:

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

지원되는 다이어그램 유형 목록

지원되는 모든 다이어그램 유형을 설명과 함께 나열합니다.

매개변수: 없음

AI 기반 도구

OpenRouter API 키가 구성된 경우 다음 도구를 사용할 수 있습니다.

AI를 사용하여 텍스트에서 다이어그램 생성

AI(OpenRouter가 포함된 LangChain)를 사용하여 텍스트 설명에서 인어 다이어그램을 생성합니다.

매개변수:

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"
}

차이 다이어그램 생성

두 가지 코드 버전의 차이점을 보여주는 인어 다이어그램을 생성합니다.

매개변수:

beforeCode : 변경 전 코드
afterCode : 변경 후 코드
diagramType : 생성할 다이어그램의 유형(예: 'classDiagram', 'flowchart' 등)

예:

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

다이어그램을 이미지로 내보내기

인어 다이어그램을 이미지 형식(PNG, SVG 또는 PDF)으로 내보냅니다.

매개변수:

mermaidCode : 내보낼 인어 다이어그램 코드
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 기능:

ES2020은 최신 JavaScript 기능을 목표로 합니다.
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