Mermaid 다이어그램 만들기

누가 할 수 있나요: 모든 사용자
해당 플랜: Free, Starter, Business, Enterprise, Education
플랫폼: Browser, Desktop

Mermaid 코드로 다이어그램을 만들고 Miro 도형과 선처럼 편집할 수 있습니다. Mermaid 코드는 기준이 되므로 Miro, 코드베이스, AI 도구 간에 다이어그램을 옮겨도 구조가 유지됩니다.

참고: 레거시 Mermaid 앱 관련 정보를 찾는 경우, Miro용 Mermaid 다이어그램(레거시)을 참조하세요.

Miro에서 Mermaid 다이어그램을 사용하는 이유

• 다른 Mermaid 워크플로와 함께 사용 가능. 문서, PR, AI 채팅에서 쓰던 동일한 Mermaid 문법을 사용하세요. Miro MCP를 통해 에이전트가 보드에서 Mermaid 다이어그램을 생성, 읽기, 업데이트, 편집할 수 있습니다.
• Miro 도형으로 렌더링. Mermaid 코드는 편집 가능한 Miro 도형과 커넥터로 구성된 다이어그램으로 변환되며 Miro가 자동으로 배치하므로 정적 이미지가 아닙니다.
• 양방향 편집. 보드에서 다이어그램을 시각적으로 변경하면 Mermaid 코드가 업데이트됩니다. 코드를 편집하면 다이어그램이 다시 렌더링됩니다.
• 협업을 위해 설계됨. 다이어그램이 Miro 네이티브 콘텐츠이므로 팀이 같은 보드에서 실시간으로 댓글을 달고 공동 편집하며 반복적으로 작업할 수 있습니다.

Mermaid 다이어그램 만들기

Mermaid 다이어그램은 세 가지 방법으로 추가할 수 있습니다.

보드에 Mermaid 코드 붙여넣기

1. 편집기, 문서, AI 채팅에서 Mermaid 코드를 복사합니다.
2. 보드에 붙여넣습니다.
   Miro는 코드를 Miro 도형으로 구성된 다이어그램으로 렌더링합니다.

Miro MCP로 다이어그램 만들기

Miro MCP Server에 연결된 MCP 호환 AI 도구(예: Cursor 또는 Claude Code)를 사용해 보드에 Mermaid 다이어그램을 생성합니다.

1. AI 툴을 Miro MCP에 연결합니다.
2. 에이전트에게 특정 보드에 Mermaid 다이어그램을 생성하도록 요청합니다. 기존 보드에 다이어그램을 만들려면 프롬프트에 보드 URL을 포함하세요.
3. Miro에서 보드를 열어 렌더링된 다이어그램을 검토하고 편집하며 협업하세요.

에이전트는 보드에서 Mermaid 코드를 다시 읽어 다이어그램을 제자리에서 업데이트할 수도 있어 코드베이스와 Miro 사이를 계속 반복 작업할 수 있습니다. 에이전트가 다이어그램을 편집하면 추가, 제거, 변경된 내용을 표시하는 범례를 추가할 수 있습니다.

참고: Enterprise 플랜에서는 회사 관리자가 사용자가 연결하기 전에 Miro MCP를 활성화해야 합니다. 자세한 내용은 Miro MCP Server 관리자 가이드를 참조하세요.

다이어그램 형식에서 시작

1. Miro 보드에서 생성 바를 열고 형식 > 다이어그램을 선택하세요.
2. 코드로 구축을 클릭하세요.
3. 코드 패널에 자체 Mermaid 코드를 붙여넣거나 Mermaid 템플릿을 선택하세요.
   다이어그램이 Miro 도형으로 렌더링됩니다.
4. 집중 모드나 캔버스에서 편집을 계속하세요.

다이어그램 형식, 집중 모드, 레이어, 템플릿에 대한 자세한 내용은 Miro 다이어그램을 참조하세요.

Mermaid 다이어그램 편집

보드에서 시각적으로 편집하거나 Mermaid 소스에서 편집하거나 AI로 다이어그램을 편집할 수 있습니다. 변경 내용은 동기화된 상태로 유지됩니다.

시각적으로 편집

1. 다이어그램을 집중 모드에서 엽니다.
2. 도형, 선 또는 텍스트 레이블을 선택해 다이어그램에서 바로 편집합니다. 선택한 요소에 대한 컨트롤이 포함된 툴바가 열립니다. 예: 도형 유형 변경, 텍스트 편집, 글꼴 크기 조정, 굵게 적용, 텍스트·테두리·채우기 색 설정.
   
3. 레이아웃 방향을 설정합니다. Diagram 툴바의 방향 컨트롤을 클릭하고 위에서 아래로, 아래에서 위로, 왼쪽에서 오른쪽으로, 또는 오른쪽에서 왼쪽으로를 선택합니다.
   
