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をサポート。

関連

  • プロジェクト
  • プロジェクト
  • プロジェクト
  • プロジェクト