Install
npx -y @glyphicjs/mcp-server누구에게 맞나
모델이 typed JSON으로 다이어그램을 내게 하고 싶고 DSL이나 헤드리스 브라우저는 받아들일 수 없는 사람을 위한 안내입니다. 공식 표현은 다음과 같습니다. 모델이 다이어그램을 기술하고 Glyphic이 렌더링하며, deterministic SVG & PNG, 18 types, validated before it draws, no DSL and no headless browser.
소유하고 계속 구축할 수 있는 diagram infrastructure이며, 온라인 Mermaid 호스팅이 아닙니다. 출력은 SVG, PNG, 또는 React Flow JSON일 수 있습니다.
공식 페이지:
https://github.com/MS-Teja/Glyphic
3분 만에 첫 시도를 끝내기
공식 MCP 경로만 사용합니다: stdio via npx, no install.
claude mcp add glyphic -- npx -y @glyphicjs/mcp-server
동등한 설정은 command가 npx이고, args가 -y와 @glyphicjs/mcp-server입니다. 등장하지 않은 설치기를 따로 찾지 마세요. 공식은 라이브러리 설치 npm install @glyphicjs/core @glyphicjs/schema도 적었지만, 첫 시도에서는 라이브러리 호출로 바꾸지 마세요.
전제 조건: 이 기기에서 npx를 실행할 수 있어야 합니다. “single validated schema”에 맞는 typed JSON을 준비하고, 유형은 공식이 명시한 flowchart를 먼저 고르세요. 공식은 JSON 필드 표를 주지 않으므로 빠진 키를 지어내지 마세요. MCP 도구 함수 이름도 지어내지 마세요.
설정 위치: claude mcp add 또는 mcpServers.glyphic. 공식 설치 주석은 Claude Code까지만 적혀 있고, 다른 클라이언트 제품이나 설정 파일 경로는 명시하지 않습니다.
첫 호출: 서버가 이 flowchart를 렌더링하게 하고 SVG만 받으세요. 성공 신호: 검증된 SVG가 반환되고(공식은 accessible: role="img" + <title>라고 명시), 브라우저가 시작되지 않는 것입니다.
“헤드리스 브라우저”를 위험 제로로 이해하지 마세요. 렌더링은 여전히 이 기기에서 이루어지며, PNG는 @resvg/resvg-js(Rust)를 거칩니다. JSON 설명은 렌더 프로세스에 들어갑니다.
사용 사례
사례 1: 먼저 확대·축소 가능한 벡터 그림을 냅니다. flowchart의 typed JSON을 제출하고 SVG를 받으세요. 공식은 pure, scalable vector markup이라고 명시합니다. 노드 수 상한은 나와 있지 않습니다.
사례 2: 같은 페이로드 또는 다른 유형으로 래스터 그림이나 상호작용 캔버스 데이터가 필요할 때. PNG(high-resolution raster, rendered natively via Rust)를 받거나 React Flow JSON(nodes/edges mapped for an interactive React Flow canvas)을 받으세요. 18종에는 architecture, sequence, ERD, UML class, state machines, Gantt, timelines, Sankey, Git trees, mindmaps, pie, quadrant, user journeys, Kanban, C4, treemaps, freeform canvas도 포함됩니다. 등장하지 않은 라이브러리 함수 이름을 반환 입구로 삼지 마세요.
사용 경계
설치 경계: MCP 주 경로는 npx -y @glyphicjs/mcp-server입니다. 라이브러리 경로는 다른 npm 패키지 묶음이므로 첫 시도와 섞지 마세요.
능력 경계: 18종 유형, 하나의 schema, 세 가지 출력. 공식은 원격 호스팅, 비밀키, 브라우저 미리보기를 적지 않았습니다. 목록에 없는 다이어그램 유형을 사용할 수 있다고 가정하지 마세요.