Mermaid.js로 기획서 프로세스 흐름도 빠르게 그리는 법

새로운 비즈니스 모델을 기획하거나 사내 정산 프로세스를 정리할 때, 보고서에 자주 들어가는 장표가 프로세스 흐름도(flowchart)입니다. 많은 기획자가 복잡한 백엔드 흐름이나 사용자 이용 동선을 표현하기 위해 파워포인트에서 네모 상자와 화살표를 마우스로 하나하나 그립니다.

그런데 중간에 단계가 하나 추가되거나 로직이 조금만 바뀌어도, 맞춰 둔 도형 간격과 화살표가 전부 틀어져 다시 손봐야 합니다. 이럴 때 텍스트 몇 줄만 입력하면 흐름도를 자동으로 그려 주는 Mermaid.js를 활용하면 수정과 유지보수가 훨씬 수월해집니다.

이 글에서는 코딩 경험이 없는 직장인도 타이핑만으로 가독성 높은 흐름도를 그릴 수 있는 방법을 정리합니다.

파워포인트 도형 그리기에서 벗어나면 좋은 이유

기획자는 구조와 논리를 설계하는 사람이지, 도형 간격을 1픽셀 단위로 맞추는 데 시간을 쓰는 것이 본업은 아닙니다. Mermaid.js는 마크다운 기반의 텍스트 문법을 사용해, 글자를 입력하면 그에 맞는 다이어그램이 자동으로 렌더링되는 방식입니다.

비교 항목	파워포인트 수작업	Mermaid.js 방식
수정 및 유지보수	도형 추가 시 화살표·간격이 틀어짐	텍스트 한 줄 추가하면 레이아웃이 자동 재배치됨
작업 속도	선과 간격을 맞추는 데 시간이 걸림	단어와 기호 몇 개 입력으로 빠르게 완성
호환성 및 공유	폰트 깨짐, 파일 용량 증가 가능	가벼운 텍스트 코드로 슬랙·노션 등에 붙여넣기 쉬움

단계가 많은 대규모 시스템 구조도일수록 이 차이가 커집니다. 파워포인트에서는 도형을 하나 옮길 때마다 전체 배치가 흔들려 반복 작업이 늘어나지만, 텍스트 기반에서는 코드 한 줄만 고치면 되기 때문입니다.

코딩을 몰라도 되는 기초 문법

프로그래밍 언어라고 해서 어렵게 느낄 필요는 없습니다. 메신저에서 화살표 기호(-->)를 쓰듯, 약속된 기호 몇 개만 알면 됩니다. 무료 웹 에디터(Mermaid Live Editor)나 노션의 코드 블록에서 아래 규칙에 맞춰 입력하면 됩니다.

• 방향 설정: 첫 줄에 graph TD를 적으면 위에서 아래로, graph LR을 적으면 좌에서 우로 흐르는 뼈대가 잡힙니다.
• 노드(도형) 생성: A[로그인]이라고 적으면 A라는 ID를 가진 '로그인' 상자가 하나 만들어집니다.
• 화살표 연결: A --> B[메인화면]이라고 적으면 로그인 상자에서 메인화면 상자로 이어지는 화살표가 자동으로 연결됩니다.

조건에 따라 예/아니오 분기가 필요하면 중괄호(B{회원인가?})를 사용해 마름모 형태의 분기점을 쉽게 표현할 수 있습니다.

자주 하는 오해: 개발자 전용 도구가 아니다

검은 화면에 코드를 입력하는 형태만 보고 "개발자용 도구"라고 지레 포기하는 경우가 있습니다. 그러나 Mermaid.js는 복잡한 연산을 하는 것이 아니라, 'A에서 B로 간다'는 관계를 그림으로 바꿔 주는 단순한 도구에 가깝습니다.

Mermaid.js는 복잡한 수식을 계산하는 것이 아니라, 흐름을 서술한 문장을 그림으로 옮겨 주는 도구입니다.

최근에는 ChatGPT, Claude 같은 AI 도구가 이 문법을 이해하고 있어, 상황을 텍스트로 설명한 뒤 "Mermaid 코드로 만들어 줘"라고 요청하면 코드를 생성해 줍니다. 다만 AI가 생성한 코드가 의도한 흐름과 맞는지, 노드 연결이나 분기가 정확한지는 붙여넣기 전에 직접 확인하는 것이 좋습니다. 기본 문법의 뼈대만 이해하면 개발 지식 없이도 충분히 활용할 수 있습니다.

실전 액션 가이드

눈으로 보기만 해서는 익숙해지지 않으니, 다음 보고나 회의 자료에 한 번 직접 적용해 보는 것이 좋습니다.

실전 액션 가이드
노션을 열고 빈 페이지에 /mermaid를 입력해 코드 블록을 하나 만들어 보세요. 그 안에 graph TD라고 적고 줄을 바꾼 뒤 A[출근] --> B[커피마시기] --> C[업무시작]이라고 입력하면, 화면에 다이어그램이 실시간으로 그려지는 것을 확인할 수 있습니다. 간단한 흐름부터 만들어 보면서 익히면 실무 보고서 작성에 바로 활용할 수 있습니다.