Mermaid Viewer 문서

한국어

English
简体中文
日本語

한국어

English
简体中文
日本語

Appearance

C4 다이어그램 ​

C4 다이어그램은 다양한 추상화 수준에서 소프트웨어 아키텍처를 시각화하는 방법을 제공합니다. C4 모델은 컨텍스트(Context), 컨테이너(Container), 컴포넌트(Component), 코드(Code)의 4가지 수준의 다이어그램으로 구성됩니다.

문법 ​

기본 요소 ​

  • 사람: Person(별칭, 레이블)
  • 시스템: System(별칭, 레이블)
  • 컨테이너: Container(별칭, 레이블, 기술)
  • 컴포넌트: Component(별칭, 레이블, 기술)
  • 관계: Rel(from, to, 레이블)

기본 예제 ​

코드:
mermaid
C4Context
    title 인터넷 뱅킹 시스템의 시스템 컨텍스트 다이어그램
    
    Person(customer, "은행 고객", "은행의 고객")
    System(banking_system, "인터넷 뱅킹 시스템", "고객이 계좌 정보를 확인할 수 있게 함")
    
    Rel(customer, banking_system, "사용")
Ctrl + Enter|

고급 예제 ​

더 자세한 웹 애플리케이션의 컨테이너 다이어그램:

코드:
mermaid
C4Container
    title 인터넷 뱅킹 시스템의 컨테이너 다이어그램

    Person(customer, "은행 고객", "은행의 고객")
    
    System_Boundary(banking_system, "인터넷 뱅킹 시스템") {
        Container(web_app, "웹 애플리케이션", "Java, Spring MVC", "정적 콘텐츠와 SPA 제공")
        Container(spa, "단일 페이지 앱", "JavaScript, Angular", "모든 뱅킹 기능 제공")
        Container(mobile_app, "모바일 앱", "Kotlin, Android", "제한된 뱅킹 기능 제공")
        Container(api, "API 애플리케이션", "Java, Spring Boot", "API를 통한 뱅킹 기능 제공")
        ContainerDb(database, "데이터베이스", "Oracle Database", "사용자 등록 정보, 인증 정보, 접근 로그 등 저장")
    }

    Rel(customer, web_app, "사용", "HTTPS")
    Rel(customer, spa, "사용", "HTTPS")
    Rel(customer, mobile_app, "사용")
    Rel(web_app, spa, "제공")
    Rel(spa, api, "사용", "JSON/HTTPS")
    Rel(mobile_app, api, "사용", "JSON/HTTPS")
    Rel(api, database, "읽기/쓰기", "JDBC")
Ctrl + Enter|

컴포넌트 수준 ​

코드:
mermaid
C4Component
    title 인터넷 뱅킹 시스템 API 애플리케이션의 컴포넌트 다이어그램

    Container_Boundary(api, "API 애플리케이션") {
        Component(sign_in_controller, "로그인 컨트롤러", "Spring MVC Rest Controller", "사용자 로그인 기능 제공")
        Component(security_component, "보안 컴포넌트", "Spring Security", "로그인, 비밀번호 변경 등 기능 제공")
        Component(user_repository, "사용자 저장소", "Spring Data", "사용자 정보 접근 제공")
    }

    Rel(sign_in_controller, security_component, "사용")
    Rel(security_component, user_repository, "사용")
Ctrl + Enter|

배포 다이어그램 ​

코드:
mermaid
C4Deployment
    title 인터넷 뱅킹 시스템의 배포 다이어그램

    Deployment_Node(customer_computer, "고객 컴퓨터", "Microsoft Windows 또는 Apple macOS") {
        Deployment_Node(web_browser, "웹 브라우저", "Chrome, Firefox, Safari, 또는 Edge") {
            Container(spa, "단일 페이지 앱", "JavaScript, Angular", "모든 뱅킹 기능 제공")
        }
    }

    Deployment_Node(data_center, "데이터 센터") {
        Deployment_Node(server, "애플리케이션 서버", "Ubuntu 20.04 LTS") {
            Container(api, "API 애플리케이션", "Java, Spring Boot")
        }
        Deployment_Node(database_server, "데이터베이스 서버", "Oracle") {
            ContainerDb(database, "데이터베이스", "Oracle 19c")
        }
    }

    Rel(spa, api, "API 호출", "JSON/HTTPS")
    Rel(api, database, "읽기/쓰기", "JDBC")
Ctrl + Enter|

추가 기능 ​

경계와 기업 ​

코드:
mermaid
C4Context
    Enterprise_Boundary(enterprise, "은행") {
        System(banking_system, "인터넷 뱅킹 시스템")
        System(atm_system, "ATM 시스템")
    }
    
    Person(customer, "고객")
    System_Ext(mail_system, "메일 시스템")
    
    Rel(customer, banking_system, "사용")
    Rel(customer, atm_system, "ATM으로 출금")
    Rel(banking_system, mail_system, "메일 전송")
Ctrl + Enter|

스타일 설정 ​

C4 다이어그램은 자동으로:

  • 다른 유형의 요소 포맷
  • 관계와 의존성 표시
  • 기술 스택 표시
  • 계층 구조 구성
  • 일관된 시각적 언어 사용

유용한 팁 ​

  • 컨텍스트 다이어그램부터 시작
  • 컨테이너와 컴포넌트 뷰로 점진적으로 세부 사항 추가
  • 다이어그램의 초점을 명확하게 유지
  • 관련 기술 세부 사항 포함
  • 중요한 관계 표시
  • 의미 있는 설명 사용
  • 적절한 곳에 기술 선택 포함
  • 대상 독자의 기술 수준 고려

일반적인 문제 해결 ​

  1. 복잡성 문제

    • 적절한 추상화 수준 선택
    • 복잡한 시스템 분해
    • 경계를 사용하여 요소 구성

  2. 가독성 문제

    • 명확한 계층 구조 유지
    • 과도한 관계선 피하기
    • 의미 있는 레이블 사용

  3. 일관성 문제

    • C4 모델 규약 준수
    • 명명 일관성 유지
    • 통일된 표현 방식 사용

모범 사례 ​

  • 적절한 추상화 수준 선택
  • 다이어그램을 단순하게 유지
  • 명확한 명명 사용
  • 필요한 기술 세부 사항 포함
  • 중요한 관계 강조
  • 다이어그램 대상자 고려
  • 뷰 간의 일관성 유지

다음 단계 ​