[ Mermaid ] 명령어로 Diagram 그리기

ERD를 그리기 위해 이런저런 방법들을 찾아보다가 Mermaid를 알게되고 박수를 쳤다.

Mermaid를 활용하면 간단한 명령어만으로도 각종 Diagram을 뚝딱 그릴 수 있다!

Mermaid란?

Markdown에서 텍스트와 코드를 통해 동적으로 Diagram을 생성할 수 있는 도구이다.

FYI. JavaScript 기반으로 만들어졌다고 한다.

활용 예시

1. Notion

   코드 블럭을 통해 작성할 수 있다.

   

2. Github

   Pull Request, Issue 등등..

   

이 외에도 Markdown 문법이 사용가능한 곳들에서는 모두 활용 가능하다.

(초간단) 문법 정리

1. ERD
   • 활용 예시

     

   • 명령어 예시

     erDiagram
     	테이블명 {테이블간의 관계} 테이블명 : “설명"

   • 테이블간의 관계 표현을 위한 명령어

     왼쪽	오른쪽	의미
     |o	o|	0개이거나, 1개
     ||	||	1개
     }o	o{	0개 이상
     }|	|{	1개 이상

   • 이외 가능한 것
     • 테이블의 컬럼과 타입 명시
     • 배경 색상 선정
     • 기타 등등

2. Sequence diagram
   • 활용 예시

     

   • 명령어 예시

     sequenceDiagram
     	객체 {노드간의 흐름} 객체 : "설명"

   • 노드간의 흐름표현을 위한 명령어

     명령어	의미
     ->	화살표가 없는 실선
     -->	화살표가 없는 점선
     ->>	화살촉이 있는 실선
     -->>	화살촉이 있는 점선
     -x	끝에 십자가가 있는 실선
     --x	끝에 십자가가 있는 점선.
     -)	끝에 열린 화살표가 있는 실선(비동기)
     --)	끝에 열린 화살표가 있는 점선(비동기)

   • 이외 가능한 것
     • 노트 추가 ( 자세하고 긴 설명을 적고 싶을 때 유용하다. )
     • 반복적으로 실행되는 블럭 표현 ( loop )
     • 병렬적으로 실행되는 블럭 표현 ( par )
     • 강조하고 싶은 블럭 표현 ( critical )
     • 기타 등등

이 외에도 FlowChart, Class diagram, State diagram 등등 여러 Diagram을 그릴 수 있다.

공식 문서

• 자세한 문법, 예시 등은 공식문서를 통해 확인할 수 있다.

• 빈 공간에 명령어를 입력하는 것이 부담스럽다면?

  Live Editor를 통해 예시를 보거나, 명령어가 입력된 결과를 확인해볼 수도 있다.