skills.rest
ndriyo
ndriyoCOMMUNITY
Explore all skills by this author →
GitHub

figma-generate-diagram

Route diagram requests to Mermaid templates and guide Figma enhancements.

Updated Aug 23, 2026
Search Tags:#architecture#mermaid#figma#flowchart#visualization#diagram#ER
One-click install
npx skills add https://github.com/ndriyo/primepm --skill figma-generate-diagram
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-generate-diagram
Source: https://github.com/ndriyo/primepm/tree/main/.agents/skills/figma-generate-diagram
Command: npx skills add https://github.com/ndriyo/primepm --skill figma-generate-diagram

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides clear guidance and tools to generate precise diagrams tailored to various types such as flowcharts, ER diagrams, and architecture layouts, reducing errors and increasing visual clarity.

Core Features & Use Cases

  • Diagram Type Routing: Routes user input to the appropriate diagram type (flowchart, ER diagram, architecture, etc.) based on the described content.
  • Universal Constraints Enforcement: Applies common Mermaid rules across all diagram types to ensure valid syntax and readability.
  • Hybrid Workflow Support: Complements Mermaid-generated diagrams with Figma extensions for annotations, styling, and detailed customization that Mermaid can't support directly.
  • Quick Start: Load the described service guide and verify diagram type, then create diagrams in Mermaid, utilizing use_figma for advanced styling or annotations.

Quick Start

Load this skill, identify the diagram type needed, draft Mermaid syntax following the guides, and call generate_diagram with the appropriate syntax and options.

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 architecture and ER diagrams using Mermaid and Figma?▼

To generate architecture and ER diagrams, the Skill routes your described content to suitable Mermaid templates for valid syntax. You can then use Figma for advanced styling, annotations, and custom visual elements.

What is the best way to create type-specific flowcharts without syntax errors?▼

The best way to create type-specific flowcharts is using a routing system that applies universal Mermaid constraints. This ensures valid syntax and readability across all diagram types before applying visual styling.

Can I use Figma to add annotations and styling to Mermaid diagrams?▼

Yes, you can use Figma to add annotations and styling to Mermaid diagrams through a hybrid workflow. This approach complements Mermaid-generated diagrams with detailed customization and custom visual elements that Mermaid cannot support directly.

Does Mermaid support custom visual elements for detailed architecture layouts?▼

Mermaid does not directly support custom visual elements for detailed architecture layouts. You need a hybrid workflow that complements Mermaid-generated diagrams with Figma extensions for detailed styling, annotations, and custom visual elements.

How do I start drafting an ER diagram when I only have a text description?▼

To start drafting an ER diagram from a text description, load the Skill to verify the required diagram type. The system then drafts Mermaid syntax based on the described content and guides you through hybrid enhancements in Figma.

Related Skills

Explore More Software Engineering Skills→
camoacamoa
32

diagram-generator

Generate Mermaid diagrams for system architecture and data flow.

Community
Intermediate
ishiyanishiyan

mermaid-creator

Create and convert Mermaid diagrams from syntax to SVG.

Community
Advanced
ThomasRohdeThomasRohde
1

mermaid-master

Generate syntactically correct Mermaid diagrams for flowcharts, sequence, ER, state, Gantt, and class types.

Community
Basic
claude-office-skillsclaude-office-skills
368

diagram-creator

Generate flowcharts, sequence diagrams, and architecture diagrams from Mermaid and PlantUML text.

Official
Intermediate