skills.rest
DevPelumi
DevPelumiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

figma-generate-diagram

Route Figma generate_diagram calls to type-specific Mermaid syntax guidance.

Updated May 13, 2026
Search Tags:#mermaid#figma#flowchart#diagram-generation#er-diagram#architecture-diagram#figjam
One-click install
npx skills add https://github.com/DevPelumi/sleeqma --skill figma-generate-diagram-devpelumi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-generate-diagram
Source: https://github.com/DevPelumi/sleeqma/tree/main/backend/figma-plugin-bundle/skills/figma-generate-diagram
Command: npx skills add https://github.com/DevPelumi/sleeqma --skill figma-generate-diagram-devpelumi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill eliminates preventable rendering failures and low-quality output from the Figma generate_diagram tool by enforcing mandatory pre-call routing to type-specific guidance and universal Mermaid syntax constraints, ensuring every diagram request uses the correct tool and syntax for the user's needs.

Core Features & Use Cases

  • Type-specific routing: Automatically directs you to the correct reference guide for architecture flowcharts, generic flowcharts, ER diagrams, sequence diagrams, state diagrams, and Gantt charts based on the user's request, so you never use the wrong diagram type.
  • Universal constraint enforcement: Sets non-negotiable Mermaid syntax rules (no emojis, no reserved word node IDs, proper edge syntax) that prevent tool rejection and broken renders.
  • Hybrid workflow guidance: Tells you when to extend the base Mermaid diagram with the use_figma tool for annotations, color-coding, and custom elements that Mermaid cannot express, for shareable, polished artifacts.
  • Use Case: If a user asks for a microservices architecture diagram, this Skill routes you to the architecture reference to ensure correct subgraph structure and edge syntax, avoiding broken renders and saving time on failed tool calls.

Quick Start

Load this Skill before every call to the Figma generate_diagram tool to access the correct type-specific guidance and Mermaid syntax rules for the user's requested diagram type.

Frequently Asked Questions about figma-generate-diagram

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
Why does my Figma generate_diagram tool fail to render Mermaid syntax in FigJam?▼

Figma generate_diagram rendering fails when Mermaid syntax violates FigJam layout rules, such as using emojis, reserved word node IDs, or unsupported edge syntax. Enforcing universal Mermaid syntax constraints before tool calls ensures valid, well-structured diagrams that conform to the renderer's supported feature set.

How do I generate valid Mermaid flowcharts and architecture diagrams in FigJam?▼

To generate valid Mermaid diagrams in FigJam, route requests to type-specific guidance for flowcharts, architecture diagrams, ER diagrams, or sequence diagrams before calling the generate_diagram tool. This enforces correct subgraph structure, edge syntax, and universal Mermaid constraints to prevent broken renders.

Can I use Mermaid to create ER diagrams and Gantt charts in FigJam?▼

Yes, you can create ER diagrams and Gantt charts in FigJam using the Figma generate_diagram tool with Mermaid syntax. Type-specific routing guides ensure the correct Mermaid syntax and structure are applied for each diagram type, preventing tool rejection and low-quality output.

What is the best way to add color-coding and annotations to a FigJam diagram generated from Mermaid?▼

The best way to add color-coding and annotations to a Mermaid-generated FigJam diagram is through a hybrid workflow using the use_figma tool. This extends the base diagram with custom elements and annotations that Mermaid syntax cannot express, producing shareable, polished artifacts.

Do I need to avoid specific node IDs or characters when writing Mermaid syntax for FigJam?▼

Yes, you must avoid emojis and reserved word node IDs when writing Mermaid syntax for FigJam. Universal constraint enforcement establishes non-negotiable syntax rules for proper edge formatting and node identification to prevent the generate_diagram tool from rejecting the input.

Related Skills

Explore More Design & Creative Skills→
HeXiao-55HeXiao-55
1

mermaid-diagram

Create Mermaid diagrams from requirements and validate syntax.

Community
Advanced
Kushal9889Kushal9889

figma-generate-diagram

Generate interactive FigJam diagrams from Mermaid syntax.

Community
Advanced
rakibulismrakibulism
2

figma-generate-diagram

Generate editable FigJam diagrams from Mermaid syntax with validation.

Community
Advanced
ahandselahandsel
1

figma-generate-diagram

Generate Mermaid.js diagrams for editable FigJam components.

Community
Advanced