figma-generate-diagram

Solid

MANDATORY prerequisite — load this skill BEFORE every `generate_diagram` tool call. NEVER call `generate_diagram` directly without loading this skill first. Trigger whenever the user asks to create, generate, draw, render, sketch, or build a diagram — flowchart, architecture diagram, sequence diagram, ERD or entity-relationship diagram, state diagram or state machine, gantt chart, or timeline. Also trigger when the user mentions Mermaid syntax or wants a system architecture, decision tree, dependency graph, API call flow, auth handshake, schema, or pipeline visualized in FigJam. Routes to type-specific guidance, sets universal Mermaid constraints, and tells you when to use a different diagram type or skip the tool entirely (mindmaps, pie charts, class diagrams, etc.).

API & Backend 4,373 stars 848 forks Updated today NOASSERTION

Install

View on GitHub

Quality Score: 83/100

Stars 20%
100
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# generate-diagram **You MUST load this skill before every `generate_diagram` tool call.** Skipping it causes preventable rendering failures and low-quality output. `generate_diagram` takes Mermaid.js syntax and produces an editable FigJam diagram. This skill routes you to the right per-type guidance and sets universal constraints. ## Step 1: Is `generate_diagram` the right tool? ### Supported diagram types `flowchart`, `sequenceDiagram`, `stateDiagram` / `stateDiagram-v2`, `gantt`, `erDiagram`. ### Unsupported — don't call the tool If the user wants any of these, tell them directly that `generate_diagram` doesn't support it instead of calling the tool and failing: - **Pie chart, mindmap, venn diagram, class diagram, journey, timeline, quadrant, C4, git graph, requirement diagram** ### When to push the user to edit in Figma The tool cannot: - Change fonts on an existing diagram - Move individual shapes - Edit a diagram node-by-node after generation If the user asks for any of those on an existing diagram, recommend they open the diagram in Figma and edit there. For content-level changes, it's usually faster to regenerate. ## Step 2: Pick the diagram type Lightweight routing — use the first match. | User wants… | Type | Next step | |---|---|---| | Services + datastores + queues + integrations | **Architecture flowchart** | Read [references/architecture.md](./references/architecture.md) | | Decision tree, process flow, pipeline, dependency graph, user journey | **F...

Details

Author
Devin-AXIS
Repository
Devin-AXIS/iPolloWork
Created
12 months ago
Last Updated
today
Language
TypeScript
License
NOASSERTION

Similar Skills

Semantically similar based on skill content — not just same category

API & Backend Listed

figma-generate-diagram

MANDATORY prerequisite — load this skill BEFORE every `generate_diagram` tool call. NEVER call `generate_diagram` directly without loading this skill first. Trigger whenever the user asks to create, generate, draw, render, sketch, or build a diagram — flowchart, architecture diagram, sequence diagram, ERD or entity-relationship diagram, state diagram or state machine, gantt chart, or timeline. Also trigger when the user mentions Mermaid syntax or wants a system architecture, decision tree, dependency graph, API call flow, auth handshake, schema, or pipeline visualized in FigJam. Routes to type-specific guidance, sets universal Mermaid constraints, and tells you when to use a different diagram type or skip the tool entirely (mindmaps, pie charts, class diagrams, etc.).

0 Updated 2 weeks ago
Moliboy5000
AI & Automation Listed

diagramming-guidelines

Use when a document, slide, design, or review needs a diagram — architecture, sequence, flow, ERD, or state. Figma FigJam is the default and preferred tool; this rubric covers the FigJam-via-Figma-MCP workflow, the board-plus-snapshot deliverable, diagram-type selection, and the narrow fallbacks. Shared across technical-writer, slide-designer, data-engineer, and any agent that draws.

1 Updated 3 days ago
stevencarpenter
AI & Automation Listed

mermaid

Generates Mermaid diagrams from codebases, topics, files, conversations, or specs. Supports flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, C4 architecture, mindmaps, Gantt charts, timelines, user journeys, gitGraphs, pie charts, quadrant charts, requirement diagrams, and beta types (xychart, sankey, block, architecture). Use when asked to create a Mermaid diagram, visualize a process or system, draw a flowchart, sequence diagram, class diagram, state machine, ERD, architecture diagram, mind map, timeline, Gantt chart, user journey, git branching graph, or any "diagram this" request.

1 Updated 2 days ago
NafisRayan