UML 다이어그램 생성기
객체 모델을 텍스트로 문서화하세요. Mermaid 클래스 다이어그램을 작성하세요(필드, 메서드, 상속, 인터페이스 및 구성). 그들이 실시간으로 렌더링되는 것을 보세요. 모든 것이 기기에 있습니다.
한 줄에 한 단계. 두 칸 들여쓰면 위 줄 아래로 분기합니다.
픽셀이 아닌 설계 모델
클래스 다이어그램은 코드의 모양을 캡처합니다. 어떤 클래스가 존재하는지, 무엇을 소유하는지, 어떻게 관련되는지입니다. Mermaid의 표기법은 OOP 개념에 직접 매핑됩니다. "<|--"는 상속, "<|.."은 인터페이스 구현, "*--"은 구성, "o--"은 집계를 나타냅니다. 따라서 다이어그램은 이를 만든 설계 토론처럼 읽혀집니다.
텍스트로 유지하면 리팩토링을 살아남습니다. 클래스의 이름을 바꾸면 캔버스를 다시 그리는 대신 한 줄을 편집합니다.
온보딩 및 RFC에 좋습니다
설계 RFC에 클래스 다이어그램을 드롭하여 제안된 구조를 표시하거나, 리포지토리의 문서에 드롭하여 새 기여자가 길을 찾을 수 있도록 도와주세요. 가시성 마커(+/-)와 «interface»과 같은 스테레오타입은 산문의 벽 없이 의도를 전달합니다.
자주 묻는 질문
텍스트에서 UML 클래스 다이어그램을 어떻게 만들나요?
"classDiagram"으로 시작하고, 각 클래스를 중괄호가 있는 필드와 메서드로 정의한 후, "Animal <|-- Dog"와 같은 관계를 추가하세요. 실시간으로 렌더링되고 SVG 또는 PNG로 내보냅니다.
상속 vs 인터페이스를 어떻게 표시하나요?
B가 클래스 A를 확장할 때 "A <|-- B"를 사용하고, B가 인터페이스 A를 구현할 때 "A <|.. B"를 사용하세요. 클래스 내에 "<<interface>>" 스테레오타입으로 인터페이스를 표시하세요.
공개 및 비공개 멤버를 어떻게 표시하나요?
공개의 경우 멤버 앞에 "+"를 붙이거나 비공개의 경우 "-"를 붙입니다. 예: "+charge(amount) bool" 또는 "-PaymentMethod method".
Mermaid가 다른 UML 다이어그램을 지원하나요?
네, 클래스 다이어그램 외에 시퀀스 및 상태 다이어그램을 렌더링하므로 일상적인 UML 필요를 충족합니다. 이 페이지는 클래스 다이어그램에 중점을 둡니다.
아무것도 업로드되나요?
아니요. 다이어그램은 브라우저에서 생성되므로 클래스 및 메서드 이름이 기기에 있습니다.