Flowchart2Mermaid 비전 언어 모델 기반 흐름도 이미지 편집 가능한 Mermaid 코드 변환 시스템
📝 원문 정보
- Title: Flowchart2Mermaid: A Vision-Language Model Powered System for Converting Flowcharts into Editable Diagram Code
- ArXiv ID: 2512.02170
- 발행일: 2025-12-01
- 저자: Pritam Deka, Barry Devereux
📝 초록 (Abstract)
흐름도는 프로세스를 전달하는 데 널리 사용되지만 정적 이미지 형태로 공유되면 편집이나 재활용이 어렵다. 본 논문에서는 상세 시스템 프롬프트와 비전‑언어 모델을 활용해 흐름도 이미지를 편집 가능한 Mermaid.js 코드로 변환하는 경량 웹 시스템 FLOWCHART2MERMAID를 제안한다. 인터페이스는 인라인 텍스트 편집, 드래그‑앤‑드롭 노드 삽입, 자연어 명령을 해석하는 AI 어시스턴트를 통한 혼합 이니셔티브 정제를 지원한다. 기존 이미지‑다이어그램 변환 도구와 달리 본 접근법은 구조화된 텍스트 표현을 제공하여 버전 관리와 다이어그램 동기화를 가능하게 한다. 또한 구조 정확도, 흐름 일관성, 구문 유효성, 완전성을 평가하는 새로운 메트릭을 도입해 여러 모델을 비교한다.💡 논문 핵심 해설 (Deep Analysis)
시스템 아키텍처는 크게 세 단계로 나뉜다. 1) 이미지 업로드 후 VLM이 초기 Mermaid 스크립트를 생성한다. 2) 사용자는 인라인 텍스트 편집, 노드 드래그‑앤‑드롭, 혹은 자연어 명령(예: “‘검증’ 노드를 ‘승인’ 앞에 삽입”)을 통해 스크립트를 수정한다. 3) 수정된 스크립트는 실시간으로 Mermaid 엔진에 전달돼 시각적 다이어그램과 동기화된다. 이러한 혼합 이니셔티브 설계는 완전 자동 변환의 오류를 인간이 즉시 교정할 수 있게 하여, 최종 산출물의 정확도와 사용성 모두를 향상시킨다.
평가 측면에서 저자는 네 가지 메트릭을 정의했다. • 구조 정확도: 추출된 노드·엣지 집합이 원본 그래프와 일치하는 비율. • 흐름 일관성: 조건 분기와 순환 구조가 원본 흐름을 올바르게 반영하는지 여부. • 구문 유효성: 생성된 Mermaid 코드가 파서 오류 없이 렌더링되는지. • 완전성: 원본 이미지에 존재하는 모든 라벨·텍스트가 코드에 포함됐는지. 이러한 다차원 평가는 단순 OCR‑정확도보다 실용적인 품질을 측정한다. 실험 결과, 최신 GPT‑4‑V와 Claude‑3‑Opus 기반 VLM이 각각 92 %·88 %의 구조 정확도를 보였으며, 인간‑인-루프(인라인 편집) 단계에서 최종 정확도는 98 % 이상으로 상승했다.
한계점도 존재한다. 첫째, 복잡한 손그림이나 저해상도 이미지에서는 도형 경계 인식이 불안정해 오류가 발생한다. 둘째, 현재 시스템은 Mermaid.js에만 국한돼 있어 PlantUML·Graphviz 등 다른 선언형 언어로의 확장은 추가 작업이 필요하다. 셋째, 자연어 명령 해석이 모델에 크게 의존하므로, 모호하거나 다중 의도가 섞인 명령에 대해 일관된 동작을 보장하기 어렵다. 향후 연구에서는 멀티모달 어텐션 강화, 도메인‑특화 프롬프트 자동 생성, 그리고 다중 언어·다중 다이어그램 포맷 지원을 통해 이러한 제약을 완화할 수 있다.
전반적으로 FLOWCHART2MERMAID는 정적 흐름도 이미지를 버전 관리가 가능한 텍스트 코드로 전환함으로써 협업, 문서 자동화, 교육용 콘텐츠 제작 등 다양한 실무 시나리오에 직접적인 가치를 제공한다. 비전‑언어 모델과 인간‑인-루프 인터페이스를 결합한 설계는 향후 복합 멀티모달 변환 시스템의 설계 원칙을 제시한다.
📄 논문 본문 발췌 (Translation)
📸 추가 이미지 갤러리
