Figma Generate Diagram

Routes Claude to the right constraints and type-specific guidance before calling the generate_diagram tool, which turns Mermaid syntax into editable FigJam diagrams. Covers six diagram types (flowcharts, sequence, state, ER, Gantt, architecture) and flags the unsupported ones so you don't waste a tool call on mindmaps or pie charts. The universal constraints section is dense and earned: no emojis, no HTML, reserved word collisions, and the fact that Gantt styling gets stripped during preprocessing. The hybrid workflow pattern (generate base diagram, then extend with use_figma for annotations or color coding) is smart when you need more than Mermaid can express. The garbage in, garbage out section is the real reason to load this: it pushes you to grep source code or ask clarifying questions instead of hallucinating edges.

skills.sh installs: 2.2K
GitHub stars: 2.2K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add figma/mcp-server-guide --skill figma-generate-diagram --agent claude-code

Installs into .claude/skills of the current project.

Files

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.