openflowkit-mcp

OpenFlowKit

架构图可以手绘、编写为代码，也可以交给 Agent 绘制。
免费、开源、本地优先。粘贴 GitHub 仓库链接，即可生成架构图，每条连线都标注了对应的代码行。

打开应用  ·  文档  ·  MCP 配置  ·  讨论  ·  问题

为什么选择 OpenFlowKit

1. Agent 在你的画布上实时绘图

连接 Claude Code、Cursor 或任何 MCP 客户端，然后让它绘制图表。Agent 会读取页面、 绘图、调整样式并截图检查自己的成果，你可以在旁边实时观看。它所做的每项更改都只需一次撤销操作，就像你自己编辑一样。连接你的 Agent ↓

2. 文本和画布是同一张图

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

打开代码面板（⌥C），将此内容粘贴到面板中，然后按 ⌘↵。在画布上拖动元素 或编辑文本；按 ⌘↵ 可根据文本重新生成画布，这只需一次撤销操作。粘贴 Mermaid、Structurizr 或 D2 内容，即可转换为图表。

在空白画布的输入框中输入 owner/repo，然后按 Map repo；也可以打开 app.openflowkit.com/#/map/github/<owner>/<repo> （试用示例）。 浏览器会从 GitHub 读取仓库并绘制其组成部分。点击方框即可在原处展开，每条箭头都会列出其对应的 file:line，并链接到代码。无需密钥，也无需安装。对于私有仓库，可在页面上添加只读 GitHub 令牌，或绘制本地检出版本：npx openflowkit map . --html map.html （私有仓库）。

4. 导出，包括动画

可导出为 PNG、SVG、PDF、JSON，或选择 Copy as Mermaid，用于 README。在上方文本中添加 animate 块即可指定步骤，随后应用会在浏览器中将其导出为动画 SVG、GIF、MP4 或 WebM。

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

_{这个动画就是上方两个代码片段由应用导出的动画 SVG。GitHub 会像显示图片一样播放它。}

十种图表类型，一种语言

每种图表都使用同一种简短、宽容的文本语法，并会针对每行报错，说明如何修复。 下面的每张图都是对应文档页面上的第一个示例，由 openflowkit CLI 渲染。

架构图 · 云图标、分组，以及包含多个视图的 C4 模型	序列图 · alt / opt / loop、注释、激活
流程图 · 形状、判断、分组	ERD · 列、键、乌鸦脚基数
状态图 · 起始和结束、复合状态	类图 · 成员、构造型、关系
思维导图 · 缩进就是树结构	Git 图 · 分支、合并、标签
图表 · 以文本编写数据，可在表格中编辑	线框图 · 手机、平板或桌面屏幕上的 35 种控件

这门语言有版本管理，并集中记录在一个文件中：src/dsl/grammar.md （文档）。代码面板、助手、MCP 工具和 CLI 使用的都是同一种文本。

快速开始

在浏览器中： app.openflowkit.com。无需安装，无需账户。

在终端中： npx openflowkit（Node 20.11+）。

在本地运行（Node 22.22+）：

git clone https://github.com/openflowkit/openflowkit.git
cd openflowkit
npm install && npm run dev      # http://localhost:3000

连接你的 Agent

OpenFlowKit 提供一组 Agent 工具。根据 Agent 的运行位置选择对应行：

对于 Claude Code，只需一行：

claude mcp add -s user openflowkit -- npx -y openflowkit mcp

对于 Codex：codex mcp add openflowkit -- npx -y openflowkit mcp。

对于 Claude Desktop、Windsurf 和任何其他 MCP 客户端：

{
  "mcpServers": {
    "openflowkit": { "command": "npx", "args": ["-y", "openflowkit", "mcp"] }
  }
}

重启 Agent，然后在应用中点击 Connect agent，或打开 app.openflowkit.com/#/connect。该面板提供各客户端的操作步骤， 并会复制包含配对令牌的相同配置。如果没有打开应用，这些工具也会编辑仓库中的 .openflow.json 文件。 每个客户端的分步说明及故障修复方法：连接你的 Agent。

# Claude Code
claude plugin marketplace add openflowkit/openflowkit
claude plugin install openflowkit@openflowkit

# Codex: add the marketplace, then install OpenFlowKit from the Plugins Directory
codex plugin marketplace add openflowkit/openflowkit

MCP 服务会为你的 Agent 提供你在实时画布或文件上可用的操作。

