2023년 4월 9일 작성

Mermaid.js - Markdown 문서에 Diagram 그리기

Markdown 문서에 Mermaid.js를 사용하여 다양한 Diagram을 그릴 수 있습니다.

Mermaid.js Diagram

  • text와 code를 작성하여 diagram을 그립니다.
    • code로 작성하기 때문에 수정이 쉽습니다.
  • mermaid code block 안에 mermaid 문법에 맞게 작성합니다.
    • mermaid code block은 backtick 세 개에 mermaid keyword(```mermaid)로 시작하여, backtick 세 개(```)로 끝납니다.

Diagram 제목 작성하기

---
title: [diagramTitle]
---
  • 모든 종류의 diagram은 title 영역에 제목을 작성할 수 있습니다.
---
title: Diagram 제목 예시
---

classDiagram
class Class

---
title: Diagram 제목 예시
---

classDiagram
class Class

Diagram code 안에 주석 작성하기

  • percent 기호 두 개(%%)를 사용합니다.
classDiagram

%% 주석입니다.
class Class

classDiagram

%% 주석입니다.
class Class

Reference

목차