diagram-mcp

다이어그램-애즈-코드 텍스트를 사용자의 디스크에 PNG 파일로 렌더링하는 MCP 서버입니다. 브라우저도, 네트워크도, 외부 서비스도 필요 없습니다. 문서, 티켓 또는 README에 넣을 플로차트를 생성할 때 유용합니다.

도구

• render_diagram: 코드를 PNG로 렌더링하고 파일 경로를 반환합니다

• preview_diagram: 다이어그램을 텍스트 아트로 그려 대화에 바로 표시하며 파일을 쓰지 않습니다

• validate_diagram: 파싱하고 줄 번호와 함께 오류를 보고하며 아무것도 쓰지 않습니다

• diagram_syntax: 언어 참조

Related MCP server: Vizdown-MCP

설치

Node 20.12+가 필요합니다.

git clone https://github.com/JVmano/diagram-mcp.git
cd diagram-mcp
npm install
npm run build

그런 다음 Claude Code에 등록합니다:

claude mcp add diagram --scope user \
  --env DIAGRAM_MCP_OUTPUT_DIR=$HOME/Documents/diagram-renders \
  -- node "$(pwd)/dist/index.js"

또는 .mcp.json / 사용자 구성에 직접 추가합니다:

{
  "mcpServers": {
    "diagram": {
      "type": "stdio",
      "command": "node",
      "args": ["/absolute/path/to/diagram-mcp/dist/index.js"],
      "env": { "DIAGRAM_MCP_OUTPUT_DIR": "/absolute/path/to/renders" }
    }
  }
}

세션을 다시 시작한 다음 다이어그램을 요청하세요. 변경 사항을 pull한 후 npm run build를 다시 실행하세요.

언어

title "Reward approval flow"
direction TB

node event "Conversion recorded" shape=rounded
node auto "Auto-approve?" shape=diamond size=200x100
node queue "Manual review queue"

event -> auto
auto -> queue "no"

모양: rect, rounded, ellipse, diamond, hexagon. 연결: from -> to ["label"] [style=solid|dashed]. at=x,y를 사용한 위치는 선택 사항입니다. 생략하면 레이아웃이 모양을 배치합니다. 전체 참조는 diagram_syntax를 호출하세요.

구성

모두 선택 사항이며 모두 기본값이 있습니다. .env.example을 참조하세요. 렌더링 결과는 DIAGRAM_MCP_OUTPUT_DIR(기본값 ~/Documents/diagram-renders)에 저장됩니다. 명시적인 outputPath는 DIAGRAM_MCP_ALLOW_ANY_OUTPUT_PATH=true가 아닌 이상 해당 디렉터리 또는 작업 디렉터리 안에 있어야 합니다.

개발

npm test          # unit tests
npm run test:e2e  # builds, then drives the server over stdio
npm run verify    # typecheck, test, build, e2e

src/core의 파서, 레이아웃 및 SVG 생성 코드는 로컬 다이어그램 편집기 프로젝트와 공유됩니다. npm run check:sync는 해당 프로젝트가 옆에 체크아웃되어 있으면 이를 비교(diff)합니다.

라이선스

MIT