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 MC

What is 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.

Overview of openflowkit

What it is

OpenFlowKit is a free, open-source diagram canvas. It is local-first and does not require an account. The software lets users create architecture diagrams by drawing, writing them as code (Mermaid, D2, Structurizr), or using AI models. It can also map a GitHub repository, with every arrow cited to a file and line number.

Key features

  • Supports ten diagram types (architecture, sequence, flowchart, ERD, state, class, mind map, git graph, chart, wireframe) with one language.
  • Can paste a GitHub repo by typing owner/repo and get its map; boxes open in place and every arrow shows file:line.
  • Text and canvas are synchronized: editing the code panel and pressing ⌘↵ regenerates the diagram as one undo step.
  • Exports to PNG, SVG, PDF, JSON, or copy as Mermaid; animated SVG, GIF, MP4, or WebM can be rendered from an animate block.
  • Connects to Claude Code, Cursor, or any MCP client so an agent can draw, restyle, and take screenshots live on the canvas.
  • Can bring in existing diagrams by pasting Mermaid, Structurizr DSL, or D2 into the code panel.

Use cases

Creating architecture diagrams for software projects. Mapping a GitHub repository to visualize its structure with code references. Collaborating with AI agents to generate and refine diagrams in real time. Generating animated diagrams for documentation (READMEs, presentations).

Getting started

In the browser: app.openflowkit.com. Nothing to install, no account.In a terminal: npx openflowkit (Node 20.11+).Run it locally (Node 22.22+):bashgit clone https://github.com/openflowkit/openflowkit.gitcd openflowkitnpm install && npm run dev # http://localhost:3000

License and pricing

The license is MIT. The software is free and open source. No account required.

Based on the project's public README and repository metadata.

Add this badge to your README

Featured on YunoDB Badge styles & help

Maintain this project? Show that it is featured on YunoDB.

Markdown[![Featured on YunoDB](https://yunodb.com/badge/openflowkitopenflowkit.svg)](https://yunodb.com/tools/openflowkitopenflowkit?utm_source=github&utm_medium=badge)
HTML<a href="https://yunodb.com/tools/openflowkitopenflowkit?utm_source=github&utm_medium=badge"><img src="https://yunodb.com/badge/openflowkitopenflowkit.svg" alt="Featured on YunoDB" height="20"></a>