figma-generate-diagram
This skill prepares an agent to generate Mermaid diagrams in FigJam by routing requests to type-specific guidance, applying universal rendering constraints…
Identity proven by GitHub's verified organisation badge (figma)
- Agents
- Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode, claude.ai and API
- License
- No license stated
- Pin
- f049329pinned Oct 9, 2026
- Context cost
- about 2,300 tokenswhen the skill loads
- GitHub stars
- 2,057on figma/mcp-server-guide
- Scripts
- None found
What it does
“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.).”
Generated summary from the skill's own text
This skill prepares an agent to generate Mermaid diagrams in FigJam by routing requests to type-specific guidance, applying universal rendering constraints, and determining when the generate_diagram tool is appropriate. It covers flowcharts, architecture diagrams, sequence diagrams, ER diagrams, state diagrams, and Gantt charts while rejecting unsupported diagram types upfront.
When to use it
- User asks to create a flowchart, architecture diagram, sequence diagram, ERD, state machine, or Gantt chart
- Diagram request involves systems, processes, data models, interactions, or timelines requiring visual structure
- Need to convert technical requirements or workflows into editable FigJam diagrams
- User mentions Mermaid syntax or wants existing processes visualized
When not to
- User requests pie charts, mindmaps, class diagrams, or other unsupported diagram types
- User needs to edit fonts, move individual shapes, or make node-level edits after generation
- Diagram requires extensive styling, colors, or annotations that Mermaid cannot express alone
Install
No license stated: install from the publisher's repository, and ask the author before you reuse or share it.
These commands install from the publisher's repository and need no account.
skills CLI
npx skills add figma/mcp-server-guide --skill figma-generate-diagramInstalls from the repository's default branch, which may have changed since the commit we checked.
GitHub CLI 2.90 or later
gh skill install figma/mcp-server-guide figma-generate-diagram@f0493295acf5f7cbdebcbcc483c06de814420cb1Installs the commit we checked (f049329).
Copy by hand
Download the folder at f049329 and put it in .claude/skills/figma-generate-diagram for Claude Code and in .agents/skills/figma-generate-diagram for Codex, Cursor, Gemini CLI, GitHub Copilot and OpenCode.
Claude Code plugin
/plugin install figma@claude-plugins-officialThe publisher's plugin in Claude's official marketplace. It may hold more than this skill, and we have not pinned it.
Copy for your agent
A prompt for any coding agent. It installs this skill from GitHub at the pinned commit, copies the files as they are, and runs nothing unless you ask.
Prompt
Install the agent skill "figma-generate-diagram" by Figma. Source, pinned to commit f0493295acf5f7cbdebcbcc483c06de814420cb1: https://github.com/figma/mcp-server-guide/tree/f0493295acf5f7cbdebcbcc483c06de814420cb1/skills-figquery/figma-generate-diagram 1. Download that folder at exactly this commit. Do not use the default branch. 2. Copy every file unchanged, keeping the folder structure, into .claude/skills/figma-generate-diagram/ for Claude Code and .agents/skills/figma-generate-diagram/ for Codex, Cursor, Gemini CLI, GitHub Copilot and OpenCode. Create the folders if they do not exist. 3. Do not edit the files, and do not run any script in the folder unless I ask you to. 4. When you are done, list the files you copied and where you put them. Its license is restricted or not stated. Show me the license terms from the repository before you copy anything. Listing and checks: https://www.agentnative.dev/skills/figma/figma-generate-diagram
SKILL.md at the pin
The license of this skill does not let us show its files here.
Files
- SKILL.md10 KB · 7297638dbf21
- references/
- architecture.md14 KB · a7c26be020e5
- erd.md13 KB · a71270515061
- flowchart.md20 KB · 88f2e7f98ffc
- gantt.md13 KB · 2dc379c99eaa
- sequence.md15 KB · 23d7d67a4ea4
- state.md15 KB · 8b66ae6d74eb
- workflow.md11 KB · bb252be51397
8 files, 111 KB in total. Each file has a sha256 in the pin's manifest; the first 12 characters are shown.
Skill folder on GitHub at f049329Also in
The same SKILL.md content appears in these places too. We list it once and credit the oldest public source.
More from Figma
figma-code-connect
Creates and maintains Figma Code Connect template files (.figma.ts) that map Figma components to code snippets for design-to-code translation.
Claude Code · about 6.5K tokens · pinned 7 days ago
figma-create-new-file
This skill enables agents to create new Figma files, including Design, FigJam, and Slides projects.
Claude Code · about 400 tokens · pinned 7 days ago
figma-design-to-code
This skill provides the agent with detailed procedures for converting Figma designs into code.
Claude Code · about 860 tokens · pinned 7 days ago
figma-generate-design
Builds or updates multi-section Figma layouts like pages, modals, and sidebars by reusing published design system components, variables, and styles instead of…
Claude Code · about 6.9K tokens · pinned 7 days ago
figma-generate-design
This skill builds or updates full-page screens, modals, dialogs, drawers, sidebars, and other multi-section views in Figma by discovering and reusing…
Claude Code · about 8.9K tokens · pinned 7 days ago
figma-generate-library
Orchestrates multi-phase design system builds in Figma from code.
Contains scripts
Claude Code · about 5.8K tokens · pinned 7 days ago
Related in Media and creative
figma-use-slides
This skill provides Slides-specific guidance for using Figma's Plugin API to create and edit presentation decks.
by FigmaOfficial publisher
Claude Code · about 5.4K tokens · pinned 7 days ago
all-images-ai-automation
This skill automates All Images AI operations by discovering and executing tools through Composio's All Images AI toolkit via Rube MCP.
by ComposioOfficial publisher
Agents not labelled yet · about 710 tokens · pinned 7 days ago
remotion-best-practices
This skill routes the agent through Remotion's specialized knowledge bases for video creation, editing, and deployment.
by RemotionOfficial publisher
Contains scripts
Claude Code, Codex, Cursor +3 · about 920 tokens · pinned 7 days ago
remotion-best-practices
This skill routes the agent to specialized Remotion sub-skills based on the user's task, covering video creation, project setup, React markup, maps…
by RemotionOfficial publisher
Claude Code, Codex, Cursor +3 · about 1K tokens · pinned 7 days ago
remotion-captions
This skill enables video caption workflows including transcribing audio to generate captions, displaying captions in videos, and importing captions from SRT…
by RemotionOfficial publisher
Claude Code, Codex, Cursor +3 · about 220 tokens · pinned 7 days ago
remotion-captions
This skill enables the agent to work with captions in Remotion videos by transcribing audio to generate captions, displaying them in videos, and importing…
by RemotionOfficial publisher
Claude Code, Codex, Cursor +3 · about 270 tokens · pinned 7 days ago