시퀀스 다이어그램

sequenceDiagram : 시퀀스 다이어그램 시작
participant A : 참여자 정의 (사람, 시스템 등)
A→>B: 메시지 : A가 B에게 동기 호출 (요청)
A⇒>B: 메시지 : A가 B에게 응답 또는 비동기 호출
Note over A: 메모 : A 위에 설명 노트 추가
사용 예시 : API 호출 흐름, 사용자-서버-DB 상호작용

sequenceDiagram
    participant User
    participant Server
    participant DB

    User->>Server: 로그인 요청
    Server->>DB: 사용자 조회
    DB-->>Server: 사용자 데이터
    Server-->>User: 로그인 성공

플로우차트

flowchart TD : 방향 지정 (TD=위→아래, LR=왼→오, RL=오→왼, BT=아래→위)
A[사각형] : 일반 프로세스 단계
B{마름모} : 조건문, 분기
C((원)) : 시작, 끝 노드
⇒ : 기본 화살표
⇒|조건| : 조건에 따른 화살표
사용 예시 : 로그인 성공 여부 분기, 업무 프로세스 흐름

flowchart TD
    A[시작] --> B{로그인 성공?}
    B -->|Yes| C[메인 화면]
    B -->|No| D[에러 메시지]
    D --> A

ER 다이어그램

ubgraph 이름 [라벨] : 큰 사각형 영역 (레이어, 모듈 표현)
A[사각형] : 컴포넌트, 서비스
B((원)) : 노드, DB 같은 특별 객체
[(DB)] : 데이터베이스처럼 둥근 사각형으로 표시
⇒ : 연결, 의존성 관계

flowchart TD
    subgraph Frontend [프론트엔드 영역]
        A[Vue.js UI]
        B[Quasar Grid]
    end

    subgraph Backend [백엔드 영역]
        C(Spring Boot)
        D(MyBatis)
    end

    subgraph DB [데이터베이스]
        E[(PostgreSQL)]
    end

    A --> C
    B --> C
    C --> D
    D --> E