AI + MerMaid를 통해서 손쉽게 다이어그램 그리기

1. Mermaid란?

Mermaid는 텍스트 기반 DSL(Domain-Specific Language)을 사용해 플로우차트, 시퀀스 다이어그램, 클래스 다이어그램, 상태도, 간트 차트 등 다양한 시각화를 정의할 수 있는 DSL(Domain Specific Language)이다.

• 장점: GUI 조작 없이 텍스트로 작성 → 버전 관리(Git) 용이, 협업 최적화
• 지원 환경: Draw.io, GitHub, GitLab, VS Code, Notion 등

2. Mermaid 기본 문법

• 블록 선언: mermaid …
• 주석: %% 설명 내용
• 방향: -->, -->|text|, -.-> 등
• 키워드: flowchart, sequenceDiagram, classDiagram, stateDiagram-v2, gantt, erDiagram, pie 등

예시: 간단한 플로우차트

flowchart LR
  A[시작] --> B{조건 판별}
  B -- Yes --> C[작업 1]
  B -- No --> D[작업 2]
  C --> E[종료]
  D --> E

그런데 이러한 Mermaid  문법으로 다이어그램을 그리는건 쉽지 않다. 

괜히 다이어그램을 그리는 Tool들이 왜 존재하겠는가?

 

3. AI + Mermaid

하지만 AI에게 Mermaid 작성해달라고 요청하면? 아무리 복잡한 다이어그램이라도 금방 그릴 수 있게된다.

아주 간단한 프롬프트와 그 결과물을 아래에서 확인해보자

[Prompt]

-- newautom.user_info definition

CREATE TABLE `user_info` (

  `user_id` varchar(25) NOT NULL DEFAULT '' COMMENT '아이디',

  `password` varchar(500) NOT NULL DEFAULT '' COMMENT '비밀번호',

  `email` varchar(200) NOT NULL DEFAULT '' COMMENT '이메일',

  `code_user_grade` varchar(10) NOT NULL DEFAULT 'N1' COMMENT '회원 등급',

  `login_fail_count` tinyint(10) NOT NULL DEFAULT 0 COMMENT '로그인 실패횟수',

  `login_lock` tinyint(1) NOT NULL DEFAULT 0 COMMENT '로그인 차단여부 (로그인 실패횟수 5이상)',

  `reg_date` varchar(50) DEFAULT '' COMMENT '가입일시',

  `is_resign` tinyint(1) DEFAULT 0 COMMENT '탈퇴여부',

  `resign_date` varchar(50) DEFAULT '' COMMENT '탈퇴일자',

  `is_baned` tinyint(1) DEFAULT 0 COMMENT '회원정지 여부',

  `baned_date` varchar(50) DEFAULT '' COMMENT '회원정지 일자',

  `warning_count` smallint(2) DEFAULT 0 COMMENT '경고횟수',

  `mac_point` int(11) DEFAULT 0 COMMENT '보유 MacPoint',

  PRIMARY KEY (`user_id`)

) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci COMMENT='회원 테이블';

-- newautom.post definition



CREATE TABLE `post` (

  `post_id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'PK',

  `community_div` varchar(25) NOT NULL DEFAULT '' COMMENT '커뮤니티 구분',

  `post_category` varchar(25) NOT NULL DEFAULT '' COMMENT '게시판 구분',

  `user_id` varchar(25) NOT NULL DEFAULT '' COMMENT '게시글작성자(FK)',

  `post_title` varchar(50) NOT NULL DEFAULT '' COMMENT '게시글 제목',

  `post_content` mediumtext NOT NULL DEFAULT '' COMMENT '게시글 내용',

  `reg_date` datetime NOT NULL DEFAULT sysdate() COMMENT '게시글 작성일시',

  `view_count` int(11) DEFAULT 0 COMMENT '조회수',

  `like_count` int(11) DEFAULT 0 COMMENT '좋아요 카운트',

  `is_admin_post` tinyint(1) NOT NULL DEFAULT 0 COMMENT '관리자 게시글 구분\r\n(0=일반유저글,1=관리자 게시글)',

  PRIMARY KEY (`post_id`)

) ENGINE=InnoDB AUTO_INCREMENT=760 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci COMMENT='게시판 테이블';



위와 같은 테이블들이 존재하며, 기본적으로 로그인, 회원가입, 이메일 인증(인증코드)을 통한 아이디 및 비밀번호 찾기, 글작성하기, 수정하기, 삭제하기가 가능한 기본적인 게시판 웹사이트가 존재할 때



DFD(데이터흐름도)를 Mermaid로 작성하십시오.

[AI 결과물]

그럼 이제 AI가 작성한 Mermaid를 Draw.io 같은 mermaid를 지원하는 Tool에서 

 

아래와 같이 AI가 작성한 Mermaid를 복붙해주면

 

이렇게 순식간에 차트들을 그려주고, 프롬프트를 정교하게 다듬고 수정 요청을 하면
꽤나 괜찮은 다이어그램들을 작성할 수 있다.

 

# Mermaid에서 지원하는 차트의 문법

플로우차트 (Flowchart)

• 방향 지정: TB(위→아래), LR(왼→오), RL, BT
• 노드 모양: [], (), >{}, [( )]

flowchart TB
  Start((시작))
  Process1[첫 번째 처리]
  Decision{결정 지점}
  Process2[두 번째 처리]
  End((종료))
  Start --> Process1 --> Decision
  Decision -- Yes --> Process2 --> End
  Decision -- No --> End

시퀀스 다이어그램 (Sequence Diagram)

sequenceDiagram
  participant Alice
  participant Bob
  Alice->>Bob: 안녕하세요!
  Bob-->>Alice: 반갑습니다!

클래스 다이어그램 (Class Diagram)

classDiagram
  class Animal {
    +String name
    +eat()
  }
  class Dog {
    +String breed
    +bark()
  }
  Animal <|-- Dog

상태도 (State Diagram)

stateDiagram-v2
  [*] --> Idle
  Idle --> Processing: Start
  Processing --> Idle: Done
  Processing --> Error: Fail
  Error --> Idle: Reset

간트 차트 (Gantt Chart)

gantt
  title 프로젝트 일정
  dateFormat  YYYY-MM-DD

  section 설계
    분석       :a1, 2025-07-01, 5d
    설계       :after a1, 7d

  section 개발
    개발       :2025-07-10, 14d
    테스트     :2025-07-25, 5d

기타 다이어그램

• ER 다이어그램

erDiagram
  CUSTOMER ||--o{ ORDER : places
  ORDER ||--|{ LINE_ITEM : contains

  CUSTOMER {
    string name
    string custNumber
  }
  ORDER {
    int orderNumber
    date orderDate
  }

• Pie Chart

pie title 사용 현황
  "A 옵션" : 45
  "B 옵션" : 25
  "C 옵션" : 30

스타일 & 테마

• 전역 설정: %%{init: { "theme": "forest" }}%%
• 노드 스타일: style 노드ID fill:#f9f,stroke:#333,stroke-width:2px

%%{init:{"theme":"dark"}}%%
flowchart LR
  A --> B
  style A fill:#bbf,stroke:#333,stroke-width:2px

Tip

• 자주 쓰는 코드 스니펫은 Draw.io 템플릿으로 저장
• 여러 다이어그램을 한 캔버스에 배치해 문서화
• Mermaid 코드는 .drawio 파일 내 XML로 포함되어 관리됨