Drawgent: 실시간 Excalidraw 캔버스에서 코딩 에이전트와 작업하기

AI 요약

Drawgent는 별도로 에이전트를 제공하지 않고, 사용자가 설치하고 로그인한 Claude Code, Codex 또는 opencode를 실시간 Excalidraw 캔버스에 연결합니다. 채팅 패널에서 요청을 보내거나 캔버스에 AGENT:로 시작하는 메모를 남기면 에이전트가 장면 정보와 스크린샷을 확인하고, 요소를 편집한 뒤 결과를 살핍니다. 작업을 마친 메모는 DONE:으로 바뀝니다.

설치와 실행

drawgent setup <agent>는 에이전트 CLI와 로그인 상태, ACP 연결을 확인하고 설정 파일을 만듭니다. Claude Code와 Codex에는 공식 ACP 어댑터를 설치하며, opencode는 자체 ACP 기능을 사용합니다. 캔버스 렌더링에는 Chrome이 필요합니다. 설치된 Chrome을 찾지 못하면 Chrome Headless Shell 다운로드나 시스템 패키지 설치 방법을 안내합니다.

저장소에서 drawgent up을 실행하면 현재 작업 디렉터리에 새 에이전트 세션과 캔버스를 띄웁니다. 캔버스 데이터는 .drawgent/scene.json에 저장하며 Git에서 자동으로 제외합니다. 이미 실행 중인 세션을 붙이는 drawgent up --attach도 있습니다. opencode는 실행 중인 서버에 메시지를 보내고, Codex는 세션 큐에 요청을 넣습니다. Claude Code는 실행 중인 터미널 세션에 직접 요청을 주입할 공개 인터페이스가 없어 기존 대화 내용을 가져온 새 세션을 포크합니다. 원래 터미널 세션은 그대로 둡니다.

캔버스에서 지시하기

AGENT: 메모를 도형 안이나 옆에 적거나, 화살표로 메모와 도형을 연결할 수 있습니다. 입력을 멈춘 뒤 약 2.5초가 지나면 요청이 전달됩니다. Excalidraw의 레이저 도구로 영역을 표시하면 해당 영역에 포함된 요소와 위치 정보가 채팅 요청에 함께 들어갑니다. 4초 안에 그은 레이저 자국은 하나의 영역으로 묶이며, 에이전트가 작업을 마치면 표시가 사라집니다. 요청은 한 번에 하나씩 처리하고, 이미 처리한 메모는 건너뜁니다.

에이전트는 MCP 도구로 장면과 스크린샷을 읽고, 요소 추가·수정·삭제, Mermaid 다이어그램 생성, 지시 메모 상태 변경 등을 수행합니다. 화살표는 연결된 요소에 맞춰 배치하고, 도형을 바꾸면 라벨과 화살표 위치도 조정합니다. drawgent up --room으로 excalidraw.com 공유 방에 참가시키면 사람과 에이전트가 같은 캔버스에서 작업할 수 있습니다. 방의 키로 트래픽을 종단 간 암호화하며, 로컬 편집기도 방의 장면을 동기화합니다.

구현과 제약

프로젝트는 Rust 서버와 웹 편집기로 구성됩니다. Chrome을 CDP로 제어해 화면을 렌더링하며, 기본 API와 WebSocket으로 장면·채팅 이벤트를 주고받습니다. Docker 구성은 에이전트를 포함하지 않는 캔버스 서버만 실행합니다. 테스트에는 채팅 요청, 캔버스 메모, 브라우저 조작, 공유 방 양방향 동기화와 레이저 영역 편집이 포함됩니다.

현재 한 작업 디렉터리에서 하나의 장면만 사용하고, 이미지와 파일은 동기화하지 않습니다. 네이티브 렌더러는 계획 단계입니다. Codex의 실시간 세션 연결은 구현됐지만 로그인된 Codex를 대상으로 검증하지 않았습니다.

Hacker News 반응

