Mermaid 다이어그램

Craft는 Mermaid 다이어그램을 지원합니다. 간단한 텍스트 문법으로 시각적인 다이어그램을 만들 수 있는 기능입니다. 몇 줄의 코드만 입력하면 Craft가 문서 안에 선명하고 깔끔한 다이어그램으로 렌더링해 드립니다. 다이어그램은 입력하는 동시에 실시간으로 업데이트되며, 모든 플랫폼에서 사용할 수 있고 공유 및 게시된 페이지에서도 표시됩니다.

Mermaid 다이어그램 삽입하기

다음 방법 중 하나를 사용하여 Mermaid 다이어그램을 추가할 수 있습니다.

/mermaid를 입력하고 Mermaid 다이어그램을 선택합니다
사이드바의 삽입 패널에서 Mermaid 다이어그램을 선택합니다 (리치 블록 항목 아래)
```mermaid 코드 펜스가 포함된 마크다운을 붙여넣으면 Craft가 자동으로 변환합니다

편집하기

Mermaid 블록을 열면 분할 보기가 표시됩니다. 위쪽에는 렌더링된 다이어그램이, 아래쪽에는 코드 편집기가 나타납니다. 코드를 입력하는 즉시 미리보기가 업데이트됩니다.

macOS
iOS / iPad
Web / Windows

Mermaid 블록을 클릭하면 분할 보기로 열립니다. 위쪽에 다이어그램 미리보기가, 아래쪽에 코드 편집기가 표시됩니다. 미리보기를 두 번 탭하면 확대됩니다.

Mermaid 문법을 외울 필요가 없습니다. Craft AI 어시스턴트가 다이어그램을 대신 생성해 드립니다. 원하는 내용을 설명하기만 하면 코드를 작성해 줍니다.

지원되는 다이어그램 유형

순서도

프로세스, 의사결정, 워크플로를 시각적으로 표현합니다. 위에서 아래 방향 레이아웃은 graph TD, 왼쪽에서 오른쪽 방향은 graph LR을 사용합니다.

graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Do This]
    B -->|No| D[Do That]
    C --> E[Done]
    D --> E

시퀀스 다이어그램

시간 흐름에 따른 사람 또는 시스템 간의 상호작용을 표현합니다.

sequenceDiagram
    User->>App: Place order
    App->>Payment: Charge card
    Payment-->>App: Confirmed
    App-->>User: Order placed

상태 다이어그램

상태 간 전환을 시각화합니다. 주문 추적, 워크플로, 프로세스 표현에 적합합니다.

stateDiagram-v2
    [*] --> Draft
    Draft --> Review
    Review --> Published
    Review --> Draft : Needs changes
    Published --> [*]

클래스 다이어그램

시스템의 구조, 즉 구성 요소와 그 속성, 상호 관계를 표현합니다.

classDiagram
    class Document {
        +String title
        +Date created
        +publish()
    }
    class Folder {
        +String name
        +getDocuments()
    }
    Folder "1" --> "*" Document : contains

ER 다이어그램

데이터 관계를 모델링합니다. 데이터베이스 설계 및 기획에 유용합니다.

erDiagram
    AUTHOR ||--o{ POST : writes
    POST ||--o{ COMMENT : has

차트

막대 차트, 꺾은선 차트 또는 두 가지를 조합하여 만들 수 있습니다.

xychart-beta
    title "Monthly Revenue ($K)"
    x-axis [Jan, Feb, Mar, Apr, May, Jun]
    y-axis "Revenue" 0 --> 120
    bar [45, 62, 78, 55, 89, 105]

테마 변경하기

Mermaid 다이어그램은 코드 편집기 테마에 맞게 자동으로 조정됩니다. 스타일을 변경하려면 툴바의 페인트브러시 아이콘을 탭하고 원하는 테마를 선택하세요. Tokyo Night, Dracula, Nord, GitHub 등 다양한 옵션을 제공합니다. 다이어그램은 즉시 업데이트되며, 문서의 라이트 모드 또는 다크 모드 설정도 반영됩니다.

공유 및 게시

Mermaid 다이어그램은 공유 및 게시된 페이지에서도 렌더링됩니다. 링크를 통해 페이지를 보는 모든 사용자에게 코드가 아닌 완성된 다이어그램이 표시됩니다. 별도의 설정이 필요하지 않습니다.

가져오기 및 내보내기

마크다운 가져오기: ```mermaid 코드 펜스가 포함된 마크다운을 붙여넣거나 가져오면 Craft가 자동으로 Mermaid 블록을 생성합니다.
마크다운 내보내기: Mermaid 블록은 표준 ```mermaid 코드 펜스 형식으로 내보내지며, 다른 도구와도 호환됩니다.

도움말

'Invalid Mermaid diagram'이 표시되면 어떻게 하나요?

대부분 코드에 문법 오류가 있을 때 발생합니다. 오타나 누락된 화살표가 없는지 확인해 보세요. 다른 도구에서 문법을 복사한 경우, Craft는 순서도, 시퀀스 다이어그램, 상태 다이어그램, 클래스 다이어그램, ER 다이어그램, XY 차트를 지원하며 파이 차트, 간트 차트, 마인드맵 등은 현재 지원되지 않습니다.

AI 어시스턴트로 Mermaid 다이어그램을 작성할 수 있나요?

네, 가능합니다. 원하는 다이어그램을 설명하면 Craft AI 어시스턴트가 Mermaid 코드를 생성해 드립니다. 기존 다이어그램을 수정하거나 확장하는 것도 요청할 수 있습니다.

큰 다이어그램을 확대할 수 있나요?

Mac과 iPad에서는 다이어그램 미리보기를 두 번 탭하면 확대됩니다. 웹에서는 큰 다이어그램의 경우 전체 화면 보기를 사용하세요.

Mermaid는 다양한 도구에서 널리 사용되는 오픈 표준입니다. mermaid.js.org를 방문하여 각 다이어그램 유형의 전체 문법을 확인해 보세요.

Write & Edit

Organize & Find

Plan & Do

Share & Publish

AI Assistant