AIFlowChart.io

흐름을 설명하면 모델이 어떤 단계가 들어가고 어떻게 이어지는지 정한다. "사용자가 가입하고 메일 인증을 거치고 결제를 두 번 재시도" 같은 문장이 분기까지 배치된 보드로 돌아온다. 노드는 모두 편집할 수 있으니 최종 판단은 사용자 몫이다.

스케치에서 다이어그램으로 가는 길은 사진 한 장이면 된다. 종이나 화이트보드에 그린 그림을 찍거나 PDF, Word, 메모를 올리면 깔끔한 편집용 보드로 다시 만든다. 생각은 오프라인에서 끝났고 사진만 남은 흔한 상황을 정확히 처리한다.

순서도, 마인드맵, 시퀀스 다이어그램, ER과 데이터베이스 다이어그램, UML 클래스, 유스케이스, 상태, 액티비티 다이어그램, 간트 차트, 타임라인, 시스템 아키텍처, 스윔레인, 조직도, 움직이는 포스터가 한 에디터에 들어 있다. 종류를 바꿔도 앱을 바꾸지 않아도 되는 점은 한 프로젝트에 여러 그림이 필요할 때 체감된다.

그림은 PNG, SVG, PDF, 편집 가능한 슬라이드가 붙은 PowerPoint, Mermaid 코드, drawio 파일로 나간다. 움직이는 보드는 MP4나 GIF가 된다. 개발자가 신경 쓰는 건 코드 쪽이고, Mermaid 블록은 그것이 설명하는 README와 함께 버전 관리에 남는다.

레이트 리미터에서 결제 시스템까지 연습 문제 12개가 있고, 각 문제에 참조 아키텍처와 요구사항 메모가 붙는다. 같은 에디터에서 내 설계를 그리고 나면 AI 면접관이 꼬리 질문을 던지며 채점한다. 실수는 막연한 느낌이 아니라 목록이 된다.

과제 제목을 넣으면 레벨 0과 레벨 1 데이터 흐름도, 키가 붙은 ER 다이어그램, UML 유스케이스와 클래스, 액티비티, 시퀀스 다이어그램을 만든다. 각 그림에 보고서로 옮길 수 있는 설명이 붙고, 구술 질문 10개와 답이 함께 나온다. 전부 PDF로 내려받는다.

MCP 서버는 스트리밍 HTTP로 Claude Code, Cursor, VS Code, Windsurf에 다이어그램 생성을 열어 준다. 어시스턴트가 코드베이스나 설명에서 내 계정 안의 보드를 만들 수 있다. VS Code 확장은 클릭으로 소스로 넘어가는 아키텍처 맵에 요청 추적과 의존성 보기를 더한다. 대상은 JS, TS, Python이며 스캔은 로컬에서 한다.