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.

What it solves

OpenFlowKit is a local-first, open-source tool for creating architecture diagrams that can be managed as code, drawn by hand, or generated by AI agents. It eliminates the friction between static diagrams and evolving codebases by allowing users to map GitHub repositories directly into visual maps and ensuring diagrams stay synchronized with the actual code through drift detection in CI/CD pipelines.

How it works

The tool uses a proprietary OpenFlow DSL (Domain Specific Language) that acts as a common bridge between text, a visual canvas, and AI agents. Whether a user pastes Mermaid, Structurizr, or D2 code, the compiler converts it into the OpenFlow DSL. This DSL then powers the visual canvas, the CLI, and an MCP (Model Context Protocol) server, allowing AI agents (like Claude Code or Cursor) to read, draw, and edit diagrams live on a canvas or within .openflow.json files.

Who it’s for

It is designed for software architects, developers, and teams who need to maintain accurate system documentation. It is particularly useful for those using AI coding assistants to help visualize complex codebases or those who want to integrate diagram validation into their CI/CD workflows.

Highlights

  • Agent-Native Design: Includes an MCP server that lets AI agents draw, restyle, and take screenshots of diagrams live on the canvas.
  • Automated Repo Mapping: Generates architecture maps from public GitHub repositories with arrows cited to specific lines of code.
  • Bi-directional Editing: Changes made via the visual canvas are reflected in the text and vice versa.
  • Drift Detection: A CLI tool that can be integrated into CI to flag when the actual codebase has diverged from the documented architecture.
  • Multi-format Export: Supports PNG, SVG, PDF, JSON, and animated SVGs/GIFs/MP4s for step-by-step process visualization.

Related

  • Project
  • Project
  • Project
  • Project