본문으로 건너뛰기
구성도 시각화

인프라 구성도 빌더

GUI 조작만으로 시스템 구성도나 네트워크 다이어그램을 작성. Mermaid 형식의 코드와 이미지를 즉시 생성합니다.

가이드: 사용 방법 및 기능

  • "노드 추가" 버튼을 클릭하여 요소를 만들고 레이블과 모양(직사각형, 둥근, 원통형 등)을 설정합니다.
  • "연결 추가"를 사용하여 드롭다운에서 시작/끝 노드를 선택하여 요소 간의 관계를 정의합니다.
  • "레이아웃 방향" 섹션에서 다이어그램 흐름(위에서 아래, 왼쪽에서 오른쪽 등)을 전환합니다.
  • "PNG 다운로드" 버튼을 사용하여 생성된 다이어그램을 PNG 이미지로 다운로드합니다.
  • "Mermaid 복사"로 Mermaid 구문을 클립보드에 복사하여 README 파일이나 문서 도구에서 사용합니다.

샘플: 예시

표준 웹 3계층 구성

입력 예시

노드: 인터넷, 로드 밸런서, 앱 서버, DB
연결: 인터넷 -> LB -> App -> DB

출력 예시

graph TB
    n1["Internet"]
    n2(["Load Balancer"])
    n3["App Server"]
    n4[("Database")]
    n1 --> n2
    n2 --> n3
    n3 --> n4

FAQ: 자주 묻는 질문

  • 다이어그램을 저장할 수 있나요?

    PNG 이미지로 다운로드할 수 있습니다. Mermaid 코드를 복사하여 나중에 재편집하기 위해 보관할 수도 있습니다.
  • 클라우드 전용 아이콘(AWS/Azure)을 사용할 수 있나요?

    현재는 일반 도형만 지원됩니다. 아이콘 지원은 향후 업데이트에서 검토 중입니다.
  • 노드를 드래그 앤 드롭으로 위치를 변경할 수 있나요?

    Mermaid 엔진이 자동으로 레이아웃을 처리합니다. 수동 드래그 앤 드롭은 지원되지 않으며, 레이아웃 방향 설정으로 흐름을 조정해 주세요.

활용: 주요 활용 사례

  • 빠른 아키텍처 다이어그램

    어떤 규모의 프로젝트든 아키텍처 개요를 신속하게 시각화하고 공유합니다.

  • 문서 일러스트레이션

    GitHub README나 사내 위키를 위한 다이어그램 코드를 몇 분 안에 생성합니다.

  • 네트워크 설계 브레인스토밍

    서브넷이나 게이트웨이 간의 의존 관계를 시각화하여 팀과 인식을 맞춥니다.

주의: 주의사항 및 제한

  • 데이터 영속성

    브라우저를 새로 고침하면 내용이 사라집니다. 변경 사항을 유지하려면 Mermaid 코드를 복사해서 저장해 주세요.

  • 레이아웃 제약

    요소가 자동으로 배치됩니다. 드래그 앤 드롭으로 직접 배치하는 기능은 지원되지 않습니다.

  • 브라우저 성능

    노드 수가 매우 많으면 브라우저 렌더링 성능에 영향을 미칠 수 있습니다.

노드 설정

연결 설정

graph TB Users["Users"] LB["Load Balancer"] App1["App Server 1"] App2["App Server 2"] DB[("Database")] Users --> LB LB --> App1 LB --> App2 App1 --> DB App2 --> DB

인프라 구성도 빌더

서비스, 네트워크, 데이터베이스, 컴포넌트 간 흐름을 설명하는 인프라 및 아키텍처 다이어그램을 만들 수 있습니다. 기술 문서, 설계 리뷰, 팀 간 커뮤니케이션에 유용합니다.

자주 쓰는 상황

  • 아키텍처 문서화: 주요 시스템과 의존성을 표현합니다.
  • 변경 계획: migration이나 구성 변경 전 구조를 검토합니다.
  • 컨텍스트 공유: backend, DevOps, product 팀이 같은 그림을 봅니다.

다이어그램이 복잡해지면 여러 개의 작은 view로 나누는 것이 좋습니다.

이 도구의 관련 기사

최신 아티클

활용 사례
2026-08-07

curl 옵션 정리|-X -H -d 가 실제로 하는 일과 함정

실무에서 만나는 curl 옵션을 표로 정리했습니다. -d 만으로 이미 POST가 되는 이유, -d 와 --data-raw 의 차이, 앞의 @ 가 조용히 파일을 읽는 함정, 작은따옴표와 큰따옴표의 구분, -k 와 -L 을 쉽게 붙이면 안 되는 이유까지 예제로 설명합니다.

도구 소개
2026-08-06

JSON Schema와 Zod를 상호 변환하는 원리|required와 .optional()의 대응

JSON Schema에서 Zod 스키마를 만들고 Zod 코드에서 다시 JSON Schema를 뽑아내는 양방향 변환기의 구현을 해설합니다. required와 .optional()의 기본값이 반대인 문제, 제약 조건 대응표, 코드를 실행하지 않고 해석하는 방법까지 정리합니다.

활용 사례
2026-08-06

SQL 절 실행 순서 레퍼런스|WHERE에서 SELECT 별칭을 못 쓰는 이유

SQL은 작성한 순서대로 실행되지 않습니다. 논리적 실행 순서(FROM → WHERE → GROUP BY → HAVING → SELECT → ORDER BY → LIMIT)를 축으로, 별칭이 WHERE에서 안 되는 이유, WHERE와 HAVING의 구분, ONLY_FULL_GROUP_BY, COUNT(*)와 COUNT(컬럼)의 차이, LEFT JOIN + WHERE 함정을 예제로 정리합니다.

활용 사례
2026-08-06

unified diff 형식 읽는 법|git diff의 @@ 헤더 완전 해설

git이 출력하는 unified diff 형식을 읽는 법을 정리했습니다. @@ -12,7 +12,9 @@ 의 네 숫자가 뜻하는 것, 한 글자만 고쳐도 줄 전체가 바뀐 것처럼 보이는 이유, 공백과 줄바꿈 문자의 함정, \ No newline at end of file, 머지 커밋의 @@@, similarity index를 통한 이름 변경 감지까지 예제로 설명합니다.

활용 사례
2026-08-06

UTC⇄JST/KST 변환 레퍼런스|9시간 시차 대조표와 타임존 사고 예방법

UTC와 일본 시간(JST)·한국 시간(KST)의 변환을 대조표로 정리했습니다. ISO 8601의 Z와 +09:00의 의미, JavaScript 날짜 파싱이 9시간 어긋나는 조건, MySQL/PostgreSQL의 타임존 동작, GitHub Actions cron이 UTC로 도는 함정까지 예제와 함께 해설합니다.

활용 사례
2026-08-04

CREATE TABLE 레퍼런스|MySQL·PostgreSQL·SQLite의 타입과 제약 조건 차이

CREATE TABLE(DDL) 작성법을 3개 데이터베이스 비교표로 정리했습니다. 타입 대응표, 자동 증가(AUTO_INCREMENT / IDENTITY / rowid)의 방언 차이, 외래 키의 ON DELETE 동작, MySQL이 조용히 무시하는 CHECK 제약까지 예제와 함께 해설합니다.

광고

광고