시스템 다이어그램 메이커
User -> API -> Database처럼 화살표를 쓰면 배치가 끝난 아키텍처나 흐름 다이어그램이 나옵니다. 그룹을 접으면 큰 그림, 단계에 번호를 매기면 상세 흐름이 됩니다.
상자를 끌어 옮기세요. 더블클릭하면 이름을 바꾸거나 상자를 추가합니다. 상자의 점을 끌어 연결하세요. Ctrl+Z로 실행 취소.
아무것도 업로드되지 않습니다. 다이어그램은 브라우저와 공유하는 링크 안에만 있습니다.
User -> API -> Database처럼 화살표를 쓰면 배치가 끝난 아키텍처나 흐름 다이어그램이 나옵니다. 그룹을 접으면 큰 그림, 단계에 번호를 매기면 상세 흐름이 됩니다.
상자를 끌어 옮기세요. 더블클릭하면 이름을 바꾸거나 상자를 추가합니다. 상자의 점을 끌어 연결하세요. Ctrl+Z로 실행 취소.
아무것도 업로드되지 않습니다. 다이어그램은 브라우저와 공유하는 링크 안에만 있습니다.
화이트보드 도구에서는 상자와 화살표를 하나하나 그리고 손으로 정렬합니다. 여기서는 무엇이 무엇과 통신하는지 화살표 하나에 한 줄씩 쓰면 배치가 자동으로 됩니다. 관련 서비스를 그룹으로 묶고 큰 그림이 필요할 때 상자 하나로 접었다가, 세부 사항이 필요하면 다시 펼치세요.
Excalidraw는 자유로운 화이트보드라 모든 도형과 화살표를 직접 놓습니다. 여기서는 텍스트가 곧 다이어그램이고 배치가 자동이라, 서비스 추가는 상자를 그리고 다시 맞추는 대신 한 줄이면 됩니다. 자유로운 스케치에는 여전히 Excalidraw가 더 맞습니다.
관련 상자를 이름 { ... }로 그룹에 넣으세요. 개요는 각 그룹을 상자 하나로 접고 화살표를 합치며, 상세는 다시 펼칩니다. 그룹 머리글에서 하나씩 접을 수도 있습니다.
아니요. 브라우저에서 그려지고 브라우저의 로컬 저장소에 보관됩니다. 공유 링크는 다이어그램을 링크 자체의 # 뒤에 담는데, 브라우저는 이 부분을 서버로 보내지 않습니다.
그대로는 안 됩니다. Mermaid 가져오기 기능은 없습니다. A -> B 같은 단순한 줄은 그대로 쓰이지만 세 가지가 다릅니다. graph TD 머리 줄은 상자가 되어 버리니 지우고 대신 direction: down을 쓰세요. 대괄호 안의 Mermaid 레이블은 빼세요. 여기서는 [ ] 안의 글자를 모양과 색 태그로 읽습니다. 또 여기서 -->는 비동기 호출을 뜻하는 점선 화살표이고, Mermaid에서는 일반 화살표입니다. 실선에는 ->를 쓰세요.
A -> B: 텍스트는 화살표에 레이블을 달고, A --> B는 점선 화살표, A <-> B는 양방향 화살표를 그리며, A <- B는 반대 방향을 가리킵니다. 이름 [db, blue]는 모양과 색을 정합니다. 모양은 service, db, cache, queue, actor, client, storage, external, decision, terminal, note입니다. title:은 다이어그램 이름을, direction: down은 위에서 아래 배치를 정하고, # 또는 //로 시작하는 줄은 주석입니다. 다이어그램 하나에 상자 300개, 화살표 600개, 텍스트 20,000자까지 담을 수 있습니다.