정정지용
기술스택 목록
도구

Mermaid

프로젝트 1개에서 사용했습니다. 각 프로젝트에서 어떤 역할로 썼는지 아래에 정리했습니다.

이 기술은 무엇인가요?

텍스트로 작성한 문법을 다이어그램으로 자동 변환해주는 다이어그램 생성 도구

Mermaid는 흐름도, 시퀀스 다이어그램, 클래스 다이어그램, 간트 차트 등을 마크다운과 비슷한 텍스트 문법으로 작성하면 자동으로 그림으로 렌더링해주는 JavaScript 기반 도구입니다. 그래픽 편집기로 도형을 일일이 그리고 배치하는 대신, 코드처럼 텍스트로 구조를 기술하면 레이아웃과 스타일을 자동으로 계산해줍니다. 문서와 다이어그램을 같은 저장소에서 버전 관리하고, 코드 변경에 맞춰 다이어그램도 쉽게 갱신할 수 있도록 만들어졌습니다.

이럴 때 사용합니다

  • 코드나 문서와 함께 다이어그램을 버전 관리하고 싶을 때
  • 마크다운 문서에 흐름도나 시퀀스 다이어그램을 간단히 삽입하고 싶을 때
  • 구조화된 데이터(레포 분석 결과 등)를 클라이언트에서 동적으로 다이어그램으로 렌더링하고 싶을 때
  • 그래픽 편집 도구 없이 텍스트만으로 빠르게 다이어그램 초안을 만들고 싶을 때

핵심 개념

Diagram-as-code
다이어그램을 그림 파일이 아닌 텍스트 코드로 정의하는 방식으로, Git 등으로 버전 관리와 리뷰가 가능합니다.
Diagram type
flowchart, sequenceDiagram, classDiagram 등 다이어그램 종류마다 고유한 문법 키워드로 시작하며, 종류별로 표현할 수 있는 요소와 관계가 다릅니다.
Node & Edge
노드는 다이어그램의 개체(박스, 원 등)를, 엣지는 노드 간의 연결선이나 관계를 나타내는 기본 구성 요소입니다.
Renderer
텍스트 문법을 파싱해 SVG 이미지로 그려내는 부분으로, 브라우저나 빌드 도구에서 실행됩니다.
Theme
다이어그램의 색상, 폰트 등 시각적 스타일을 미리 정의된 테마나 커스텀 설정으로 바꿀 수 있는 기능입니다.

간단한 flowchart 예시

사용자 요청이 인증 여부에 따라 갈라지는 흐름을 flowchart 문법으로 정의한 예시입니다.

예시
flowchart TD
    A[클라이언트 요청] --> B{인증 여부}
    B -- 성공 --> C[데이터 조회]
    B -- 실패 --> D[로그인 페이지로 이동]
    C --> E[결과 반환]

처음 쓸 때 흔한 함정

  • 노드 개수가 많아지면 자동 레이아웃이 의도와 다르게 배치되어 가독성이 떨어질 수 있습니다.
  • 다이어그램 종류마다 문법이 달라서 하나를 익혔다고 다른 타입도 바로 되는 것은 아닙니다.
  • 클라이언트에서 렌더링할 경우 초기 로딩 시 파싱·렌더링 지연이 체감될 수 있습니다.

위 개요는 기술 학습을 돕기 위해 자동 생성된 일반 설명입니다. 정확한 사양과 최신 정보는 공식 문서를 확인하세요.

프로젝트별 활용 방식

위 개념이 실제 프로젝트에서 어떻게 쓰였는지 보여줍니다.

함께 사용한 기술

위 프로젝트들에서 같이 쓰인 다른 기술입니다.

Claude CLIGitHub ActionsGitHub APINext.jsNode.jsReactShell ScriptTailwind CSSTypeScript