ZenUML: 간단한 텍스트 코드를 기반으로 시퀀스 다이어그램 및 순서도 만들기

일반 소개

ZenUML은 시퀀스 다이어그램과 순서도 생성에 중점을 둔 멀티 플랫폼 다이어그램-as-a-code 솔루션입니다. 브라우저에서 실시간으로 다이어그램을 렌더링하여 서버 측 상호 작용의 지연을 방지하므로 비효율적인 드래그 앤 드롭 작업이나 느린 로딩 애니메이션으로 인해 사용자의 사고 과정이 중단되지 않습니다.ZenUML의 다이어그램은 단순한 정적 이미지가 아니라 사용자가 편집 모드에서 다이어그램의 메시지를 강조하면 해당 코드가 자동으로 선택되는 등 다이어그램과 상호 작용할 수 있습니다.ZenUML은 개인정보 보호와 보안을 강조하여 렌더링을 위해 데이터를 서버로 보내지 않습니다. 렌더링을 위해 데이터를 서버로 전송하지 않으므로 사용자 데이터의 보안을 보장합니다. 이 도구는 OMG UML 2.5.1을 준수하며 클라우드 아이콘과 같은 풍부한 확장 기능을 제공하여 다이어그램의 가독성을 높입니다.ZenUML은 핀테크, 통신, 소매업 등 다양한 산업에서 사용되며 Confluence, 웹 애플리케이션, 브라우저 확장, IDE 플러그인 및 데스크톱 애플리케이션을 포함한 다양한 플랫폼에서 지원됩니다.

기능 목록

• 실시간 렌더링: 서버 측 상호 작용 없이 브라우저에서 실시간으로 차트를 렌더링합니다.
• 대화형 차트: 사용자는 차트와 상호 작용하고 복잡한 차트를 빠르게 탐색할 수 있습니다.
• 개인정보 보호 및 보안: 렌더링을 위해 서버로 데이터를 전송하지 않으므로 데이터 보안이 보장됩니다.
• 표준 준수: OMG UML 2.5.1을 준수하며 다양한 확장 기능을 제공합니다.
• 다중 플랫폼 지원: Confluence, 웹 애플리케이션, 브라우저 확장 프로그램, IDE 플러그인 및 데스크톱 애플리케이션이 지원됩니다.
• 더 간단한 DSL: 더 간단한 DSL 언어를 사용하여 코드 줄을 줄이고 가독성과 유지 관리성을 개선하세요.
• 전문가 지원: 설치, 교육 및 고장 지원이 제공되며, 대부분의 문제는 8시간 이내에 해결됩니다.
• 다양한 확장 기능: 예를 들어 차트의 가독성을 높여주는 클라우드 아이콘이 있습니다.

도움말 사용

설치 프로세스

