# 시스템 다이어그램 메이커

URL: https://discuvr.org/system-diagram/?hl=ko
Last updated: 2026-11-08
MCP tool: `draw_system_diagram`

A -> B만 입력하면 아키텍처와 흐름 다이어그램 완성. 자동 배치, 접을 수 있는 그룹, 단계 번호, PNG와 SVG 내보내기.

화이트보드 도구에서는 상자와 화살표를 하나하나 그리고 손으로 정렬합니다. 여기서는 무엇이 무엇과 통신하는지 화살표 하나에 한 줄씩 쓰면 배치가 자동으로 됩니다. 관련 서비스를 그룹으로 묶고 큰 그림이 필요할 때 상자 하나로 접었다가, 세부 사항이 필요하면 다시 펼치세요.

## 기능

- 입력하는 대로 갱신되는 자동 배치, 왼쪽에서 오른쪽 또는 위에서 아래.
- 이름으로 모양 선택: DB는 데이터베이스, Kafka는 큐, User는 사람, ?로 끝나는 이름은 결정 지점.
- 상자 하나로 접히는 그룹 덕분에 한 다이어그램이 개요와 상세 보기를 모두 담당합니다.
- 캔버스에서도 상자를 끌고, 연결하고, 이름을 바꾸고, 추가할 수 있으며 모든 변경이 텍스트에 반영됩니다.
- 단계 번호, 손그림 스타일, PNG와 SVG 내보내기, 공유 링크. 아무것도 업로드되지 않습니다.

## 작동 방식

1. User -> Web App -> Orders DB 같은 줄을 쓰거나 템플릿으로 시작하세요.
2. 이름 { ... }로 그룹을, 콜론 뒤에 레이블을, 비동기 호출에는 -->를 쓰세요.
3. 개요와 상세를 오가며 상자를 끌어 정리한 뒤 내보내거나 링크를 복사하세요.

## 질문

**Excalidraw와 무엇이 다른가요?**

Excalidraw는 자유로운 화이트보드라 모든 도형과 화살표를 직접 놓습니다. 여기서는 텍스트가 곧 다이어그램이고 배치가 자동이라, 서비스 추가는 상자를 그리고 다시 맞추는 대신 한 줄이면 됩니다. 자유로운 스케치에는 여전히 Excalidraw가 더 맞습니다.

**개요와 상세 보기를 함께 보여 주려면?**

관련 상자를 이름 { ... }로 그룹에 넣으세요. 개요는 각 그룹을 상자 하나로 접고 화살표를 합치며, 상세는 다시 펼칩니다. 그룹 머리글에서 하나씩 접을 수도 있습니다.

**다이어그램이 어딘가에 저장되나요?**

아니요. 브라우저에서 그려지고 브라우저의 로컬 저장소에 보관됩니다. 공유 링크는 다이어그램을 링크 자체의 # 뒤에 담는데, 브라우저는 이 부분을 서버로 보내지 않습니다.

**Mermaid 순서도를 붙여 넣을 수 있나요?**

그대로는 안 됩니다. Mermaid 가져오기 기능은 없습니다. A -> B 같은 단순한 줄은 그대로 쓰이지만 세 가지가 다릅니다. graph TD 머리 줄은 상자가 되어 버리니 지우고 대신 direction: down을 쓰세요. 대괄호 안의 Mermaid 레이블은 빼세요. 여기서는 [ ] 안의 글자를 모양과 색 태그로 읽습니다. 또 여기서 -->는 비동기 호출을 뜻하는 점선 화살표이고, Mermaid에서는 일반 화살표입니다. 실선에는 ->를 쓰세요.

**A -> B 말고 무엇을 쓸 수 있나요?**

A -> B: 텍스트는 화살표에 레이블을 달고, A --> B는 점선 화살표, A <-> B는 양방향 화살표를 그리며, A <- B는 반대 방향을 가리킵니다. 이름 [db, blue]는 모양과 색을 정합니다. 모양은 service, db, cache, queue, actor, client, storage, external, decision, terminal, note입니다. title:은 다이어그램 이름을, direction: down은 위에서 아래 배치를 정하고, # 또는 //로 시작하는 줄은 주석입니다. 다이어그램 하나에 상자 300개, 화살표 600개, 텍스트 20,000자까지 담을 수 있습니다.

**그룹을 접으면 화살표는 어떻게 되나요?**

접힌 그룹 안의 상자끼리 잇는 화살표는 숨겨지고, 그룹 경계를 넘는 화살표는 이제 그룹 상자에서 시작하거나 그룹 상자로 들어갑니다. 같은 두 상자 사이의 여러 화살표는 하나의 굵은 화살표로 합쳐지며, 첫 번째 레이블을 유지하고 개수가 붙습니다. 예: Payments API와 Ledger가 Payments { ... } 안에 있으면 Checkout -> Payments API와 Checkout -> Ledger 두 줄은 개요에서 화살표 하나 Checkout -> Payments x2가 됩니다. 접힌 그룹 안의 그룹도 함께 접히며, 단계를 켜면 번호는 아직 보이는 화살표를 작성한 순서대로 따라갑니다.

## 개발자 도구의 다른 도구

- [JSON Formatter](https://discuvr.org/json-formatter/?hl=ko)
- [Python 포맷터](https://discuvr.org/python-formatter/?hl=ko)
- [HTML 뷰어](https://discuvr.org/html-viewer/?hl=ko)
- [IP 서브넷 계산기](https://discuvr.org/ip-subnet-calculator/?hl=ko)

## 함께 자주 쓰는 도구

- [텍스트 비교](https://discuvr.org/text-diff/?hl=ko)

---

Part of Discuvr (https://discuvr.org/): Discuvr is a collection of free, focused tools for day-to-day professional work - office and data utilities, legal and compliance helpers, privacy and security checks, and developer formatters. Every tool has its own page, and most can also be called from ChatGPT or Claude over MCP.