skills.rest
rakibulism
rakibulismCOMMUNITY
Explore all skills by this author →
Website𝕏@rakibulismGitHub

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
One-click install
npx skills add https://github.com/rakibulism/agent-skills-os --skill figma-generate-diagram-rakibulism
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
yt3treesyt3trees

mermaid-diagram

Generate Mermaid diagrams with Japanese text handling from structured prompts.

Community
Basic
wtahwtah

c4-model-guidance

Guide C4 diagram level selection and Mermaid syntax for architecture documentation.

Community
Basic
xloxn69xloxn69
7

diagram-generator

Generate Mermaid and ASCII diagrams from natural language descriptions.

Community
Basic
Kushal9889Kushal9889

figma-generate-diagram

Generate interactive FigJam diagrams from Mermaid syntax.

Community
Advanced