UML 다이어그램 생성기
객체 모델을 텍스트로 문서화하세요. Mermaid 클래스 다이어그램을 작성하세요(필드, 메서드, 상속, 인터페이스 및 구성). 그들이 실시간으로 렌더링되는 것을 보세요. 모든 것이 기기에 있습니다.
One step per line. Indent two spaces to branch beneath the line above.
픽셀이 아닌 설계 모델
클래스 다이어그램은 코드의 모양을 캡처합니다. 어떤 클래스가 존재하는지, 무엇을 소유하는지, 어떻게 관련되는지입니다. 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 필요를 충족합니다. 이 페이지는 클래스 다이어그램에 중점을 둡니다.
아무것도 업로드되나요?
아니요. 다이어그램은 브라우저에서 생성되므로 클래스 및 메서드 이름이 기기에 있습니다.