openflowkit/openflowkit

Free, open-source diagram canvas. Draw it, write it as code (Mermaid, D2, Structurizr in), ask any AI model or a local one, let Claude Code edit it live over MCP, or map a GitHub repo with every arrow cited to a file and line. MIT, local-first, no account.

해결하는 문제

OpenFlowKit은 코드로 관리하거나, 직접 그리거나, AI 에이전트가 생성할 수 있는 아키텍처 다이어그램을 위한 로컬 우선 오픈 소스 도구입니다. 정적 다이어그램과 계속 진화하는 코드베이스 사이의 마찰을 제거하며, GitHub 리포지토리를 시각적 맵으로 직접 매핑하고 CI/CD 파이프라인의 드리프트 감지를 통해 다이어그램이 실제 코드와 항상 동기화되도록 보장합니다.

작동 방식

이 도구는 텍스트, 시각적 캔버스, AI 에이전트 간의 공통 가교 역할을 하는 독점적인 OpenFlow DSL (도메인 특화 언어)을 사용합니다. 사용자가 Mermaid, Structurizr 또는 D2 코드를 붙여넣으면 컴파일러가 이를 OpenFlow DSL로 변환합니다. 이 DSL은 시각적 캔버스, CLI 및 MCP (Model Context Protocol) 서버를 구동하여 AI 에이전트(Claude Code나 Cursor 등)가 캔버스나 .openflow.json 파일 내에서 실시간으로 다이어그램을 읽고, 그리고, 편집할 수 있게 합니다.

대상 사용자

정확한 시스템 문서를 유지해야 하는 소프트웨어 아키텍트, 개발자 및 팀을 위해 설계되었습니다. 복잡한 코드베이스를 시각화하기 위해 AI 코딩 어시스턴트를 사용하거나, 다이어그램 검증을 CI/CD 워크플로우에 통합하려는 사용자에게 특히 유용합니다.

주요 특징

  • 에이전트 네이티브 설계: AI 에이전트가 캔버스에서 실시간으로 다이어그램을 그리고, 스타일을 변경하고, 스크린샷을 찍을 수 있는 MCP 서버를 포함합니다.
  • 자동 리포지토리 매핑: 공개 GitHub 리포지토리에서 아키텍처 맵을 생성하고 특정 코드 라인을 가리키는 화살표를 인용합니다.
  • 양방향 편집: 시각적 캔버스에서 변경한 내용은 텍스트에 반영되며, 그 반대도 가능합니다.
  • 드리프트 감지: 실제 코드베이스가 문서화된 아키텍처와 달라졌을 때 이를 표시하기 위해 CI에 통합할 수 있는 CLI 도구입니다.
  • 다중 형식 내보내기: PNG, SVG, PDF, JSON 및 단계별 프로세스 시각화를 위한 애니메이션 SVG/GIF/MP4를 지원합니다.

관련

  • 프로젝트
  • 프로젝트
  • 프로젝트
  • 프로젝트