Openflowkit

OpenFlowKit

Architecture diagrams you draw, write as code, or hand to your agent. Free, open source and local-first. Paste a GitHub repo and get its map, every arrow cited to a line of code.

Open the app  ·  Docs  ·  MCP setup  ·  Discussions  ·  Issues

Why OpenFlowKit

1. Your agent draws on your canvas, live

Connect Claude Code, Cursor or any MCP client and ask for a diagram. The agent reads the page, draws, restyles and takes a screenshot to check its own work while you watch. Every change it makes is one undo step, like your own. Connect your agent ↓

2. Text and canvas are the same diagram

flowchart right
  Client [blue] -> "API Gateway" [emerald] : HTTPS
  "API Gateway" -> Queue [queue, amber]
  Queue -> Worker
  Worker -> Store [cylinder, red, bold]

Open the code panel (⌥C), paste this into it and press ⌘↵. Drag things around on the canvas or edit the text; ⌘↵ regenerates the frame from the text as one undo step. Paste Mermaid, Structurizr or D2 and it converts.

3. Paste a GitHub repo, get its map

Type owner/repo into the box on an empty canvas and press Map repo, or open app.openflowkit.com/#/map/github/<owner>/<repo> (try a sample). Your browser reads the repo from GitHub and draws its parts. Boxes open in place, and every arrow lists the file:line behind it, linked to the code. No key and no install. For a private repo, add a read-only GitHub token on the page, or map a checkout: npx openflowkit map . --html map.html (private repos).

4. Export it, including the animation

PNG, SVG, PDF, JSON, or Copy as Mermaid for a README. Add an animate block to the text above to name the steps, and the export renders animated SVG, GIF, MP4 or WebM in your browser.

animate build 6s loop {
  step Client
  step Client -> "API Gateway" : HTTPS
  step Queue, Worker
  step Store hold 2s
}

That animation is the two snippets above, exported by the app as an animated SVG. GitHub plays it like an image.

Ten diagram types, one language

Every type is the same short, forgiving text, with per-line errors that say how to fix them. Each picture below is the first example on its docs page, rendered by the openflowkit CLI.