figma-generate-diagram
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.).
Install
git clone https://github.com/figma/mcp-server-guide /tmp/mcp-server-guide && ln -s /tmp/mcp-server-guide/skills/figma-generate-diagram ~/.claude/skills/figma-generate-diagramFrom README
generate-diagram You MUST load this skill before every generatediagram tool call. Skipping it causes preventable rendering failures and low-quality output. generatediagram 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 generatediagram the right tool? Supported diagram types flowchart, sequenceDiagram, stateDiagram / stateDiagram-v2, gantt, erDiagram.
More from this repo
figma-code-workflows
Import or upload local HTML or project files into Figma, choose editable Design frames, runnable Code Layers or...
figma-generative-plugins
**MANDATORY prerequisite** — load this skill before calling `create_generative_plugin` or `update_generative_plugin`.
figma-shaders
**MANDATORY prerequisite** — load this skill before calling `create_shader` or `update_shader`.