OpenFlowKit 2

Product Introduction

1. Definition: OpenFlowKit 2 is a free, open-source (MIT-licensed), local-first diagramming and architecture visualization platform that operates directly in a web browser. It is a technical diagram canvas designed for software architects, developers, and DevOps engineers.
2. Core Value Proposition: It exists to solve the problem of documentation drift by creating diagrams that are intrinsically linked to and automatically updated from source code, ensuring visual documentation keeps pace with software development. Its core value is enabling diagrams as code, architecture diagram automation, and live AI-assisted editing without vendor lock-in or mandatory accounts.

Main Features

1. Multi-Format Diagram as Code: The canvas serves as a universal renderer for multiple text-based diagram languages. You can write or paste code in Mermaid.js, D2, or Structurizr DSL, and OpenFlowKit renders it visually. This allows teams to store diagrams as code files in version control (e.g., Git), enabling diffing, collaboration, and a single source of truth.
2. GitHub Repository Integration & Live Code Linking: This feature maps a software repository directly onto the canvas. It visualizes the codebase structure, and users can create diagram elements (boxes, arrows) that are directly linked to specific files and lines of code. Every arrow cites its source file and line number, creating a living, traceable architecture map.
3. AI & Agent-First Workflow with MCP (Model Context Protocol): OpenFlowKit integrates with over 10 cloud AI providers (like OpenAI, Anthropic) and local LLMs. Crucially, it acts as a diagramming tool for AI coding agents via the MCP protocol. An agent like Claude Code can connect to the open canvas and edit it in real-time based on natural language instructions, enabling automated diagram updates and refactoring.
4. CI/CD Drift Detection via CLI: The OpenFlowKit Command Line Interface (CLI) tool is designed for Continuous Integration pipelines. It can parse diagram code and repository links, then check for "drift"—differences between the diagram's declared structure and the actual current codebase. This fails CI builds if diagrams are outdated, enforcing documentation accuracy.
5. Local-First & No-Account Operation: All diagram processing and rendering occurs client-side in the browser. Diagrams can be saved locally, ensuring data privacy and enabling offline work. The no signup required model removes friction for immediate use and evaluation.

Problems Solved

1. Pain Point: Architecture Documentation Drift. Traditional diagrams (e.g., in Visio, Lucidchart) quickly become outdated as code evolves, losing their value and becoming misleading.
2. Pain Point: Disconnect Between Code and Design. Understanding how a high-level architecture diagram translates to actual repository files is often a manual and error-prone process.
3. Target Audience: Software Architects needing to create and maintain accurate system context and container diagrams. Engineering Leads & DevOps Engineers responsible for onboarding and system documentation. Developers who prefer writing code over dragging boxes and want to document their work in PRs.
4. Use Cases: Onboarding New Team Members with an interactive, code-linked architecture map. Automated Documentation in Pull Requests, where the CI pipeline verifies diagram accuracy. Live Architecture Refactoring Sessions using an AI agent to update diagrams in real-time during design discussions.

Unique Advantages

1. Strengths & Limitations (Pros & Cons):

   • Pros:
     • Zero Cost & Open Source: MIT license allows unrestricted use, modification, and self-hosting.
     • Strong Code Integration: Deep GitHub linking and CI drift detection are unique, powerful features for tech teams.
     • Agentic AI Workflow: Native MCP support positions it at the forefront of AI-augmented development tools.
     • Privacy-Focused: Local-first operation and no mandatory cloud account.
   • Cons:
     • Learning Curve: Requires familiarity with diagram-as-code syntax (Mermaid/D2) or GitHub workflows for full utility.
     • Less Polished Visual Design: Compared to commercial tools like Miro or Lucidchart, its freeform canvas may lack advanced styling and templating.
     • New Project Risk: As a newer open-source project, long-term maintenance and feature roadmap depend on community adoption.

2. Key Alternatives & Differentiation:

   • vs. Mermaid Live Editor / Kroki: These are renderers for diagram-as-code. OpenFlowKit differentiates by being a multi-format canvas that also adds repository mapping, AI agent control (MCP), and CI/CD tooling, going beyond simple rendering.
   • vs. Structurizr: Both use the Structurizr DSL for C4 model diagrams. OpenFlowKit differentiates by being free and browser-based, whereas Structurizr's full tooling is commercial. OpenFlowKit also supports other syntaxes (Mermaid, D2) and AI features.
   • vs. Lucidchart / Draw.io: These are general-purpose, GUI-based diagramming tools. OpenFlowKit differentiates by being code-centric and drift-aware. It trades easy drag-and-drop for the power of version control, automation, and a single source of truth linked to the codebase.

Frequently Asked Questions (FAQ)

1. Is OpenFlowKit 2 really free to use commercially? Yes. OpenFlowKit 2 is released under the permissive MIT open-source license, which allows free use, modification, distribution, and commercial use without any cost or royalty.
2. How does OpenFlowKit prevent architecture diagram drift? It uses two methods: 1) Live GitHub linking, where elements are tied to code, making drift visually apparent, and 2) a CLI tool for CI/CD that programmatically compares diagrams to the actual codebase and can fail a build if inconsistencies are detected.
3. What is MCP and how does OpenFlowKit use it? MCP (Model Context Protocol) is a standard for connecting AI models to tools and data sources. OpenFlowKit acts as an MCP server, allowing AI coding agents (like Claude Code) to read from and write to the diagram canvas directly, enabling automated edits and updates.
4. Can I use OpenFlowKit without connecting it to GitHub? Absolutely. You can use it as a standalone, in-browser diagramming tool to write Mermaid, D2, or Structurizr code, or draw freely, with no connection to any external service.
5. Where is my diagram data stored? Primarily in your browser's local storage. You can also export diagrams as code (.mermaid, .d2, .json) or image files to save elsewhere. When linked to GitHub, the diagram code is intended to be saved in your repository.