Mermaid 란?

Mermaid를 사용하면 텍스트와 코드를 사용하여 다이어그램과 시각화를 만들 수 있습니다.
Markdown에서 영감을 받은 텍스트 정의를 렌더링하여 다이어그램을 동적으로 만들고 수정하는 JavaScript 기반의 다이어그래밍 및 차트 작성 도구입니다.

 

https://mermaid.js.org/intro/

 

About Mermaid | Mermaid

 

mermaid.js.org

 

만들 수 있는 다이어그램 유형

  • Flowchart
  • Sequence diagram
  • Gantt diagram
  • Class diagram
  • Git graph
  • Entity Relationship Diagram
  • User Journey Diagram
  • Quadrant Chart
  • XY Chart

 

만들기

Mermaid 사이트에서 가입하면 무료버전에서는 최대 3개 다이어그램을 생성할 수 있다.

https://www.mermaidchart.com/app/dashboard

 

Mermaid Chart - Create complex, visual diagrams with text. A smarter way of creating diagrams.

 

www.mermaidchart.com

 

 

 

특징 

  • Editor - 다이어그램을 생성하고 편집하기 위한 웹 기반 편집기
  • Mermaid AI - AI 채팅을 사용하여 다이어그램 생성
  • Whiteboard - 다이어그램을 생성하고 편집하기 위한 가상 화이트보드
  • Plugins - 기능을 확장하기 위한 플러그인
    • Official Mermaid Chart plugins:
      • Mermaid Chart GPT
      • Confluence
      • Jira
      • Visual Studio Code
      • JetBrains IDE
      • Google Docs
      • Microsoft PowerPoint and Word
      • Visit our Plugins page for more information.
  • Collaboration - 다이어그램에서 실시간으로 다중 사용자 편집을 위한 웹 기반 협업 기능 (Pro and Enterprise plans).

 

다이어그램 생성 초기에 Mermaid AI 를 사용하니 작업이 훨씬 수월했다.

 

이런식으로 다이어그램을 만들어주는데, 수정이 필요하면 edit 버튼으로 수정도 가능하다.

 

 

IntelliJ 에서 사용하기

IntelliJ 에서 사용하려면 Settings > Plugins 에서 다운로드 받고 사용하면 된다.

 

플러그인을 다운로드 받고 .md 파일을 만들고 작성하면 된다.

```mermaid
sequenceDiagram
    participant User as 사용자
    participant Cafe24 as 카페24<br>쇼핑몰
	
	... 코드 작성
```

 

코드 작성법

https://mermaid.js.org/syntax/sequenceDiagram.html#participants

 

Sequence diagrams | Mermaid

 

mermaid.js.org

 

맨 첫줄에는 작성하고자 하는 다이어그램 종류를 적어준다.

 

Syntax

Participants : 사각형 모양

Actors : 사람모양

 

Aliases

AS 로 별칭도 가능

 

sequenceDiagram
    participant A as Alice
    actor J as John
    A->>J: Hello John, how are you?
    J->>A: Great!

 

Messages

메시지는 실선이나 점선으로 표시 가능

 

동기 메시지 Synchronous Message

  • 요청을 보낸 뒤 응답이 올 때까지 기다림
  • 꽉찬 화살표에 실선으로 표시

비동기 메시지 Asynchronous Message

  • 요청을 보낸 뒤 응답을 기다리지 않음
  • 빈 화살표에 실선으로 표시

자체 메세지 Self Message

  • 자신에게 보내는 메세지
  • 생명선으로 회귀하는 화살표

반환 메세지 Reply/Return Message

  • 이전 호출의 반환을 기다리는 객체에게 다시 반환되는 메시지
  • 빈 화살표에 점선 으로 표시

 

sequenceDiagram
    actor Alice
    actor Bob

Alice->Bob:화살표 없는 실선
Alice-->Bob:화살표가 없는 점선
Alice->>Bob:화살촉이 있는 실선
Alice-->>Bob:화살촉이 있는 점선
Alice-xBob:끝에 십자가가 있는 실선
Alice--xBob:끝에 십자가가 있는 점선
Alice-)Bob:끝에 열린 화살표가 있는 실선 (async)
Alice--)Bob:끝에 열린 화살표가 있는 점선 (async)

 

Actor Creation

sequenceDiagram
    participant A AS AA
    actor B AS BB
    
    A->B: -> 실선
    create participant C
    A->>C: C 생성
    C->>A: Hi!

 

 

Grouping / Box

그룹화도 가능

sequenceDiagram
    participant A AS AA
    box Pink B & C
        participant B AS BB
        participant C AS CC
    end

    participant C AS CC
    
    A->B: Hi
    A-->B: Hi
    B->>C: Hi

 

Activations

활성화/비활성화 표현 가능

sequenceDiagram
    A->>B: how are you?
    activate B
    B-->>A: Great!
    deactivate B

%% 화살표 끝에 +/- 로 짧게 표현 가능
    A->>+B: how are you?
    B->>-A: Great!

Notes

노트 추가 가능  [ right of | left of | over ] 

sequenceDiagram
    A->B: 실선
    Note over A,B: A,B 사이에<br>노트 위치
    Note right of A: A 우측에<br>노트 위치
    Note left of A: A 좌측에<br>노트 위치

 

Loops

루프 표현 가능

sequenceDiagram
    autonumber
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts!

Alt/Opt

조건문 표현 가능

alt : if-else

opt : else 없는 if문

sequenceDiagram
    A->>B: Hello Bob, how are you?
    alt is sick
        B->>A: Not so good :(
    else is well
        B->>A: Feeling fresh like a daisy
    end
    opt Extra response
        B->>A: Thanks for asking
    end

Parallel

병렬 작업을 표기 가능 (중첩도 가능)

sequenceDiagram
    par Alice to Bob
        Alice->>Bob: Go help John
    and Alice to John
        Alice->>John: I want this done today
        par John to Charlie
            John->>Charlie: Can we do this today?
        and John to Diana
            John->>Diana: Can you help us today?
        end
    end

 

 

Background Highlighting

배경색도 변경 가능

sequenceDiagram
    participant Alice
    participant John

    rect rgb(191, 223, 255)
    note right of Alice: Alice calls John.
    Alice->>+John: Hello John, how are you?
    rect rgb(200, 150, 255)
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    end
    John-->>-Alice: I feel great!
    end
    Alice ->>+ John: Did you want to go to the game tonight?
    John -->>- Alice: Yeah! See you there.

 

sequenceNumbers

시퀀스 다이어그램에서 각 화살표에 번호 표시 가능

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

 

 

 

 

그 외에도 Critical Region, Break.. 등 다양한 기능이 있음

 

 

Export

작성한 다이어그램을 파일로 export

티스토리툴바