figma-generate-diagram

Generate Mermaid.js diagrams for editable FigJam components.

1|Updated May 21, 2020

Search Tags:#architecture #mermaid #figma #diagramming #visualization #figjam

Ready to run

npx skills add https://github.com/ahandsel/debugging_log --skill figma-generate-diagram-ahandsel

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill eliminates the manual effort of drawing complex diagrams by automatically generating editable Mermaid-based visuals directly in FigJam, ensuring your system architecture and process flows are always accurate and professional.

Core Features & Use Cases

Automated Visualization: Converts text descriptions into flowcharts, sequence diagrams, ERDs, and architecture diagrams.
Hybrid Workflow: Supports advanced annotations, color-coding, and custom styling by composing with Figma tools after generation.
Use Case: When you need to document a complex microservices architecture, use this Skill to generate the base diagram from your code logic, then add specific sticky-note annotations to highlight critical data paths.

Quick Start

Use the figma-generate-diagram skill to create a sequence diagram showing the authentication handshake between the client, gateway, and auth service.

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 editable FigJam diagrams from text?▼

To generate editable FigJam diagrams from text, this Skill converts your text descriptions into structured Mermaid.js syntax, which renders as editable components for architecture flowcharts, sequence diagrams, and ERDs.

Can I create an architecture flowchart in FigJam without drawing it manually?▼

Yes, you can create architecture flowcharts in FigJam without manual drawing by inputting your system logic as text. The Skill outputs strict Mermaid syntax that renders into professional-grade, editable visual components.

Does this tool support generating sequence diagrams and ERDs for system design?▼

Yes, this tool supports generating sequence diagrams and ERDs for system design. It processes text inputs to produce structured Mermaid.js outputs, covering state machines and Gantt charts for technical documentation.

How do I add custom styling and annotations to generated FigJam diagrams?▼

To add custom styling and annotations to generated FigJam diagrams, use a hybrid workflow. After the Skill creates the base Mermaid visual, compose with native Figma tools to apply color-coding and sticky-note annotations.

What is the best way to document a microservices architecture in FigJam?▼

The best way to document microservices architecture in FigJam is generating a base Mermaid.js diagram from your code logic. This ensures accurate process flows, which you can then annotate to highlight critical data paths.

Are there limitations when using Mermaid syntax for Figma visualization?▼

When using Mermaid syntax for Figma visualization, outputs are constrained by strict Mermaid syntax rules to ensure high-fidelity rendering. Complex custom styling requires hybrid composition with native Figma tools after generation.