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 보드를 공유할 수 있습니다.