피드로 돌아가기
Introducing ExcaliClaw: A Skill for OpenClaw to Generate Excalidraw Diagrams
Dev.toDev.to
AI/ML

OpenClaw-Excalidraw 연동을 위한 MCP 최적화 및 렌더링 정밀 설계

Introducing ExcaliClaw: A Skill for OpenClaw to Generate Excalidraw Diagrams

Nick Taylor2026년 4월 25일3intermediate

Context

OpenClaw 환경에서 MCP 기반 Excalidraw 다이어그램 생성 시 UI 렌더링 미지원으로 인한 접근성 한계 발생. 기존 MCP 서버의 단순 데이터 스트리밍 방식으로는 공유 가능한 유효 링크 생성이 불가능한 구조적 제약 존재.

Technical Solution

  • SSE 방식의 호환성 결여를 해결하기 위한 streamable HTTP 전송 프로토콜 채택
  • 단순 스트리밍 데이터 전송에서 Excalidraw Native Scene Payload 전체 수출 방식으로 전환하여 씬 무결성 확보
  • Label 유실 방지를 위해 Shortcut 대신 명시적 Text Element를 정의하고 Shape 상단에 배치하는 Draw Order 제어 로직 적용
  • Hand-drawn 스타일 유지를 위한 fontFamily: 1 설정 및 가시성 확보를 위한 Text Element 크기(Width, Height) 명시화
  • 화살표의 부유 현상 방지를 위한 객체 간 정밀 연결 경로 및 Label 회피 라우팅 패턴 구축
  • 요소가 포함되지 않은 빈 씬의 링크 생성을 원천 차단하는 Validation 로직 도입

- MCP 통신 시 플랫폼별 기본 프로토콜(SSE vs HTTP) 호환성 우선 검토 - 외부 렌더링 도구 연동 시 추상화된 Shortcut보다 Native Payload 기반의 명시적 속성 정의 권장 - UI 없는 환경의 LLM 생성물은 레이아웃-폰트-순서에 대한 구체적인 Recipe를 Skill 형태로 구조화하여 일관성 확보

원문 읽기