🥸 서론
이번 프로젝트를 진행하면서 항상 그렇듯 ERD (Entity Relationship Diagram) 을 작성했습니다.
기존에 제가 사용해왔던 ERD 작성 툴은 2가지가 존재했습니다.
eXERD 는 유료버전이며, ERD 를 수정 및 보는 사람은 프로그램을 설치 해야한다는 단점이 존재하여
사이트 형식인 ERD Cloud 를 선택했습니다.
하지만 ERD Cloud 에도 단점이 존재했는데요, 바로 회원가입을 해야하고, 사용자 측면에서는 접근성이 떨어진다는 점입니다.
이번 프로젝트는 public 프로젝트이기 때문에 개발자 외에도 ERD 또한 공유하는 것이 목적이었고, 빠른 접근성을 원했습니다.
그렇게 해서 알게 된 다이어그램 mermaid js 에 대해서 공유하려 합니다.
🤪 본론
Mermaid JS
Mermaid는 Markdown 에서 영감을 받아 텍스트 정의를 가져와 브라우저에서 동적으로 다이어그램을 생성하는
JavaScript 기반 다이어그램 및 차트 도구 입니다.
장점
- 오픈소스로 활발하게 개발이 진행되고 있다.
- GitHub 에서 지원하고 있기 때문에 GitHub 페이지에서 쉽게 접근할 수 있어 접근성이 뛰어나다.
- Markdown 형식으로 작성하기 때문에 러닝커브가 낮다.
- 기존 다이어그램 툴들과는 다르게 알아서 재배치를 해준다.
- ERD 뿐 아니라 다양한 다이어그램을 제공한다.
- PNG, SVG 등 내보내기가 간편하다.
- Git 으로 쉽게 History를 관리할 수 있다.
위에 적힌 장점을 하나 씩 살펴보겠습니다.
- 오픈소스로 활발하게 개발이 진행되고 있다.
2022.05.20 기준
47.3k 로 많은 사랑을 받고 있으며, 320명에 달하는 Contributors 가 존재하는 걸 확인할 수 있었습니다.
- GitHub 에서 지원하고 있기 때문에 GitHub 페이지에서 쉽게 접근할 수 있어 접근성이 뛰어나다.
https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/
Include diagrams in your Markdown files with Mermaid | The GitHub Blog
Mermaid is a JavaScript based diagramming and charting tool that takes Markdown-inspired text definitions and creates diagrams dynamically in the browser.
github.blog
2022-02-14 글입니다.
Github에서 공식적으로 지원하고 있기 때문에 readme.md 로 본인 프로젝트 메인에서 쉽게 접근할 수 있도록 설정할 수 있으며,
issue comments, pull request comments 등에서도 적용하여 볼 수 있도록 지원하고 있습니다.
이건 정말 큰 장점이라고 생각합니다.
굳이, 다른 프로그램을 설치하거나 외부 사이트를 접속해서 가입할 필요 없이 진행 중인 프로젝트에서 MarkDown 파일 형식으로
다이어그램을 관리할 수 있으며 그걸 GitHub 사이트에서 바로 볼 수 있는 접근성! 이전 다른 툴들에 비해 쉽게 접근할 수 있게 되었습니다.
- Markdown 형식으로 작성하기 때문에 러닝커브가 낮다.
- 기존 다이어그램 툴들과는 다르게 알아서 재배치를 해준다.
이는 꽤 큰 장점이라고 생각했습니다.
이전에는 툴 사용법을 배우고, 이곳저곳을 찾고 내가 원하는 걸 만들려면 어디에 있는지 찾고, 단축키도 따로 외우고 등등..
하지만 mermaid 는 markdown 형식으로 쉽게 작성할 수 있으며 사용 방법도 어렵다고 느끼지 않았기에
사이트에 나온 설명서만 읽어도 30분만 뚝딱뚝딱 해보면 쉽게 만들 수 있다고 느꼈습니다.
그리고, 만든 다이어그램에 대해서 배치를 어떻게 할까를 고민할 필요 없이 알아서 이쁘게(?) 배치를 해주니 좋았습니다.
- ERD 뿐만 아니라 다양한 다이어그램을 제공한다.
플로우차트부터 시작해서 Pie Char, Git Graph 까지 정말 다양하게 작성할 수 있었습니다.
- PNG, SVG 등 내보내기가 간편하다.
Online FlowChart & Diagrams Editor - Mermaid Live Editor
mermaid-js.github.io
웹사이트를 통해서 쉽게 Mermaid를 작성해보고, 실시간으로 View를 확인하고, 다른 파일로 보낼 수 있습니다.
- Git 으로 쉽게 History를 관리할 수 있다.
항상 v0.1, v1.0 v1.1 ... 이런 식으로 파일을 새로 만들어서 관리했던 입장에서는 작은 단위로 나누어서 커밋만 잘 해두면
커밋이력을 통해서 쉽게 버전관리가 되기 때문에 예전처럼 파일을 여러개를 만들 필요가 없어졌습니다.
그렇다면 단점 ?
- 디자인이 이쁘지 않다.
이건.. 개인적인 취향이자 생각이지만 기본 디자인이 이쁘지 않습니다.
물론 테두리, 선, 백그라운드 색상을 변경할 수 있는 방법이 존재하긴 하지만
디자인 감각 0 인 백엔드 개발자 입장에서는 손 대는 것이 더 이상해지기 때문에 일단 수정하지 않고 사용하고 있는데,
Github 에 적용된 디자인이 정말 심플하단 느낌을 받았습니다.
😯 그래서 어떻게 작성하지??
제가 작성했던 방법은 2가지가 있습니다.
1. Live Editor
Mermaid Live Editor 를 통해서 사이트에서 바로바로 작업을 진행할 수 있습니다.
기본적인 예시 다이어그램을 먼저 그려주기 때문에
처음해보는 경우, 간단하게 체험해볼 경우에는 위 라이브 에디터를 활용하는 게 간편해서 좋았습니다.
2. Visual Studio Code
Mermaid Markdown Syntax Highlighting 플러그인을 설치해서
쉽게 View 를 보면서 작성할 수 있었습니다.
프로젝트를 진행할 경우에는 VSCODE 에서 작성하는 것이 편하게 느껴졌습니다.
😮 문법은 뭐야?
https://mermaid-js.github.io/mermaid/#/flowchart
mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.
mermaid-js.github.io
공식사이트에 다이어그램 별로 설명이 자세히 나와있습니다.
본인이 작성하고 싶은 다이어그램의 설명을 보고 한 번 따라서 작성해보시면 좋을 것 같습니다.
😎 결론
markdown으로 작성하고, Git 으로 이력을 관리하고, GitHub 에서 쉽게 볼 수 있습니다.
GitHub 을 통해서 프로젝트를 진행하시는 분들은 한 번 해보는 걸 추천드립니다.
https://github.com/mermaid-js/mermaid
https://mermaid-js.github.io/mermaid/#/README
https://mermaid-js.github.io/mermaid-live-editor
'Tools' 카테고리의 다른 글
| [MySQL] 매일 밤 12시 콘솔 창 안 뜨게 하는 방법 (2) | 2022.02.01 |
|---|---|
| [Intellij] JPA cannot resolve column name 해결방법 (0) | 2022.01.26 |
| [VSCODE]Do you trust the authors of the files in this folder? (0) | 2021.08.09 |
| Spring Tool Suite(STS) 다운로드 및 설치 (0) | 2021.07.17 |
| Open JDK 설치 (zulu jdk 11) (0) | 2021.07.17 |
