본문 바로가기
visualize

[다이어그램] mermaid 11.16.0_(2/2) 19~36(끝)

by 죄니안죄니 2026. 7. 23.
반응형

19. Special characters that break syntax

괄호나 특수문자가 Mermaid 문법으로 오해될 때는 표시 텍스트를 큰따옴표로 감싸면 돼.

위험한 예:

flowchart LR
    A[함수(a, b)]
 

안전하게:

flowchart LR
    A["함수(a, b)"]
Special characters that break syntax

특수문자가 들어간 문구는 기본적으로 큰따옴표를 사용하는 습관이 좋다. 공식 문서도 문제가 되는 문자를 따옴표 안에 넣는 방법을 안내한다.

20. Entity codes to escape characters

특수문자를 HTML 엔티티 코드로 바꿔서 넣을 수도 있어.

예를 들어 #의 십진수 코드는 35야.

 
flowchart LR
    A["#35; 제목"]
Entity codes to escape characters
 

HTML 문자 이름도 사용할 수 있어.

 
flowchart LR
    A["A & B"]
Entity codes to escape characters

여기서 &는 &를 뜻해.

공식 문서에서는 숫자 코드가 10진수이며, #는 #35;로 표현할 수 있다고 설명한다.

다만 일반적인 글에서는 큰따옴표만으로 해결되는 경우가 많아서 엔티티 코드는 문법 충돌이 있을 때만 사용하면 돼.

21. Subgraphs

여러 노드를 하나의 그룹으로 묶는 기능이야.

flowchart LR
    subgraph 주문 시스템
        A[주문]
        B[결제]
        A --> B
    end
Subgraphs

subgraph부터 end까지가 하나의 그룹이 된다.

별도의 ID를 지정할 수도 있어.

flowchart LR
    subgraph orderSystem[주문 시스템]
        A[주문]
        B[결제]
    end
Subgraphs

여기서:

  • orderSystem: 서브그래프 ID
  • 주문 시스템: 화면에 표시되는 이름

서브그래프 자체를 다른 노드와 연결할 수도 있다.

flowchart LR
    Client --> orderSystem

    subgraph orderSystem[주문 시스템]
        A[주문]
        B[결제]
        A --> B
    end
 

Subgraphs

flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end

Subgraphs

flowchart TB
    c1-->a2
    subgraph ide1 [one]
    a1-->a2
    end

 

Subgraphs

subpraph에도 id 지정 가능

22. Direction in subgraphs

서브그래프 내부만 별도의 방향으로 배치할 수 있어.

 
flowchart LR
    subgraph 주문 처리
        direction TB
        A[주문]
        B[결제]
        A --> B
    end
Direction in subgraphs

전체 그래프는 LR이지만, 서브그래프 내부는 TB가 된다.

다만 서브그래프 내부 노드가 외부 노드와 직접 연결되어 있으면, 내부의 direction 설정이 무시되고 부모 그래프의 방향을 따를 수 있다.

23. Markdown Strings

