GitHub repository mapping
Paste a public GitHub repository address or owner/repo path and have the browser identify parts, files, and connections. Arrows link back to the source file and line that produced each relationship.
OpenFlowKit
OpenFlowKit is an open-source, local-first architecture diagramming studio for developers and technical teams, with Mermaid, D2, C4, GitHub mapping, and MCP agents.
Architecture diagrams from canvas, code, or repositories
OpenFlowKit is an open-source architecture diagramming studio for developers and technical teams. It combines a visual canvas with diagram-as-code workflows, repository mapping, C4-style architecture views, and agent-assisted editing, so a system can be sketched, generated from text, or derived from source code.
The product is local-first: the hosted app requires no account, and its static self-hostable build has no product backend or database. Public GitHub repositories can be read in the browser, while private repository mapping can be performed from a local checkout using the CLI. Diagrams remain editable, and can be exported or shared through the documented link workflows.
Core features
Canvas and diagram as code
Draw freehand or structured diagrams, and import or write Mermaid, D2, or Structurizr. Text and canvas representations remain part of the same editable diagram.
Agent-native diagramming
Connect Claude Code, Codex, Cursor, VS Code, Claude Desktop, Windsurf, or another MCP client. The local server provides 29 tools for drawing, reading, rearranging, styling, screenshots, exports, and repository operations.
Architecture modeling
Model systems through connected architecture views, including C4-style context, container, and component perspectives. A repository can also be opened as a C4 model with evidence links pinned to the commit it read.
Technology-aware diagram styling
Use automatic icon matching for more than 2,000 AWS, Azure, Google Cloud, CNCF, and developer icons by naming a technology such as PostgreSQL, Redis, or Kubernetes.
Self-hosting and local storage
Serve the static build from a file host or run it in Docker. Diagrams stay in each visitor's browser, while optional view-only sharing uses a separately deployed Worker that stores ciphertext.
Practical use cases
Explore an unfamiliar codebase
Paste a public repository to generate a map of discovered services, files, and connections, then select an arrow to inspect the source file and line behind it. Use the read-only map for exploration or copy it to a canvas for rearrangement.
Document system architecture
Start with a system context, container, or component view and keep related architecture levels connected. This supports documenting services, data stores, external systems, and their relationships in a C4-style model.
Move between code and visual thinking
Turn a Mermaid, D2, or Structurizr description into an editable visual diagram, or use the canvas to combine structured shapes with freehand notes, images, emoji, and charts.
Collaborate with a coding agent
Ask an MCP-connected agent to draw a repository architecture, modify selected elements, add a cache, restyle a diagram, or turn diagram code into an editable document. Review each change and undo it as a single step.
Host a private diagramming workspace
Run OpenFlowKit on an internal domain or local environment by serving its static build or using Docker. Keep documents in browsers and optionally deploy the sharing Worker when view-only links are needed.
Pros and Cons
Pros
- Supports several starting points in one canvas: freehand drawing, diagram code, repository mapping, and agent instructions.
- Repository arrows provide file-and-line evidence, making generated architecture maps easier to inspect against source code.
- The MCP server lets supported agents edit the open diagram through 29 tools, with changes kept undoable.
- Open source under the MIT license, with a static build that can be self-hosted or run in Docker.
- Supports C4-style connected views and automatic technology icon matching for a broad set of cloud and developer technologies.
Cons
- Browser repository mapping is limited to public GitHub repositories; private repositories require a local CLI workflow.
- Repository maps infer relationships from imports and configuration files rather than running the code, and large repositories are sampled within stated read limits.
- Team synchronization is not built in: self-hosted documents remain in each visitor's browser, and view-only sharing requires a separately deployed Worker.
FAQ
How do I set up OpenFlowKit?
OpenFlowKit can be used in the hosted browser studio without an account. The self-hosted version is a static web app that can be served from a folder or run in Docker; building the project requires Node 22.22 or newer.
What workflows does OpenFlowKit support?
You can draw on the canvas, paste or write Mermaid, D2, or Structurizr, import a repository map, or connect an MCP client. The resulting diagram remains an editable document, and agent changes can be undone one step at a time.
Can OpenFlowKit map private GitHub repositories?
Public GitHub repositories can be mapped directly in the browser without an API key or installation. Private repositories must be mapped from a local checkout with the CLI included in the MCP server package.
What are the repository-mapping limitations?
The repository mapper derives connections from imports and configuration files rather than executing the application. Browser mapping is for public GitHub repositories and is subject to GitHub's unauthenticated read limit; large repositories are sampled with documented file and total-size limits.
Which agent and AI workflows are supported?
The MCP server works with Claude Code, Codex, Cursor, VS Code, Claude Desktop, Windsurf, and other MCP clients. It runs on the user's machine and does not require its own API key. AI requests made through a cloud model remain subject to that provider's data handling and usage charges.
Quick Facts
- Category
- Developer tool; architecture diagramming
- Platform
- Web app with self-hosting via static files or Docker
- License
- MIT licensed and open source
- Agent interface
- MCP server with 29 diagram and repository tools
- Diagram inputs
- Canvas drawing, Mermaid, D2, Structurizr, GitHub repositories
- Account model
- Hosted studio available without an account
OpenFlowKit Alternatives
Lucid Train
Lucid Train is a local-first AI coding harness that turns repo code into architecture diagrams for coding agents. Desktop app and Rust CLI, local models or API keys.
Cherry Blossom
Cherry Blossom is a browser-based PCB editor that turns plain-English prompts into editable schematics, PCB layouts, and fabrication files with AI checks and open exports.
ByteAsk
ByteAsk is a terminal-first AI coding agent for C and C++ that edits repos and verifies changes with compilers, debuggers, sanitizers, and tests.
Epherem
Epherem scans web apps built with Lovable, Bolt, v0, Replit, Cursor, and Claude Code for security flaws in source code and dependencies, without running the app.
CreateOS Sandbox
CreateOS Sandbox is an isolated compute environment for running code and agent workloads in Firecracker micro-VMs with private networking and SDK, CLI, or MCP control.
GitBot
GitBot is a local browser workspace for reusable coding bots powered by Claude Code, Codex, or OpenCode, with persistent threads and configurable permissions.