1. 웹 애플리케이션 사용::
   • ZenUML 웹사이트(https://zenuml.com/)를 방문하세요.
   • 계정을 등록하고 로그인합니다.
   • 작업 영역에 들어가서 차트 만들기를 시작합니다.
2. Confluence 플러그인 설치::
   • Confluence 관리 백엔드에서 적용을 선택합니다.
   • "ZenUML"을 검색하고 "설치"를 클릭합니다.
   • 설치가 완료되면 페이지에 ZenUML 매크로를 추가하고 다이어그램 작성을 시작하세요.
3. 브라우저 확장 프로그램 설치::
   • 브라우저 확장 프로그램 스토어에서 "ZenUML"을 검색하세요.
   • '브라우저에 추가'를 클릭하고 안내에 따라 설치를 완료합니다.
   • 설치가 완료되면 브라우저 도구 모음에서 ZenUML 아이콘을 클릭하여 다이어그램 만들기를 시작합니다.
4. IDE 플러그인 설치::
   • IDE의 플러그인 마켓에서 "ZenUML"을 검색하세요.
   • '설치'를 클릭하고 지시에 따라 설치를 완료합니다.
   • 설치가 완료되면 IDE에서 ZenUML 플러그인을 열고 다이어그램 작성을 시작하세요.

사용 프로세스

1. 시퀀스 다이어그램 만들기::
   • 작업 영역에서 '새 차트'를 선택합니다.
   • 시퀀스 다이어그램 템플릿을 선택합니다.
   • 예를 들어 ZenUML의 DSL 언어를 사용하여 코드를 작성합니다:

    Alice -> Bob: Hello Bob, how are you?
   Bob --> Alice: I am good thanks!
   

   • 실시간으로 차트를 미리 보고, 조정하고, 최적화하세요.
2. 순서도 만들기::
   • 작업 영역에서 '새 차트'를 선택합니다.
   • 순서도 템플릿을 선택합니다.
   • 예를 들어 ZenUML의 DSL 언어를 사용하여 코드를 작성합니다:

    start
   :Step 1;
   :Step 2;
   :Step 3;
   end
   

   • 실시간으로 차트를 미리 보고, 조정하고, 최적화하세요.
3. 차트 내보내기 및 공유::
   • 다이어그램 생성을 완료했으면 '내보내기' 버튼을 클릭하고 내보내기 형식(PNG, SVG 등)을 선택합니다.
   • 링크 또는 임베드 코드를 통해 차트를 공유하세요.
4. 고급 기능::
   • 클라우드 아이콘 및 기타 확장 기능으로 차트 가독성을 향상하세요.
   • 편집 모드에서 차트에 메시지를 강조 표시하여 코드를 빠르게 탐색할 수 있습니다.
   • 더 많은 팁과 지원을 받으려면 ZenUML 도움말 센터를 방문하세요.

일반적인 문제

• 데이터 보안은 어떻게 보장하나요? ZenUML은 렌더링을 위해 데이터를 서버로 전송하지 않으며, 데이터 보안을 위해 모든 작업은 로컬에서 수행됩니다.
• 기술 지원은 어떻게 받나요? ZenUML 도움말 센터를 방문하여 지원 요청을 제출하면 대부분의 문제가 8시간 이내에 해결됩니다.
• 팀워크를 지원하나요? ZenUML은 사용자가 다이어그램 링크를 공유하고 함께 다이어그램을 편집하고 볼 수 있는 팀 협업을 지원합니다.

회로도 샤프너 D2

회로도를 만들기 위한 많은 도구가 있습니다.

저는 와이어프레임 다이어그램에 텍스트 코드 기반 다이어그램 도구인 Mermaid, Plantuml, Graphviz를 사용하는 것을 좋아합니다.

모두 코드를 기반으로 이미지를 생성하며, 버전 관리를 위해 코드 저장소에 저장하는 데 적합합니다.

최근에 저는 훨씬 사용하기 쉬운 도구를 발견했습니다. D2다음은 간단하고 직관적이며 강력한 도구를 소개합니다.

D2는 명령줄이나 브라우저에서 사용할 수 있습니다. 이미지 코드 파일이 있다고 가정해 보겠습니다.example.d2그런 다음 이미지를 생성하는 명령은 다음과 같습니다.

$ d2 example.d2

대부분의 경우 브라우저를 통해 사용합니다. 온라인 생성기가 있습니다. play.d2lang.com(아래)를 클릭하고 코드를 붙여넣은 후 '컴파일' 버튼을 누르면 이미지가 즉시 생성됩니다.

노드 A(노드 이름은 A)를 원하면 A를 입력하면 됩니다.

A

A는 노드의 이름일 뿐이며, 노드의 콘텐츠를 사용자 지정하려면 아래와 같이 작성합니다.

A: A

다음으로 노드를 추가합니다.

A: A
B: B

연결합니다.

A: A
B: B
A -> B

연결은 양쪽 화살표(->)를 클릭하거나 역방향 화살표(<-), 심지어 양방향 화살표(<->). 화살표가 필요하지 않은 경우 선을 연결하면 됩니다(--).

화살표에 텍스트를 추가할 수도 있습니다.

A: A
B: B
A -> B: 연결

노드 간에는 여러 개의 연결이 있을 수 있습니다.

A: A
B: B
A -> B: 요청
A <- B: 응답

노드 연결은 한 줄에 작성할 수도 있습니다.

A -> C <- B: 연결

1단계 -> 2단계 -> 3단계 -> 4단계
4단계 -> 1단계: 피드백

이 구문은 기본적인 와이어프레임 다이어그램을 그리기에 충분합니다.

D2는 매우 복잡한 다이어그램을 그릴 수 있으며, 자세한 구문은 다음을 참조하세요.(컴퓨터) 파일.

마지막으로 노드 모양을 변경하려는 경우 아래와 같이 상자가 원으로 변경됩니다.

A: A
A.모양: 원

모양을 클라우드로 변경하여 클라우드 서비스를 나타낼 수도 있습니다.

A: A
A.모양: 구름

선 색상도 변경할 수 있습니다.

A: A
A.style.획: 빨간색