보통 UML 다이어그램이나 차트를 그릴 때는 PPT나 다른 복잡한 도구들을 사용하는 경우가 많다. 하지만 이런 도구들로 블로그나 웹사이트에 삽입하기에는 너무나 번거로운 경우도 있다. 그러던 중, Markdown 구문만으로도 다양한 다이어그램과 차트를 그릴 수 있는 간편한 도구인 Mermaid를 발견하게 되었다.
Mermaid의 개요
Mermaid | Diagramming and charting tool
Mermaid Diagramming and charting tool JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.
mermaid.js.org
Mermaid란?
Mermaid는 사용하기 쉽고 웹 응용 프로그램, 데스크톱 응용 프로그램 및 명령줄 도구와 같은 다양한 환경에 통합할 수 있는 인기 있는 오픈 소스 라이브러리이다. 순서도, 시퀀스 다이어그램, 간트 차트, 파이 차트 등 다양한 유형의 다이어그램을 지원한다. Mermaid를 사용하면 몇 줄의 코드로 다이어그램과 차트를 만들 수 있으므로 기술 문서 및 블로그 게시물을 작성하는 데 완벽한 도구가 되며, CSS를 사용하여 다이어그램의 스타일과 레이아웃을 사용자 지정할 수도 있다.
장단점을 알아본다면,
장점
- 배우기 쉬움: 인어는 배우고 사용하기가 매우 쉽습니다. 프로그래밍 경험이 거의 없거나 전혀 없는 사용자도 Mermaid 구문을 사용하여 다이어그램을 빠르게 만들 수 있음
- 가벼움: 머메이드 다이어그램은 가벼우며 페이지 로드 시간을 늦추지 않고 웹 페이지나 블로그 게시물에 쉽게 포함할 수 있음
- 사용자 지정 가능: Mermaid는 높은 수준의 사용자 지정이 가능하여 특정 요구 사항에 맞게 다이어그램을 조정할 수 있음
- 통합: Mermaid는 GitHub, VS Code 및 Jupyter 노트북과 같은 다른 도구 및 애플리케이션과 쉽게 통합될 수 있음
- 다중 다이어그램 유형: Mermaid는 순서도, 시퀀스 다이어그램, Gantt 차트 등 다양한 다이어그램 유형을 지원하므로 다양한 유형의 다이어그램을 생성할 수 있는 다목적 도구임
- 오픈 소스: Mermaid는 오픈 소스 도구이므로 자유롭게 사용할 수 있으며 필요에 따라 소스 코드를 수정하고 배포할 수 있음
단점
- 제한된 사용자 정의: Mermaid의 디자인 옵션은 다른 다이어그램 작성 도구에 비해 제한적임. 이는 고도로 사용자 지정되었거나 복잡한 다이어그램이 필요한 사용자에게는 단점이 될 수 있음
- 가파른 학습 곡선: Mermaid는 비교적 사용하기 쉽지만 여전히 코드 구문과 다이어그램 작성 언어에 대한 기본적인 이해가 필요합니다. 이는 이러한 개념에 익숙하지 않은 일부 사용자에게는 장벽이 될 수 있음.
- 복잡한 다이어그램에 대한 제한된 지원: Mermaid는 중첩된 구성 요소가 많거나 복잡한 순서도와 같이 매우 복잡한 다이어그램을 만들어야 하는 사용자에게는 최선의 선택이 아닐 수 있음.
전반적으로, Mermaid는 간단한 다이어그램을 빠르고 쉽게 만들어야 하는 사용자에게 훌륭한 옵션이지만 더 복잡하거나 고도로 사용자 정의된 다이어그램에는 최선의 선택이 아닐 수 있다. 그러니까 블로그용이나 간단하게 웹상에서 그리기에는 너무 괜찮을 수 있다. 라는 말이 될 것이다.
실제 활용 예제
Mermaid를 사용하면 간단한 스크립트 코드만으로 웹 페이지에 다이어그램을 표현할 수 있다. 예를 들어, 위에서 제시한 코드를 통해 웹 페이지에 간단한 순서도와 파이 차트, 그래프를 표현할 수 있다.
사용하는 방법은 NPM으로 NPM으로 mermaid을 설치하는 방법과 CDN을 추가해서 바로 사용할 수 있다.
mermaid
Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.. Latest version: 10.4.0, last published: 11 days ago. Start using mermaid in your project by running `npm i mermaid`. There are 381 other project
www.npmjs.com
CDN을 추가
<script src="https://cdn.jsdelivr.net/npm/mermaid@9.4.3/dist/mermaid.min.js"></script>
<script>
mermaid.initialize({ startOnLoad: true });
</script>와 같이 스크립트를 추가 해두면 된다.
html구문은
<div class="mermaid">
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
</div>와 같이 작성하면
웹상에서 다이어그램을 그릴 수 있다.
전체코드는 다음과 같다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mermaid UML</title>
<script src="https://cdn.jsdelivr.net/npm/mermaid@9.4.3/dist/mermaid.min.js"></script>
<script>
mermaid.initialize({ startOnLoad: true });
</script>
</head>
<body>
<h1>Mermaid UML</h1>
<div class="mermaid">
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
</div>
<div class="mermaid">
pie title NETFLIX
"Time spent looking for movie" : 90
"Time spent watching it" : 10
</div>
<div class="mermaid">
graph LR
A[Square Rect] -- Link text --> B((Circle))
A --> C(Round Rect)
B --> D{Rhombus}
C --> D
</div>
</body>
</html>
이 외에도 Mermaid는 다양한 예제와 함께 제공되는 공식 문서나 온라인 편집기인 Mermaid Live Editor를 통해 직접 다이어그램을 그려보며 연습할 수 있다.
첨부파일
위 소스의 html 파일을 압축해서 첨부한다.
결론
Mermaid는 Markdown 구문만으로도 웹 상에서 간편하게 다이어그램을 그릴 수 있는 훌륭한 도구다. 복잡한 그래픽 도구나 프로그래밍 경험이 없어도 누구나 손쉽게 사용할 수 있다. 물론, 복잡한 다이어그램이나 고도의 사용자 정의가 필요한 경우 다른 도구를 사용하는 것이 좋겠지만, 일반적인 웹상의 표현이나 블로그 작성 시에는 Mermaid가 아주 유용하다. 그리고 만약 Mermaid의 문법에 대한 궁금증이 생긴다면, 항상 CHATGPT에게 질문하면 빠르게 해결할 수 있을 것이다.
실제로 아래의 글도 Mermaid의 Markdown으로 다이어그램을 그려본 것이다.
[Nodejs] RESTful API Server 란?
Nodejs로 웹서버를 운영하다보면 하나의 서버에서 다 운영하다보면 프론트 단에서 멈추는 순간이면 서버가 멈칫 할 수가 있다. 서버는 응답만 해주면 되는데, 그래서 웹서버도 서버와 클라이언트
devit.koreacreatorfesta.com
'Language > JAVASCRIPT' 카테고리의 다른 글
| 자바스크립트를 이용한 URL 쿼리스트링(Query String) 파싱 방법 (0) | 2023.11.10 |
|---|---|
| mermaid를 이용한 프로젝트 일정 간트차트 그리기 (0) | 2023.10.18 |
| [webRTC] 카카오엔터프라이즈 서비스를 이용한 영상통화 비디오챗팅 (2) | 2021.05.27 |
| On-Premise(온프레미스) 와 VPN / Off-Premise(오프프레미스)와 Cloud(클라우드) (0) | 2020.05.11 |
| 구글맵 API에서 'PlacesService' 속성 오류 해결하기 Uncaught TypeError: Cannot read property 'PlacesService' of undefined (0) | 2015.01.28 |
