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로 나누는 것이 좋습니다.

이 도구의 관련 기사

Recent Articles

도구 소개
2026-05-02

CSV와 JSON 변환: API 연동과 데이터 이전에서 형식을 고르는 방법

CSV와 JSON을 안전하게 변환하기 위한 헤더, 구분자, 값 타입, 중첩 데이터 처리, 실무 활용 흐름을 설명합니다.

도구 소개
2026-05-02

JSON 포맷팅과 검증: API 응답을 안전하게 확인하는 방법

JSON을 보기 좋게 정리하고, 문법 오류와 값의 타입을 확인하며, TypeScript 타입과 Zod, OpenAPI 스키마로 이어지는 실무 흐름을 설명합니다.

개발 이야기
2026-04-06

아무도 아키텍처 다이어그램을 업데이트하지 않는 문제에 대하여

'잠깐, 중간에 서버가 하나 더 있지 않나요?' 누군가 이렇게 물어볼 때 느끼는 그 서늘함. 실시간 웹 기반 Mermaid 인프라 시각화 도구를 만들게 된 이야기입니다.

개발 이야기
2026-04-05

YAML 지옥에서 정신줄 놓기: 내가 CI/CD 시각화 도구를 만든 이유

GitHub Actions의 'needs' 의존성이 인간의 눈으로 파악하기엔 너무 혼란스러워졌을 때, YAML 미로를 깔끔한 순서도로 바꾸기로 결심했습니다.

개발 이야기
2026-04-04

JOIN 때문에 울지 마세요: 비주얼 SQL 빌더 개발 비화

'잠깐, LEFT JOIN이 어떻게 작동하더라?' 쉼표 누락이나 구문 오류를 디버깅하느라 시간을 낭비하지 않도록 이 노코드 SQL 도구를 만들었습니다.

개발 이야기
2026-03-09

재귀로 푸는 JSON→TypeScript 변환: 외부 라이브러리에 의존하지 않는 강점

API 응답에서 순식간에 타입 정의를 생성. 외부 파서 없이 재귀 알고리즘으로 가볍고 빠르게 구현한 뒷이야기를 소개합니다.