figma-generate-diagram

Generate interactive FigJam diagrams from Mermaid syntax.

Updated Jun 12, 2026

Search Tags:#Mermaid #workflow visualization #system architecture #diagram generation #FigJam

Ready to run

npx skills add https://github.com/Kushal9889/claude-plugins --skill figma-generate-diagram-kushal9889

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: figma-generate-diagram
Source: https://github.com/Kushal9889/claude-plugins/tree/main/figma/skills/figma-generate-diagram
Command: npx skills add https://github.com/Kushal9889/claude-plugins --skill figma-generate-diagram-kushal9889

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires figma, mermaid, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill enables you to generate interactive diagrams in FigJam using Mermaid syntax, streamlining the process of visualizing data and workflows.

Core Features & Use Cases

Mermaid Support: Supports various diagram types such as flowcharts, sequence diagrams, ER diagrams, state diagrams, and gantt charts using Mermaid syntax.
Automated Generation: Automatically generates diagrams based on the provided Mermaid code.
Use Case: When you need to create a visual representation of a workflow, system architecture, or data model, this skill can help you generate a diagram quickly and efficiently.

Quick Start

Use the figma-generate-diagram skill to create a flowchart by pasting the following Mermaid syntax into the prompt: sequenceDiagram\nparticipant User\nUser->>WebApp: Open login page\nWebApp->>API: POST /login\nAPI->>Database: SELECT user\nDatabase-->>API: User row\nAPI-->>WebApp: 200 + session\nWebApp-->>User: Redirect home

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 FigJam diagrams using Mermaid syntax?▼

You can generate FigJam diagrams using Mermaid syntax by providing the code into the prompt, which automates the rendering of flowcharts, sequence diagrams, and ER diagrams directly onto the canvas.

What types of visual diagrams can I create in FigJam with Mermaid?▼

Mermaid supports generating various interactive diagram types in FigJam, including flowcharts, sequence diagrams, ER diagrams, state diagrams, and gantt charts for visualizing workflows and system architecture.

Do I need a Figma account to render Mermaid diagrams with this tool?▼

Yes, you need Figma and FigJam access to render Mermaid diagrams, as the tool requires the FigJam environment to generate and display the interactive visualizations from the provided syntax.

What is the best way to visualize system architecture in FigJam?▼

The best way to visualize system architecture in FigJam is using Mermaid syntax to automatically generate interactive diagrams, streamlining the process of mapping out complex data models and workflows quickly.

Can I create an ER diagram in FigJam from text input?▼

Yes, you can create an ER diagram in FigJam from text input by pasting valid Mermaid syntax into the prompt, which automates the layout and generation of the entity-relationship visualization.

How does Mermaid syntax streamline workflow visualization in FigJam?▼

Mermaid syntax streamlines workflow visualization in FigJam by converting text-based definitions into automated visual layouts, allowing you to quickly generate interactive diagrams without manual drawing.