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에서 Mermaid 다이어그램을 작업할 때 참고할 추가 자료와 세부 정보입니다.

Mermaid 문법 및 문서

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

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

보드에 Mermaid 다이어그램을 추가하면 해당 다이어그램은 이미지로 취급됩니다. 필요하면 이 이미지를 보드에서 직접 다운로드할 수 있습니다. 다른 사람과 협업하려면 다이어그램이 포함된 Miro 보드를 공유할 수 있습니다.

데이터 처리

Mermaid 다이어그램을 생성하거나 편집하면, 코드는 Mermaid.js 라이브러리를 사용해 브라우저의 클라이언트 측에서 렌더링됩니다. 생성된 다이어그램 이미지는 보드 콘텐츠의 일부로 Miro의 서버에 저장됩니다. 다이어그램 코드는 렌더링을 위해 외부 서버로 전송되지 않습니다.

원본 다이어그램 코드와 결과 이미지는 모두 다른 보드 콘텐츠와 동일한 방식으로 Miro 보드의 widgets 안에 임베드됩니다. 이는 Miro의 협업 및 콘텐츠 관리 기능과 완전히 호환됨을 보장합니다.

모든 데이터는 Miro의 인프라 내에만 완전히 보관됩니다. Miro 환경 밖으로 공유되거나 전송되는 일은 없습니다.