by
Nov 07. 2024
전자책 출판을 위한 VitePress - Mermaid
「글을 긷자」 마크다운 문법의 텍스트만으로 구현하는 도표
이미지로 된 무언가를 만들려면 포토샵을 실행시켜야 할지 파워포인트를 실행시켜야 할지 고민할 때가 있습니다. 요즘에야 자연스럽게 AI 서비스부터 찾게 되기도 하지만, 요청 결과가 썩 마음에 들지 않을 때도 있어서 직접 부지런히 손을 움직여야 하는 일이 필요해 보이기도 합니다.
도표를 그리려고 할 때도 마찬가지입니다. 선과 면 그리고 텍스트만으로 이루어져 단순해 보이는 것도 막상 직접 레이아웃을 구상하고 데이터를 넣으려고 하면 여간 번거로운 작업이라고 느끼지 않을 수 없습니다. 다행히, 요즘엔 활용할 수 있는 무료 기술과 방법론들이 너무 많아서 본인에게 적합한 것을 가져다 적용하기만 하면 됩니다. 이번 화에서는 그중의 하나인 Mermaid에 대해서 알아보겠습니다.
Mermaid
Markdown에서 영감을 받은 텍스트 정의를 렌더링 하여 다이어그램을 동적으로 생성하고 수정하는 JavaScript 기반 다이어그램 작성 및 차트 작성 도구입니다. (출처: 공식 홈페이지, 구글에서 번역됨)
공식 홈페이지의 메인Mermaid가 적용된 환경에서는 여러 종류의 도표를 마크다운(Markdown) 문법을 활용해 그릴 수 있습니다. ‘그린다’라고 표현하긴 했지만, 결과물은 사실 SVG¹ 형식의 개체입니다. 웹 브라우저에서도 이미지처럼 해당 개체를 해석하는 것이 아니라, 전용의 <svg> 요소를 사용해 웹 문서 내에 표현합니다.
그리고 우리는, 이러한 도표 생성 방식을
집필 환경에 적용할 수 있습니다.
등장인물 간의 관계 표현
아래의 이미지는 작품 내 등장인물들 간의 관계를 유추하거나 등장인물들 간에 어떤 상호작용이 있었는지를 확인할 수 있는 예입니다. 생성된 그래프 이미지는 다음과 같은 코드가 사용되었습니다. 이는 실제 그래프가 구현된 코드와 완전히 똑같습니다.
```mermaid
sequenceDiagram
participant 남주
participant 여주
남주->>지나가는 사람: Hello 지나가는 사람, how are you?
loop HealthCheck
지나가는 사람->>지나가는 사람: Fight against hypochondria
end
Note right of 지나가는 사람: Rational thoughts <br/>prevail!
지나가는 사람-->>남주: Great!
지나가는 사람->>여주: How about you?
여주-->>지나가는 사람: Jolly good!
```
VitePress에서 그래프가 구현된 모습: 시퀀스 다이어그램이야기 흐름 표현
아래의 이미지는 작품의 이야기 흐름을 확인할 수 있는 예입니다. Git 기반의 버전 관리 환경에서 이루어진 작업 이력을 확인할 수 있는 그래프로, 생성된 그래프 이미지는 다음과 같은 코드가 사용되었습니다. Git 용어에 대해서는 나중에 다룰 텐데, 여기에 사용된 용어는 집필 환경에서 사용되는 표현과 연관 지을 수 있습니다.
```mermaid
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': { 'mainBranchName': 'Main', 'rotateCommitLabel': false } }}%%
gitGraph TB:
commit id: "Alpha"
commit id: "Beta"
branch "Branch 1"
commit id: "Gamma Gamma Gamma Gamma"
commit
checkout Main
commit
commit id: "to-pick"
checkout "Branch 1"
commit
commit
checkout Main
commit
merge "Branch 1"
commit
branch "Branch 2"
commit
commit
checkout "Branch 1"
merge "Branch 2"
commit
checkout Main
merge "Branch 1"
commit
```
Git 용어를 작품 이야기 흐름에 빗댄 예
commit: 인물 등장, 사건의 발생, 사건의 종료
branch: 사건의 발생으로 인한 새로운 흐름
checkout: 연관된 흐름과의 연결
merge: 이야기 흐름의 합쳐짐, 사건의 해소, 갈등의 해소
VitePress에서 그래프가 구현된 모습: Git 그래프연재 안내
브런치북 「글을 Git[긷]자」는 웹 서비스를 위한 UI/UX 개발자인 저자가, 다년간의 실무 경험을 바탕으로 Git과 GitHub 그리고 Visual Studio Code와 Cursor라는 텍스트 에디터를 이용한 글쓰기 방식을 제안하기 위해 기획되었습니다.
https://github.com/enchic/gitzza-plaza
각주
1. SVG(Scalable Vector Graphics): 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식이다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능하다. (출처: 위키백과)
본 게시글은 발행 후에 언제든 수정될 수 있습니다.
