개발도구 · 2026년 7월 9일 · 읽는 시간 5분

다이어그램 그리기 귀찮아서 텍스트로 짜는 Mermaid

👉 Mermaid 다이어그램 에디터 바로 가기

Figma나 draw.io로 다이어그램 그리는 게 너무 손이 많이 가서, 텍스트로 빠르게 시각화할 수 없나 찾다가 Mermaid를 알게 됐다.

Mermaid가 유용한 상황

이런 경우들:

  • 시스템 아키텍처 문서화 → 코드와 함께 버전 관리 가능
  • ERD (Entity Relationship Diagram) → DB 스키마 시각화
  • 플로우차트 → 비즈니스 로직, 결정 흐름
  • 시퀀스 다이어그램 → API 호출 흐름
  • GitHub README → 마크다운에 바로 렌더링
  • Notion, Confluence → Mermaid 코드 블록 지원

GitHub Markdown에서 Mermaid를 공식 지원하면서 코드 주석이나 README에 다이어그램을 바로 넣는 문화가 생겼다.

Mermaid 주요 다이어그램 타입

플로우차트:

flowchart TD
  A[시작] --> B{로그인?}
  B -- 예 --> C[대시보드]
  B -- 아니오 --> D[로그인 페이지]
  D --> E[이메일/비밀번호 입력]
  E --> B

시퀀스 다이어그램:

sequenceDiagram
  participant 클라이언트
  participant API서버
  participant DB

  클라이언트->>API서버: POST /login
  API서버->>DB: 사용자 조회
  DB-->>API서버: 사용자 정보
  API서버-->>클라이언트: JWT 토큰 반환

ERD:

erDiagram
  USER {
    int id PK
    string email
    string name
    datetime created_at
  }
  ORDER {
    int id PK
    int user_id FK
    decimal total_amount
    string status
  }
  USER ||--o{ ORDER : "has"

클래스 다이어그램:

classDiagram
  class Animal {
    +String name
    +int age
    +makeSound() void
  }
  class Dog {
    +String breed
    +fetch() void
  }
  Animal <|-- Dog

간트 차트:

gantt
  title 프로젝트 일정
  dateFormat YYYY-MM-DD
  section 설계
    요구사항 분석    :2026-07-01, 5d
    DB 설계         :2026-07-06, 3d
  section 개발
    API 개발        :2026-07-09, 10d
    프론트엔드 개발  :2026-07-09, 10d

기존 방법의 문제

  • draw.io → 박스 하나하나 드래그, 연결선 잡기 힘듦, 시간 많이 씀
  • Figma → 디자이너 도구라 개발자에겐 과함
  • PlantUML → 별도 Java 환경 필요
  • Lucidchart → 유료, 무겁고 공유 불편
  • PowerPoint/Keynote → 텍스트 기반 수정 불가, 버전 관리 안 됨

코드처럼 텍스트로 다이어그램을 짜면 Git으로 버전 관리도 되고, 수정도 훨씬 빠르다.

그래서 만들었음

주요 기능:

  • Mermaid 코드 입력 → 실시간 다이어그램 렌더링
  • 다이어그램 PNG/SVG 다운로드
  • 예제 다이어그램 모음 (플로우차트, 시퀀스, ERD 등)
  • 문법 오류 감지 및 안내
  • 다크/라이트 테마 선택

실제로 써보니

좋은 점:

  • 텍스트 기반 → 빠른 수정, Git 버전 관리
  • 실시간 미리보기 → 오타 즉시 확인
  • GitHub/Notion에서 바로 사용 가능한 코드 생성
  • PNG/SVG 내보내기 → 문서에 바로 넣기

한계:

  • 복잡한 다이어그램은 레이아웃 자동 배치가 원하는 대로 안 될 수 있음
  • 노드 위치를 세밀하게 제어하기 어려움
  • 스타일링이 제한적 (draw.io처럼 자유롭지 않음)

사용법

  1. 왼쪽에 Mermaid 코드 입력 (또는 예제 선택)
  2. 오른쪽에서 실시간 렌더링 확인
  3. PNG/SVG로 내보내기 또는 코드 복사

써보기

👉 Mermaid 다이어그램 에디터 바로 가기

시스템 설계 문서화하거나 README에 다이어그램 넣을 때 써보면 편함.

#Mermaid #다이어그램 #플로우차트 #ERD #시퀀스다이어그램

← 블로그 목록으로

광고