# Generating FigJam Diagrams from Mermaid Syntax: Figma MCP Server Guide

> Easily generate FigJam diagrams from Mermaid syntax using the generate_diagram tool. Automate flowchart creation for AI agents, saving time and effort.

- Repository: [Figma/mcp-server-guide](https://github.com/figma/mcp-server-guide)
- Tags: how-to-guide
- Published: 2026-03-30

---

**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`](https://github.com/figma/mcp-server-guide/blob/main/README.md) (lines 301–307) and listed in [`figma-power/POWER.md`](https://github.com/figma/mcp-server-guide/blob/main/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 -->|Yes| C[Proceed]; B -->|No| D[Stop];` |
| **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:

```text
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:

```json
{
  "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:

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

```

The agent constructs this Mermaid definition:

```mermaid
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:

```json
{
  "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`](https://github.com/figma/mcp-server-guide/blob/main/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`](https://github.com/figma/mcp-server-guide/blob/main/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`](https://github.com/figma/mcp-server-guide/blob/main/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`](https://github.com/figma/mcp-server-guide/blob/main/README.md) and [`figma-power/POWER.md`](https://github.com/figma/mcp-server-guide/blob/main/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`](https://github.com/figma/mcp-server-guide/blob/main/README.md) (lines 301–307) with full usage examples, and listed in [`figma-power/POWER.md`](https://github.com/figma/mcp-server-guide/blob/main/figma-power/POWER.md) (line 47) as part of the available MCP toolset. Developer implementation details reference [`skills/figma-use/references/api-reference.md`](https://github.com/figma/mcp-server-guide/blob/main/skills/figma-use/references/api-reference.md) for API contract specifications.