[Mermaid] ChatGPT를 이용하여 Mermaid 작성하기

DevTools

[Mermaid] ChatGPT를 이용하여 Mermaid 작성하기

llHoYall 2024. 6. 7. 20:10

Mermaid는 markdown 문법을 이용하여 간단하고 직관적으로 다이어그램을 생성할 수 있는 오픈 소스 도구이죠.

텍스트 기반이라 관리도 쉽고 협업도 용이합니다.

문법이 간편하고 쉽다곤 하지만 뭔가를 또 배우고 익히는 수고가 필요했는데, 이젠 LLM의 세상이죠. ㅎㅎ

ChatGPT, Gemini, GitHub Copilot등의 AI 서비스를 사용해서 간편하게 작성을 할 수 있게 되었습니다.

Flow chart, gantt chart, pie chart, sequence diagram, class diagram, state diagram, entity-relationship diagram, data flow diagram 등 다양한 결과물을 만들어낼 수 있습니다.

사용해 보기

원하는 입력을 제공한 후, mermaid 문법으로 원하는 결과를 생성해 달라고 부탁하면 다음과 같은 코드가 나옵니다.

저는 다양한 문법을 사용해서 예제를 하나 만들어 달라고 해봤어요.

```mermaid
graph TD
    %% 노드 정의
    A[Start] --> B{Decision}
    B -->|Yes| C[Process 1]
    B -->|No| D[Process 2]
    
    %% 스타일 적용: C와 D를 다른 색상으로 표시
    style C fill:#f9f,stroke:#333,stroke-width:4px
    style D fill:#bbf,stroke:#333,stroke-width:4px

    %% 서브그래프 정의
    subgraph Subprocess
        direction LR
        C --> E[Subprocess Step 1]
        E --> F[Subprocess Step 2]
    end
    
    %% 링크 스타일
    F -.-> G((Manual Check))
    G --> H[End]

    %% 추가 노드 및 링크
    D --> I[Alternative Process]
    I --> H

    %% 각 노드의 설명 추가
    classDef default fill:#fff,stroke:#000,stroke-width:2px;
    classDef decision fill:#fff,stroke:#f66,stroke-width:2px;
    class B decision;
```

이제, 간편하게 살펴보기 위하여 다음 사이트를 이용해 보겠습니다.

https://gist.github.com/

기본적으로 GitHub에서 mermaid를 지원하기 때문에 간편하게 확인 및 공유가 가능합니다.

Markdown 문법을 사용하여 mermaid를 사용한 코드로 명시한 후, 파일로 저장합니다.