복잡한 생각도 한눈에! AI로 순서도와 다이어그램 1분 만에 그리는 법 (Mermaid)

안녕하세요.

업무를 하다 보면 복잡한 비즈니스 로직이나 시스템 아키텍처, 혹은 프로젝트의 전체 프로세스를 설명해야 할 때가 많습니다. 하지만 파워포인트의 ‘도형’ 기능을 이용해 박스를 치고 화살표를 연결하다 보면, 어느새 내용 정리보다 도형 위치 맞추기에 더 많은 시간을 쓰고 있는 자신을 발견하게 됩니다. “누가 내 생각만 읽고 이 구조도를 자동으로 그려주면 안 될까?”라는 생각이 간절해지죠.

이제는 텍스트만으로 다이어그램을 ‘코딩’하고, AI가 이를 ‘시각화’하는 시대입니다. 오늘은 챗GPT와 Mermaid.js라는 도구를 활용해, 복잡한 프로세스를 단 1분 만에 깔끔한 다이어그램으로 변환하는 자동화 기법을 소개합니다.

1. 텍스트로 그리는 그림, Mermaid란?

Mermaid는 텍스트 기반의 다이어그램 생성 도구입니다. 복잡한 디자인 툴 없이도 간단한 문법(Markup)만으로 순서도(Flowchart), 시퀀스 다이어그램, 간트 차트(Gantt chart) 등을 그려낼 수 있습니다.

• 유지보수의 용이성: 마우스로 박스를 옮길 필요 없이 텍스트만 수정하면 구조가 즉시 바뀝니다.
• AI와의 찰떡궁합: AI는 그림을 직접 그리는 것보다 ‘텍스트 코드’를 짜는 데 훨씬 능숙합니다. 따라서 챗GPT에게 “이 로직을 Mermaid 코드로 짜줘”라고 하면 완벽한 설계도를 얻을 수 있습니다.
• 다양한 플랫폼 지원: 노션(Notion), 깃허브(GitHub), 옵시디언(Obsidian) 등에서 Mermaid 코드를 넣기만 하면 자동으로 그림으로 변환해 줍니다.

2. AI에게 다이어그램 요청하기

AI에게 구조도를 요청할 때는 ‘입력-처리-출력’의 흐름을 명확히 설명해야 합니다.

[다이어그램 요청 프롬프트 예시]

“우리 회사의 ‘고객 환불 프로세스’를 순서도로 만들고 싶어. [고객 접수] -> [상태 확인] -> [승인 여부 판단] -> [승인 시 환불 처리] -> [거절 시 안내 메시지 발송]의 흐름이야. 이 로직을 Mermaid.js 문법으로 작성해줘.”

3. Python을 활용한 텍스트 기반 다이어그램 자동화

첫 번째 코드는 일반 텍스트로 된 프로세스 설명을 AI를 거쳐 Mermaid 코드로 변환하고, 이를 시각화할 수 있는 준비를 해주는 스크립트입니다.

[코드 예제 1] 프로세스 설명 -> Mermaid 코드 변환기

import openai

def generate_mermaid_code(process_description, api_key):
    """
    복잡한 프로세스 설명을 Mermaid 다이어그램 코드로 변환합니다.
    """
    client = openai.OpenAI(api_key=api_key)

    prompt = f"""
    Please convert the following business process into a Mermaid.js flowchart code.
    Use clear node names and logical connections.

    [Process Description]
    {process_description}

    [Format]
    graph TD
      A[Start] --> B[Step]
      ...
    """

    response = client.chat.completions.create(
        model="gpt-4o",
        messages=[{"role": "user", "content": prompt}]
    )

    return response.choices[0].message.content

desc = "사용자가 회원가입을 하면 이메일 인증을 보냅니다. 인증 완료 시 메인 페이지로 이동하고, 24시간 내 미인증 시 계정을 삭제합니다."

4. 다양한 다이어그램 유형 활용하기

순서도뿐만 아니라 업무 성격에 맞는 다양한 다이어그램을 AI로 생성할 수 있습니다.

[코드 예제 2] 시퀀스 다이어그램(Sequence Diagram) 생성 프롬프트

def create_sequence_prompt(actors, interaction, api_key):
    """
    시스템 간의 상호작용을 보여주는 시퀀스 다이어그램 코드를 생성합니다.
    """
    client = openai.OpenAI(api_key=api_key)

    prompt = f"""
    Create a Mermaid sequence diagram for the following interaction.
    Actors: {actors}
    Interaction: {interaction}
    """

    response = client.chat.completions.create(
        model="gpt-4o",
        messages=[{"role": "user", "content": prompt}]
    )
    return response.choices[0].message.content

5. 실무 활용 꿀팁: 노션(Notion)에 바로 적용하기

1. 코드 복사: AI가 생성해 준 graph TD...로 시작하는 코드를 복사합니다.
2. 노션 블록 생성: 노션에서 /mermaid를 입력하거나 ‘코드’ 블록을 만들고 언어를 ‘Mermaid’로 설정합니다.
3. 붙여넣기: 코드를 붙여넣는 즉시 실시간으로 아름다운 다이어그램이 렌더링됩니다.
4. 수정: 화살표 방향을 바꾸고 싶다면 코드에서 -->를 -.-로 바꾸거나 텍스트만 수정하면 됩니다. 마우스 노가다에서 완전히 해방되는 순간입니다.

결론

다이어그램의 본질은 ‘디자인’이 아니라 ‘논리’입니다. AI를 활용해 논리의 뼈대를 텍스트로 먼저 잡고 시각화를 자동화하면, 여러분의 기획안과 보고서는 훨씬 더 전문적이고 명확해질 것입니다.

이제 복잡한 구조를 설명하기 위해 파워포인트 도형 툴을 붙잡고 씨름하지 마세요. AI와 Mermaid의 조합이 여러분의 생각을 가장 빠르고 정확하게 시각화해 줄 것입니다.

다음 포스팅에서는 이미지 작업의 필수 단계인 “배경 제거(누끼 따기) 및 화질 개선 AI 도구 활용법”을 소개하겠습니다. 포토샵 없이도 완벽한 이미지를 만드는 비법을 기대해 주세요!