openflowkit-mcp — Claude Code MCP server: diagrams and setup
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.
claude mcp add openflowkit-mcp -- npx -y openflowkitWhat openflowkit-mcp 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.
What it helps with
- 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 for the agent
- 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.
How to install openflowkit-mcp
Platform CLI
claude mcp add openflowkit-mcp -- npx -y openflowkitPlatform CLI
codex mcp add openflowkit-openflowkit-mcp -- npx -y openflowkitConfig file
{
"mcpServers": {
"openflowkit-openflowkit-mcp": {
"command": "npx",
"args": [
"-y",
"openflowkit"
]
}
}
}Config file
{
"servers": {
"openflowkit-openflowkit-mcp": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"openflowkit"
]
}
}
}Platform CLI
gemini mcp add openflowkit-openflowkit-mcp npx -y openflowkitStep by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about openflowkit-mcp
How do I install openflowkit-mcp in Claude Code?
Run claude mcp add openflowkit-mcp -- npx -y openflowkit. This registers the MCP server, which runs through npx.
What does openflowkit-mcp do?
It connects an agent to OpenFlowKit so the agent can draw architecture diagrams on the canvas and edit diagrams as text.
Which diagram formats can it convert?
OpenFlowKit can convert Mermaid, Structurizr, and D2 diagrams. Diagrams can also be exported as PNG, SVG, PDF, or JSON.
