# openflowkit-mcp

Let an agent draw architecture diagrams on the OpenFlowKit canvas or work with diagram files. Useful when you want a project map or need to revise a diagram with an agent.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 906
- Author: openflowkit
- License: MIT · policy=link-only · description only; the file stays with the author
- Source: https://github.com/openflowkit/openflowkit
- Updated: 2026-10-22
- HTML: https://affpapa.org/en/nevibecode/mcp/openflowkit-openflowkit-mcp

## What it does

The agent can create and restyle a diagram on the OpenFlowKit canvas, then inspect a screenshot of its work. Each change is undoable on its own. The text view and canvas represent the same diagram: editing the text regenerates the drawing, and Mermaid, Structurizr, and D2 diagrams can be converted.

OpenFlowKit can map a GitHub project’s components and connections, with each connection tied to a source file and line. For a private repository, use a read-only GitHub token or map a local checkout with `npx openflowkit map . --html map.html`. In Claude Code, the MCP server starts through `npx`; the project map depends on access to the repository.

## Requirements
- Needs: Node.js (commands run via npx)
- Works with: GitHub

## Install

### Claude Code (native platform)

**Platform CLI**
```bash
claude mcp add openflowkit-mcp -- npx -y openflowkit
```

### Codex

**Platform CLI**
```bash
codex mcp add openflowkit-openflowkit-mcp -- npx -y openflowkit
```

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "openflowkit-openflowkit-mcp": {
            "command": "npx",
            "args": [
                "-y",
                "openflowkit"
            ]
        }
    }
}
```

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "openflowkit-openflowkit-mcp": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "openflowkit"
            ]
        }
    }
}
```

### Gemini CLI

**Platform CLI**
```bash
gemini mcp add openflowkit-openflowkit-mcp npx -y openflowkit
```

## When to use it
- draw an architecture diagram from an agent request
- map GitHub repository components and their connections
- regenerate a diagram after changing its text description
- convert Mermaid, Structurizr, or D2 diagrams

## Example prompts
- Draw this project's architecture on the OpenFlowKit canvas.
- Map this GitHub repository and label connections with their source files and lines.
- Convert this Mermaid diagram into an OpenFlowKit diagram.

## Similar
- [Next AI Draw.io](https://affpapa.org/en/nevibecode/mcp/next-ai-drawio.md) — MCP server · ★ 36398
- [tldraw](https://affpapa.org/en/nevibecode/mcp/tldraw.md) — MCP server · ★ 51091
- [Figma-Context-MCP](https://affpapa.org/en/nevibecode/mcp/figma-context-mcp.md) — MCP server · ★ 16062
- [Agent-Native Assets](https://affpapa.org/en/nevibecode/mcp/agent-native-assets.md) — MCP server · ★ 7506
- [Remove AI Watermarks](https://affpapa.org/en/nevibecode/mcp/remove-ai-watermarks.md) — MCP server · ★ 6114
- [Dembrandt](https://affpapa.org/en/nevibecode/mcp/dembrandt.md) — MCP server · ★ 3821

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md