Mermaid 편집기
입력 대기 중
Mermaid 다이어그램 에디터란?
Mermaid는 JavaScript 기반의 다이어그램 생성 도구로, Markdown과 유사한 텍스트 구문을 사용하여 다양한 다이어그램을 생성합니다. 수동으로 도형을 드래그할 필요 없이 간단한 텍스트 설명만 작성하면 플로우차트, 시퀀스 다이어그램, 클래스 다이어그램 등을 자동으로 생성합니다.이 도구는 온라인 Mermaid 편집 환경을 제공하며, 실시간 미리보기, 드래그 확대/축소, 내보내기 기능을 지원하여 개발자가 빠르게 다이어그램을 만들고 공유할 수 있도록 도와줍니다.
사용 방법
사용 방법
- 왼쪽 편집기에 Mermaid 구문을 입력하세요
- 오른쪽 패널에서 다이어그램이 실시간으로 렌더링됩니다
- 마우스로 드래그하고 스크롤 휠로 확대/축소하세요
- 내보내기 버튼을 클릭하여 PNG 또는 SVG로 저장하세요
다이어그램 점검 사항
- 의미 있는 편집 후마다 렌더링하세요. Mermaid 오류는 주로 들여쓰기, 이스케이프되지 않은 구두점, 또는 선택한 다이어그램 유형에서 지원되지 않는 구문 때문에 발생합니다.
- 내보내기 전에 다이어그램이 사용될 크기에서 레이블, 화살표, 줄 바꿈이 읽기 쉬운지 확인하세요.
활용 사례
기술 원리
Mermaid는 2014년 Knut Sveidqvist가 시작한 오픈소스 다이어그램 렌더링 라이브러리입니다. 핵심 아이디어는 사람이 읽을 수 있는 DSL(도메인 특화 언어)을 받아 파서를 통해 SVG 그래픽으로 변환하는 것입니다. 전체 파이프라인은 세 단계로 구성됩니다: jison으로 생성된 렉서/파서가 소스를 내부 데이터 구조로 파싱하고, 다이어그램 유형별 레이아웃 알고리즘이 노드와 엣지의 좌표를 계산한 뒤, d3가 레이아웃을 SVG 요소로 렌더링합니다. 다이어그램마다 다른 레이아웃 엔진을 사용합니다: 플로우차트는 기본적으로 dagre(계층 방향 그래프 레이아웃)를 사용하며 v10부터 ELK(더 강력하지만 무거움)도 지원합니다. 시퀀스 다이어그램은 참가자를 수평으로 배치하고 메시지를 수직으로 쌓는 사용자 정의 타이밍 레이아웃을 사용합니다. 간트 차트는 의존성이 있는 타임축 위에 작업을 수동으로 배치합니다. 클래스 다이어그램과 상태 다이어그램도 dagre를 기반으로 합니다. 레이아웃 알고리즘이 가독성을 결정하는데, dagre는 Sugiyama 프레임워크를 따라 순위를 할당하고 엣지 교차를 최소화하며 간격을 조밀하게 합니다. 이는 일반적인 크기의 플로우차트에 잘 작동합니다. Graphviz와 비교하면 Mermaid의 구문은 자연어에 더 가깝고(예: A --> B) 브라우저에서 라이브 미리보기와 함께 네이티브로 렌더링됩니다. Graphviz의 DOT 언어는 더 저수준이며 레이아웃 엔진(fdp, neato 등)이 더 성숙하지만 로컬 설치가 필요하고 기본 스타일이 낡아 보입니다. Mermaid는 현재 15가지 이상의 다이어그램 유형을 지원합니다 — 플로우차트, 시퀀스 다이어그램, 클래스 다이어그램, 상태 다이어그램, ER 다이어그램, 간트 차트, 파이 차트, 사용자 여정 맵, gitGraph, 마인드맵, 타임라인, 사분면 차트, 새키, XY 차트, 블록 등 — 소프트웨어 엔지니어링의 대부분의 그리기 요구를 충족합니다.
- 파싱: jison으로 생성된 파서가 DSL 텍스트를 내부 AST로 변환합니다. 각 다이어그램 유형은 자체 문법 파일을 가집니다.
- 레이아웃 알고리즘: 플로우차트는 dagre를 사용한 계층 방향 그래프 레이아웃을 사용하며 ELK로 전환할 수 있습니다. 시퀀스와 간트 차트는 전용 레이아웃 로직을 사용합니다.
- 렌더링 엔진: SVG는 d3로 그려지며, 노드는 g/rect/path/text 요소를 사용하고 화살표는 마커로 정의됩니다.
- 다이어그램 유형: 플로우차트, 시퀀스, 클래스, 상태, ER, 간트, 파이, 사용자 여정 맵, gitGraph, 마인드맵 등 15가지 이상을 지원합니다.
- Graphviz와의 비교: Mermaid는 친화적인 구문과 네이티브 웹 지원을 제공하고, Graphviz는 더 정교한 레이아웃을 제공하여 크고 복잡한 그래프에 적합합니다.
- 테마: themeVariables 설정이나 init 지시어를 통해 default, dark, forest, neutral 등 내장 테마를 전환할 수 있습니다.
예시
플로우차트
flowchart TD
A[시작] --> B{로그인 여부?}
B -- 예 --> C[홈 페이지]
B -- 아니오 --> D[로그인 페이지]
D --> E[자격 증명 입력]
E --> C
C --> F[종료]시퀀스 다이어그램
sequenceDiagram
participant Browser
participant Server
participant Database
Browser->>Server: GET /api/user
Server->>Database: SELECT * FROM users
Database-->>Server: 사용자 데이터
Server-->>Browser: JSON 응답간트 차트
gantt
title 프로젝트 계획
dateFormat YYYY-MM-DD
section 디자인
요구사항 분석 :a1, 2026-06-01, 7d
UI 디자인 :a2, after a1, 10d
section 개발
프론트엔드 :b1, after a2, 20d
백엔드 :b2, after a2, 18d
section 테스트
통합 테스트 :c1, after b1, 7d자주 묻는 질문
Mermaid는 어떤 다이어그램 종류를 지원하나요?
Mermaid는 플로차트, 시퀀스 다이어그램, 클래스 다이어그램, 상태 다이어그램, ER 다이어그램, 간트 차트, 파이 차트, 사용자 여정 지도, Git 그래프, 마인드맵, 사분면 차트를 지원합니다. 코드의 첫 줄에서 종류를 선언합니다(예: 'flowchart TD' 또는 'sequenceDiagram').
다이어그램에 syntax error가 표시되는 이유는 무엇인가요?
흔한 원인은 세미콜론이나 화살표 연산자 누락, 노드 라벨의 괄호 불일치(특수 문자가 들어가는 텍스트는 따옴표로 감싸세요: A["Hello (world)"]), 다이어그램 종류에 맞지 않는 화살표 사용(플로차트는 -->, 시퀀스는 ->>), 서브그래프의 들여쓰기 문제 등입니다. 오류 패널이 보통 파싱이 멈춘 줄을 알려줍니다.
다이어그램을 이미지로 내보내려면 어떻게 하나요?
내보내기 버튼으로 SVG(벡터, 확대 가능, 슬라이드와 문서에 권장) 또는 PNG(래스터, 채팅과 메일에 적합)로 저장할 수 있습니다. SVG 마크업을 복사해 HTML에 직접 삽입하거나 Figma, Illustrator에서 추가 편집할 수도 있습니다.
색상과 스타일을 커스터마이즈할 수 있나요?
네. 'classDef'로 CSS 형태의 스타일을 정의하고 'class A,B,C myStyle'로 적용합니다. 일회성 변경에는 'style A fill:#f9f,stroke:#333' 같은 인라인 오버라이드를 사용할 수 있습니다. 전역 테마는 첫 줄에 %%{init: {'theme':'forest'}}%%를 두면 됩니다. 내장 테마는 default, forest, dark, neutral, base가 있습니다.
길이나 복잡도에 제한이 있나요?
Mermaid는 노드 수백 개까지도 무리 없이 렌더링하지만, 그 이상이 되면 레이아웃 시간이 비선형으로 증가합니다. 다이어그램이 느리거나 알아보기 어렵다면 여러 다이어그램으로 나누어 링크하거나 서브그래프로 관련 노드를 묶으세요. 엣지 교차가 많아지면 자동 레이아웃의 결과가 더 나빠집니다.
노드에 하이퍼링크나 클릭 핸들러를 어떻게 추가하나요?
'click NodeId "https://example.com"'으로 노드를 링크로 만들거나, 'click NodeId callback "tooltip"'으로 mermaid.parseError에 등록한 JavaScript 콜백을 호출할 수 있습니다. 내보낸 SVG에서도 임베드한 페이지가 링크를 제거하지 않는 한 링크는 정상 동작합니다.
같은 Mermaid 코드를 다른 어디에서 렌더링할 수 있나요?
GitHub Markdown, GitLab, Notion, Obsidian, Typora, VS Code(확장 사용), 그리고 대부분의 최신 문서화 도구가 Mermaid 코드 블록을 기본 지원합니다. 같은 코드를 그대로 붙여 넣으면 각 플랫폼이 채택한 테마로 렌더링됩니다.