figma-generate-diagram

Generate diagrams in FigJam from Mermaid syntax.

1.9k|171|Updated Aug 5, 2025
One-click install
npx skills add https://github.com/figma/mcp-server-guide --skill figma-generate-diagram-figma
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: figma-generate-diagram
Source: https://github.com/figma/mcp-server-guide/tree/main/skills/figma-generate-diagram
Command: npx skills add https://github.com/figma/mcp-server-guide --skill figma-generate-diagram-figma

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill allows users to create and render diagrams directly in FigJam using Mermaid syntax, streamlining the process of visualizing data and relationships.

Core Features & Use Cases

  • Diagram Generation: Convert Mermaid syntax into diagrams in FigJam.
  • Diagram Types: Supports various diagram types such as flowcharts, ER diagrams, sequence diagrams, gantt charts, and state diagrams.
  • Use Case: Imagine you need to visualize a complex software architecture. Use this Skill to create an architecture diagram in FigJam using Mermaid syntax, making it easy to understand and communicate the architecture.

Quick Start

Load the skill 'figma-generate-diagram' and use the generate_diagram tool with the following parameters:

  • name: The title of your diagram
  • mermaidSyntax: The Mermaid syntax for your diagram

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 diagrams in FigJam from Mermaid syntax?

To generate diagrams in FigJam from Mermaid syntax, use the generate_diagram tool by providing a diagram name and the Mermaid syntax string. The Skill renders the syntax into a visual diagram, supporting flowcharts, ER diagrams, sequence diagrams, gantt charts, and state diagrams.

Can I visualize software architecture in FigJam using Mermaid?

Yes, you can visualize software architecture in FigJam using Mermaid syntax. This Skill converts your text-based architecture definitions into visual diagrams, making complex software design and documentation easier to understand and communicate.

What diagram types are supported when rendering Mermaid syntax in FigJam?

Rendering Mermaid syntax in FigJam supports various diagram types including flowcharts, ER diagrams, sequence diagrams, gantt charts, and state diagrams. The output is customized based on the specific Mermaid syntax provided for software design visualization.

Do I need the FigJam and Mermaid APIs to create visual documentation from text?

Yes, you need both the Mermaid and FigJam APIs to create visual documentation from text. These dependencies are required to parse the Mermaid syntax and render the resulting diagrams directly within the FigJam environment.

What is the best way to convert Mermaid syntax into visual documentation for software design?

The best way to convert Mermaid syntax into visual documentation for software design is using a dedicated diagram generation Skill. It directly translates your text-based data and relationships into rendered visual diagrams in FigJam, streamlining the documentation process.