📐 다이어그램 (Mermaid 19종)

에디콘은 19종의 Mermaid 다이어그램을 자동으로 감지해 실시간 SVG로 렌더링합니다. 흐름도·시퀀스·클래스·ER·간트·마인드맵·타임라인 등 — AI가 만들어준 다이어그램 코드를 그대로 붙여넣기만 하면 즉시 시각화됩니다. 이 페이지의 모든 다이어그램은 실제로 작동하는 라이브 데모입니다.

📥 사용 방법

두 가지 방식 모두 자동 감지됩니다.

📋

방법 1: 코드 펜스

```mermaid로 시작하고 ```로 닫기. AI가 가장 자주 만드는 형식.

🪄

방법 2: 바로 입력

첫 줄이 flowchart TD, sequenceDiagram 같은 키워드면 펜스 없이도 자동 인식.

⚡ 첫 예시 — 흐름도

붙여넣은 텍스트

```mermaid
flowchart LR
  A[시작] --> B{조건?}
  B -->|예| C[작업1]
  B -->|아니오| D[작업2]
  C --> E[종료]
  D --> E
```

→

렌더링 결과 (실제 동작)

flowchart LR A[시작] --> B{조건?} B -->|예| C[작업1] B -->|아니오| D[작업2] C --> E[종료] D --> E

🎨 지원하는 19종 다이어그램 전체

아래 모든 키워드 중 어떤 것으로 시작하든 자동으로 Mermaid로 인식됩니다.

📊

흐름도 (가로)

graph LR

📊

흐름도 v2

flowchart TD

🔄

시퀀스

sequenceDiagram

📦

클래스

classDiagram

🔁

상태

stateDiagram-v2

🗄️

erDiagram

🗺️

사용자 여정

journey

📅

간트 차트

gantt

🥧

파이 차트

pie

🌳

Git 그래프

gitGraph

🧠

마인드맵

mindmap

⏱️

타임라인

timeline

🎯

사분면

quadrantChart

📋

요구사항

requirementDiagram

🏢

C4 컨텍스트

C4Context

💧

상키 (흐름)

sankey-beta

🧱

블록

block-beta

📈

XY 차트

xychart-beta

🔃

상태 (v1)

stateDiagram

🎬 라이브 데모 — 6종 주요 다이어그램

아래 모든 다이어그램은 실제로 이 페이지에서 렌더링되고 있습니다. 코드를 복사해서 노트에 붙여넣으면 똑같이 작동합니다.

1. 시퀀스 다이어그램 sequenceDiagram

sequenceDiagram
  participant 사용자
  participant 에디터
  participant AI
  사용자->>에디터: 표 붙여넣기
  에디터->>AI: 형식 분석
  AI-->>에디터: 표 인식 완료
  에디터-->>사용자: HTML 테이블 표시

sequenceDiagram participant 사용자 participant 에디터 participant AI 사용자->>에디터: 표 붙여넣기 에디터->>AI: 형식 분석 AI-->>에디터: 표 인식 완료 에디터-->>사용자: HTML 테이블 표시

2. 클래스 다이어그램 classDiagram

classDiagram
  class Note {
    +String title
    +String content
    +save()
  }
  class EdiCon {
    +detectTable()
    +detectMermaid()
  }
  Note --> EdiCon : uses

classDiagram class Note { +String title +String content +save() } class EdiCon { +detectTable() +detectMermaid() } Note --> EdiCon : uses

3. ER 다이어그램 erDiagram

erDiagram
  USER ||--o{ NOTE : owns
  NOTE ||--o{ BLOCK : contains
  BLOCK {
    string type
    text content
  }
  USER {
    string email
    string name
  }

erDiagram USER ||--o{ NOTE : owns NOTE ||--o{ BLOCK : contains BLOCK { string type text content } USER { string email string name }

4. 파이 차트 pie

pie title 노트 형식 분포
  "텍스트" : 42
  "표" : 23
  "코드" : 18
  "다이어그램" : 12
  "수식" : 5

pie title 노트 형식 분포 "텍스트" : 42 "표" : 23 "코드" : 18 "다이어그램" : 12 "수식" : 5

5. 간트 차트 gantt

gantt
  title 트리니티 개발 일정
  dateFormat YYYY-MM-DD
  section 에디콘
    Phase 1 :a1, 2026-01-01, 30d
    Phase 2 :a2, after a1, 25d
    Phase 4 (Mermaid) :a3, after a2, 20d
  section 아트콘
    아트콘 :b1, 2026-03-01, 60d

gantt title 트리니티 개발 일정 dateFormat YYYY-MM-DD section 에디콘 Phase 1 :a1, 2026-01-01, 30d Phase 2 :a2, after a1, 25d Phase 4 (Mermaid) :a3, after a2, 20d section 아트콘 아트콘 :b1, 2026-03-01, 60d

6. 마인드맵 mindmap

mindmap
  root((아이노트))
    에디콘
      URL 카드
      표 변환
      Mermaid
    아트콘
      아트콘
      5가지 테마
    브리콘
      브리핑
      공유

mindmap root((아이노트)) 에디콘 URL 카드 표 변환 Mermaid 아트콘 아트콘 5가지 테마 브리콘 브리핑 공유

🤖 AI에게 Mermaid 요청하기

ChatGPT·DeepSeek에게 다음과 같이 요청하면 Mermaid 코드로 답변합니다.

프롬프트 예시:
"우리 회사의 고객 응대 프로세스를 Mermaid flowchart로 그려 줘. ```mermaid 코드 블록으로 감싸서."

AI가 코드를 돌려주면 그대로 노트에 붙여넣기 — 자동 렌더링됩니다.

💡 잘 쓰는 팁

상황	방법
다이어그램 방향 바꾸기	`flowchart LR`(가로) / `TD`(위→아래) / `BT`(아래→위) / `RL`(가로 역방향)
한글 라벨 사용	대부분 OK. 노드 ID는 영문, 라벨에만 한글 권장: `A[작업 시작]`
다이어그램 크기 조절	노트 너비에 자동 맞춤. 모바일에서도 가로 스크롤로 보임.
소스 보기	다이어그램 위에 마우스 → "소스보기" 버튼 → Mermaid 코드 표시
다이어그램 → 인포그래픽	"🎨 아트콘으로 변환" → ArtCon이 다이어그램을 컬러풀하게 재해석

🎨 다이어그램 → ArtCon 연동
Mermaid 다이어그램을 아트콘(ArtCon)으로 보내면 더 풍부한 색상·스타일의 인포그래픽으로 다시 만들 수 있습니다. 표준 SVG보다 마케팅·발표에 적합한 결과물이 나옵니다.

🛠️ 문제 해결

증상	원인 & 해결
다이어그램이 렌더링 안 됨	첫 줄이 19개 키워드 중 하나로 시작해야 함. 예: `flowchart TD`
"Syntax error in graph"	코드에 오타. 노드 ID가 중복되거나 화살표(`-->`)가 잘못된 경우 많음.
한글이 깨짐	드물게 라벨 안에 특수문자(괄호·따옴표)가 있을 때. 라벨을 따옴표로 감싸기: `A["라벨 (1)"]`
너무 복잡한 다이어그램	50노드 넘으면 가독성 저하. 더 작게 나눠 여러 다이어그램으로.
모바일에서 너무 작음	핀치 줌으로 확대. 또는 다이어그램 우상단 ⛶ 클릭해 전체화면.

← 이전∑ 수식 (LaTeX) 다음 →🎨 아트콘 (아트콘)