figma-generate-diagramlisted

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.).
Moliboy5000/.claude · ★ 0 · API & Backend · score 62

Install: claude install-skill Moliboy5000/.claude

# 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