可以试着提出这些请求：

• “绘制这个代码仓库的架构图。”
• “把我选中的方框设为红色，并在 API 前面添加一个缓存。”
• “把我们 README 中的 Mermaid 转换成可编辑的图表。”
• “对比 architecture.ofk 和代码，告诉我有哪些偏差。”

你对画布所做的编辑是安全的：如果你移动、重新设置样式或重命名了内容，而 Agent 又根据文本重新生成图表，get_diagram 会提供保留每项编辑的文本，update_diagram 会报告它不得不舍弃的内容。Agent 每次修改都是一个撤销步骤，Connect 面板会显示最近的一次修改，并提供 Undo 按钮。

改用自己的密钥： 按 ⌘J 打开助手。选择 Claude、OpenAI、Gemini、 Groq、Mistral、Cerebras、NVIDIA、OpenRouter、Ollama 或任何兼容 OpenAI 的端点（LM Studio…）， 然后粘贴密钥。密钥会保留在此浏览器中，回复会以提案的形式显示，供你应用或忽略。

导入现有图表

粘贴到代码面板即可转换，并会如实列出无法保留的内容。直接将 Mermaid 粘贴到画布上，即可在原处绘制。

导出时，Copy as Mermaid 会将流程图或时序图转换为 Mermaid 文本，可用于 README 或 wiki。Mermaid · 从 Structurizr 导入

在代码仓库和 CI 中使用

openflowkit CLI 可在任何终端或 CI 作业中运行与应用相同的引擎：

npx openflowkit render diagram.ofk -o diagram.svg   # Mermaid, D2, Structurizr or DSL → SVG
npx openflowkit validate diagram.ofk --strict       # exit 1 on an error
npx openflowkit convert flow.mmd -o flow.openflow.json
npx openflowkit discover . --out architecture.ofk   # draft a C4 model of this repo
npx openflowkit drift .                             # exit 1 when the code moved on

将 architecture.ofk 与代码一同提交，drift 就能在 CI 中确保架构图保持准确。PR diagrams Action 会在拉取请求中评论图表的变更情况：节点和连接线数量、文本差异，以及 .ofk 模型的偏差。 CLI · GitHub Action

导出与分享

键盘

每个操作都有对应的按键，在应用中按 ? 可查看所有按键。

工作原理

_{这张图也是 OpenFlowKit 文本：how-it-works.ofk，以动画 SVG 格式导出，并使用 pulse 预设。}

你和你的 Agent 也可以直接在画布上绘图；每次编辑，无论是输入文本还是手动操作，都会作为同一文档上的一条命令执行。

画布上的任何帧都可以写回为规范文本，并且测试保证 format(format(x)) == format(x)。语言和文档代码采用纯 TypeScript 编写，不依赖 React、Pixi 或 DOM，因此同一个编译器可以在浏览器、MCP 服务和 CLI 中运行。完整介绍请参阅：ARCHITECTURE.md。

自托管

docker build -t openflowkit . && docker run --rm -p 3045:3045 openflowkit   # http://localhost:3045

该镜像是通过 nginx 提供的静态构建版本，使用与托管应用相同的响应头。内容安全策略、自有网络中的 AI 提供商以及分享链接，请参阅自托管。

隐私

你的图表会留在浏览器中。只有在你主动选择时，数据才会离开浏览器：使用你自己的密钥调用 AI 时，数据会发送给相应的提供方；创建分享链接时，会上传一份加密副本；生成代码库地图时，会从 GitHub 读取数据。 无需账户。我们会收集基本使用统计数据来改进 OpenFlowKit；你可以在 Settings 中关闭统计。点击主页上的 Download all diagrams，即可一次性备份所有内容；在任何浏览器中点击 Import 即可恢复。

参与贡献

欢迎提交 Issue、创意和 PR。请先阅读 CONTRIBUTING.md，了解环境配置和检查流程；阅读 ARCHITECTURE.md，了解代码的组织方式。欢迎在 Discussions 中提问。查看各版本的变更：CHANGELOG.md。

如需报告安全问题，请按照 SECURITY.md 中的说明私下提交。本项目采用 MIT 许可，详见 LICENSE。

如果 OpenFlowKit 帮你保存了图表，请在 GitHub 上给它一个 ⭐。
_{这样其他人也能找到它。}

打开应用  ·  文档  ·  参与贡献  ·  讨论区  ·  报告错误