flowgraf

flowgraf

AI-native architecture diagramming for MCP clients (Claude Code, Cursor, Windsurf). The calling agent authors the graph (nodes, groups, edges); Flowgraf validates it, lays it out deterministically with ELK, renders an SVG + Mermaid, and returns a link to a live, editable canvas you can refine by chat, drag, or one-click AI design review. Agent-authored ops — no API key and no LLM cost to the calle

Category
Visit Server

README

flowgraf-mcp

Create and edit clean, editable architecture diagrams from your AI agent.

Flowgraf turns a description of a system into a clean, auto-laid-out architecture diagram — and 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.

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

Claude Code

Recommended — the hosted remote endpoint (no local process):

claude mcp add --transport http flowgraf https://flowgraf.in/api/mcp

Or via 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"]
    }
  }
}

Anything else

npx -y flowgraf-mcp

The proxy talks the Model Context Protocol over stdio and forwards to the hosted API.

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

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.

Links

License

MIT

Recommended Servers

playwright-mcp

playwright-mcp

A Model Context Protocol server that enables LLMs to interact with web pages through structured accessibility snapshots without requiring vision models or screenshots.

Official
Featured
TypeScript
Magic Component Platform (MCP)

Magic Component Platform (MCP)

An AI-powered tool that generates modern UI components from natural language descriptions, integrating with popular IDEs to streamline UI development workflow.

Official
Featured
Local
TypeScript
Audiense Insights MCP Server

Audiense Insights MCP Server

Enables interaction with Audiense Insights accounts via the Model Context Protocol, facilitating the extraction and analysis of marketing insights and audience data including demographics, behavior, and influencer engagement.

Official
Featured
Local
TypeScript
VeyraX MCP

VeyraX MCP

Single MCP tool to connect all your favorite tools: Gmail, Calendar and 40 more.

Official
Featured
Local
graphlit-mcp-server

graphlit-mcp-server

The Model Context Protocol (MCP) Server enables integration between MCP clients and the Graphlit service. Ingest anything from Slack to Gmail to podcast feeds, in addition to web crawling, into a Graphlit project - and then retrieve relevant contents from the MCP client.

Official
Featured
TypeScript
Kagi MCP Server

Kagi MCP Server

An MCP server that integrates Kagi search capabilities with Claude AI, enabling Claude to perform real-time web searches when answering questions that require up-to-date information.

Official
Featured
Python
E2B

E2B

Using MCP to run code via e2b.

Official
Featured
Neon Database

Neon Database

MCP server for interacting with Neon Management API and databases

Official
Featured
Exa Search

Exa Search

A Model Context Protocol (MCP) server lets AI assistants like Claude use the Exa AI Search API for web searches. This setup allows AI models to get real-time web information in a safe and controlled way.

Official
Featured
Qdrant Server

Qdrant Server

This repository is an example of how to create a MCP server for Qdrant, a vector search engine.

Official
Featured