Figma Generate Diagram
A prerequisite skill that prepares your diagram requests for Figma's generate_diagram tool. It routes you to type-specific guidance, enforces universal Mermaid constraints, and tells you when to use a different approach or edit in Figma instead. Load it before every diagram call to avoid preventable failures.
Figma Generate Diagram loads before every diagram creation to route you to the right Mermaid syntax and prevent rendering failures.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-27
Figma Generate Diagram loads before every diagram creation to route you to the right Mermaid syntax and prevent rendering failures. A prerequisite skill that prepares your diagram requests for Figma's generate_diagram tool. It routes you to type-specific guidance, enforces universal Mermaid constraints, and tells you when to use a different approach or edit in Figma instead. Load it before every diagram call to avoid preventable failures.
Use it when
- Yes.
- Figma Generate Diagram guides you through creating flowcharts in Figma by routing your requests to type-specific guidance and enforcing.
Install
Devin-AXIS/iPolloWork/figma-generate-diagram · repository language: TypeScript
generated, unverified - the skill's exact subdirectory could not be determined; check the repository on GitHub
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What is Figma Generate Diagram and what does it do?
Figma Generate Diagram is a prerequisite skill that prepares your diagram requests for Figma's generate_diagram tool. It routes you to type-specific guidance, enforces universal Mermaid constraints, and tells you when to use a different approach or edit in Figma instead. Load it before every diagram call to avoid preventable failures.
Can Figma Generate Diagram auto generate diagrams in Figma?
Yes. Figma Generate Diagram automates visual diagram generation from data or templates, enabling you to create flowcharts and visual structures without manual drawing. It speeds up diagram creation for design and documentation workflows by generating diagrams automatically within the Figma design environment.
How do I create flowcharts in Figma using this skill?
Figma Generate Diagram guides you through creating flowcharts in Figma by routing your requests to type-specific guidance and enforcing Mermaid constraints. The skill prepares your flowchart requests before they reach Figma's generate_diagram tool, helping you avoid preventable failures and ensuring your flowchart creation is optimized.
When should I use Figma Generate Diagram for diagram creation?
Load Figma Generate Diagram before every diagram call. It tells you when to use a different approach or edit in Figma instead, ensuring you're using the right method for your specific diagram type. This prerequisite skill prevents errors and maximizes your diagram generation success.
What constraints does Figma Generate Diagram enforce?
Figma Generate Diagram enforces universal Mermaid constraints to ensure your diagram requests work properly with Figma's generate_diagram tool. These constraints help maintain compatibility and prevent common issues that could cause diagram generation to fail.
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Generate diagrams automatically within Figma design environment”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Build architecture diagrams following Simon Brown's C4 model, which organizes system structure into focused maps at different abstraction levels—each designed for a specific audience. Choose between Mermaid (default, renders natively on GitHub), Structurizr DSL (for multi-level models), or D2/PlantUML. Start with System Context and Container diagrams; add Component and Code layers only when they clarify design.
Create and validate Mermaid diagrams across multiple types—flowcharts for processes, sequence diagrams for system interactions, class and state diagrams for object models and lifecycles, ER diagrams for data relationships, and other specialized formats like Gantt charts. The skill preserves editable source while optionally rendering static SVG assets when needed for documents or slides.
This skill equips agents with FigJam-specific guidance for the `use_figma` MCP tool, enabling programmatic creation of collaborative boards. It covers board planning, node inspection, and recipes for adding sections, stickies, connectors, text, shapes, tables, and images—all essential for brainstorming and ideation workflows.
Archify transforms plain-language descriptions or JSON specifications into self-contained, explorable HTML diagrams for system architecture, workflows, API sequences, data pipelines, and state machines. Output includes interactive features like pan/zoom, theme switching, and optional trace animation, with exports to SVG, PNG, JPEG, WebP, and WebM.
Mermaid Syntax is a comprehensive reference skill covering all 23 Mermaid diagram types, configuration, theming, and common syntax errors. Look up syntax rules for flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, Gantt charts, C4 diagrams, and others, then apply the patterns to your own diagrams. Includes troubleshooting guidance for frequent parsing issues and layout optimization tips for C4 diagrams.
Figma Swiftui bridges design and development by translating between Figma files and SwiftUI code in both directions. Route design-to-code requests to build iOS interfaces from Figma frames, or code-to-design to push SwiftUI views and tokens back into Figma, preserving semantic colors, SF Symbols, and iOS patterns throughout.
More skills markdown-mermaid-writing (MIT) · Figma Use (NOASSERTION) · Figma Generate Design (NOASSERTION)