# Figma Generate Diagram

MANDATORY prerequisite, load this skill BEFORE every `generate_diagram` tool call.

- Repository: https://github.com/figma/mcp-server-guide (2138 stars)
- Category: Engineering
- License: see repository
- Last updated: 2026-10-28
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add figma/mcp-server-guide --skill figma-generate-diagram -g -a claude-code -y`
Codex: `npx skills add figma/mcp-server-guide --skill figma-generate-diagram -g -a codex -y`
Cursor: `npx skills add figma/mcp-server-guide --skill figma-generate-diagram -g -a cursor -y`
Gemini CLI: `npx skills add figma/mcp-server-guide --skill figma-generate-diagram -g -a gemini-cli -y`

## Description

MANDATORY prerequisite, load this skill BEFORE every `generate_diagram` tool call. NEVER call `generate_diagram` directly without loading this skill first. Trigger whenever the user asks to create, generate, draw, render, sketch, or build a diagram, flowchart, architecture diagram, sequence diagram, ERD or entity-relationship diagram, state diagram or state machine, gantt chart, or timeline. Also trigger when the user mentions Mermaid syntax or wants a system architecture, decision tree, dependency graph, API call flow, auth handshake, schema, or pipeline visualized in FigJam. Routes to type-specific guidance, sets universal Mermaid constraints, and tells you when to use a different diagram type or skip the tool entirely (mindmaps, pie charts, class diagrams, etc.).

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# generate-diagram

**You MUST load this skill before every `generate_diagram` tool call.** Skipping it causes preventable rendering failures and low-quality output.

`generate_diagram` takes Mermaid.js syntax and produces an editable FigJam diagram. This skill routes you to the right per-type guidance and sets universal constraints.

## Step 1: Is `generate_diagram` the right tool?

### Supported diagram types

`flowchart`, `sequenceDiagram`, `stateDiagram` / `stateDiagram-v2`, `gantt`, `erDiagram`.

### Unsupported, don't call the tool

If the user wants any of these, tell them directly that `generate_diagram` doesn't support it instead of calling the tool and failing:
- **Pie chart, mindmap, venn diagram, class diagram, journey, timeline, quadrant, C4, git graph, requirement diagram**

### When to push the user to edit in Figma

The tool cannot:
- Change fonts on an existing diagram
- Move individual shapes
- Edit a diagram node-by-node after generation

If the user asks for any of those on an existing diagram, recommend they open the diagram in Figma and edit there. For content-level changes, it's usually faster to regenerate.

## Step 2: Pick the diagram type

Lightweight routing, use the first match.

The rest: https://github.com/figma/mcp-server-guide/blob/HEAD/skills-figquery/figma-generate-diagram/SKILL.md