기존에는 서비스 아키텍처, Sequence Diagram을 그리기 위해 draw.io나 Keynote를 사용했습니다. 두 가지 툴의 단점은 직접 선을 그리고, Text box를 지정해야 하기 때문에 작성하는데 상당한 시간이 소요되는 문제가 존재했습니다. draw.io나 keynote 외에도 python 언어를 지원하는 diagrams도 사용했었으나 live editing이 제한적이어서 사용상 불편함이 다수 존재했습니다.

개요

• Mermaid란 간단한 Code를 통해 다이어그램을 작성할 수 있게 만드는 Open Source 툴입니다.
• .md 포맷으로 작성이 가능하고 mermaid api를 지원하는 웹 혹은 플랫폼이라면 어디서든 사용할 수 있는 장점이 있습니다. 또한, 사용자가 web source 내부에 직접 Mermaid API를 호출해 사용할 수 있습니다.
• Mermaid가 코드로 다이어그램을 작성함에 있어 편리함은 존재하지만 개별 컴포넌트의 수가 많아질 경우 사용자의 의도대로 이쁘게 그려지지 않는 단점이 있습니다. 이 때문에 간단한 다이어그램 혹은 초기 프로토타입용 목적으로 사용하기에 적절합니다.

Diagram

• Mermaid Chart는 Flowchar, Sqeuence Diagram 등 다양한 다이어그램을 지원합니다.

Flowchart

https://mermaid.js.org/syntax/flowchart.html

• Flowchart는 서비스 flow, 네트워크 topology를 작성하는데 유용한 차트입니다.

flowchart TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]

Sequence Diagram

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

• Sequence Diagram은 API flow를 작성하는데 유용한 차트입니다.

sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!

Entity Relationship Diagram

https://mermaid.js.org/syntax/entityRelationshipDiagram.html

erDiagram
    CUSTOMER }|..|{ DELIVERY-ADDRESS : has
    CUSTOMER ||--o{ ORDER : places
    CUSTOMER ||--o{ INVOICE : "liable for"
    DELIVERY-ADDRESS ||--o{ ORDER : receives
    INVOICE ||--|{ ORDER : covers
    ORDER ||--|{ ORDER-ITEM : includes
    PRODUCT-CATEGORY ||--|{ PRODUCT : contains
    PRODUCT ||--o{ ORDER-ITEM : "ordered in"

Gitgraph Diagram

https://mermaid.js.org/syntax/gitgraph.html