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

인프라 구성도 빌더

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-02-25

인프라 구성도를 브라우저만으로 만드는 방법: 코드를 통해 도표 자동 생성

Mermaid.js 기반의 인프라 구성도 빌더를 사용하여, 노드와 연결을 정의하는 것만으로 클라우드나 네트워크 구성을 시각화하는 방법을 해설합니다.

Recent Articles

도구 소개
2026-08-03

테이블 설계에서 CREATE TABLE 문을 자동 생성하는 구조 | DDL 빌더

테이블을 시각적으로 설계해 CREATE TABLE 문과 ER 다이어그램을 생성하는 DDL 빌더의 구현을 해설합니다. MySQL/PostgreSQL/SQLite의 타입 변환 규칙과 JSON 샘플에서 컬럼을 추론하는 알고리즘을 예제와 함께 정리했습니다.

활용 사례
2026-07-21

GitHub Actions needs 설계 패턴집｜CI를 빠르게 만드는 의존관계 구성과 안티패턴

GitHub Actions의 needs로 만드는 job 의존관계를, 고속화 패턴과 안티패턴 표로 정리합니다. concurrency를 이용한 중복 실행 취소, fail-fast, matrix×needs 조합, 재사용 가능한 워크플로우까지 실전 예제로 해설합니다.

활용 사례
2026-07-21

Mermaid ER 다이어그램 문법 레퍼런스｜관계 기호와 실전 예제

Mermaid erDiagram 문법 완전 정리: 까마귀발 표기법 카디널리티 치트시트, 1대다 vs 다대다, PK/FK를 포함한 속성 정의, 전자상거래 완전 예제까지 다룹니다.

도구 소개
2026-07-21

SQL 빌더로 SELECT·JOIN 쿼리를 시각적으로 작성하는 방법

브라우저에서 시각적 SQL 빌더로 SELECT, WHERE, JOIN을 조립하는 방법을 해설합니다. 값의 자동 따옴표 판정 원리, JOIN 사용 구분표, 여러 테이블 JOIN 작성법까지 다룹니다.

활용 사례
2026-07-21

SQL JOIN 완전 레퍼런스｜INNER·LEFT·RIGHT·FULL의 차이와 결과 행 수 이해하기

SQL JOIN 종류(INNER/LEFT/RIGHT/FULL/CROSS/SELF)를 치트시트와 결과 행 수 예제로 정리합니다. 1대다 JOIN에서 행이 늘어나는 이유, WHERE절과 ON절의 NULL 처리 차이, 여러 테이블 JOIN 작성법까지 다룹니다.

도구 소개
2026-07-16

Case Converter ― camelCase·snake_case·kebab-case 등 9종류를 한 번에 변환

식별자나 변수명을 camelCase·PascalCase·snake_case·CONSTANT_CASE·kebab-case 등 9종류의 명명 규칙으로 동시 변환하는 방법을 해설합니다. 연속 대문자(HTTPServer)와 숫자 처리, 여러 줄 일괄 변환까지 다룹니다.

광고

사이트 내에서 자주 쓰는 유틸리티를 빠르게 전환하세요.

기사
1
기사 목록
AI·LLM
3
AI Rules 생성기 LLM 토큰 카운터 LLM API 비용 계산기
개발 및 DevOps
9
GitHub Actions 시각화 SQL 포매터 Visual SQL Builder DDL 빌더 SQL → ER 다이어그램 cURL 변환기 chmod 계산기 Cron 편집기 및 파서 인프라 구성도 빌더
데이터 변환 및 스키마
6
JSON 포매터 JSON → TypeScript JSON → Zod JSON → OpenAPI JSON ⇔ YAML 변환 CSV ⇔ JSON 변환기
보안 및 암호화
5
Base64 / 58 / 32 JWT 도구 해시 및 HMAC 생성기 JWKS 생성기 UUID 생성기
텍스트 및 코드 보조
5
마크다운 테이블 생성기 텍스트 유틸리티 정규식 테스터 Diff 뷰어 케이스 변환기
URL, QR 및 네트워크
5
URL 인코딩 / 디코딩 IP / CIDR 계산기 URL 파라미터 → JSON QR 생성기 QR 리더
디자인 및 UI
2
색상 도구 파비콘 생성기
날짜 및 시간
3
시간대 변환기 시간 단위 변환 UNIX 타임스탬프 변환

광고