실행 가능한 사용자: 모든 사용자
사용 가능 플랜: Free, Starter, Business, Enterprise, Education
사용 가능 환경: 브라우저, 데스크톱
Mermaid 코드로 다이어그램을 만들고 Miro 도형과 선처럼 편집할 수 있습니다. Mermaid 코드는 기준 원본으로 유지되므로 Miro, 코드베이스, AI 도구 간에 다이어그램을 이동해도 구조가 손실되지 않습니다.
참고: 구조화된 Mermaid 다이어그램은 베타 단계입니다. 지원되는 다이어그램 유형과 편집 기능은 단계적으로 개선되고 있으며, 아래에 설명된 일부 기능은 아직 배포 중입니다.
참고: 기존 Mermaid 앱에 대한 정보를 찾고 있다면 Miro용 Mermaid 다이어그램(레거시)를 참조하세요.
Miro에서 Mermaid 다이어그램을 사용하는 이유
- 기존 Mermaid 워크플로와 함께 사용할 수 있습니다. 문서, PR, AI 채팅에서 작성하는 것과 동일한 Mermaid 문법을 사용하세요. Miro MCP를 통해 에이전트가 보드에서 Mermaid 다이어그램을 생성, 조회, 업데이트 및 편집할 수 있습니다.
- Miro 도형으로 렌더링됩니다. Mermaid 코드는 편집 가능한 Miro 도형과 커넥터로 구성된 다이어그램으로 변환되며, Miro가 자동으로 배치합니다—정적 이미지가 아닙니다.
- 양방향 편집. 보드에서 다이어그램을 시각적으로 변경하면 Mermaid 코드가 업데이트됩니다. 코드를 편집하면 다이어그램이 다시 렌더링됩니다.
- 협업에 최적화됨. 다이어그램이 Miro의 네이티브 콘텐츠이므로 팀이 같은 보드에서 댓글을 달고 공동 편집하며 실시간으로 반복 작업할 수 있습니다.
Mermaid 다이어그램 만들기
Mermaid 다이어그램은 세 가지 방법으로 추가할 수 있습니다.
보드에 Mermaid 코드 붙여넣기
- 편집기, 문서 또는 AI 채팅에서 Mermaid 코드를 복사합니다.
- 보드에 붙여넣습니다.
Miro는 해당 코드를 Miro 도형으로 구성된 다이어그램으로 렌더링합니다.
Miro MCP로 다이어그램 만들기
Miro MCP Server에 연결된 MCP 호환 AI 도구(예: Cursor 또는 Claude Code)를 사용해 보드에 Mermaid 다이어그램을 생성합니다.
- AI 툴을 Miro MCP에 연결하세요. 설정 단계는 Miro MCP를 참조하세요.
- 에이전트에게 특정 보드에 Mermaid 다이어그램을 만들도록 요청하세요. 기존 보드에 다이어그램을 만들려면 보드 URL을 프롬프트에 포함하세요.
- Miro에서 보드를 열어 렌더된 다이어그램을 검토하고 편집하며 협업하세요.
에이전트는 보드에서 Mermaid 코드를 읽어 그 자리에서 다이어그램을 업데이트할 수도 있어 코드베이스와 Miro 사이를 계속 반복 작업할 수 있습니다. 에이전트가 다이어그램을 편집하면 추가·제거·변경된 항목을 표시하는 범례를 추가할 수 있습니다.
참고: Enterprise 플랜에서는 회사 관리자가 사용자가 연결하기 전에 Miro MCP를 활성화해야 합니다. 자세한 내용은 Miro MCP Server 관리자 가이드를 참조하세요.
Diagram 형식에서 시작하기
- Miro 보드에서 생성 바를 열고 형식 > 다이어그램을 선택하세요.
- 코드로 시작을 클릭하세요.
- Mermaid 템플릿을 선택하거나, 직접 작성한 Mermaid 코드를 코드 패널에 붙여넣으세요.
다이어그램은 Miro 도형으로 표시됩니다. - 집중 모드 또는 캔버스에서 계속 편집하세요.
다이어그램 형식, 집중 모드, 레이어 및 템플릿에 대한 자세한 내용은 Miro 다이어그램을 참조하세요.
Mermaid 다이어그램 편집
다이어그램은 AI로, 보드에서 시각적으로, 또는 Mermaid 소스에서 편집할 수 있습니다. 변경 사항은 동기화된 상태로 유지됩니다.
시각적 편집
- 다이어그램을 집중 모드에서 엽니다.
- 다른 Miro 다이어그램에서처럼 도형과 커넥터를 추가하거나 제거합니다.
- 레이아웃을 위에서 아래로 또는 왼쪽에서 오른쪽으로 변경합니다.
- 코드 패널을 열어 Mermaid 구문이 일치하도록 업데이트되었는지 확인합니다.
코드 편집
- 집중 모드에서 다이어그램을 엽니다.
- 코드 패널을 엽니다.
- Mermaid 구문을 업데이트합니다.
편집하면 다이어그램이 즉시 다시 렌더링됩니다.
AI로 편집
- 다이어그램 위젯의 링크를 복사합니다.
- Miro MCP에 인증된 상태에서 선호하는 에이전트를 엽니다.
- 편집할 다이어그램 위젯의 링크를 붙여넣고 에이전트에게 변경을 요청합니다.
에이전트가 편집하는 동안 다이어그램이 해당 위치에서 즉시 다시 렌더링됩니다.
참고: 시각적 편집과 코드 패널은 집중 모드에서만 사용할 수 있습니다. 캔버스에서 바로 분할 보기로 편집하는 방식은 지원되지 않습니다.
추가 편집 기능
도형이 더 필요하거나 도형을 자유롭게 이동하려면 도형 패널 또는 레이아웃 패널의 진입점 중 하나를 사용해 다이어그램을 자유형으로 전환하세요.
경고: 다이어그램을 자유형으로 전환하면 Mermaid 코드와 동기화되지 않으며 더 이상 MCP를 통해 편집할 수 없습니다.
지원되는 다이어그램 유형
플로우차트는 Miro의 기본 도형으로 렌더링됩니다. 다른 Mermaid 다이어그램 유형은 순차적으로 추가되고 있습니다:
- 플로우차트: 네이티브 Miro 도형으로 렌더링되며 편집할 수 있습니다.
- 시퀀스, 클래스, 엔터티 관계 다이어그램: 네이티브 Miro 도형으로 렌더링되며; 비주얼 편집 기능은 곧 제공될 예정입니다.
- 기타 다이어그램 유형: 위에 나열되지 않은 다이어그램 유형이 필요하면 이 양식에 피드백을 남겨주세요. 인터뷰를 위해 연락드릴 수 있습니다.
Mermaid 다이어그램 유형 및 문법 전체 목록은 공식 Mermaid 문서를 참조하세요.
공유 및 내보내기
- Miro MCP로 읽기. 연결된 에이전트에게 보드 URL에서 다이어그램을 읽어 코드베이스, PR 또는 다른 도구에 문서화하도록 요청하세요. Mermaid 소스는 다시 편집하고 반영할 수 있도록 그대로 유지됩니다.
- 링크 공유. 보드 URL을 복사하거나, 다이어그램의 더보기 메뉴 (⋯)에서 집중 모드 링크 복사를 선택해 공동 작업자를 바로 다이어그램으로 보낼 수 있습니다. 자세한 내용은 보드 공유 및 공동 작업자 초대를 참고하세요.
- PDF 또는 이미지로 다운로드. 다이어그램의 더보기 메뉴(⋯)에서 PDF로 내보내기 또는 이미지로 내보내기(JPG, SVG 또는 PDF)를 선택하세요. 보드에서 다이어그램을 이미지로 복사할 수도 있습니다.
알려진 제한 사항
구조화된 Mermaid 다이어그램은 베타 기능이므로 다음의 현재 제약 사항을 참고하세요:
- 시각적 편집은 플로차트에서만 사용할 수 있습니다.
- 시각적 편집과 코드 패널은 집중 모드에서만 사용할 수 있습니다.
- 도형, 텍스트, 선의 시각적 편집은 Mermaid 문법이 지원하는 범위로 제한됩니다.
- 다이어그램은 Miro의 기본 자동 레이아웃을 사용합니다. 도형을 자유롭게 이동하거나 Mermaid가 지원하지 않는 레이아웃을 사용하려면 다이어그램을 자유 형식으로 변환하세요.
- 도형 드래그 앤 드롭 기능은 곧 제공될 예정입니다. 현재는 도형의 + 버튼을 사용하거나 복사-붙여넣기나 복제로 도형을 추가하세요.
추가 정보
- Mermaid 구문, 지원되는 다이어그램 유형 및 예제는 공식 Mermaid 문서를 참조하세요.
- 레이어, 컨테이너, 집중 모드 등 Diagram 형식 기능에 대한 자세한 내용은 Miro 다이어그램을 참조하세요.
- AI 도구를 Miro에 연결하는 방법은 Miro MCP Server 개요를 참조하세요.