4. 간격을 조정합니다. 레이아웃 컨트롤을 열어 더 촘촘한 레이아웃은 좁게 , 균형 잡힌 간격은 보통 , 스캔하기 쉬운 여유 있는 레이아웃은 넓게 를 선택합니다.
   
5. 코드 패널을 열어 Mermaid 구문이 일치하도록 업데이트되었는지 확인합니다.

코드 편집

1. 다이어그램을 집중 모드에서 엽니다.
2. 코드 패널을 엽니다.
   
3. Mermaid 구문을 업데이트합니다.
   편집하면 다이어그램이 즉시 다시 렌더링됩니다.

코드 패널에서 설정 아이콘(톱니)을 클릭하여 편집기에서 코드가 표시되는 방식을 조정합니다:

• 라인 번호: 편집기에서 줄 번호를 표시하거나 숨깁니다.
• 텍스트 줄바꿈: 긴 줄을 패널 너비에 맞춰 줄바꿈해 가로로 스크롤하지 않습니다.

AI로 편집

1. 다이어그램 위젯의 링크를 복사합니다.
2. 사용할 AI 도구를 열고 Miro MCP에 인증된 상태로 접속합니다.
3. 에이전트에게 변경 사항을 요청하고 편집하려는 다이어그램 위젯의 링크를 붙여넣습니다.
   에이전트가 편집하는 동안 다이어그램이 실시간으로 같은 위치에서 다시 렌더링됩니다.

참고: 시각적 편집과 코드 패널은 집중 모드에서만 사용할 수 있습니다. 캔버스에서 직접 분할 보기로 편집하는 기능은 지원되지 않습니다.

추가 편집 기능

도형이 더 필요하거나 도형을 자유롭게 이동하려면 다이어그램을 자유 형식으로 전환하세요. 이 작업은 도형 패널, 레이아웃 패널에서 시작하거나 다이어그램에서 도형을 이동해 시도하면 시작할 수 있습니다.

1. 도형을 이동해 보거나 도형 패널 또는 레이아웃 패널에서 자유 형식으로 전환 을 선택하세요.
    자유 형식 편집으로 전환 모달이 열립니다.
2. 전환 방법을 선택하세요:
   • 전환 후 교체: 이 다이어그램을 자유 형식으로 변환합니다.
   • 복사본 생성 후 전환: 현재 Mermaid 버전은 유지하고 복사본을 자유 형식으로 변환합니다.

경고: 다이어그램을 자유 형식으로 전환하면 Mermaid 코드와 더 이상 동기화되지 않으며 MCP를 통해 편집할 수 없습니다.

지원되는 다이어그램 유형

플로차트는 Miro 도형으로 표시됩니다. 추가적인 Mermaid 다이어그램 유형이 순차적으로 추가됩니다:

아직 시각적으로 편집할 수 없는 다이어그램 유형이 필요하면 이 양식에 피드백을 남겨 주세요. 인터뷰 요청을 위해 연락할 수 있습니다.

Mermaid 다이어그램 유형과 문법 전체 목록은 공식 Mermaid 문서를 참고하세요.

공유 및 내보내기

• Miro MCP로 읽기. 연결된 에이전트에게 보드 URL에서 다이어그램을 읽어 코드베이스, PR 또는 다른 도구에 문서화하도록 요청하세요. Mermaid 소스는 양방향 작업에 계속 사용할 수 있습니다.
• 링크 공유. 보드 URL을 복사하거나 다이어그램의 더보기 메뉴 (⋯)에서 집중 모드 링크 복사를 선택해 공동 작업자를 바로 다이어그램으로 보낼 수 있습니다. 또한 보드 공유 및 공동 작업자 초대를 참조하세요.
• PDF 또는 이미지로 다운로드. 다이어그램의 더보기 메뉴 (⋯)에서 PDF로 내보내기 또는 이미지로 내보내기 (JPG, SVG 또는 PDF)를 선택하세요. 보드에서 다이어그램을 이미지로 복사할 수도 있습니다.

알려진 제한 사항

다음 제약 사항을 참고하세요.

• 시각적 편집은 플로차트에서만 사용할 수 있습니다.
• 시각적 편집과 코드 패널은 집중 모드에서만 사용할 수 있습니다.
• 도형, 텍스트, 선의 시각적 편집은 Mermaid 구문이 지원하는 범위로 제한됩니다.
• 다이어그램은 Miro의 기본 자동 레이아웃을 사용합니다. Mermaid 다이어그램에서는 도형을 자유롭게 이동할 수 없습니다.

기능 요청은 지속적으로 검토하므로 이러한 제약이 작업에 장애가 된다면 커뮤니티나 관리자에게 문의하세요.

추가 정보

• Mermaid 문법, 지원되는 다이어그램 유형 및 예제는 공식 Mermaid 문서를 참조하세요.
• 레이어, 컨테이너, 집중 모드 등 다이어그램 형식의 기능은 Miro 다이어그램을 참조하세요.
• AI 도구를 Miro에 연결하는 방법은 Miro MCP Server 개요를 참조하세요.