Diagrams

Choose a diagram

Flowchart만으로 모든 관계를 표현할 필요는 없습니다. 짧은 절차는 목록, 항목 비교는 표가 더 간단할 수 있습니다. Mermaid에 기본 포함된 다른 유형도 같은 펜스에서 사용할 수 있습니다. 별도 등록이 필요한 외부 다이어그램과 아이콘 팩은 자동 포함하지 않습니다.

Flowchart

```mermaid
flowchart LR
    Draft[작성] --> Review{확인}
    Review -->|수정| Draft
    Review -->|승인| Publish[배포]
```

flowchart LR
    Draft[작성] --> Review{확인}
    Review -->|수정| Draft
    Review -->|승인| Publish[배포]

Sequence

```mermaid
sequenceDiagram
    participant Reader as 독자
    participant Site as 문서 사이트
    Reader->>Site: 문서 열기
    Site-->>Reader: 본문 HTML
    Reader->>Site: Mermaid 모듈 요청
    Site-->>Reader: 필요한 다이어그램 코드
```

sequenceDiagram
    participant Reader as 독자
    participant Site as 문서 사이트
    Reader->>Site: 문서 열기
    Site-->>Reader: 본문 HTML
    Reader->>Site: Mermaid 모듈 요청
    Site-->>Reader: 필요한 다이어그램 코드

State

```mermaid
stateDiagram-v2
    [*] --> Draft
    Draft --> Review: 검토 요청
    Review --> Draft: 수정 요청
    Review --> Published: 승인
    Published --> [*]
```

stateDiagram-v2
    [*] --> Draft
    Draft --> Review: 검토 요청
    Review --> Draft: 수정 요청
    Review --> Published: 승인
    Published --> [*]

Entity relationship

```mermaid
erDiagram
    SHELF ||--o{ BOOK : contains
    SHELF {
        string name
    }
    BOOK {
        string title
        string readingStatus
    }
```

erDiagram
    SHELF ||--o{ BOOK : contains
    SHELF {
        string name
    }
    BOOK {
        string title
        string readingStatus
    }

Tree View

들여쓰기로 계층을 표현합니다. 폴더 이름 끝에는 /를 붙입니다. 기존 ├──, └──, │ 형식도 treeView-beta 아래에서 사용할 수 있습니다. Images에 실제 예시가 있습니다. Tree View는 Mermaid의 beta 문법이므로 버전 갱신 때 예제를 함께 확인합니다.

```mermaid
treeView-beta
    content/
        README.md
        asset/
            sample.svg
        public/
            guide/
                screen.md
        private/
```

treeView-beta
    content/
        README.md
        asset/
            sample.svg
        public/
            guide/
                screen.md
        private/

Themes and rendering

다이어그램은 사이트의 밝은 테마와 어두운 테마를 따릅니다. 개별 다이어그램의 테마를 지정하려면 코드 블록 안에 다음 설정을 작성합니다.

```mermaid
---
config:
  theme: neutral
---
flowchart LR
    Draft --> Published
```

접힌 Details 안의 다이어그램은 펼친 뒤 렌더링합니다. 같은 페이지에서 여러 유형을 함께 사용할 수 있습니다. 한 다이어그램의 오류가 나머지를 막지 않습니다. 문법 오류가 있으면 브라우저에 안내와 원문을 표시합니다. 정적 빌드 성공만으로 다이어그램 문법이 올바른지 확인할 수는 없으므로 preview에서도 확인합니다. 원문은 다이어그램 하나당 50,000자까지 렌더링합니다. 제한을 넘겨도 원문과 오류 안내를 유지합니다. 다이어그램을 불러오지 못하거나 JavaScript가 꺼진 경우에는 원문을 표시합니다. 재접속이나 문법 수정 후 페이지를 새로고침하면 다시 렌더링합니다.

그림의 핵심과 독자가 판단할 내용은 본문에도 적습니다. 스크린 리더 설명이 필요하면 Mermaid의 accTitle과 accDescr를 지원하는 유형에서 함께 작성합니다. 공식 툴팁은 지원하지만 strict 보안 모드를 유지하므로 임의 JavaScript 콜백과 클릭 동작은 활성화하지 않습니다.

자세한 문법은 Mermaid 유형별 문법, 공식 테마, Tree View 문서를 참고합니다.