flowgraf
Flowgraf is an MCP server that lets AI agents create, retrieve, and edit architecture diagrams from plain English descriptions, returning shareable canvas links, SVGs, and Mermaid strings.
create_diagram: Generate an architecture diagram by providing nodes, edges, and groups. Supports cloud providers (AWS, GCP, Azure), Kubernetes, SaaS, and generic/flowchart node types. Returns a live editable canvas URL, SVG, and Mermaid representation. No layout authoring needed — the server computes all geometry automatically.
get_diagram: Fetch the current graph structure (nodes, edges, groups, and their IDs) and version number. Required before editing to reference valid IDs and avoid stale-version conflicts.
edit_diagram: Apply a list of operations to an existing diagram with automatic re-layout. Operations include:
Add, remove, or update nodes, edges, or groups
Move nodes between groups
Insert a new node between two existing connected nodes
Set layout direction and spacing
Set theme (light, dark, blueprint) and background style
Rename the diagram title
Editing uses optimistic concurrency control via baseVersion — a STALE_VERSION error prompts a re-fetch and retry to prevent conflicting edits.
flowgraf-mcp
Create and edit clean, editable architecture diagrams from your AI agent — in plain English.
Flowgraf turns a description of a system into a clean, auto-laid-out architecture diagram — then hands back a link to a live canvas you can keep editing, by chat or by hand. This package is the stdio proxy for MCP clients that speak stdio: it forwards to Flowgraf's hosted MCP endpoint. No API key, no LLM cost to you — your agent authors the diagram, Flowgraf lays it out and renders it.
npx -y flowgraf-mcpWhy
Drawing architecture diagrams by hand is slow and rots the moment the system changes. With Flowgraf, you describe the system once and get a diagram you can edit semantically — "add a Redis cache between the API and the database" — and the edges re-route themselves.
Related MCP server: Excalidraw Architect MCP
Tools
The proxy forwards Flowgraf's tool list verbatim, so it always mirrors what the server exposes. Today that's three tools:
Tool | What it does |
| Turn a graph (nodes + edges + groups) into a diagram → returns an SVG, a Mermaid string, and a |
| Apply operations to an existing diagram (e.g. insert a cache between two nodes) — it re-wires and re-lays-out automatically |
| Fetch a diagram's current graph + version |
Install
Requires Node.js 18+.
Claude Code
Recommended — point Claude Code straight at the hosted remote endpoint (no local process to run):
claude mcp add --transport http flowgraf https://flowgraf.in/api/mcp…or run it through this stdio proxy:
claude mcp add flowgraf npx flowgraf-mcp
Cursor / Windsurf (stdio)
Add to your MCP config (~/.cursor/mcp.json for Cursor):
{
"mcpServers": {
"flowgraf": {
"command": "npx",
"args": ["-y", "flowgraf-mcp"]
}
}
}OpenCode (stdio)
Add this to ~/.config/opencode/opencode.json for all projects, or to opencode.json
in a project root:
{
"$schema": "https://opencode.ai/config.json",
"mcp": {
"flowgraf": {
"type": "local",
"command": ["npx", "-y", "flowgraf-mcp"],
"enabled": true
}
}
}Fully quit and restart OpenCode, then verify the server before your first prompt:
opencode mcp listExpected status: flowgraf connected. Start opencode in the configured project and paste
one of the prompts below. This path is verified through the local stdio proxy. Direct remote
Streamable HTTP configuration is not yet verified for Flowgraf in OpenCode.
Anything else
npx -y flowgraf-mcpThe proxy speaks the Model Context Protocol over stdio and forwards to the hosted API.
How it works
flowgraf-mcp is a thin, transparent stdio proxy. It has zero business logic: tools/list and tools/call are forwarded verbatim to Flowgraf's hosted MCP endpoint (/api/mcp). Whatever the remote returns is handed straight back to your client.
That means two things:
The tools you see are always exactly what Flowgraf ships — nothing to keep in sync here.
You can skip the proxy entirely and connect any MCP client directly to
https://flowgraf.in/api/mcpover HTTP (this is the recommended mode for Claude Code).
Example
"Create an architecture diagram: a user hits an API gateway in a VPC, which talks to a Postgres database."
→
create_diagramreturns an SVG and a link likehttps://flowgraf.in/d/abc123. Open it to edit on the canvas.
"Add a Redis cache between the API and the database."
→
edit_diagraminserts the cache and re-routes the edge automatically — no manual cleanup.
Configuration
By default the proxy targets Flowgraf's hosted endpoint. Override it (e.g. for local development) with an environment variable:
Variable | Meaning |
| Full endpoint URL, e.g. |
| Base URL; |
Copyable prompts
Simple
Create an architecture diagram of a web app where users connect to a load balancer, which routes requests to two app servers backed by a Postgres database. Return the editable Flowgraf canvas link.
Medium
Create an architecture diagram of a RAG pipeline: a user query reaches an API, the API creates an embedding, searches a vector database, sends the retrieved context to an LLM, and returns the answer. Group ingestion separately with object storage, a document processor, and the same vector database. Return the editable Flowgraf canvas link.
Edit an existing diagram
Using the Flowgraf diagram from the previous response, insert a message queue between the API and the workers, preserve the existing components, and return the updated canvas link.
Links
Website: https://flowgraf.in
MCP endpoint:
https://flowgraf.in/api/mcp
License
MIT
Available Tools
3 toolscreate_diagramCreate architecture diagramA
Create a NEW architecture diagram from a graph that YOU author, and get back a shareable, editable canvas URL plus a rendered SVG and Mermaid.
You produce only the SEMANTICS — nodes, the groups (VPC/cluster/...) they live in, and the directed edges between them. You do NOT lay anything out: never send x/y/position/pinned. A deterministic layout engine computes all geometry and an icon layer picks the pictures from each node's kind.
kind.catalog is one of aws | gcp | azure | k8s | saas | generic, each with rich per-catalog kind.types (e.g. aws:lambda, gcp:bigquery, azure:cosmos_db, k8s:deployment, saas:kafka):
"aws" (api_gateway, lambda, s3, rds, dynamodb, sqs, bedrock, kinesis, fargate, eventbridge, aurora, ...).
"gcp" (compute_engine, gke, cloud_run, cloud_sql, spanner, firestore, bigquery, pubsub, dataflow, vertex_ai, ...).
"azure" (virtual_machine, aks, app_service, functions, blob_storage, sql_database, cosmos_db, service_bus, event_hubs, key_vault, ...).
"k8s" (pod, deployment, statefulset, daemonset, job, cronjob, service, ingress, configmap, secret, hpa, ...).
"saas" for hosted third-parties (redis, postgresql, mysql, mongodb, kafka, stripe, twilio, auth0, github, cloudflare, ...).
"generic" primitive when nothing branded fits: service, database, cache, queue, user, external_system, storage, gateway, function, note.
"generic" FLOWCHART kinds for processes/flowcharts: process, decision, terminator, data, document, subprocess. edge.kind is one of: request, response, async_event, data_flow, dependency, network, generic.
WORKED EXAMPLE — a user hitting an API in a VPC that talks to Postgres: { "title": "Web API", "domain": "cloud_architecture", "graph": { "groups": [{ "id": "g_vpc", "label": "VPC", "type": "vpc" }], "nodes": [ { "id": "n_user", "label": "User", "kind": { "catalog": "generic", "type": "user" } }, { "id": "n_api", "label": "API", "kind": { "catalog": "aws", "type": "api_gateway" }, "parentId": "g_vpc" }, { "id": "n_db", "label": "Postgres", "kind": { "catalog": "aws", "type": "rds" }, "parentId": "g_vpc" } ], "edges": [ { "id": "e1", "source": "n_user", "target": "n_api", "kind": "request" }, { "id": "e2", "source": "n_api", "target": "n_db", "kind": "data_flow" } ] } }
Returns { diagramId, url, svg, mermaid, version }. Give the user the url — opening it shows the same diagram on an editable canvas (anonymous; it's theirs to claim by signing in). To change the diagram afterwards, use get_diagram then edit_diagram.
Inputs: graph (required), title (required), domain.
edit_diagramEdit architecture diagramA
Apply a list of operations to an EXISTING diagram. The ops re-use this tool's op vocabulary; you author them, we validate + apply + re-layout + re-render.
ALWAYS call get_diagram(diagramId) first: it returns the current ids and the version. Pass that version as baseVersion. If the diagram changed since you fetched it, you get a STALE_VERSION error telling you the current version — refetch with get_diagram, recompute your ops, and retry.
The operations (each element of ops):
add_node { op, node:{ id, label, kind, parentId? } }
remove_node { op, id } (also drops edges touching the node)
update_node { op, id, patch:{ label?, kind?, parentId?, metadata? } }
add_edge { op, edge:{ id, source, target, kind, label?, directed? } }
remove_edge { op, id }
update_edge { op, id, patch:{ source?, target?, label?, kind?, directed? } }
add_group { op, group:{ id, label, type, parentId? } }
remove_group{ op, id }
move_to_group { op, nodeId, groupId } (groupId null un-nests the node)
set_layout { op, patch:{ direction?, spacing? } }
insert_between { op, newNode:{ id, label, kind, parentId? }, sourceId, targetId, inKind?, outKind? }
insert_between IS THE KEY OP for "add X between A and B" requests. It splices newNode onto the existing A→B edge: removes that edge, adds the node, and wires A→newNode→B so the connection re-routes through it automatically.
WORKED EXAMPLE — "add a Redis cache between the API and the DB" on the diagram above:
get_diagram(diagramId) → shows nodes n_api, n_db and version 1.
edit_diagram({ diagramId, baseVersion: 1, ops: [ { "op": "insert_between", "sourceId": "n_api", "targetId": "n_db", "newNode": { "id": "n_redis", "label": "Redis", "kind": { "catalog": "saas", "type": "redis" }, "parentId": "g_vpc" }, "inKind": "request", "outKind": "data_flow" } ] }) The API→DB edge is gone and now flows API→Redis→DB. Never send x/y/position — geometry is computed for you.
Node kinds: catalog ∈ {aws, gcp, azure, k8s, saas, generic} with rich per-catalog types (e.g. aws:lambda, gcp:bigquery, azure:cosmos_db, k8s:deployment, saas:kafka), plus generic flowchart kinds (process, decision, terminator, data, document, subprocess).
Returns { url, svg, mermaid, appliedOps, version }.
Inputs: ops (required), diagramId (required), baseVersion (required).
get_diagramGet architecture diagramA
Fetch a diagram's raw IR (nodes, groups, edges with their real ids) and its current version. Call this before edit_diagram so your ops reference ids that actually exist and you pass the correct baseVersion. Returns { diagram, version }.
Inputs: diagramId (required).
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
Loading tool schema changelog…
TDQS
Scored across 3 tools
Each tool has a distinct purpose: creating a new diagram, editing an existing diagram, and fetching a diagram's data. There is no overlap or confusion between them.
All tool names follow a consistent verb_noun pattern (create_diagram, edit_diagram, get_diagram), making the API intuitive and predictable.
Three tools cover the core lifecycle of a diagram (create, retrieve, update) without unnecessary extras. The scope is well-defined and each tool is essential.
The tools cover creation, retrieval, and comprehensive editing (with many operations). Missing a delete tool or a list tool, but the editing capability is very rich, so minor gap.
Related MCP Connectors
Create and edit architecture diagrams from your AI agent; get an SVG and a live editable canvas.
Live, editable canvas for AI agents — author graphs via MCP, then watch and reroute runs live.
Turn calls and notes into process flow diagrams in Claude, ChatGPT, VS Code, Cursor, and Teams.
AI agent draws editable hand-drawn diagrams (flowchart, ER, architecture) via MCP, not static images
Related MCP Servers
- AlicenseBqualityDmaintenanceMCP server for Claude, ChatGPT, coding agents (cursor, claude code etc), windsurf, etc— generate visual AI automation workflows. Describe a business process, get an interactive flow map you can edit and share.178 npmMIT
- FlicenseNot gradedqualityAmaintenanceEnables AI assistants in Cursor, Claude Code, and Windsurf to turn plain descriptions of components, actors, or data into auto-laid-out, editable hand-drawn diagrams across 25 types — including architecture, flowcharts, sequence diagrams, Gantt charts, and charts — with architecture-aware styling and natural-language revision. It can optionally persist a system as a version-controlled, queryable knowledge graph, and it runs fully offline with no API keys, exporting to SVG and PNG.-
- FlicenseNot gradedqualityAmaintenanceEnables AI coding assistants to generate and iteratively revise auto-laid-out, hand-drawn diagrams across 25 types — architecture, flowcharts, sequence, ER, Gantt, and charts — from natural-language descriptions, with SVG/PNG export. It can also persist a system as a version-controlled, queryable architecture knowledge graph, running fully offline in Cursor, Claude Code, and Windsurf without API keys.-
- FlicenseNot gradedqualityAmaintenanceEnables AI assistants to turn natural-language descriptions of systems, processes, and data into auto-laid-out, hand-drawn editable diagram files across 25 diagram types — architecture, flowcharts, sequence, swimlanes, ER models, Gantt, timelines and charts — with optional natural-language revision and SVG/PNG export. It can also persist an architecture as a version-controlled knowledge graph that the AI can query and lint, running fully offline in Cursor, Claude Code and Windsurf without API keys.-