기술소식
'mermaid' 마크업 기반 다이어그램 생성 JS 라이브러리
작성자 admin 등록일 2019-01-22 조회수 1397 추천 0 댓글 1
기술구분 JS
라이선스 MIT
웹사이트 https://github.com/knsv/mermaid
짧은설명 텍스트 마크업 기반 다이어그램&플로차트 생성 라이브러리
JS 이미지
STORY COVER IMAGE

#mermaid는

오늘은 '텍스트 마크업 기반 차트 생성' 자바스크립트 라이브러리를 소개합니다.

MIT 라이선스로 제공되기 때문에 개인, 상용 어플리케이션 개발에 두루 사용가능합니다.

자세한 내용은 하단 URL에 방문해 보시길 권장합니다.

https://github.com/knsv/mermaid


#mermaid로 그릴 수 있는 차트들

1. Flowchart

2. Sequence diagram

3. Gantt diagram

4. Class diagram (실험적 기능)

5. Git graph (실험적 기능)


#마크업 작성 방식

아래 1) 플로우 차트를 그리기 위해서는 다음과 같이 텍스트 마크업을 작성하면 됩니다.

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;


아래 2) 시퀀스 다이어그램은 아래와 같이 마크업을 작성하면 됩니다.

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts prevail...
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!


#다이어그램 둘어보기

1. 플로우 차트


2. 시퀀스 다이어그램


3. 간트 다이어그램


4. 클래스 다이어그램(실험적 수준)


5. Git 그래프(실험적 수준)







비회원은 댓글을 작성 할 수 없습니다.