[다이어그램] 머메이드 mermaid.live 너 쫌 매력적이다

📌 Mermaid Live란?

텍스트로 작성한 코드를 실시간으로 다이어그램으로 보여주는 웹 편집기

문법만 익히면 텍스트만으로 간편하게 도식을 그릴 수 있다.

간단한 도식부터 복잡한 다이어그램까지 모두 작성 가능하다.

 

 

---

✨ 생각보다 강력하다

아래는 20줄도 안 되는 코드로 작성한 플로우차트 예시이다.

 

 

정말 이 정도 코드만으로도 꽤 보기 좋은 다이어그램이 만들어진다.

flowchart TB
    subCorner["본사 관리자 입력 (hq_v_00009) / 매장 사용자 입력 (st_v_00006)"] -- "1. 등록/수정" --> DB_SLIP["무발주 전표 생성<br>(OBSLPHTB & OBSLPDTB)"]
    DB_SLIP -- "2. 확정/취소 트랜잭션" --> Triggers["트리거 실행 프로세스"]
    Triggers --> Tr_H["Tr_OBSLPH_T01_Service<br>(헤더 트리거)"] & Tr_D["Tr_OBSLPD_T01_Service<br>(상세 트리거)"]
    Tr_H -- 매입로그 적재 --> DB_LOG["OBSLPLOG<br>(매입 정산/대체 이력 로그)"]
    Tr_D -- "3. 상품 유형 판별 SET_FG" --> Branch_SET_FG{"SET_FG 구분"}
    Branch_SET_FG -- 2 (레시피 상품) --> Proc_Recipe["Sp_SUB_RECIPE_IO_P_Service<br>(레시피 수불 처리)"]
    Branch_SET_FG -- 3 (세트 상품) --> Proc_Set["Sp_SUB_SET_IO_P_Service<br>(세트 수불 처리)"]
    Branch_SET_FG -- 그 외 (일반 단품) --> Proc_Item["Sp_SUB_IMTRLG_I_Service<br>(기본 수불 처리)"]
    Proc_Recipe -- 레시피 원부재료 추적 --> Loop_Recipe@{ label: "원부자재 루프<br>(STOCK_YN='Y' & WEIGHT &gt; 0)" }
    Loop_Recipe -- 각 원부재료에 대해 --> Proc_Item
    Proc_Set -- 세트 구성 상품 추적 --> Loop_Set["구성 상품 루프<br>(단품/레시피 분기)"]
    Loop_Set -- 구성 품목별 --> Proc_Item
    Proc_Item -- "4. 수불 로그 인서트" --> DB_IMTRLG@{ label: "IMTRLGTB<br>(수불 대기 로그, PROC_YN='N')" }
    DB_IMTRLG -- "5. 재고 반영 배치<br>(DmIMTR01Service)" --> DB_STOCK["실시간 가감산 및 동기화<br>(현재고: IMCRIOTB<br>일/월수불: IMDDIOTB/IMMMIOTB)"]
    DB_STOCK -- "6. 화면 실시간 조회" --> UI_STOCK["현재고조회<br>(hq_s_00001 / st_s_00007)"]
    n1["Text Block"]

    Loop_Recipe@{ shape: rect}
    DB_IMTRLG@{ shape: rect}
    n1@{ shape: text}
    style DB_SLIP fill:#f9f,stroke:#333,stroke-width:2px
    style Branch_SET_FG fill:#ff9,stroke:#333,stroke-width:2px
    style DB_IMTRLG fill:#bbf,stroke:#333,stroke-width:2px
    style DB_STOCK fill:#bfb,stroke:#333,stroke-width:2px

 

---

💾 이미지와 PDF로도 저장 가능

Mermaid Live에서는 작성한 다이어그램을

• PNG
• SVG
• PDF

등 다양한 형식으로 다운로드할 수 있다.

 

---

📚 지원하는 다이어그램 종류

Mermaid는 단순히 플로우차트만 지원하는 것이 아니다.

• ✅ Flowchart
• ✅ Sequence Diagram
• ✅ Class Diagram
• ✅ ERD
• ✅ State Diagram
• ✅ Gantt Chart
• ✅ Pie Chart
• ✅ Git Graph

등 다양한 다이어그램을 지원하고 샘플도 제공한다.

진짜 기깔난다.

 

 

---

🤔 기존에는 어떻게 작성했을까?

예전에는 다이어그램을 작성할 때 보통

• draw.io
• Visio
• PowerPoint

같은 툴을 많이 사용했다.

하지만 작성하는 것도 번거롭고, 수정도 귀찮다.

무엇보다 이미지 형태로 관리되기 때문에 버전 관리나 수정 이력 추적도 쉽지 않다.

물론 Draw.io는 디자인 자유도가 매우 높아서

• 기획 문서
• 발표 자료
• 아키텍처 설계

같은 용도로는 여전히 최고의 선택 중 하나이다.

하지만 개발자가 작성하는 문서라면 Mermaid가 훨씬 간편하다.

✔ README
✔ 개발 문서
✔ API 흐름도
✔ Git 버전 관리
✔ 코드 리뷰

등에서는 Mermaid가 특히 강력하다.

---

🚀 Mermaid가 빛나는 이유

Mermaid는 코드(Diagrams as Code) 기반이다.

즉,

텍스트만 수정하면 다이어그램도 함께 수정된다.

그래서

• ✨ 수정이 쉽고
• ✨ Git으로 변경 이력 관리가 쉽고
• ✨ 코드 리뷰도 편하다.

개발자 입장에서는 정말 큰 장점이다. 

 

---

🎉 이게 끝?

정말 얼마나 쉽게 작성할 수 있는지 보자.

아래 단 3줄만 작성하면 다이어그램이 만들어진다.

 

샘플 코드

graph TD
    A[회원] --> B[로그인]
    B --> C[메인 화면]

 

 

graph TD
    A[회원] --> B[로그인]
    B --> C[메인 화면]

<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
</script>

<pre class="mermaid">
graph TD
    A[회원] --> B[로그인]
    B --> C[메인 화면]
</pre>

 

 

 

플레이사이트 : https://mermaid.live

DOCS: https://mermaid.js.org/syntax/flowchart.html