실행 가능한 사용자: 모든 사용자
사용 가능 플랜: 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 도형과 커넥터로 구성된 Diagram으로 변환되며, Miro가 자동으로 배치합니다 — 정적 이미지가 아닙니다.
- 양방향 편집. 보드에서 다이어그램을 시각적으로 변경하면 Mermaid 코드가 업데이트됩니다. 코드를 편집하면 다이어그램이 다시 렌더링됩니다.
- 협업을 위해 설계됨. 다이어그램이 Miro의 기본 콘텐츠이기 때문에 팀은 같은 보드에서 실시간으로 댓글을 달고 공동 편집하며 반복적으로 작업할 수 있습니다.
Mermaid 다이어그램 만들기
Mermaid 다이어그램은 세 가지 방법으로 추가할 수 있습니다.
보드에 Mermaid 코드 붙여넣기
- 편집기, 문서 또는 AI 채팅에서 Mermaid 코드를 복사하세요.
- Miro 보드에 붙여넣으세요.
Miro는 코드를 Miro 도형으로 구성된 다이어그램으로 렌더링합니다.
Miro MCP로 다이어그램 만들기
Miro MCP Server에 연결된 MCP 호환 AI 도구(예: Cursor 또는 Claude Code)를 사용해 보드에 Mermaid 다이어그램을 생성하세요.
- AI 툴을 Miro MCP에 연결하세요.
- 에이전트에게 특정 보드에 Mermaid 다이어그램을 만들도록 요청하세요. 기존 보드에 다이어그램을 만들려면 프롬프트에 보드 URL을 포함하세요.
- Miro에서 보드를 열어 렌더링된 다이어그램을 검토하고 편집하며 협업하세요.
에이전트는 보드에서 Mermaid 코드를 읽어 다이어그램을 제자리에서 업데이트할 수도 있어 코드베이스와 Miro 간에 계속 반복 작업할 수 있습니다. 에이전트가 다이어그램을 편집하면 추가·삭제·변경된 내용을 표시하는 범례를 추가할 수 있습니다.
참고: Enterprise 플랜에서는 회사 관리자가 사용자가 연결하기 전에 Miro MCP를 활성화해야 합니다. 자세한 내용은 Miro MCP Server 관리자 가이드를 참조하세요.
Diagram 형식으로 시작하기
- Miro 보드에서 생성 도구 모음을 열고 형식 > 다이어그램을 선택합니다.
- 코드로 구축을 클릭합니다.
- 코드 패널에 직접 작성한 Mermaid 코드를 붙여넣거나 Mermaid 템플릿을 선택합니다.
다이어그램이 Miro 도형으로 렌더링됩니다. - 집중 모드나 캔버스에서 편집을 계속합니다.
다이어그램 형식, 집중 모드, 레이어 및 템플릿에 대한 자세한 내용은 Miro 다이어그램을 참조하세요.
Mermaid 다이어그램 편집
보드에서 시각적으로 편집하거나 Mermaid 소스에서 편집하거나 AI로 다이어그램을 편집할 수 있습니다. 변경 내용은 자동으로 동기화됩니다.
시각적으로 편집
- 다이어그램을 집중 모드로 엽니다.
- 도형, 선 또는 텍스트 레이블을 선택해 다이어그램에서 직접 편집합니다. 선택한 요소에 대한 컨트롤이 있는 툴바가 열립니다. 예: 도형 유형 변경, 텍스트 편집, 글꼴 크기 조정, 굵게 적용, 텍스트·테두리·채우기 색상 설정.
- 레이아웃 방향을 설정하세요. 다이어그램 툴바에서 방향 컨트롤을 클릭하고 위에서 아래로, 아래에서 위로, 왼쪽에서 오른쪽으로, 또는 오른쪽에서 왼쪽으로를 선택하세요.
- 간격을 조정합니다. 레이아웃 컨트롤을 열고 좁게 더 촘촘한 레이아웃, 보통 균형 잡힌 간격, 또는 넓게 한눈에 보기 쉬운 여유로운 레이아웃을 선택하세요.
- 코드 패널을 열어 Mermaid 구문이 일치하도록 업데이트되었는지 확인하세요.
코드 편집
- 집중 모드에서 다이어그램을 엽니다.
- 코드 패널을 엽니다.
- Mermaid 구문을 업데이트합니다.
편집하면 다이어그램이 즉시 다시 렌더링됩니다.
코드 패널에서 설정 아이콘(톱니)을 클릭해 편집기가 코드를 표시하는 방식을 조정합니다:
- 줄 번호: 편집기에서 줄 번호를 표시하거나 숨깁니다.
- 텍스트 줄바꿈: 긴 줄을 가로 스크롤 대신 패널 너비에 맞춰 줄바꿈합니다.
AI로 편집
- 다이어그램 위젯 링크를 복사하세요.
- Miro MCP에 인증된 원하는 AI 도구를 엽니다.
- 에이전트에게 변경을 요청하고, 편집할 다이어그램 위젯의 링크를 붙여넣습니다.
에이전트가 편집하는 동안 다이어그램이 그 자리에서 다시 렌더링됩니다.
참고: 시각적 편집과 코드 패널은 집중 모드에서만 사용할 수 있습니다. 캔버스에서 바로 분할 보기로 편집하는 기능은 지원되지 않습니다.
추가 편집 기능
도형이 더 필요하거나 도형을 자유롭게 옮기려면 다이어그램을 자유형식으로 전환하세요. 도형 패널, 레이아웃 패널에서 시작하거나 다이어그램에서 도형을 이동하려고 시도하면 시작할 수 있습니다.
- 도형을 이동해보거나 프리폼으로 전환 을 도형 패널이나 레이아웃 패널에서 선택하세요.
프리폼 편집으로 전환 모달이 열립니다. - 전환 방식을 선택하세요:
- 전환 및 교체: 이 다이어그램을 프리폼으로 전환합니다.
- 복사본 생성 후 전환: 현재 Mermaid 버전은 유지한 채 복사본을 프리폼으로 전환합니다.
경고: 다이어그램을 프리폼으로 전환하면 Mermaid 코드와 동기화되지 않으며 MCP를 통해 더 이상 편집할 수 없습니다.
지원되는 다이어그램 유형
플로차트는 Miro 도형으로 렌더링됩니다. 추가 Mermaid 다이어그램 유형은 순차적으로 추가되고 있습니다:
| 다이어그램 유형 | 렌더러 | 시각적으로 편집 가능? |
|---|---|---|
| 플로차트 | Miro 도형 | 예 |
| 시퀀스 | Miro 도형 | 곧 출시 예정 |
| 클래스 | Miro 도형 | 곧 출시 예정 |
| ER (엔터티 관계) | Miro 도형 | 곧 출시 예정 |
| 기타 지원되는 Mermaid 다이어그램 | Mermaid SVG | 아니요 |
| Mermaid에서 지원하지 않는 다이어그램(예: 스윔레인) | 해당 없음 | 해당 없음 |
아직 시각적으로 편집할 수 없는 다이어그램 유형이 필요하면 이 양식에 피드백을 남겨주세요. 인터뷰 요청을 위해 연락할 수 있습니다.
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 개요를 참조하세요.