Generating FigJam Diagrams from Mermaid Syntax: Figma MCP Server Guide

The generate_diagram tool converts Mermaid markup into native FigJam diagrams automatically, allowing AI agents to create flowcharts, Gantt charts, and sequence diagrams without manual authoring.

The Figma MCP server bridges text-based diagramming and visual collaboration by enabling LLM agents to generate FigJam boards directly from Mermaid syntax. Defined in the figma/mcp-server-guide repository, this capability exposes the generate_diagram tool to transform structured markup into editable Figma diagrams programmatically.

How generate_diagram Works in the Figma MCP Server

The tool operates through a four-stage pipeline that handles the transformation from text to visual nodes. According to the source code in figma/mcp-server-guide, the process flows as follows:

1. Agent Request – The LLM-driven agent includes generate_diagram in its tool call payload, supplying a valid Mermaid string as the argument.
2. MCP Server Processing – The server parses the Mermaid code and uses an internal rendering engine (such as the Mermaid CLI or a Node.js library) to generate an SVG representation of the diagram.
3. FigJam Integration – The rendered output is wrapped into a FigJam node via the FigJam API and inserted into the target Figma file.
4. Result Delivery – The server returns the FigJam node ID and a direct link to the updated board, which the agent surfaces to the user.

Because the repository defines only the skill metadata—documented in README.md (lines 301–307) and listed in figma-power/POWER.md (line 47)—the actual rendering logic resides on Figma's MCP backend. The skill definition exposes the capability to downstream agents while the backend handles the Mermaid-to-SVG conversion and FigJam node creation.

Supported Mermaid Diagram Types for FigJam

The generate_diagram tool accepts standard Mermaid syntax for multiple diagram categories. The following table lists the supported types with executable snippets:

Diagram Type	Mermaid Syntax Example
Flowchart	`graph LR; A[Start] --> B{Decision}; B -->
Gantt Chart	gantt\n title Project Timeline\n dateFormat YYYY-MM-DD\n section Development\n Feature A :a1, 2024-04-01, 10d\n Feature B :after a1, 7d
State Diagram	stateDiagram-v2\n [*] --> Idle\n Idle --> Processing : start\n Processing --> Idle : finish
Sequence Diagram	sequenceDiagram\n participant UI\n participant API\n UI->>API: fetch data\n API-->>UI: return payload

All syntax follows the Mermaid specification, allowing agents to generate complex visualizations including decision trees, project timelines, and system architecture diagrams.

Practical Implementation Examples

You can invoke the tool through natural language prompts or explicit JSON tool calls depending on your agent configuration.

Natural Language Prompts

Agents interpret descriptive requests and construct the appropriate Mermaid markup internally before calling the tool:

Create a flowchart for the user authentication flow using the Figma MCP generate_diagram tool.

The agent translates this into Mermaid syntax and executes the generate_diagram tool with the generated markup.

Direct Tool Invocation

For explicit control, pass the Mermaid string directly in the tool arguments:

{
  "tool": "generate_diagram",
  "arguments": {
    "mermaid": "graph TD;\n  A[Login Page] --> B{Credentials Valid?};\n  B -- Yes --> C[Dashboard];\n  B -- No --> D[Error Message];"
  }
}

This produces a FigJam board containing a flowchart that visualizes the login process with proper node connections and labels.

Complete Sequence Diagram Example

The following example demonstrates the full interaction pattern for a payment processing system:

User: "Generate a sequence diagram for the payment processing system."

The agent constructs this Mermaid definition:

sequenceDiagram
    participant Client
    participant Server
    participant PaymentGateway
    Client->>Server: Initiate payment
    Server->>PaymentGateway: Request transaction
    PaymentGateway-->>Server: Transaction result
    Server-->>Client: Confirmation

Then calls the tool:

{
  "tool": "generate_diagram",
  "arguments": { "mermaid": "sequenceDiagram\n    participant Client\n    participant Server\n    participant PaymentGateway\n    Client->>Server: Initiate payment\n    Server->>PaymentGateway: Request transaction\n    PaymentGateway-->>Server: Transaction result\n    Server-->>Client: Confirmation" }
}

The Figma MCP server returns the FigJam node ID and board URL, completing the automated diagram generation workflow.

Repository Structure and Source Files

The capability is defined across three key files in the figma/mcp-server-guide repository:

• README.md (lines 301–307) – Contains the primary documentation for all MCP tools, including the generate_diagram description, parameters, and usage examples.
• figma-power/POWER.md (line 47) – Provides a tabular list of available MCP tools, showing generate_diagram as part of the complete toolset.
• skills/figma-use/references/api-reference.md – Defines the API contract details that the MCP server follows when invoking FigJam operations, relevant for developers extending the backend integration.

These files collectively define the surface area for the generate_diagram capability and guide developers on implementing automated diagram generation.

Summary

• The generate_diagram tool transforms Mermaid syntax into editable FigJam diagrams through the Figma MCP server.
• The process involves four stages: agent request, server-side Mermaid parsing and SVG rendering, FigJam node creation via API, and result delivery with node IDs.
• Supported diagram types include flowcharts, Gantt charts, state diagrams, and sequence diagrams.
• Documentation resides in README.md and figma-power/POWER.md, while the rendering engine operates on Figma's backend infrastructure.

Frequently Asked Questions

What input format does the generate_diagram tool require?

The tool requires standard Mermaid syntax as a string input. You can pass flowcharts, sequence diagrams, Gantt charts, or state diagrams using standard Mermaid notation. No file attachments are necessary; the MCP server processes the raw text markup directly.

Where is the diagram rendering logic implemented?

The actual rendering logic resides on Figma's MCP backend, not in the open-source repository. The figma/mcp-server-guide repository only contains the skill metadata and tool definitions. The backend handles Mermaid parsing, SVG generation, and FigJam node insertion through internal rendering engines.

Can I generate diagrams from natural language instead of raw Mermaid?

Yes. LLM agents can interpret natural language descriptions, construct the appropriate Mermaid syntax internally, and then call generate_diagram with the generated markup. This allows you to describe complex systems conversationally while the agent handles the technical diagramming syntax.

Which files document the generate_diagram tool parameters?

The tool is documented in README.md (lines 301–307) with full usage examples, and listed in figma-power/POWER.md (line 47) as part of the available MCP toolset. Developer implementation details reference skills/figma-use/references/api-reference.md for API contract specifications.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}