markdown 기반 flow chart, mermaid

mermaid

markdown 기반 flow chart, sequence / class diagram, gantt chart, git graph 등을 표현할 수 있는 API

Flowchart #

Link text

One

Two

Hard edge

Round edge

Decision

Result one

Result two

Sequence Diagram#

Ganttchart#

Blog Setting

mermaid.initialize({ startOnLoad:true, theme: 'forest' });
window.mermaid.init(undefined, document.querySelectorAll('.language-mermaid'));

현재 이 블로그에서 위와 같은 설정을 통해 markdown 방식으로 아래와 같은 형태로 사용 가능

```mermaid
sequenceDiagram
Alice->>John: Hello John, how are you?
```