ClaudeSuperPower
SubmitLog in

figma-generate-diagram

Skill

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 diagra

0Design

Install

git clone https://github.com/figma/mcp-server-guide.git ~/.claude/skills/figma-generate-diagram

What is 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.).

What this can do

Capabilities declared in this component's own frontmatter — not inferred.

Inherit all session tools

Declares no tool restrictions — inherits every session tool

~195 tokens of context used while enabled, before you invoke anything

Documentation

README · ~6 min read

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

Reviews

Log in to leave a review.

No reviews yet — be the first.

Explore related

Other things in this space — across every part of the ecosystem, not just skills.

Subagents

All subagents →

architecture-critic

Reviews proposed target architectures and transformed code against modern best practice. Adversarial — looks for over-engineering, missed requirements, and simpler alternatives.

32.8K stars

code-architect

Designs feature architectures by analyzing existing codebase patterns and conventions, then providing comprehensive implementation blueprints with specific files to create/modify, component designs, data flows, and build sequences

32.8K stars

plugin-validator

Use this agent when the user asks to "validate my plugin", "check plugin structure", "verify plugin is correct", "validate plugin.json", "check plugin files", or mentions plugin validation. Also trigger proactively after user creates or modifies plugin components. Examples: <example> Context: User f

32.8K stars