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.).
94
92%
Does it follow best practices?
Impact
97%
1.51xAverage score across 3 eval scenarios
Passed
No known issues
Evaluation results
92%
65%Architecture Diagram: Real-Time Ride-Sharing Platform
Architecture diagram Mermaid rules
flowchart LR direction
0%
100%
Valid subgraph IDs
0%
100%
All nodes in subgraphs
0%
100%
Dotted edges for async nodes
0%
100%
Dotted edges for external nodes
0%
100%
Worker in service subgraph
0%
100%
camelCase node IDs, no underscores
37%
100%
No edges to subgraph IDs
100%
100%
Cross-subgraph edges labeled
50%
100%
No duplicate node pairs
100%
100%
useArchitectureLayoutCode noted
0%
0%
No emojis in Mermaid source
100%
100%
100%
35%Sequence Diagram: Multi-Factor Authentication Flow
Sequence diagram Mermaid rules
sequenceDiagram keyword
100%
100%
No participant aliases
0%
100%
Readable participant IDs
75%
100%
No type annotations on participants
100%
100%
Correct forward arrow type
100%
100%
Correct return arrow type
100%
100%
No unsupported sequence features
0%
100%
Every message labeled
100%
100%
No semicolons in labels
100%
100%
Under 15 messages or split
0%
100%
Notes on omitted features
100%
100%
100%
State Diagram: Customer Support Ticket Lifecycle
State diagram Mermaid rules
stateDiagram-v2 keyword
100%
100%
No note directives
100%
100%
No styling directives
100%
100%
Double-dash transitions
100%
100%
Start marker present
100%
100%
Terminal state marked
100%
100%
State names are nouns
100%
100%
Transition labels are events/triggers
100%
100%
No cross-composite transitions
100%
100%
Decisions.md explains feature omissions
100%
100%
No emojis in Mermaid source
100%
100%
- Repository
- figma/mcp-server-guide
- Commit
a742f0a
- Evaluated
- Agent
- Claude Code
- Model
- Claude Sonnet 4.6
Table of Contents
Is this your skill?
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.