Loading
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, g
The skill file stays in the publisher's repository.
Paste the copied command in a terminal. It installs this SKILL.md into that agent.
npx skills add Devin-AXIS/iPolloWork --skill figma-generate-diagram -a cursor -y
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.).
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.).
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.)."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.
generate_diagram the right tool?flowchart, sequenceDiagram, stateDiagram / stateDiagram-v2, gantt, erDiagram.
If the user wants any of these, tell them directly that generate_diagram doesn't support it instead of calling the tool and failing:
The tool cannot:
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.
Lightweight routing — use the first match.
| User wants… | Type | Next step |
|---|---|---|
| Services + datastores + queues + integrations | Architecture flowchart | Read references/architecture.md |
| Decision tree, process flow, pipeline, dependency graph, user journey | Flowchart | Read references/flowchart.md |
| Interactions between parties over time (API calls, auth, messaging) | Sequence diagram | Read references/sequence.md |
| Data model, tables, keys, cardinality | ER diagram | Read references/erd.md |
| Named states with transitions between them | State diagram | Read references/state.md |
| Project schedule with dates, milestones | Gantt chart | Read references/gantt.md |
If a flowchart is requested and it describes software infrastructure (services, datastores, queues, external integrations), route to architecture.md — not flowchart.md. When in doubt, ask the user.
\n in labels. Use newlines only when absolutely required and only via actual line breaks (not the escape sequence).end, subgraph, graph as node IDs.userService), no spaces. Underscores can break edge routing in some processors.A["Process (main)"], -->|"O(1) lookup"|.Note over X / Note left of X / Note right of X are silently stripped by the renderer; don't put them in the source. If the user wants annotations on a sequence diagram, generate the base diagram first and add stickies/text via the hybrid workflow (references/workflow.md).classDef, class, and any other styling are stripped by preprocessing; the rendered chart will not have colors. If the user wants color-coded phases, milestones, or tasks, generate the base chart first and add color/annotations via the hybrid workflow (references/workflow.md) — or, for diagrams that fundamentally need styling, build the timeline directly with use_figma instead (see references/gantt.md §11).use_figma extension. generate_diagram output lands in a FigJam file (figma.com/board/...), so hybrid extensions must stick to FigJam-supported APIs. Do NOT call figma.createPage() — it's Design-only (figma.com/design/...) and throws TypeError: figma.createPage no such property 'createPage' on the figma global object in FigJam. Organize content with FigJam sections instead (see figma-use-figjam).The quality of the generated diagram is bounded by the quality of the Mermaid you produce, which is bounded by the context you have. Before writing Mermaid, make sure you have enough real information to describe the subject accurately — and use whatever the current environment gives you to gather it.
Depending on what's available, useful sources of context include:
get_figjam or get_design_context (see the figma-use and figma-use-figjam skills).Don't invent edges, labels, or entities to "round out" a diagram. Missing information is better than hallucinated information — leave a gap and flag it to the user.
Mermaid can't do everything. Sticky-note annotations tied to specific nodes, per-node domain coloring on ERDs, callouts with attached data — these all require composing generate_diagram with use_figma (via the figma-use-figjam skill). This is the hybrid workflow.
It's a judgment call, not a default. Deploy it when the user's ask clearly benefits — skip it when the base diagram is obviously enough. Signals that say yes: user explicitly asked for notes, colors, callouts, or "X attached to each node"; they shared data that maps to specific nodes; the diagram is a shareable artifact, not a thinking sketch. Signals that say no: short/self-explanatory request, small diagram, user exploring or testing.
If hybrid is warranted, read references/workflow.md before calling generate_diagram — it covers the pattern, two core recipes (annotations + color-coding), communication style, and failure handling. If not, proceed directly to Step 6.
Required:
name: a descriptive title (shown to the user)mermaidSyntax: the Mermaid sourceOptional:
userIntent: a short sentence describing what the user is trying to accomplish — helps telemetry and downstream tuninguseArchitectureLayoutCode: only for architecture diagrams; value is specified in references/architecture.mdfileKey: if the user wants the diagram added to an existing FigJam file instead of a new oneDo not call create_new_file before generate_diagram — the tool creates its own file.
use_figma now — the pattern and recipes are in references/workflow.md.Every call to generate_diagram without a fileKey creates a new FigJam file in the user's drafts. Regenerating 4 times = 4 draft files to clean up. Prefer reusing the existing file when:
How to reuse:
fileKey on subsequent generate_diagram calls. Extract from a figma.com/board/{fileKey}/... URL. The diagram is added to the existing file rather than creating a new one.use_figma tool (see the figma-use-figjam skill) to delete the old diagram's nodes first, then call generate_diagram with the same fileKey. Or leave the old diagram and place the new one beside it — readers often benefit from seeing the history of attempts.Ask the user which they prefer the first time you iterate — "regenerate over the old one, or keep both side-by-side?" — and remember their answer for subsequent iterations in the session.