Sign in Subscribe
Etc

Mermaid

Seonho Jeong

• 4 min read

k8s 문서(https://kubernetes.io/ko/docs/concepts/services-networking/ingress/)를 보던 중 이미지를 클릭했더니 뜬금없는 페이지로 이동하게 되어 알게되었다.

페이지 html 소스 타이틀에서도 볼 수 있듯이

...
<title>Online FlowChart &amp; Diagrams Editor - Mermaid Live Editor</title>
...

Online FlowChart & Diagrams Editor 라고 한다.

개발하다 보면 비즈니스 로직이나 개발 내부 로직이 매우 복잡해지는 경우가 있다.

유지보수나 팀원에게 공유를 하기 위해 Flowchart를 그려서 이미지를 캡쳐 후 공유하곤 하는데... (혹은 Jira Flowchart macro를 사용하는 팀원도 있었다.) 맨 처음 생성할 때는 괜찮지만 이후에 수정하게 될 경우가 문제된다.

또한, 내가 아닌 다른 팀원이 인수받아 Flowchart를 손보게 되는 경우엔 같은 플로우차트 파일이 공유되지 않는 이상 처음부터 다시 그리게 될 수도 있다. 즉, 플로우차트 이미지와 파일 모두 관리되어야 한다.

Mermaid는 그 동안의 Flowchart 공유의 불편함을 해소할 수 있다.

text와 code로 Flowchart를 정의하고 즉시(live) 수정할 수 있다. 하지만, 새로운 Mermaid Syntax를 배워야하는데 Markdown과 친숙한 사람에게는 러닝커브가 높다고 한다.

간단하게 Syntax부터 여러 다이어그램 (Flowchart, Sequence Diagram, Gantt ..)을 맛보고 포스팅에 공유하는 것으로 마무리해보려고 한다.

Syntax

초기에는 Diagrams를 정의하는 것에서부터 시작했다고 한다.

아래 코드와 이미지를 대조해보면 매우 직관적인 문법을 사용한 것으로 보인다.

erDiagram
          CUSTOMER }|..|{ DELIVERY-ADDRESS : has
          CUSTOMER ||--o{ ORDER : places
          CUSTOMER ||--o{ INVOICE : "liable for"
          DELIVERY-ADDRESS ||--o{ ORDER : receives
          INVOICE ||--|{ ORDER : covers
          ORDER ||--|{ ORDER-ITEM : includes
          PRODUCT-CATEGORY ||--|{ PRODUCT : contains
          PRODUCT ||--o{ ORDER-ITEM : "ordered in"

그 외 다이어그램들도 각각의 Rule이 있고 모두 생성하려는 다이어그램과 매우 직관적으로 매칭되는 Syntax를 가지고 있다.

각 다이어그램마다 상단에 타입을 정의후 코드를 작성하는 형태다.

## Flowchart
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

## Sequence diagram
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
    
## Gantt
gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10

section A section
Completed task            :done,    des1, 2014-01-06,2014-01-08
Active task               :active,  des2, 2014-01-09, 3d
Future task               :         des3, after des2, 5d
Future task2               :         des4, after des3, 5d

Deployment

배포(공유)에는 여러 방법이 있는데

  • Live Editor에서 작성후 이미지를 다운. img src에 넣고 <a href="">로 감싸서 클릭 시 Live Editor로 이동시킨다. (k8s 문서가 해당 방법을 사용했다.)
  • mermaid는 js기반 프로젝트인데 web에서 mermaid 모듈을 import하고 mermaid.initialize({ startOnLoad: true });를 호출하면, <pre class="mermaid">로 감싸져 있는 mermaid code를 Diagram으로 렌더링해준다고 한다.

2번째 방법... ghost에서 사용할 수 있지 않을까?

raw HTML 코드를 아래처럼 작성하고 (해당 코드는 class를 정의하지 않았다.)

        graph TD 
        A[Client] --> B[Load Balancer] 
        B --> C[Server01] 
        B --> D[Server02]
  
<script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
    mermaid.initialize({ startOnLoad: true });
  </script>

위 스크립트를 ghost 설정 Post Setting에 넣으면 될 거 같다. 

        graph TD 
        A[Client] --> B[Load Balancer] 
        B --> C[Server01] 
        B --> D[Server02]

성공적으로 렌더링 되는 것을 확인.

Sign up for more like this.

Enter your email
Subscribe