# figma-generate-diagram

> Claude/Codex skill by [@figma](https://omgskills.com/library/figma/index.md) · 2.1k stars · Updated 2026-10-19

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

```sh
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-diagram
```

## From 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.

## Links

- HTML page: https://omgskills.com/skills/figma/dev-mode-mcp-server-guide/figma-generate-diagram/
- GitHub: https://github.com/figma/mcp-server-guide
- Author: [@figma](https://omgskills.com/library/figma/index.md)

## More from this repo

- [figma-code-workflows](https://omgskills.com/skills/figma/mcp-server-guide/skills/figma-code-workflows/index.md) — Import or upload local HTML or project files into Figma, choose editable Design frames, runnable Code Layers or...
   - [@figma](https://omgskills.com/library/figma/index.md) · 2.1k stars
- [figma-generative-plugins](https://omgskills.com/skills/figma/mcp-server-guide/skills/figma-generative-plugins/index.md) — \*\*MANDATORY prerequisite\*\* — load this skill before calling \`create\_generative\_plugin\` or \`update\_generative\_plugin\`.
   - [@figma](https://omgskills.com/library/figma/index.md) · 2.1k stars
- [figma-shaders](https://omgskills.com/skills/figma/mcp-server-guide/skills/figma-shaders/index.md) — \*\*MANDATORY prerequisite\*\* — load this skill before calling \`create\_shader\` or \`update\_shader\`.
   - [@figma](https://omgskills.com/library/figma/index.md) · 2.1k stars