figma-generate-diagram

Generate editable FigJam diagrams from Mermaid syntax with validation.

2|1|Updated May 17, 2026

Search Tags:#mermaid #flowchart #sequence diagram #diagram generation #erd #figjam #state diagram

Ready to run

npx skills add https://github.com/rakibulism/agent-skills-os --skill figma-generate-diagram-rakibulism

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: figma-generate-diagram
Source: https://github.com/rakibulism/agent-skills-os/tree/main/skills/figma-figma-generate-diagram
Command: npx skills add https://github.com/rakibulism/agent-skills-os --skill figma-generate-diagram-rakibulism

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you generate clear, editable diagrams in FigJam without hand-building every shape and connector. It prevents wasted effort on unsupported diagram features by steering you to the right diagram type and workflow up front.

Core Features & Use Cases

Diagram Type Routing: Chooses between flowchart, architecture, sequence, ER, state, and gantt guidance based on the user's request.
Mermaid-to-FigJam Generation: Converts well-formed Mermaid syntax into diagrams that render cleanly in FigJam.
Safety and Quality Guardrails: Enforces constraints like valid node IDs, supported edge types, and diagram-specific validation rules.
Hybrid FigJam Workflow: Directs you to combine generated diagrams with FigJam edits when notes, callouts, styling, or annotations are needed.

Quick Start

Ask the assistant to create the diagram type you need in FigJam, and it will load this skill first, choose the correct Mermaid pattern, and generate the diagram for you.

Frequently Asked Questions about figma-generate-diagram

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

FAQPage Schema

How do I generate a flowchart in FigJam from Mermaid syntax?▼

To generate a FigJam flowchart from Mermaid syntax, the assistant routes your request, applies type-specific constraints, and outputs editable diagram nodes and connectors. It ensures valid node IDs and supported edge types for clean rendering.

Can I create sequence diagrams and ERDs in FigJam using Mermaid?▼

Yes, you can create sequence diagrams and ERDs in FigJam using Mermaid. The skill enforces diagram-specific validation rules to ensure architecture, state, and gantt diagrams render correctly without unsupported features.

What is the best way to add notes and styling to a generated FigJam diagram?▼

The best way to add notes and styling to a generated FigJam diagram is using the hybrid workflow. Generate the base diagram from Mermaid first, then manually apply FigJam edits for callouts, annotations, and custom styling.

Why does my Mermaid diagram fail to render correctly in FigJam?▼

Your Mermaid diagram fails to render in FigJam when it violates constraint rules. The skill enforces strict type-specific guidance, blocking unsupported edge types, invalid node IDs, and features the FigJam renderer cannot express.

Does FigJam support state diagrams and gantt charts generated from Mermaid?▼

Yes, FigJam supports state diagrams and gantt charts generated from Mermaid. The skill provides diagram routing to apply the correct Mermaid pattern, ensuring your engineering and product workflow diagrams render as editable FigJam elements.