figma-flow
Integrates with Figma through a local plugin to draw automatically laid-out flowcharts directly onto the Figma canvas, including labeled arrows, standard flowchart shapes sized to fit their labels, one frame per chart, and safe cleanup of previously drawn charts.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@figma-flowDraw a flowchart of our password reset process"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
figma-flow-mcp
Describe a process to Claude and get a clean, automatically laid-out flowchart drawn straight onto your Figma canvas.

How it works
flowchart LR
claude["Claude<br/>(Claude Code or Claude Desktop)"] -- "MCP over stdio" --> server["figma-flow MCP server<br/>validation + dagre layout"]
server -- "WebSocket<br/>ws://localhost:3055" --> plugin["figma-flow Figma plugin"]
plugin --> canvas["Figma canvas"]Claude calls
create_flowchartwith the chart's structure only: nodes, edges and labels, no coordinates.The MCP server validates it. It then asks the plugin to measure every label in Figma, so each shape fits its text.
The server lays the chart out top to bottom with dagre.
The plugin draws the shapes, arrows and labels in a new frame.
The plugin's window holds the WebSocket connection, so it stays open while you work.
Related MCP server: Claude Talk to Figma MCP
Features
Plain-language charts. Describe a process and Claude picks the steps, decisions and branches.
Automatic layout. Claude never sends coordinates; dagre arranges the chart top to bottom, including loops.
Standard flowchart shapes, each sized to fit its label:
pills for
startandendrectangles for
processstepsdiamonds for
decisionsparallelograms for
input_output
Labeled arrows, such as "Yes" and "No" on decision branches.
One frame per chart, named after its title and placed to the right of earlier charts. The viewport zooms to it.
Clear errors. Invalid input names the bad node or edge, and the tools tell you when the plugin isn't connected.
Safe cleanup.
clear_canvasremoves only what figma-flow drew.Local only. The WebSocket bridge listens on
127.0.0.1and nothing leaves your machine.
Arrows are vector paths, so they don't follow a shape you move by hand. Figma's connector API only exists in FigJam.
Tools
Tool | What it does | Example prompt |
| Draws a flowchart from a title, nodes and edges | "Draw a flowchart of a password reset flow" |
| Removes every chart figma-flow drew on the current page | "Clear the flowcharts from this page" |
| Draws a sample login flow to check the setup | "Draw the demo flowchart" |
| Reports whether the Figma plugin is connected | "Is the Figma plugin connected?" |
| Checks that the MCP server is running | "Ping the figma-flow server" |
Requirements
Node.js 18 or newer
The Figma desktop app. Development plugins can't be imported in the browser.
Setup
Clone the repository
git clone https://github.com/Sanil-Gokarn/figma-flow-mcp.git cd figma-flow-mcpInstall dependencies
npm installBuild the server and the plugin
npm run buildImport the plugin into Figma. In the Figma desktop app, open a design file. Choose Plugins → Development → Import plugin from manifest… and pick
plugin/manifest.json.Run the plugin. Choose Plugins → Development → figma-flow. A small window opens; keep it open. It shows Connected once Claude's figma-flow server is running, and retries every 2 seconds until then.
Connect Claude.
Claude Code: start
claudein the repository folder. The repo's.mcp.jsonregisters thefigma-flowserver; approve it when asked./mcpshould list it as connected.Claude Desktop: add the server to
claude_desktop_config.jsonusing the absolute path to your clone, then restart Claude Desktop:{ "mcpServers": { "figma-flow": { "command": "node", "args": ["/absolute/path/to/figma-flow-mcp/dist/index.js"] } } }
Ask for a chart, for example: "Draw a flowchart for making a cup of tea."
Changing the port
The bridge listens on port 3055. To use another port, set PORT in the server's MCP config:
{
"mcpServers": {
"figma-flow": {
"command": "npx",
"args": ["tsx", "server/index.ts"],
"env": { "PORT": "3056" }
}
}
}Then change the port in two places in the plugin, and reopen the plugin in Figma:
SERVER_URLinplugin/ui.htmldevAllowedDomainsinplugin/manifest.json
Troubleshooting
The plugin shows Disconnected, or a tool says "The Figma plugin isn't connected"
Keep the plugin window open. Closing it drops the connection.
Check that Claude has the server loaded by asking "Is the Figma plugin connected?".
get_statusalso shows the port the server listens on.If that port isn't 3055, your environment probably sets
PORTfor something else. Add"env": { "PORT": "3055" }to the figma-flow entry in your MCP config.Look for WebSocket errors in Figma's console: Plugins → Development → Show/Hide console.
"Port 3055 is already in use"
Another Claude session is already running figma-flow. This could be a second Claude Code window in this folder, or Claude Desktop. Only one session can talk to Figma at a time.
Close the other session, then reconnect figma-flow from /mcp or start a new session. To see what holds the port:
# macOS / Linux
lsof -i :3055# Windows
netstat -ano | findstr :3055figma-flow is missing from /mcp
Start Claude Code from the repository folder.
.mcp.jsonis project-scoped, so Claude Code only loads it there.Approve the server when Claude Code asks. If you declined it earlier, run
claude mcp reset-project-choicesand restart Claude Code.Make sure
npm installhas run. Then runnpm run devto see any startup errors directly; it waits for MCP input, and Ctrl+C stops it.The first
npxstart can be slow. If the server timed out, reconnect it from/mcp.
Development
npm run dev # run the server from source with tsx
npm run build # compile server/ to dist/ and plugin/code.ts to plugin/code.js
npm run check # type-check the server and the pluginserver/: the MCP server.index.tsholds the tools,bridge.tsthe WebSocket bridge,layout.tsthe dagre layout andflowchart.tsthe input schema and validation.plugin/: the Figma plugin.code.tsdraws on the canvas;ui.htmlholds the WebSocket connection.
Roadmap
Swimlanes
Mermaid import
Editing existing charts
License
MIT © Sanil Gokarn
Available Tools
5 toolsclear_canvasClear canvasA
Remove every flowchart and shape the figma-flow plugin drew on the current Figma page. Everything else on the page is left alone.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations present, the description carries the full burden. It usefully discloses the blast radius (plugin-drawn content only) but says nothing about reversibility, undo behavior, whether confirmation is needed, or what happens if nothing was drawn — meaningful gaps for a destructive, unrestricted tool.
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?
Two short sentences with the action and scope front-loaded and the preservation guarantee immediately after. No filler or redundant restatement of the title.
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 no-argument tool with no output schema and no annotations, the description covers the essential what and how-much. The remaining gap is post-invocation behavior — return value and whether the deletion can be undone.
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 tool takes zero parameters, so the baseline is 4; there is no argument semantics to explain. The description correctly implies the implicit scope is 'current page' rather than requiring an argument.
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?
A specific verb (remove) plus an explicit resource set (every flowchart and shape the figma-flow plugin drew), with the scope narrowed to the current Figma page. This is easily separable from the creation-oriented siblings draw_demo_flowchart and create_flowchart.
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 second sentence defines the boundary condition — everything else on the page is left alone — which effectively tells the agent when this tool is and isn't the right lever. It does not explicitly name an alternative or state when not to call it, so it stops short of full routing guidance.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
create_flowchartCreate flowchartA
Draw a flowchart in the open Figma file.
Send only the structure: nodes (id, label, type) and edges (from, to, optional label). Never send coordinates or sizes. The server lays the chart out top to bottom, and the plugin sizes each shape to fit its label.
How to model a flow:
Begin with one "start" node. End every path at an "end" node.
Use "process" for actions and "input_output" for data going in or out, such as user input, a message shown to the user, or reading a file.
Every yes/no question or branch point is a "decision" node. Phrase its label as a question ("Password valid?") and give each outgoing edge a label ("Yes", "No").
Loops are fine: point an edge back to an earlier node.
Each call adds a new frame, named after the title, to the right of earlier charts. The figma-flow plugin must be running in Figma (check with get_status).
| Name | Required | Description | Default |
|---|---|---|---|
| edges | Yes | Arrows between nodes, by node id. Pointing back to an earlier node makes a loop. | |
| nodes | Yes | Every step in the flow. No coordinates or sizes. | |
| title | Yes | Chart title; also the name of the Figma frame. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the full burden and does so well: it discloses that server-side auto-layout is top-to-bottom, that shapes auto-size to labels, that each call is additive (new frame to the right of earlier charts), and that the figma-flow plugin must be running. These are non-obvious operational traits an agent could not infer from the schema.
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?
Front-loaded with the essential constraint (structure only, no coordinates) before the detailed bullet guidance. Every sentence either constrains input or explains behavior; nothing is filler.
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 3-parameter tool with no output schema, the definition covers input shape, layout behavior, frame placement, and the plugin prerequisite. Nothing an agent needs 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 coverage is already 100%, so the baseline is 3; the description adds real semantic value with modeling rules for node types and branching that go beyond field descriptions. Some content (e.g. labeling decision edges "Yes"/"No") duplicates the schema's own edge-label text, preventing a 5.
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?
States a concrete verb and resource ("Draw a flowchart in the open Figma file") and immediately defines the input contract (structure only, no coordinates). An agent can distinguish this from draw_demo_flowchart or clear_canvas without inspecting the schema, and the title/frame behavior makes the output tangible.
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?
Gives rich when-to-use guidance in the form of modeling rules (start/end nodes, process vs input_output, decision phrasing) and a prerequisite check via get_status. It does not explicitly contrast with sibling draw_demo_flowchart or state when *not* to use it, which keeps it below a 5.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
draw_demo_flowchartDraw demo flowchartA
Draw a sample login flowchart in the open Figma file. Useful to check the setup works end to end.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description must carry the full behavioral burden. It usefully discloses the prerequisite that a Figma file must already be open and that the call has side effects on that document ('draw ... in the open Figma file'). It does not say what is added, whether existing canvas content is preserved or clobbered, or what happens if no file is open.
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?
Two short sentences, no filler, with the action and its target front-loaded before the justification. 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?
For a zero-parameter, no-output-schema demo helper, the description covers what it draws, where it draws it, and why you would call it. The remaining gap is failure behavior when no file is open and whether the drawing pollutes an existing canvas.
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 tool takes zero parameters, so there is nothing for the description to disambiguate. The baseline of 4 applies; the description correctly implies the only input is the ambient open-file state.
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?
States a concrete verb and resource: draw a sample login flowchart into the open Figma file. The word 'sample' plus 'demo' in the name signals it is a smoke-test artifact rather than a real diagram, which is the key distinction from the sibling create_flowchart. It does not name that sibling explicitly, so the differentiation is implied rather than stated.
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?
'Useful to check the setup works end to end' gives a clear when-to-use condition tied to verification. There is no when-not guidance and no explicit routing to create_flowchart for real diagrams or to clear_canvas to remove the demo artifact, both of which an agent would want to know given the sibling set.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_statusGet statusA
Report whether the figma-flow Figma plugin is connected to this server.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the full disclosure burden; 'Report' implies a read-only, side-effect-free call, which covers the safety profile reasonably. However, it says nothing about what happens when the plugin is disconnected (error vs. negative result), whether the check is live or cached, or how long it may take.
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?
One sentence, front-loaded with the verb and the check being performed, with no filler or repetition of the title.
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?
There is no output schema and no annotations, so the description should say what a status report looks like (boolean, connection details, error state). It only states the question being answered, leaving the agent to guess the shape of the result and the disconnected-case behavior.
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 tool takes zero parameters, so there is nothing for the description to disambiguate. Baseline 4 applies.
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?
States a specific verb ('Report') and resource ('whether the figma-flow Figma plugin is connected to this server'), so an agent knows exactly what question the tool answers. It does not differentiate itself from the sibling 'ping', which is presumably also a connectivity/health check, leaving ambiguity about which to call.
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?
Usage is only implied: an agent would infer you call this to verify the plugin connection before invoking draw/create tools. There is no explicit when-to-use, no when-not-to-use, and no routing guidance relative to 'ping' or the other siblings.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
pingPingA
Check that the figma-flow MCP server is running. Returns 'pong'.
| Name | Required | Description | Default |
|---|---|---|---|
| message | No | Optional text to echo back |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description must carry the burden. It makes clear this is a non-mutating liveness probe and discloses the return payload ('pong'), which is exactly what an agent needs to know for a health check. Minor gap: it does not say how the optional message parameter changes the response.
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?
Two short sentences, purpose first and return value second, with zero filler. Nothing could be removed without losing information.
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 zero-required-parameter health check with no output schema and full schema coverage, the description covers everything needed to invoke it correctly. The only missing piece is a pointer to the sibling get_status for semantically adjacent checks.
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 coverage is 100% and the single optional 'message' parameter is fully documented as text to echo back in the schema. The description adds nothing about it and arguably implies a fixed 'pong' reply, so it neither compensates nor contradicts; baseline 3 applies.
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?
States a specific verb and resource: check that the figma-flow MCP server is running, and what it returns. It is clear in isolation, but does not distinguish itself from the sibling get_status, which plausibly answers a similar liveness question.
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 liveness-check intent implies when to use it (before other calls, after connection issues), but there is no explicit guidance on when to prefer this over get_status or what to do with either result. Usage is inferred rather than stated.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
5 tool updates
v1.0.0- First observed
clear_canvas - First observed
create_flowchart - First observed
draw_demo_flowchart - First observed
get_status - First observed
ping
TDQS
Scored across 5 tools
create_flowchart, draw_demo_flowchart, and clear_canvas are clearly distinct in purpose. The main overlap is between ping and get_status, which both serve as health/connectivity checks, though get_status specifically reports plugin connection state.
All names use snake_case consistently, which is good. However, the convention is not fully uniform: 'ping' is a bare verb, 'get_status' uses verb_noun, and the drawing tools mix 'draw_' and 'create_' as prefixes for similar operations.
Five tools is well-scoped for a lightweight Figma flowchart plugin: health checks, connection status, chart creation, demo creation, and canvas clearing. Each tool has a clear role and none feels redundant.
The surface covers creating and clearing flowcharts, plus setup checks, but lacks operations to list, update, or delete individual existing flowcharts. The only removal tool clears the entire canvas, which is a notable gap for repeated editing workflows.
Maintenance
Related MCP Connectors
Turn calls and notes into process flow diagrams in Claude, ChatGPT, VS Code, Cursor, and Teams.
- WhoogyOAuthcom.whoogy
Compare Figma designs against live websites and get visual + content QA reports, from inside Claude.
Flett is a shared online whiteboard. Connect it to Claude, ChatGPT or Cursor and the AI draws straight onto your boards: flowcharts, mind maps and architecture diagrams made of shapes and arrows, documents, slides and designed pages, charts, maps and files. Everyone on the board sees it appear live and can move, edit and comment on everything, then present it or export it to PNG, PDF, PowerPoint or HTML. Sign-in is OAuth; reading boards is free.
Turn a flow written as text into a step-through diagram you can share, present or embed.
Related MCP Servers
- AlicenseCqualityDmaintenanceEnables Claude Desktop and other AI tools to interact directly with Figma, allowing for powerful AI-assisted design capabilities through natural language commands.92401 npm673MIT
- AlicenseNot gradedqualityDmaintenanceEnables AI assistants like Claude Desktop to interact directly with Figma, allowing natural language commands to create, modify, and analyze designs including shapes, text, components, and layouts in real-time.MIT
- AlicenseNot gradedqualityAmaintenanceEnables Claude to read and manipulate Figma documents in real-time through 62 operations including creating shapes, modifying styles, managing components, and exporting assets via a WebSocket bridge to a Figma plugin.221 npm81MIT
- AlicenseBqualityBmaintenanceEnables Claude to connect to Figma without a paid plan, offering auto-connect and 100+ tools for document manipulation, design system sync, and code-to-Figma conversion.100257 npm1MIT