📐
설계도 패턴 비교
SVG, Mermaid, draw.io, D2, Excalidraw — 어떤 방식으로 그릴 것인가
설계도를 그리는 방식은 크게 3가지로 나뉩니다. 코드 기반(Mermaid, D2)은 Git diff와 CI/CD 자동화가 가능하고, GUI 기반(draw.io, Excalidraw)은 비개발자도 쉽게 편집할 수 있으며, 직접 렌더링(SVG/HTML+CSS)은 완전한 제어가 가능하지만 작성 비용이 높습니다.
구조 다이어그램
3가지 접근법
📝
코드 기반
Diagrams as Code
Mermaid.js
D2
PlantUML
🖱️
GUI 기반
드래그 & 드롭
draw.io
Excalidraw
Lucidchart / Figma
🎨
직접 렌더링
SVG / HTML+CSS
SVG 직접 작성
HTML + Tailwind CSS
(app56이 이 방식!)
도구별 상세 비교
| 도구 | 방식 | Git Diff | 레이아웃 제어 | 비개발자 | CI/CD 자동화 |
|---|---|---|---|---|---|
| Mermaid.js | 텍스트 | ✓ | 약함 | 보통 | ✓ |
| D2 | 텍스트 | ✓ | 강함 | 보통 | ✓ |
| PlantUML | 텍스트 | ✓ | 보통 | 어려움 | ✓ |
| draw.io | GUI (XML) | XML | 완전 | ✓ | 제한적 |
| Excalidraw | GUI (JSON) | JSON | 완전 | ✓ | ✗ |
| SVG 직접 | 코드 | ✓ | 완전 | 불가 | 수동 |
| HTML+CSS | 코드 | ✓ | 완전 | 불가 | 수동 |
같은 다이어그램, 다른 문법
🧜
Mermaid.js
GitHub README 바로 표시
graph LR
A[Client] -->|HTTP| B[Load Balancer]
B --> C[App Server 1]
B --> D[App Server 2]
C --> E[(Database)]
D --> E
💎
D2
레이아웃 제어 + 테마
client: Client {shape: rectangle}
lb: Load Balancer {shape: hexagon}
app1: App Server 1
app2: App Server 2
db: Database {shape: cylinder}
client -> lb: HTTP
lb -> app1
lb -> app2
app1 -> db
app2 -> db
🖼️
draw.io
GUI + XML 저장
드래그
→
드롭
→
연결
.drawio (XML) / .svg / .png 내보내기
VS Code 확장으로 에디터에서 바로 편집!
✏️
Excalidraw
손그림 스타일
Client
--->
Server
--->
DB
JSON 저장 → Git 관리 가능
"미완성 느낌" → 초기 논의에 최적
어떤 도구를 쓸까? — 선택 가이드
GitHub README에<br>바로 표시?
→
Mermaid.js
복잡한 레이아웃<br>+ Git 관리?
→
D2
비개발자도<br>편집 필요?
→
draw.io
팀 브레인스토밍<br>/ 초기 설계?
→
Excalidraw
웹앱 내<br>인터랙티브?
→
SVG / HTML+CSS
AI에게<br>자동 생성?
→
Mermaid / D2
Claude/GPT가 즉석 생성
Git 워크플로우 비교
코드 기반 (Mermaid/D2)
# PR diff에서 변경점 확인
- A -->|HTTP| B
+ A -->|gRPC| B
리뷰어가 변경 의도를 즉시 파악
바이너리 (PNG/Figma)
Binary files a/diagram.png
and b/diagram.png differ
뭐가 바뀌었는지 알 수 없음
draw.io (XML)
<!-- diff 가능하지만 -->
<mxCell value="Server"
x="340" y="180"/>
diff 가능하나 읽기 어려움
추천:
공식 문서 = draw.io, 코드 리뷰 = Mermaid/D2, 브레인스토밍 = Excalidraw, 웹앱 내장 = HTML+CSS
동작 흐름
1
SVG 직접 작성: <svg> 태그로 도형·선·텍스트를 직접 코딩. 완전한 픽셀 제어, 하지만 작성 비용 최고
2
HTML+CSS (app56 방식): Tailwind 박스 + flexbox/grid로 다이어그램 구성. 반응형 지원, 코드와 동일 스택
3
Mermaid.js: 마크다운 코드블록 안에 텍스트로 선언 → 자동 렌더링. GitHub/GitLab README에서 바로 표시
4
D2: 선언형 다이어그램 언어. Mermaid보다 레이아웃 제어가 뛰어나고 테마/스타일링 강력
5
draw.io (diagrams.net): GUI 에디터로 드래그&드롭. XML 저장이라 Git 관리 가능. VS Code 확장 지원
6
Excalidraw: 손그림 스타일의 화이트보드. 브레인스토밍·초기 설계에 적합. JSON 저장으로 Git 관리 가능
장점
- ✓ 코드 기반: Git diff 가능, PR 리뷰에서 변경점 확인
- ✓ 코드 기반: CI/CD에서 자동 렌더링 (mermaid-cli, d2)
- ✓ GUI 기반: 비개발자도 편집 가능
- ✓ draw.io: XML 저장이라 Git 관리 가능 + VS Code 확장
- ✓ Excalidraw: 손그림 스타일로 "미완성 느낌" — 초기 논의에 적합
- ✓ AI 시대: ChatGPT/Claude가 Mermaid/D2 코드를 즉석 생성
단점
- ✗ 코드 기반: 복잡한 레이아웃 제어 어려움 (자동 배치 의존)
- ✗ Mermaid: 대규모 다이어그램에서 가독성 저하
- ✗ GUI 기반: 바이너리 파일은 Git diff 불가 (Lucidchart, Figma 등)
- ✗ SVG 직접 작성: 작성 비용 높고 유지보수 어려움
- ✗ draw.io XML: 수동 편집 시 깨지기 쉬움
- ✗ Excalidraw: 공식 문서에는 너무 캐주얼
사용 사례
기술 블로그 / 문서화 (Mermaid → GitHub README)
ADR(Architecture Decision Record) 첨부 (D2, Mermaid)
구성도 공식 문서 (draw.io → SVG 내보내기)
팀 브레인스토밍 / 초기 설계 (Excalidraw)
웹앱 내 인터랙티브 다이어그램 (SVG/HTML+CSS)
CI/CD 자동 생성 (Mermaid CLI, D2 CLI → PNG/SVG)