• @armanj — 에이전트와 아키텍처를 함께 그릴 화이트보드를 찾아 여러 도구를 살펴봤지만 원하는 수준은 아니었습니다. 결국 에이전트가 다루기 쉬운 형식으로 Mermaid를 택해 Obsidian 플러그인을 만들었습니다. 같은 문서에서 에이전트와 함께 아이디어를 정리할 수 있고, 나름 잘 작동합니다.
  • @jmtulloss — TLDraw도 써보셨나요? 이 용도에는 사용하지 않았지만 어느 정도 성과가 있었습니다.
  • @armanj — 다른 사람들보다 늦게 발견해 깊이 살펴보지는 않았습니다. 그래도 바로 쓸 수 있는 기능만으로는 찾던 것을 얻지 못했습니다.
• @4ndrewl — 다이어그램을 그릴 때 얻는 가치는 생각하는 과정에서 나옵니다. 무엇을 그릴지 고민하면 나와 팀이 잘 모르는 부분이나 당연하게 여기는 가정을 발견합니다.
  • @sbarre — 저도 탐색하면서 그리거나, 생각을 마친 뒤 요약 자료로 그립니다. 에이전트는 후자의 Mermaid 다이어그램을 잘 만듭니다.
  • @qudat — 동의합니다. 그림을 그리면 생각하는 데 도움이 됩니다.
• @augment_me — Excalidraw 같은 도구는 손으로 만든 것처럼 보여서 사람들이 더 관심을 갖는 점도 매력입니다. 선과 일반적인 이름이 빼곡한 LLM 생성 다이어그램보다 손으로 그린 듯한 스케치를 더 잘 읽습니다. 저는 Excalidraw를 에이전트 MCP에 연결한 뒤 블로그 글과 논문에 더 많은 관심과 시간을 얻었습니다. 사람이 직접 만든 것처럼 보이는 효과가 읽기 쉽게 만든다고 생각합니다.
  • @msy — “사람들 시간을 낭비할 새로운 방법을 찾았군요.” 정말 암울합니다.
  • @augment_me — 정보를 공짜로 만들 수 있는 시대에는 관심이 유일한 화폐입니다. 그걸 어떤 방식으로든 얻으세요. 그러지 않으면 다른 사람이 얻습니다.
• @seemaze — Excalidraw도 자체 오픈소스 MCP 엔드포인트와 서버를 제공합니다.
  • @eshack94 — 이상하게도 6개월 동안 변경 사항이 없고 마지막 릴리스도 7개월 전입니다. 중단된 건지, 다른 작업을 우선한 건지 궁금합니다.
• @AM1010101 — 프로젝트의 가치를 보여주는 짧은 영상이나 이미지를 README에 넣는 일이 왜 이렇게 자주 빠지는지 답답합니다. 예전보다 만들기 쉬워졌는데도 프로젝트를 직접 내려받아 실행해야 진짜 모습을 볼 수 있습니다.
  • @bityard — README가 161줄이면 저장소 README로는 짧습니다. 훑어보고 흥미가 있는지 판단하는 데 15초쯤 걸렸습니다. 영상은 너무 빨리 지나가거나 몇 분씩 늘어지는 경우가 많아, 몇 초면 읽을 내용을 전달하는 데 시간을 더 씁니다. 이미지는 더 많이 쓰면 좋겠습니다.
• @dtkav — Obsidian의 JSON Canvas 파일을 다루는 비슷한 프로젝트를 만들고 있습니다. 에이전트는 SVG처럼 학습 데이터가 많은 형식은 잘 다루지만, 덜 알려진 형식에는 약하다는 게 제 경험입니다. 그래서 네이티브 렌더러를 만들고 SVG와 PNG 결과를 읽혀 빠르게 반복하게 했습니다. 아직 정말 좋은 AI 생성 다이어그램 작업 흐름은 보지 못했습니다.
• @ramoz — HTML의 힘을 과소평가하는 사람이 많다고 생각합니다. 에이전트가 HTML을 쓰면 자연스러운 의미 구조와 스타일 기능을 활용하고 추상화 계층을 거의 거치지 않습니다. 최근 모델은 논리·개념·흐름 다이어그램을 HTML로 상당히 잘 그립니다.

원문: Hacker News / 번역·요약: Trawling