대부분의 AI 다이어그램 워크플로우는 PNG나 스크린샷으로 끝납니다. 보기에는 괜찮을지 모르지만, 아키텍처(Architecture)가 변경되는 순간 다이어그램을 다시 그리거나 이미지 전체를 다시 생성해야 합니다.

저는 다른 워크플로우를 원했습니다. 자연어(Natural language)로 시스템을 설명하면, 실제 Draw.io 파일을 받고, 모든 노드(Node), 레이블(Label), 커넥터(Connector), 그룹(Group), 아이콘(Icon)을 계속해서 편집할 수 있는 방식 말입니다.

그것이 제가 아키텍처 및 프로세스 설명을 검증된 편집 가능한 .drawio 파일로 변환하는 오픈 소스 Codex Skill인 drawio-mxgraph를 만든 이유입니다.

Repository: https://github.com/clawcode3-bit/drawio-mxgraph-skill

이 Skill이 하는 일

이 Skill은 Draw.io/diagrams.net에서 직접 열 수 있는 mxGraph XML을 생성합니다. 아키텍처 다이어그램, 비즈니스 프로세스, 에이전트 워크플로우(Agent workflows), 통합 맵(Integration maps)을 위해 설계되었습니다.

주요 기능은 다음과 같습니다:

• 자연어 설명을 편집 가능한 .drawio XML로 변환
• 신뢰할 수 있는 점진적 업데이트를 위한 안정적인 노드 ID(Node IDs)
• 추가, 제거, 이동, 크기 조정, 이름 변경 및 재그룹화 작업
• 레이아웃 방향 전환: 왼쪽에서 오른쪽, 오른쪽에서 왼쪽, 위에서 아래, 또는 아래에서 위로
• 명시적인 진입 및 진출 지점을 가진 직교 커넥터 라우팅(Orthogonal connector routing)
• 클라우드 및 엔터프라이즈 스타일 아이콘 세트를 포함한 휴대 가능한 임베디드 SVG 아이콘
• 전달 전 XML 구조 및 참조 검증
• 즉시 열고 수정할 수 있는 예시 다이어그램

안정적인 ID가 중요한 이유

생성된 다이어그램에서 흔히 발생하는 실패 모드(Failure mode)는 모든 편집을 전체 다시 그리기(Full redraw)로 처리하는 것입니다. 이로 인해 작은 요청조차 놀라울 정도로 파괴적일 수 있습니다.

안정적인 ID가 있다면 다음과 같은 요청을 할 수 있습니다:

티켓팅 시스템을 CRM 아래로 이동하고, 관측성(Observability) 그룹을 추가하며, 레이아웃을 왼쪽에서 오른쪽으로 변경해줘.

이 요청은 영향을 받는 셀(Cell)만 업데이트할 수 있습니다. 기존의 레이블, 스타일, 아이콘, 연결 및 수동으로 조정된 위치는 그대로 유지될 수 있습니다.

이를 통해 다이어그램은 일회용 이미지보다 소스 코드(Source code)처럼 동작하게 됩니다.

예시: AgentBuilder 고객 서비스 아키텍처

해당 저장소(Repository)에는 AgentBuilder로 구축된 지능형 고객 서비스 시스템에 대한 편집 가능한 예시가 포함되어 있습니다. 이 시스템은 다음 요소들을 연결합니다:

• 웹(Web), 모바일(Mobile), 메시징(Messaging) 및 음성(Voice) 채널
• 의도 라우팅(Intent-routing) 및 오케스트레이션(Orchestration) 계층
• LLM 및 지식 검색(Knowledge retrieval) 서비스
• CRM 고객 컨텍스트(Customer context)
• ERP 주문, 재고 및 재무 데이터
• 티켓팅(Ticketing) 및 상담원 전환(Human-agent handoff)
• 가드레일(Guardrails), 보안(Security), 관찰 가능성(Observability) 및 감사(Audit) 서비스

동일한 파일을 점진적으로 수정할 수 있습니다. 예를 들어, Skill에게 사기 탐지(Fraud-check) 서비스를 추가하거나, ERP를 기업 시스템(Enterprise-systems) 그룹으로 이동시키거나, 다이어그램을 세로형 레이아웃으로 변경하거나, 일반 블록을 AWS 스타일의 아이콘으로 교체하도록 요청할 수 있습니다.

전달 전 검증 (Validation before delivery)

XML을 생성하는 것은 쉽습니다. 하지만 여러 번의 편집 후에도 유용하게 유지되는 XML을 생성하는 것은 더 어렵습니다.

포함된 검증기(Validator)는 다음과 같은 문제들을 확인합니다:

• 누락된 mxGraph 루트(Roots)
• 중복된 ID
• 끊어진 엣지(Edge) 참조
• 잘못된 부모 관계(Parent relationships)
• 누락된 기하학적 정보(Geometry)
• 지원되지 않는 레이아웃 값
• 더 이상 존재하지 않는 노드에 대한 참조

이를 통해 파일이 Draw.io에 도달하기 전에 많은 문제들을 잡아낼 수 있습니다.

빠른 시작 (Quick start)

저장소를 Codex skills 디렉터리로 클론(Clone)한 다음, Codex에게 일상 언어로 다이어그램을 요청하세요.

프롬프트 예시:

AI 고객 서비스 플랫폼을 위한 편집 가능한 Draw.io 아키텍처를 생성해줘.
AgentBuilder를 사용하고, CRM, ERP, 티켓팅 시스템을 연결하며, 외부 시스템을 그룹화하고,
왼쪽에서 오른쪽으로 흐르는(Left-to-right) 레이아웃을 사용하며, 적절한 기업용 아이콘을 자동으로 선택해줘.

그 다음에는 다음과 같이 점진적인 지침을 이어갈 수 있습니다:

티켓팅 시스템을 CRM 아래로 이동시키고, 관찰 가능성(Observability) 그룹을 추가하며,
관련 없는 노드들을 다시 생성하지 않고 레이아웃을 위에서 아래로(Top-to-bottom) 변경해줘.

피드백을 받고 싶은 부분

이것은 첫 번째 공개 릴리스이며, 특히 다음과 같은 부분에 대한 피드백을 소중히 여기겠습니다:

1. 복잡한 엔터프라이즈 다이어그램에서의 커넥터 라우팅 (Connector routing)
2. 다음에 지원해야 할 AWS, Azure, GCP 또는 Visio 스타일의 아이콘 라이브러리
3. 에이전트 시스템 (Agent systems), SaaS 플랫폼, 그리고 비즈니스 프로세스를 위한 유용한 템플릿
4. XML 검증기 (XML validator)에 추가되어야 할 예외 케이스 (Edge cases)

만약 AI가 생성한 편집 가능한 다이어그램이 유용하다면, 예제를 시도해 보거나, 이슈 (Issue)를 생성하거나, 저장소(Repository)에 스타 (Star)를 눌러주세요. 이를 통해 제가 어떤 방향을 우선순위에 두어야 할지 알 수 있습니다.

GitHub: https://github.com/clawcode3-bit/drawio-mxgraph-skill

Release v1.0.0: https://github.com/clawcode3-bit/drawio-mxgraph-skill/releases/tag/v1.0.0