아키텍처 다이어그램 생성기
텍스트로 시스템 설계를 스케치하세요. Mermaid 부그래프를 사용하여 서비스를 계층으로 그룹화합니다. 클라이언트, API, 데이터 저장소, 큐를 만들고, 설계 문서용 깔끔한 아키텍처 다이어그램을 렌더링하세요. 아무것도 브라우저를 떠나지 않습니다.
한 줄에 한 단계. 두 칸 들여쓰면 위 줄 아래로 분기합니다.
리포지토리에 있는 시스템 설계
아키텍처 다이어그램은 설계 도구의 바이너리 파일이 되는 순간 드리프트됩니다. Mermaid로 작성하면 코드 옆에 유지됩니다. 각 계층을 부그래프로 그룹화하고, 데이터 저장소에는 실린더를 사용하고, 버스에는 육각형을 사용하면, 다이어그램은 검토 중에 한 줄 편집으로 업데이트됩니다.
또한 RFC 또는 온보딩 문서를 위한 올바른 아티팩트입니다. 검토자는 별도의 앱을 열지 않고도 구성 요소와 데이터 흐름을 봅니다.
워크플로우에서 다이어그램으로
자동화를 문서화하는 경우(예: n8n 또는 Zapier 파이프라인이 서비스 간에 데이터를 이동할 때), 아키텍처 다이어그램이 움직이는 부품을 명확하게 합니다. 트리거, 접촉하는 서비스, 데이터 着지를 스케치한 후 문서에 소스를 유지하여 흐름과 함께 진화합니다.
자주 묻는 질문
텍스트에서 소프트웨어 아키텍처 다이어그램을 어떻게 만들나요?
Mermaid 플로우차트를 사용하고, "subgraph Tier … end"로 관련 서비스를 그룹화하고, 화살표로 연결하세요. "[(DB)]"를 사용하여 데이터 저장소를 표현합니다. 실시간으로 렌더링되고 SVG 또는 PNG로 내보냅니다.
서비스를 계층으로 어떻게 그룹화하나요?
"subgraph Name … end"로 래핑하세요. 각 부그래프는 레이블이 지정된 상자가 되고, 이는 프레젠테이션/애플리케이션/데이터 분할 또는 마이크로서비스 세트를 표시하는 가장 명확한 방법입니다.
비동기 또는 큐 링크를 표시할 수 있나요?
네, 점선 링크(레이블 포함), 예: "A -. async .-> B"를 사용하여 이벤트 및 큐를 동기 호출과 구별합니다.
내 아키텍처 다이어그램이 개인정보 보호되나요?
네. 브라우저에서 완전히 렌더링되므로 내부 서비스 이름과 토폴로지가 기기를 떠나지 않습니다.
데이터베이스 및 큐에 어떤 모양을 사용해야 하나요?
데이터베이스 원통에 "[(name)]"를 사용하고, 큐/서브루틴에 "[[name]]"을 사용하고, 이벤트 버스와 같은 육각형에 "{{name}}"을 사용하세요. 치트시트 위에 나열되어 있습니다.