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
With your agent
Install OMGSkills skill "figma/dev-mode-mcp-server-guide:figma-generate-diagram" into this agent's normal skills directory: call the OMGSkills MCP get_install_plan tool for your agent and run the script it returns (it installs only the pinned commit and verifies SKILL.md), and stop if MCP or the pin is unavailable. Do not overwrite or change existing skills without asking me.
Manual command
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-generate-design
Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section...
figma-use
**MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call.
figma-code-workflows
Import or upload local HTML or project files into Figma, choose editable Design frames, runnable Code Layers or...