Skip to main content
Glama

flowgraf-mcp

Create and edit clean, editable architecture diagrams from your AI agent — in plain English.

npm version License: MIT flowgraf-mcp MCP server

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-mcp

Why

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

create_diagram

Turn a graph (nodes + edges + groups) into a diagram → returns an SVG, a Mermaid string, and a /d/<id> canvas link

edit_diagram

Apply operations to an existing diagram (e.g. insert a cache between two nodes) — it re-wires and re-lays-out automatically

get_diagram

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

Claude MCP install

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 list

Expected 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-mcp

The 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/mcp over 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_diagram returns an SVG and a link like https://flowgraf.in/d/abc123. Open it to edit on the canvas.

"Add a Redis cache between the API and the database."

→ edit_diagram inserts 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

FLOWGRAF_MCP_URL

Full endpoint URL, e.g. http://localhost:3000/api/mcp

FLOWGRAF_MCP_BASE_URL

Base URL; /api/mcp is appended


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.

License

MIT

Available Tools

3 tools
create_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:

  1. get_diagram(diagramId) → shows nodes n_api, n_db and version 1.

  2. 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

    A4.4/5.0

    Scored across 3 tools

    Disambiguation5/5

    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.

    Naming Consistency5/5

    All tool names follow a consistent verb_noun pattern (create_diagram, edit_diagram, get_diagram), making the API intuitive and predictable.

    Tool Count5/5

    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.

    Completeness4/5

    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

    Related MCP Servers

    • F
      license
      Not graded
      quality
      A
      maintenance
      Enables 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.
      -
    • F
      license
      Not graded
      quality
      A
      maintenance
      Enables 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.
      -
    • F
      license
      Not graded
      quality
      A
      maintenance
      Enables 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.
      -