아키텍처 구성도 에디터

서버·데이터베이스·사용자·클라우드 등 범용 아이콘 20종이 내장되어 있습니다. 각 회사의 브랜드 로고는 이용 조건이 있어 포함하지 않았습니다. 대신 노드마다 직접 가진 PNG / JPEG / GIF / WebP / SVG 이미지(512KB 이하)를 가져올 수 있습니다. 이미지는 브라우저 안에서만 처리되며 서버로 전송되지 않습니다.

「연결」 버튼을 누르고 시작 노드, 끝 노드 순서로 클릭하거나, 노드를 선택한 상태에서 다른 노드를 Shift+클릭합니다. 선은 직각으로만 꺾이며 자동으로 이어지고, 다른 노드와 그룹 이름은 자동으로 피합니다. 선이 나가고 들어가는 변(위·오른쪽·아래·왼쪽)은 아래 「선택한 항목」에서 지정할 수 있어, 경로를 직접 정하고 싶을 때 쓰면 됩니다.

네. 중심이 프레임 안에 있는 노드와 프레임에 완전히 들어가는 다른 그룹이 함께 움직입니다. 프레임 오른쪽 아래의 파란 사각형을 드래그하면 크기를 바꿀 수 있습니다. Cloudflare 프레임 안에 Workers 프레임을 두는 식의 중첩도 가능합니다.

편집 내용은 이 브라우저의 로컬 저장소에 자동 저장됩니다(서버로 전송되지 않음). 캐시를 지우면 사라지므로 중요한 도면은 「JSON으로 저장」해 두세요. 내보내기는 PNG / SVG / JSON입니다. Mermaid는 자유 배치와 아이콘을 표현할 수 없어 제공하지 않습니다. Mermaid가 필요하면 「인프라 구성도 메이커」를 사용하세요.

서비스 전체 구성(사용자·엣지·서버·DB·외부 서비스)을 한 장으로 정리하고 SVG로 내보내 README나 위키에 붙일 수 있습니다.

그룹 프레임으로 「어디에서 동작하는지」를 색으로 나누고 선에 /api, HTTPS 같은 라벨을 달면 글이나 슬라이드에 그대로 쓸 수 있는 그림이 됩니다.

화이트보드 대신 노드를 놓고 선을 긋는 것만으로 전체 그림을 그릴 수 있습니다. JSON으로 저장해 팀과 공유할 수도 있습니다.

화면·API·DB·외부 서비스가 섞인 구성을 비개발자에게도 보여 줄 수 있는 형태로 만들 수 있습니다.

내장 아이콘은 범용 선화입니다. 로고를 쓸 때는 각 회사의 사용 지침을 따르고 이미지를 직접 가져오세요. 이미지는 한 장당 512KB까지입니다.

편집 내용은 이 브라우저의 로컬 저장소에만 남습니다. 캐시를 지우거나 다른 기기에서는 이어지지 않으므로 JSON으로 저장하세요.

선은 다른 노드와 그룹 이름을 피해 그려지지만 다른 선과는 겹칠 수 있습니다. 노드가 빽빽하면 크게 돌아가거나, 지나갈 수 없을 때는 기본 경로로 돌아가기도 합니다. 원하는 대로 되지 않으면 시작·끝 변을 지정하거나 「선이 다른 노드를 피하게 하기」를 끄세요.