흐름도 노드 'end'가 Mermaid 렌더러를 망가뜨린 이유 — 소문자 'end'는 예약어입니다
요약
Mermaid 다이어그램 문법에서 소문자 'end'는 `subgraph` 블록을 닫는 예약 토큰입니다. 이 때문에 흐름도 마지막 노드에 일반적인 단어로 사용될 경우 파싱 오류가 발생할 수 있습니다. 본 글은 이러한 함정을 해결하기 위해 Mermaid 렌더러 자체를 수정하고, 이제 'end'라는 이름의 프로세스 단계를 포함하여 정상적으로 렌더링할 수 있게 되었음을 안내합니다.
핵심 포인트
- Mermaid 문법에서 소문자 'end'는 예약어입니다.
- 빈 `end`는 노드를 생성하지 않고 블록을 종료시킵니다.
- 이 오류는 개발자들이 흔히 빠지는 함정 중 하나입니다.
- 렌더러 수정으로 이제 'end' 단계를 포함한 다이어그램도 정상 작동합니다.
지난주에 에이전트가 제가 사용하는 Mermaid 렌더러에게 아주 합리적인 흐름도를 보냈는데, 다섯 개의 노드로 이루어진 다이어그램의 마지막 줄에서 파싱 오류를 받았습니다:
graph TD
push --> run tests --> deploy --> end
이 차트는 여러분이 가진 모든 DSL(Domain Specific Language) 본능으로 볼 때 유효한데도 불구하고 Mermaid가 이를 거부했습니다. 노드를 하나씩 이분 탐색하는 데 한 시간을 썼지만, 원인은 문자 그대로의 단어 end였습니다. Mermaid의 흐름도 문법에서 소문자 end는 subgraph 블록을 닫는 예약 토큰입니다. 아무것도 없는(bare) end는 노드를 생성하지 않고 현재 블록을 종료시키기 때문에, 파서가 남은 화살표 구문을 예상치 못한 상태에 놓이게 됩니다. 대문자로 된 End는 괜찮고, 따옴표 안에 있는 end도 괜찮지만, 아무것도 없는 소문자 end는 다이어그램의 마지막 단계를 지정하는 사람이라면 누구나 빠지기 쉬운 함정입니다... 그리고 이는 매우 흔한 일이죠.
상황을 더 악화시킨 것은 오류 메시지 자체였습니다. mermaid-cli의 스택 트레이스(
결국 두 가지 수정 사항을 render API 자체에 패키징했습니다(https://x402.freeq.one/tools/mermaid.html). 따라서 이전에 400에서 오류를 발생시키던 차트도 이제 end라는 이름의 프로세스 단계를 포함하여 렌더링됩니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 Dev.to AI tag의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기