Create Beautiful Flowcharts

Editor Mode

📖 Mermaid 차트 사용 가이드

🎯 기본 문법

기본 플로우차트
graph TD
    A[시작] --> B[처리]
    B --> C[종료]

🔗 연결선 종류

다양한 연결선
A --> B    // 화살표
A --- B    // 실선
A -.-> B   // 점선 화살표
A ==> B    // 굵은 화살표
A -->|텍스트| B  // 라벨이 있는 화살표

📦 노드 모양

다양한 노드 모양
A[사각형]
B(둥근 사각형)
C{다이아몬드}
D((원형))
E>태그 모양]
F[/사선 사각형/]

🎨 스타일링

노드 스타일링
style A fill:#f9f,stroke:#333,stroke-width:4px
style B fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff

🔄 조건문 예시

조건부 플로우
graph TD
    A[시작] --> B{조건 확인}
    B -->|참| C[처리 1]
    B -->|거짓| D[처리 2]
    C --> E[완료]
    D --> E

📋 실제 사용 예시

로그인 프로세스
graph TD
    A[로그인 시도] --> B{아이디 확인}
    B -->|성공| C{비밀번호 확인}
    B -->|실패| D[에러 메시지]
    C -->|성공| E[로그인 성공]
    C -->|실패| D
    D --> F[로그인 페이지]

💡 사용 팁

  • • 노드 ID는 영문, 숫자, 언더스코어만 사용 가능
  • • 한글은 노드 내용에만 사용하세요
  • • 복잡한 차트는 단계별로 나누어 작성하세요
  • • 스타일링은 차트 마지막에 추가하세요
  • • 실시간 미리보기로 결과를 확인하세요