Mermaid

<colcolor=#fff,#fff><bgcolor=#ff3670,#ff3670> Mermaid
<colbgcolor=#ff3670,#ff3670> 종류	다이어그램 기술 언어
최초 개발자	Knut Sveidqvist
출시	2014년 11월 16일#
안정 버전	v11.12.1 (2025년 10월 27일)
개발 언어	TypeScript
플랫폼	웹 브라우저
확장자	.mmd .mermaid#
라이선스	MIT 라이선스#
링크

1. 개요

2. 역사

3. 다이어그램 종류

• 플로우차트(flowchart)
  가장 기본적이고 자주 쓰이는 다이어그램이다. shape 속성으로 노드 모양을 바꿀 수 있기에 가끔 아키텍처 대용으로 쓰이기도 한다.
• 순서도(sequenceDiagram)
  흐름과 분기를 나열하는 순서도가 아닌, UML 등에서 볼 수 있는 정석적인 시퀀스 차트이다. 전자의 경우는 flowchart를 사용한다.
• 클래스 다이어그램(classDiagram)
• 상태 기계(stateDiagram-v2)
• ERD(erDiagram)
  상대적으로 단순한 편이기 때문에 데이터베이스 수준 ERD를 그리는 게 아니라 전반적인 아키텍처만 그리는 데 용이하다. 디테일한 ERD를 그리려면 Prisma DSL이나 다른 언어를 사용하는 게 좋다.
• 유저 스토리(journey)
• 간트 차트(gantt)
• 원 그래프(pie)
• 사분면 차트(quadrantChart)
• 요구사항 클래스(requirementDiagram)
• Git(gitGraph)
• C4 차트(C4Context)
• 마인드맵(mindmap)
• 타임라인(timeline)
• ZenUML(zenuml)
  ZenUML 문법 지원용 블록.
• 생키 차트(sankey)
• 그래프(xychart)
• 블록 다이어그램(block)
• 패킷 구조(packet)
• 칸반(kanban)
• 아키텍처(architecture-beta)
• 방사형 그래프(radar-beta)
• 트리맵(treemap-beta)

4. 문법

4.1. 플로우차트

flowchart LR
    A --> B

A[Hello, Namuwiki!]

A["`**Hello**, <u>Namuwiki</u>`"]

4.2. ERD

erDiagram
customers {
	INT id
	VARCHAR2(32) name
	VARCHAR2(256) email
}

erDiagram
customers {
	INT id PK "고객 고유 식별자"
	VARCHAR2(32) name "고객 성함"
	VARCHAR2(256) email UK "고객 인증용 이메일 주소"
}

5. 특징

6. 사용

6.1. 소프트웨어별 상세

• GitHub - 2022년 2월 14일부터 GFM에서 내장 지원된다.# 저장소, 이슈, GitHub Wiki, Gist에서 전부 지원된다. 단, 현재 Gist 프리뷰 모드에서는 렌더가 올바르게 되지 않으며, 이 경우 저장해야만 결과를 볼 수 있다.
• GitLab - GLFM에서 PlantUML, Korki 등과 함께 지원되는 세 다이어그램 언어 중 하나이다.# 전반적인 사용법은 GitHub과 비슷하다.
• Visual Studio Code - MermaidChart.vscode-mermaid-chart 확장으로 독립/임베드된 코드의 구문 강조, 개별 차트 단위 preview가 가능하다. 다만 다이어그램 언어 특성상 필요한 기능이 그닥 많지 않고 나머지는 죄다 AI 및 MermaidChart 클라우드 관련 기능만 있기 때문에 평은 좋지 않은 편. 특히 개별 차트 단위의 live preview만 가능하고 마크다운 전체의 프리뷰는 불가능하다는 치명적인 단점이 있다.#
• 위 확장의 경우 기본 마크다운 프리뷰에서는 렌더가 안 되기 때문에 bierner.markdown-mermaid 같은 별도의 마크다운 프리뷰 확장을 사용하는 경우도 있다. 현재 Mermaid 관련으로는 해당 확장이 vscode 마켓플레이스에서 제일 다운로드 수가 많기 때문에 검색하면 본 확장이 맨 위에 뜨는 경우가 많다.
• JetBrains 계열 IDE - 공식 확장으로 구문 강조, preview 등이 가능하다.
• Jupyter Notebook - #7096이 머지되며 7.1 버전##부터 내장으로 지원된다.
• 기존에는 jupyterlab-markup, mermaid-magic 등의 서드파티 확장을 이용할 수 있었다.
• Zed - 후술할 Tree-sitter 파서 기반으로 만든 zed-mermaid 확장이 존재한다.
• 구글 문서 - 드라이브 확장으로 렌더링이 가능하다.
• Slack - 확장을 설치해 프리뷰를 볼 수 있다.
• mdBook - mdbook-mermaid 등의 전처리기를 사용해 SVG로 사전 렌더할 수 있다.
• Notion - 2023년 이후로 내장 지원된다.## 별도의 블럭이 있는 것은 아니고 코드 블럭에서 언어를 Mermaid로 선택하고 코드를 작성하면 밑에 프리뷰가 생성된다.
• MediaWiki
• Extension:Mermaid
• Obsidian - OFM에서 내장 지원된다.#
• Typora - 내장 지원된다.#
• LLM 인터페이스 - 대부분의 상용 서비스가 마크다운을 기반으로 출력하고 렌더하는 만큼 TeX 임베딩 등 고급 마크다운을 지원하는 여러 서비스에서 내장으로 지원되고 있다.
• ChatGPT - 공식 플러그인이 존재한다.###
• DeepSeek - 렌더링이 내장 지원된다.

7. 파생 소프트웨어

• oxdraw - 차트 변경을 주석으로 보존시켜서 JS 없이도 렌더가 가능하게 만들어주는 소프트웨어. 가령 Typst엔 Mermaid 지원이 없지만 oxdraw를 쓰면 이런 것(...)이 가능하다.
• tree-sitter-mermaid - Tree-sitter 파서.

8. 기타

• 이름인 Mermaid는 별 뜻이 없다고 한다. 개발자인 Knut Sveidqvist에 따르면 자녀들이 TV로 인어공주를 보고 있었고 그대로 이름을 Mermaid라 지었다고.#
• 개발자인 Knut Sveidqvist가 창업한 Mermaid Chart라는 이름의 회사가 존재한다. 서비스 자체는 흔한클라우드 협업에 AI 연동 정도가 전부라 큰 장점은 없다.

9. 관련 문서

• Graphviz
• 그래프 기술 언어

10. 외부 링크

• mermaid.live - 공식 라이브 에디터. monaco를 내장해 에디터를 띄워주며 우측에서 실시간 프리뷰를 확인할 수 있다.