다이어그램 만들기

GitHub Copilot 채팅은 데이터를 더 잘 이해하고 인사이트를 전달하는 다이어그램을 만드는 데 도움이 될 수 있습니다.

이 기사에서

GitHub Copilot 채팅 GitHub.com를 활용하면 Mermaid 다이어그램으로 data를 시각화하여 복잡한 정보를 직관적으로 파악하고 효과적으로 공유할 수 있습니다. 데이터나 코드를 기반으로 다이어그램을 생성하도록 Copilot 채팅에게 요청할 수 있으며, 요청할 경우 그러한 다이어그램을 만드는 데 필요한 코드가 제공됩니다.

예제 시나리오

Gantt 차트를 만들어 project 타임라인을 시각화하려고 합니다. GitHub.com의 Copilot 채팅에 프로젝트 단계, 기간 등의 정보를 제공하여 Gantt 차트의 Mermaid 코드 생성을 요청할 수 있습니다. 그런 다음GitHub에서 문제, 토론 또는 끌어오기 요청과 같은 Mermaid 구문을 지원하는 Markdown 파일에서 이 코드를 사용할 수 있습니다.

예시 프롬프트

Copilot prompt
Create a Mermaid Gantt diagram that covers the period August 1st 2025 until January 31st, 2025. Include 5 phases, each taking 6 weeks, and overlapping equally.

예제 응답

참고

다음 응답이 예제입니다. Copilot 채팅 응답은 비결정적이므로 여기에 표시된 응답과 다른 응답을 얻을 수 있습니다.

Copilot는 순서도 작성에 필요한 Mermaid 코드를 생성할 수 있습니다. Copilot 채팅에서 제공하는 코드를 복사하여 GitHub에서 Markdown을 지원하는 문제나 토론 등에 붙여넣을 수 있습니다.

다이어그램을 올바르게 렌더링하려면 코드 블록 앞에 ```mermaid과 뒤에 ```을 포함하여 올바른 Mermaid 구문을 사용해야 합니다.

```mermaid
gantt
    title Project Timeline: Aug 2025 - Jan 2026
    dateFormat  YYYY-MM-DD
    axisFormat  %b %d

    section Phase 1
    Phase 1           :a1, 2025-08-01, 42d

    section Phase 2
    Phase 2           :a2, 2025-09-07, 42d

    section Phase 3
    Phase 3           :a3, 2025-10-13, 42d

    section Phase 4
    Phase 4           :a4, 2025-11-18, 42d

    section Phase 5
    Phase 5           :a5, 2025-12-24, 42d
```

이 Mermaid 코드는 다음과 같은 다이어그램을 생성하게 됩니다.

렌더링된 인어 Gantt 차트의 스크린샷.

추가 참고 자료

  •         [Mermaid 설명서](https://mermaid-js.github.io/mermaid/#/)

  •         [GitHub Copilot 채팅 설명서](/copilot/how-tos/use-chat)