Lucidchart에서 Mermaid를 사용하여 코드형 다이어그램 작성하기

코드형 메뉴로 다이어그램 이용

Lucidchart에서 코드형 다이어그램 메뉴를 이용하려면 다음 단계를 따르세요.

1. 작업 공간 맨 왼쪽의 기본 도구 모음에서 코드형 다이어그램 아이콘을 선택합니다.

다이어그램 생성

지원되는 각 다이어그램 유형에 대해 제공된 예제 중 하나를 활용하여 코드형 다이어그램을 숙지하세요. 준비가 되면 Mermaid 코드를 작성하여 다이어그램을 생성하세요.

제공된 예제 사용

제공된 예제를 사용하여 다이어그램을 만들려면 코드형 다이어그램 메뉴에서 다음 단계를 따르세요.

1. +Mermaid 다이어그램 새로 만들기를 선택하세요.
2. 제공된 편집기의 맨 아래에서 예제 옵션 중 하나를 클릭합니다.
3. 선택한 예제 유형에 맞는 코드가 편집기에 자동으로 추가됩니다.
4. 필요에 따라 예제 코드를 편집합니다.
5. 생성을 클릭합니다.

다이어그램이 캔버스에 생성됩니다.

Mermaid를 사용하여 처음부터 새로 만들기

Mermaid 코드를 사용하여 처음부터 새 다이어그램을 만들려면 코드형 다이어그램 메뉴에서 다음 단계를 따르세요.

1. +Mermaid 다이어그램 새로 만들기를 선택하세요.
2. 제공된 편집기에 코드를 입력합니다.
3. 생성을 클릭합니다.

다이어그램이 캔버스에 생성됩니다.

다이어그램 편집

코드에서 생성된 다이어그램은 캔버스에 이미지로 표시되며, 코드를 열고 편집하여 업데이트해야 합니다. 방법은 다음과 같습니다.

1. 다음 방법 중 하나를 사용하여 연관된 코드 편집기를 열어 보세요.
   • 캔버스에 있는 다이어그램을 클릭합니다.
   • 코드형 다이어그램 메뉴로 이동하고 스크롤하여 편집하려는 다이어그램을 선택합니다.
2. 편집기를 클릭하고 변경합니다.
   • 편집하면 캔버스의 다이어그램이 실시간으로 업데이트됩니다.

다이어그램이 캔버스에서 업데이트됩니다.

지원되는 다이어그램 종류

다음 다이어그램 유형은 Mermaid 코드를 사용하여 지원됩니다.

• 클래스: 클래스, 속성, 작업 및 개체 간의 관계를 모델링하여 특정 시스템의 구조를 매핑합니다.
• C4: 오디언스에 따라 네 가지 수준의 모델(컨텍스트, 컨테이너, 컴포넌트, 코드)을 활용합니다.
• 엔터티 관계: 필드 간의 관계를 보여 주기 위해 데이터베이스를 시각적으로 표현합니다.
• 플로우차트: 복잡한 시스템과 프로세스를 다루는 따라하기 쉬운 플로우차트를 만들어 보세요.
• Gantt: 프로젝트 관리 시 일정과 진행 상황을 시각적으로 나타냅니다.
• Ishikawa: 피시본 다이어그램을 작성하여 근본 원인 분석 중에 원인과 결과 관계를 시각적으로 매핑합니다.
• 중첩 트리맵: 중첩된 직사각형을 사용하여 계층적 데이터 구조를 시각화합니다.
• 레이더 차트: 방사형 그리드에서 여러 정량적 변수를 비교하는 차트를 만듭니다.
• 시퀀스: 동시에 존재하는 프로세스와 개체, 그리고 생명선이 끝나기 전에 기능을 수행하기 위해 이들 사이에서 교환되는 메시지를 나타냅니다.
• 상태: 동작 다이어그램을 작성하여 다양한 개체 간의 전환을 표시합니다.
• XY 차트: 포괄적인 선, 막대 또는 분산형 차트를 만들어 데이터 요소 간의 관계를 시각화합니다.

자주 묻는 질문(FAQ)

루시드차트에서 지원되는 머메이드 버전은 무엇인가요?
루시드차트는 머메이드 버전 11.14를 지원하도록 최적화되어 있습니다. 

Mermaid 코드를 사용해서 생성한 다이어그램에 스타일과 형식을 어떻게 지정할 수 있나요?
Mermaid 코드를 사용하여 Lucid에서 다이어그램을 생성하면, 캔버스에 이미지로 표시됩니다. 다이어그램의 스타일과 형식을 편집하려면 Mermaid 스타일링 구문을 코드에 직접 포함하세요.

이 문서에 관한 피드백 공유