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.
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-mcpDrawing 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: Agentled MCP Server
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 |
Requires Node.js 18+.
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
Add to your MCP config (~/.cursor/mcp.json for Cursor):
{
"mcpServers": {
"flowgraf": {
"command": "npx",
"args": ["-y", "flowgraf-mcp"]
}
}
}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.
npx -y flowgraf-mcpThe proxy speaks the Model Context Protocol over stdio and forwards to the hosted API.
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/mcp over HTTP (this is the recommended mode for Claude Code).
"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.
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; |
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.
Website: https://flowgraf.in
MCP endpoint: https://flowgraf.in/api/mcp
MIT
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.
| Name | Required | Description | Default |
|---|---|---|---|
| graph | Yes | ||
| title | Yes | A short title for the diagram. | |
| domain | No | Optional domain hint (default: generic). |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full transparency burden. It does well by disclosing that the agent supplies only semantics, that layout is deterministic and icon selection is automatic, that coordinates/pinning must not be sent, and that the result is an editable anonymous canvas. It stops short of detailing persistence, idempotency, or failure behavior, but the key behavioral traits are clearly surfaced.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is long, but the tool is genuinely complex and the length is justified by the catalog taxonomy, layout constraints, and worked example. It is well structured with clear sections and front-loads the core purpose and outputs. A small amount of repetition with schema enums exists, but it aids usability rather than bloating the definition.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a complex tool with no output schema and no annotations, this description is remarkably complete. It explains the return payload, tells the agent to give the URL to the user, clarifies that the diagram is claimable by signing in, and describes the follow-up flow via get_diagram and edit_diagram. An agent has everything needed to invoke and explain the result.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The schema has moderate coverage, but the description adds substantial meaning: the full catalog vocabulary (aws, gcp, azure, k8s, saas, generic), example kinds per catalog, edge kind semantics, group types, and the rule that x/y/position/pinned are forbidden. The worked example demonstrates exactly how nodes, groups, edges, and parentIds fit together, going well beyond the raw schema.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description opens with a specific verb and resource: "Create a NEW architecture diagram" from a graph the agent authors, and it states the concrete outputs (URL, SVG, Mermaid). It explicitly distinguishes itself from siblings by saying "NEW" and by pointing to edit_diagram/get_diagram for later changes.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The usage context is explicit: use this tool when authoring a new diagram from semantic graph data. It also gives a clear when-not: "To change the diagram afterwards, use get_diagram then edit_diagram." This routes the agent to the correct sibling without ambiguity.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
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 }.
| Name | Required | Description | Default |
|---|---|---|---|
| ops | Yes | ||
| diagramId | Yes | The diagram to edit (from create_diagram or get_diagram). | |
| baseVersion | Yes | The version you are editing against — get it from get_diagram. Stale → STALE_VERSION. |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries full behavioral burden and succeeds: it discloses validation, apply, re-layout, re-render behavior; stale-version error semantics; automatic geometry computation; and edge-dropping side effects of remove_node. It also explains insert_between's splicing effect on existing edges, making side effects explicit.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is long but structurally dense: prerequisite call, op list, highlighted op, worked example, geometry warning, kind catalog, and return values. Every section earns its place given the tool's complexity, and the most critical usage caveat (fetch version first) is front-loaded.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Since there is no output schema, the description supplies return shape ({ url, svg, mermaid, appliedOps, version }) and key preconditions. It covers op vocabulary, kinds, side effects, and error handling, leaving no critical gap for an agent to invoke the tool correctly on a mutating endpoint.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 67% but only at the top level; the ops array itself has no schema description. The description compensates fully by documenting every op variant, required fields, purpose, and a concrete worked example. It adds meaning well beyond the raw JSON schema, especially for insert_between and baseVersion semantics.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
Description opens with a specific verb+resource: 'Apply a list of operations to an EXISTING diagram.' It clearly differentiates itself from siblings (create_diagram, get_diagram) by targeting existing diagrams and enumerating the mutation operations. The title and purpose align without tautology.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Provides explicit 'ALWAYS call get_diagram(diagramId) first' instructions, including how to handle STALE_VERSION errors and retry. It also gives a worked example for the key op and warns against sending x/y/position, giving the agent clear when-and-how-to-use guidance.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
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 }.
| Name | Required | Description | Default |
|---|---|---|---|
| diagramId | Yes | The diagram to fetch. |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the behavioral disclosure burden. It clearly communicates that this is a fetch operation returning raw IR and a version, and that it is meant to provide accurate ids for subsequent edits. It does not mention auth or error behavior, but for a simple read operation the transparency is strong.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is two sentences with no filler. It front-loads the core behavior, then adds the crucial workflow context and return shape. Every sentence earns its place.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
This is a one-parameter read tool with no output schema. The description covers what is fetched, what is returned, and why it should be called before edit_diagram. Nothing essential for an agent to invoke it correctly is missing.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, and the schema already documents diagramId as 'The diagram to fetch.' The description adds context about what a diagram consists of, but does not add meaningful semantic detail about the parameter beyond the schema, matching the baseline for high schema coverage.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description uses a specific verb and resource: 'Fetch a diagram's raw IR (nodes, groups, edges with their real ids) and its current version.' It clearly states what the tool returns and why it matters, distinguishing it from the create/edit siblings.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description gives explicit workflow guidance: 'Call this before edit_diagram so your ops reference ids that actually exist and you pass the correct baseVersion.' This clearly states when to use it, though it does not explicitly discuss when not to use it or name alternatives beyond the edit tool.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
v0.1.2create_diagramedit_diagramget_diagramScored 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.
Create and edit architecture diagrams from your AI agent; get an SVG and a live editable canvas.
AI agent draws editable hand-drawn diagrams (flowchart, ER, architecture) via MCP, not static images
Let Claude, Cursor, or ChatGPT author Mermaid diagrams your team can read and share.
AI Agent with Architectural Memory. Impact analysis (free), tests and code from the graph (pro).