앞에서 본 Markdown 문법을 더 본격적으로 사용하는 기능이야.

 
flowchart LR
    A["`**결제 완료**
    주문을 배송합니다.`"]
Markdown Strings

지원되는 대표 서식:

**굵게**
*기울임*
 

Markdown String은:

  • 노드 텍스트
  • 연결선 텍스트
  • 서브그래프 제목

에 사용할 수 있다.

일반 문자열은 줄을 바꾸려면 <br>이 필요한 경우가 있지만, Markdown String은 긴 텍스트를 자동 줄바꿈하고 실제 줄바꿈 문자도 처리할 수 있다.

자동 줄바꿈을 끄려면:

 
---
config:
  markdownAutoWrap: false
---
flowchart LR
    A["`긴 문장입니다.`"]
Markdown Strings

24. Interaction

노드를 클릭했을 때 링크를 열거나 JavaScript 함수를 실행하게 만들 수 있어.

링크 열기

 
flowchart LR
    A[GitHub]
    click A "https://github.com"
Interaction

새 탭으로 열기

 
flowchart LR
    A[GitHub]
    click A "https://github.com" "GitHub 열기" _blank
 

지원되는 target:

값 의미
_self 현재 창
_blank 새 탭
_parent 부모 프레임
_top 최상위 창

JavaScript 콜백도 연결할 수 있지만, securityLevel: 'strict'에서는 비활성화되고 loose에서 사용할 수 있다.

브라우저 혹은 서버정책에 따라 스크립트 보안이나 렌더링 방식 때문에 클릭 이벤트가 제한될 수 있어서, 이미지와 일반 HTML 링크를 함께 쓰는 방식이 더 안정적일 수도 있음.

25. Comments

Mermaid 코드에 주석을 넣을 때는 %%를 사용해.

 
flowchart LR
    %% 주문 처리 시작
    A[주문] --> B[결제]
Comments

%%부터 줄 끝까지는 다이어그램에 표시되지 않는다.

주석은 별도의 줄에 작성하는 것이 원칙이다.

26. Styling and classes

노드와 연결선의 색상, 테두리, 굵기 등을 바꾸는 기능이야.

노드 하나에 직접 스타일 적용

 
flowchart LR
    A[성공]
    style A fill:#bbf,stroke:#333,stroke-width:2px
Styling and classes

주요 속성:

fill             배경색
stroke           테두리색
stroke-width     테두리 굵기
color            글자색
 

27. Styling links

연결선에도 스타일을 적용할 수 있어.

flowchart LR
    A --> B
    B --> C

    linkStyle 0 stroke-width:4px
Styling links

0은 첫 번째로 정의된 연결선을 뜻해.

 
flowchart LR
    A --> B
    B --> C
    C --> D

    linkStyle 0,2 stroke-width:4px
Styling links

첫 번째와 세 번째 연결선에 적용된다.

최근에는 연결선 ID를 붙여 개별적으로 관리하는 방식도 가능하지만, 기존 linkStyle은 연결선이 작성된 순서를 기준으로 스타일을 지정한다.

28. Styling line curves

연결선을 직선이 아닌 곡선이나 계단 모양으로 바꿀 수 있어.

지원되는 예:

linear
basis
cardinal
natural
step
stepBefore
stepAfter
bumpX
bumpY
 

전체 다이어그램에 적용하려면:

---
config:
  flowchart:
    curve: stepBefore
---
graph LR
A-->B
A-->C
Styling line curves


개별 적용 시

flowchart LR
    A e1@==> B
    A e2@--> C
    e1@{ curve: stepAfter }
    e2@{ curve: natural }
Styling line curves

특정 연결선에 ID를 붙이면 해당 선만 별도의 곡선 스타일을 적용할 수 있다. 개별 선 설정은 전체 다이어그램 설정보다 우선한다.

 

29. Classes

같은 스타일을 여러 노드에 반복해서 적용할 때 사용해.

먼저 클래스를 정의한다.

 
flowchart LR
    A[성공]
    B[완료]

    classDef success fill:#bbf,stroke:#333,stroke-width:2px
    class A,B success
Classes

구조는 다음과 같아.

classDef 클래스명 스타일
class 노드ID 클래스명
 

짧은 문법으로 노드에 바로 클래스를 붙일 수도 있어.

 
flowchart LR
    A:::success --> B

    classDef success fill:#bbf,stroke:#333
Classes

노드가 많아질수록 style을 각각 작성하는 것보다 classDef를 사용하는 편이 관리하기 쉽다.

30. CSS classes

외부 CSS로 Mermaid 내부 SVG를 꾸미는 방법도 있지만 공식 문서는 이를 권장하지 않아.

Mermaid 내부 스타일이 !important와 SVG 범위 지정 방식으로 들어가기 때문에 외부 CSS가 덮어쓰기 되는 경우가 많다.

따라서 다음 방식이 권장돼.

 
classDef important fill:#f96,stroke:#333
 

즉:

  • 외부 CSS 직접 적용: 불안정
  • Mermaid의 classDef: 권장

이라고 이해하면 된다.

31. Default class

default라는 이름의 클래스를 만들면 별도 클래스를 지정하지 않은 모든 노드에 적용돼.

 
flowchart LR
    A --> B --> C

    classDef default fill:#eee,stroke:#333
 

전체 노드의 기본 디자인을 통일할 때 편리하다.

32. Font Awesome

Mermaid 노드에 Font Awesome 아이콘을 넣을 수 있어.

 
flowchart LR
    A["fa:fa-user 사용자"]
    B["fa:fa-github 깃허브"]
    C["fa:fa-heart 하트"]
    D["fa:fa-home 집"]
Font Awesome
 

접두사:아이콘 클래스명 형식으로 지원됨

 

지원되는 대표 prefix는 다음과 같아.

fa   : 기본 Font Awesome
fas  : Font Awesome Solid
far  : Font Awesome Regular
fab  : Font Awesome Brands
fal  : Font Awesome Light
fad  : Font Awesome Duotone
 

Font Awesome 아이콘 팩을 직접 등록하거나, 페이지에 로드된 Font Awesome CSS를 이용할 수 있다. 등록된 팩이 없다면 CSS 방식으로 대체될 수 있다. ( Mermaid가 실행되는 환경에 Font Awesome CSS 또는 등록된 아이콘 팩이 존재해야)

 

직접등록의 경우

예로 Font Awesome Solid 팩인 경우 이 데이터를 Mermaid에게 미리 알려주는 것이 팩 등록.

import mermaid from "mermaid";
import { icons as faSolid } from "@iconify-json/fa6-solid";

mermaid.registerIconPacks([
  {
    name: "fas",
    icons: faSolid
  }
]);

mermaid.initialize({
  startOnLoad: true
});
 

위 코드는 Mermaid에게 다음과 같이 알려주는 것.

앞으로 fas라는 이름이 나오면
fa6-solid 아이콘 묶음에서 찾아라
 

그러면 Mermaid 문법에서 등록한 prefix를 사용할 수 있음

직접 등록하는 방식은 아이콘 팩 안에서 아이콘 이름이 보통 heart 이므로 fa-를 빼는 경우가 많음

A["fas:heart"]

 

페이지에 설치하는 경우 (CSS방식)

 

HTML 페이지에 Font Awesome CSS를 먼저 불러옴.

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
/>
 

그러면 브라우저는 이런 클래스를 이해하게 됨.

<i class="fa-solid fa-heart"></i>
 

Mermaid에서는 이를 다음처럼 요청 시

flowchart LR
    A["fas:fa-heart 하트"]
 

이때 Mermaid에 SVG 아이콘 팩이 등록되지 않았다면, Mermaid가 페이지에 깔린 Font Awesome CSS를 이용해 아이콘 폰트로 표시를 시도합니다. Mermaid 공식 문서가 말하는 “등록된 팩이 없다면 Font Awesome CSS로 fallback한다”는 뜻이 이것입니다.

fas:fa-heart 발견
        │
        ▼
등록된 fas 팩이 있나?
   ├─ 있음 → 등록된 SVG 데이터로 그림
   └─ 없음 → 페이지의 Font Awesome CSS로 표시 시도
 

CSS방식에서 Font Awsome의 CSS클래스명이 fa-heart이므로 fa-까지 포함. (Mermaid 버전과 등록 팩의 데이터 구조에 따라 이름 형식은 달라질 수 있음)

 

flowchart LR
%%    A["fa:fa-user 사용자"]
%%    B["fab:fa-github 깃허브"]
%%    C["fas:fa-heart 하트"]
%%    D["fa:fa-home 집"]

33. Graph declarations without semicolons

Mermaid 문장 끝에는 예전처럼 세미콜론을 꼭 붙이지 않아도 돼.

둘 다 가능해.

 
flowchart LR
    A --> B
    B --> C
 
 
flowchart LR
    A --> B;
    B --> C;
 

보통은 세미콜론 없이 줄바꿈으로 구분하는 방식이 더 읽기 쉬워.

노드와 연결 기호 사이에도 공백을 넣을 수 있어.

 
flowchart LR
    A --> B
 

공백이 없어도 된다.

 
flowchart LR
    A-->B
 

34. Configuration

다이어그램 코드 위에 계층 구조(YAML) 로 작성한다.

  • 1단계: 공통(Global) 설정
  • 2단계: 다이어그램 종류별 설정
Mermaid가 여러 종류의 다이어그램을 지원하며, 다이어그램 성격에 따라 다른 속성을 갖기 때문에 계층으로 구분.
---
config:
  theme: dark          # 공통 설정
  look: handDrawn      # 공통 설정
  securityLevel: loose # 공통 설정

  flowchart:           # Flowchart 전용 설정
    curve: linear
    nodeSpacing: 50
    rankSpacing: 80

  sequence:            # Sequence Diagram 전용 설정
    showSequenceNumbers: true
---
flowchart LR
    A --> B
 

여기에서 설정할 수 있는 대표 항목은:

  • 렌더러
  • 선 모양
  • Markdown 자동 줄바꿈
  • 최대 너비
  • HTML 라벨
  • 노드 간격
  • 레벨 간격

등이야.

35. Renderer

Flowchart 배치를 계산하는 렌더러를 선택할 수 있어.

대표적으로:

  • dagre
  • elk

같은 렌더링 방식이 사용돼.

복잡하지 않은 일반 Flowchart는 기본 설정으로 충분하고, 노드가 매우 많거나 복잡한 구성이라면 다른 렌더러가 배치를 더 보기 좋게 만들 수 있어.

예시 형식은 다음과 같아.

 
---
config:
  flowchart:
    defaultRenderer: elk
---
flowchart LR
    A --> B
 

36. Width

다이어그램의 너비와 부모 영역에 맞추는 방식을 조절하는 설정이야.

일반적으로 웹페이지에서는 다음과 같은 설정을 많이 사용해.

 
flowchart: {
    useMaxWidth: true
}
 

useMaxWidth: true이면 다이어그램이 가능한 범위에서 부모 영역 너비에 맞춰진다.

티스토리처럼 본문 너비가 기기마다 달라지는 환경에서는 반응형 표시를 위해 유용하지만, SVG나 PNG로 이미지를 내보내 올리는 경우에는 이미지 자체 크기가 더 중요하다.

처음 공부할 때 우선순위

공식 문서 전체를 한 번에 외울 필요는 없어. 먼저 아래 순서만 익히면 대부분의 Flowchart를 만들 수 있어.

1. flowchart LR / TD
2. A[텍스트]
3. A --> B
4. A -->|조건| B
5. A{판단}
6. subgraph
7. classDef
8. 특수문자는 큰따옴표
 

예를 들어 이 정도를 작성할 수 있으면 기본 업무 흐름도는 충분히 만들 수 있어.

 
flowchart TD
    A([시작]) --> B[주문 접수]
    B --> C{결제 성공?}
    C -->|예| D[상품 배송]
    C -->|아니오| E[결제 재시도]
    D --> F([완료])
    E --> C

    classDef startEnd fill:#eee,stroke:#333,stroke-width:2px
    class A,F startEnd

sample Flowchart

반응형
저작자표시 (새창열림)

'visualize' 카테고리의 다른 글

[다이어그램] mermaid 11.16.0_(1/2) 1~18  (0) 2026.07.23
[다이어그램] 머메이드 mermaid.live 너 쫌 매력적이다  (0) 2026.07.23

관련글

댓글

티스토리툴바