Miro용 Mermaid 다이어그램(레거시)

대상: 모든 사용자
플랜: 모든 플랜
플랫폼: 브라우저, 데스크톱

참고: Mermaid 다이어그램은 이제 Miro에 기본 제공됩니다. 자세한 내용은 Mermaid 다이어그램 만들기를 참조하세요

Mermaid 앱을 사용하면 코드 기반의 풍부한 다이어그램을 Miro 보드 내에서 직접 손쉽게 만들고 임베드할 수 있습니다. 간단한 텍스트 문법으로 복잡한 시스템, 워크플로 또는 데이터 구조를 시각화해 협업과 이해도를 높일 수 있습니다.

다이어그램 코드를 변경하면 미리보기가 실시간으로 업데이트되는 모습

Mermaid 앱 설치

Mermaid 앱은 Miro 마켓플레이스에서 또는 Miro 보드의 작성 툴바에서 바로 설치할 수 있습니다.

Miro 마켓플레이스에서 설치하려면:

1. 다음으로 Miro 마켓플레이스로 이동하거나 Mermaid 앱 바로가기를 따르세요.
2. 설치를 완료할 Miro 팀을 선택하세요.

작성 툴바에서도 앱을 설치할 수 있습니다:

1. 보드 왼쪽의 작성 툴바에서 툴, 미디어 및 통합 (+)을 선택하세요. 툴, 미디어 및 통합 패널이 열립니다.
2. 툴 탭에서 Mermaid Diagrams를 검색해 선택하세요.
3. Mermaid Diagrams 앱 패널이 열리고 앱이 툴바에 추가됩니다.

✏️ 참고: 팀 설정에서 앱 설치가 제한된 경우 관리자 권한이 없는 사용자는 앱을 설치할 수 없습니다.

Miro 보드에 다이어그램 만들기 및 추가하기

설치하면 Mermaid 앱으로 텍스트 기반 코드로 다이어그램을 생성해 보드에 이미지로 추가할 수 있습니다.

설치 후 작성 툴바에서 Mermaid 앱을 찾을 수 있습니다. 앱은 기본 샘플 코드로 열립니다. 다이어그램을 만들기 위해 코드를 수정하면 오른쪽 미리보기 영역에서 실시간으로 갱신되어 변경 사항을 바로 확인할 수 있습니다.

Mermaid 앱에는 여러 샘플 다이어그램이 포함되어 있으며 앱 패널 왼쪽 하단에서 확인할 수 있습니다. 이 샘플 중 하나를 선택해 필요에 맞게 사용자 지정할 수 있습니다.

오른쪽 가장자리를 드래그해 코드 편집기 창의 크기를 조절할 수 있습니다.

코드 편집기 패널 크기 조정

다이어그램을 완성하면 보드에 추가를 클릭하세요. 다이어그램이 이미지로 보드에 추가됩니다.

다이어그램을 보드에 추가

기존 다이어그램 편집

Miro 보드에 이미 있는 Mermaid 다이어그램도 수정할 수 있습니다.

1. 보드에서 Mermaid 다이어그램 이미지를 클릭해 선택하세요.
2. 나타나는 컨텍스트 메뉴에서 Mermaid 아이콘을 클릭하세요. 또는 작성 툴바에서 찾으세요.
3. 다이어그램 코드가 표시된 Mermaid 편집기가 열립니다. 코드 편집기에서 수정하세요.
4. 다이어그램 업데이트를 클릭하세요.
5. Miro 보드로 돌아가며 보드의 다이어그램이 변경 내용으로 업데이트됩니다.

추가 정보

Miro에서 Mermaid 다이어그램 작업에 참고할 추가 자료와 세부 정보는 다음과 같습니다.

Mermaid 문법 및 문서

Mermaid 앱은 텍스트로부터 다이어그램을 생성하기 위해 특정 문법을 사용합니다. 지원되는 다이어그램 유형과 옵션을 포함한 문법에 관한 자세한 정보는 공식 Mermaid 문서를 참고하세요. 또한 Miro 내 Mermaid 앱 패널 왼쪽 하단에서 이 문서로 연결되는 링크에 접근할 수 있습니다.

다이어그램 공유 및 내보내기

Mermaid 다이어그램을 보드에 추가하면 이미지로 취급됩니다. 필요한 경우 이 이미지를 보드에서 바로 다운로드할 수 있습니다. 공동 작업자와 협업하려면 다이어그램이 포함된 Miro 보드를 공유할 수 있습니다.