흔히 쓰는 모든 다이어그램 유형에 바로 사용할 수 있는 실제 Mermaid 예시입니다. 각 예시는 아래에서 라이브로 렌더링됩니다 — 에디터에서 열어 수정하거나, 소스를 그대로 복사해 문서에 붙여 넣으세요. 아무것도 업로드되지 않습니다.
단계는 사각형, 분기 판단은 마름모, 분기 경로는 레이블이 달린 화살표로 — 가장 기본이 되는 프로세스 다이어그램입니다.
flowchart TD
Start([User visits app]) --> A{Logged in?}
A -->|Yes| Home[Show dashboard]
A -->|No| Login[Show login form]
Login --> B{Credentials valid?}
B -->|No| Err[Show error] --> Login
B -->|Yes| Token[Issue session token] --> Home무엇이 무엇을 어떤 순서로 호출하는지 보여줍니다. 실선 화살표는 요청, 점선 화살표는 응답으로 — API와 인증 흐름에 안성맞춤입니다.
sequenceDiagram
participant C as Client
participant API
participant DB as Database
C->>API: POST /orders
API->>DB: INSERT order
DB-->>API: order_id
API-->>C: 201 Created까마귀 발(crow's-foot) 카디널리티로 데이터베이스를 모델링합니다. "한 사용자가 여러 게시글을 작성한다"를 그림에서 바로 읽어낼 수 있습니다.
erDiagram
USER ||--o{ POST : writes
POST ||--o{ COMMENT : has
USER ||--o{ COMMENT : makes
POST }o--o{ TAG : "tagged with"클래스, 필드, 메서드, 그리고 관계를 표현합니다. "<|--"는 상속이며, 가시성 표시(+/-)는 인터페이스를 나타냅니다.
classDiagram
class Animal {
+String name
+move()
}
class Dog {
+bark()
}
class Cat {
+meow()
}
Animal <|-- Dog
Animal <|-- Cat어떤 대상이 가질 수 있는 상태와 그 상태들 사이를 이동시키는 이벤트를 표현합니다 — 주문 수명 주기, 승인 흐름, 프로토콜에 적합합니다.
stateDiagram-v2
[*] --> Draft
Draft --> Submitted: submit
Submitted --> UnderReview: assigned
UnderReview --> Approved: approve
UnderReview --> Rejected: reject
Rejected --> Draft: revise
Approved --> [*]몇 줄의 텍스트로 날짜가 있는 타임라인을 만듭니다. 한 작업이 다른 작업 "after"에 시작한다고 적으면 차트가 알아서 연결해 줍니다.
gantt
title Sprint 24
dateFormat YYYY-MM-DD
section Dev
Feature A :a, 2026-02-02, 5d
Feature B :b, after a, 4d
section QA
Test pass :after b, 3d순수한 들여쓰기만으로 — 가장 적게 들여쓴 줄이 중심이고, 더 깊이 들여쓴 모든 단계가 가지입니다. 일반 텍스트로 브레인스토밍하세요.
mindmap
root((Blog ideas))
Tutorials
Mermaid tips
Git workflows
Opinion
Tooling rants
Lists
Best CLIs여기 있는 모든 예시는 일반 Mermaid 텍스트입니다 — GitHub, GitLab, Obsidian이 기본으로 렌더링하는 바로 그 문법이죠. 에디터에서 하나를 열고, 노드 이름을 나만의 것으로 바꾼 뒤, SVG나 PNG로 내보내세요.
함께 보기: Mermaid 편집기 · GitHub에 임베드 · Mermaid vs PlantUML
네. 어떤 예시든 자유롭게 복사, 편집, 재사용하세요 — 가입도, 계정도, 출처 표기도 필요 없습니다. 다이어그램은 브라우저에서 렌더링되므로 아무것도 업로드되지 않습니다.
아무 예시에서나 "에디터에서 열기"를 클릭하세요. 정확한 Mermaid 소스가 라이브 에디터에 로드되며, 거기서 수정하고 즉시 다시 렌더링되는 것을 확인한 뒤 SVG나 PNG로 내보낼 수 있습니다.
네. 소스를 복사해 README, 이슈, 풀 리퀘스트의 ```mermaid 코드 블록 안에 붙여 넣으세요 — GitHub과 GitLab은 Mermaid를 기본으로 렌더링하므로 이미지가 필요 없습니다.
플로우차트, 시퀀스, ER(데이터베이스), UML 클래스, 상태, 간트, 마인드맵입니다. 모두 표준 Mermaid 다이어그램 유형이며, 각각 더 많은 예시와 문법 치트시트가 있는 전용 생성기로 연결됩니다.
네 — 아무 예시든 에디터에서 연 다음 SVG 또는 PNG 내보내기 버튼을 사용하세요. SVG는 어떤 크기에서도 선명하게 유지되고, PNG는 슬라이드와 문서에 편리합니다.