figma-generate-diagram

Name: figma-generate-diagram
Author: figma

1.8kstars163forks

How to install figma-generate-diagram?

figma/mcp-server-guide/figma-generate-diagram

$npx -y skills add figma/mcp-server-guide --skill figma-generate-diagram

Installs into the current project.

Summary

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 diag

Files · 1

View on GitHub

SKILL.md

1	# generate-diagram
2
3	You MUST load this skill before every `generate_diagram` tool call. Skipping it causes preventable rendering failures and low-quality output.
4
5	`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.
6
7	## Step 1: Is `generate_diagram` the right tool?
8
9	### Supported diagram types
10
11	`flowchart`, `sequenceDiagram`, `stateDiagram` / `stateDiagram-v2`, `gantt`, `erDiagram`.
12
13	### Unsupported — don't call the tool
14
15	If the user wants any of these, tell them directly that `generate_diagram` doesn't support it instead of calling the tool and failing:
16	- Pie chart, mindmap, venn diagram, class diagram, journey, timeline, quadrant, C4, git graph, requirement diagram
17
18	### When to push the user to edit in Figma
19
20	The tool cannot:
21	- Change fonts on an existing diagram
22	- Move individual shapes
23	- Edit a diagram node-by-node after generation
24
25	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.
26
27	## Step 2: Pick the diagram type
28
29	Lightweight routing — use the first match.
30
31	\| User wants… \| Type \| Next step \|
32	\|---\|---\|---\|
33	\| Services + datastores + queues + integrations \| Architecture flowchart \| Read [references/architecture.md](./references/architecture.md) \|
34	\| Decision tree, process flow, pipeline, dependency graph, user journey \| Flowchart \| Read [references/flowchart.md](./references/flowchart.md) \|
35	\| Interactions between parties over time (API calls, auth, messaging) \| Sequence diagram \| Read [references/sequence.md](./references/sequence.md) \|
36	\| Data model, tables, keys, cardinality \| ER diagram \| Read [references/erd.md](./references/erd.md) \|
37	\| Named states with transitions between them \| State diagram \| Read [references/state.md](./references/state.md) \|
38	\| Project schedule with dates, milestones \| Gantt chart \| Read [references/gantt.md](./references/gantt.md) \|
39
40	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.
41
42	## Step 3: Universal constraints (apply to every diagram type)
43
44	1. No emojis in any part of the Mermaid source. The tool rejects them.
45	2. No `\n` in labels. Use newlines only when absolutely required and only via actual line breaks (not the escape sequence).
46	3. No HTML tags in labels.
47	4. Reserved words — don't use `end`, `subgraph`, `graph` as node IDs.
48	5. Node IDs: camelCase (`userService`), no spaces. Underscores can break edge routing in some processors.
49	6. Special characters in labels must be wrapped in quotes: `A["Process (main)"]`, `-->\|"O(1) lookup"\|`.
50	7. Sequence diagrams — Mermaid `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](references/workflow.md)).
51	8. Gantt charts — `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](references/workflow.md)) — or, for diagrams that fundamentally need styling, build the timeline directly with `use_figma` instead (see [references/gantt.md](references/gantt.md) §11).
52	9. Use FigJam-only APIs in any `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](../figma-use-figjam/SKILL.md)).
53
54	##

People who liked this also viewed

6 picks

Type

figma-generate-diagram

1.8kstars163forks

View on GitHub

How to install figma-generate-diagram?

figma/mcp-server-guide/figma-generate-diagram

$npx -y skills add figma/mcp-server-guide --skill figma-generate-diagram

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# generate-diagram
2
3	You MUST load this skill before every `generate_diagram` tool call. Skipping it causes preventable rendering failures and low-quality output.
4
5	`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.
6
7	## Step 1: Is `generate_diagram` the right tool?
8
9	### Supported diagram types
10
11	`flowchart`, `sequenceDiagram`, `stateDiagram` / `stateDiagram-v2`, `gantt`, `erDiagram`.
12
13	### Unsupported — don't call the tool
14
15	If the user wants any of these, tell them directly that `generate_diagram` doesn't support it instead of calling the tool and failing:
16	- Pie chart, mindmap, venn diagram, class diagram, journey, timeline, quadrant, C4, git graph, requirement diagram
17
18	### When to push the user to edit in Figma
19
20	The tool cannot:
21	- Change fonts on an existing diagram
22	- Move individual shapes
23	- Edit a diagram node-by-node after generation
24
25	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.
26
27	## Step 2: Pick the diagram type
28
29	Lightweight routing — use the first match.
30
31	\| User wants… \| Type \| Next step \|
32	\|---\|---\|---\|
33	\| Services + datastores + queues + integrations \| Architecture flowchart \| Read [references/architecture.md](./references/architecture.md) \|
34	\| Decision tree, process flow, pipeline, dependency graph, user journey \| Flowchart \| Read [references/flowchart.md](./references/flowchart.md) \|
35	\| Interactions between parties over time (API calls, auth, messaging) \| Sequence diagram \| Read [references/sequence.md](./references/sequence.md) \|
36	\| Data model, tables, keys, cardinality \| ER diagram \| Read [references/erd.md](./references/erd.md) \|
37	\| Named states with transitions between them \| State diagram \| Read [references/state.md](./references/state.md) \|
38	\| Project schedule with dates, milestones \| Gantt chart \| Read [references/gantt.md](./references/gantt.md) \|
39
40	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.
41
42	## Step 3: Universal constraints (apply to every diagram type)
43
44	1. No emojis in any part of the Mermaid source. The tool rejects them.
45	2. No `\n` in labels. Use newlines only when absolutely required and only via actual line breaks (not the escape sequence).
46	3. No HTML tags in labels.
47	4. Reserved words — don't use `end`, `subgraph`, `graph` as node IDs.
48	5. Node IDs: camelCase (`userService`), no spaces. Underscores can break edge routing in some processors.
49	6. Special characters in labels must be wrapped in quotes: `A["Process (main)"]`, `-->\|"O(1) lookup"\|`.
50	7. Sequence diagrams — Mermaid `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](references/workflow.md)).
51	8. Gantt charts — `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](references/workflow.md)) — or, for diagrams that fundamentally need styling, build the timeline directly with `use_figma` instead (see [references/gantt.md](references/gantt.md) §11).
52	9. Use FigJam-only APIs in any `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](../figma-use-figjam/SKILL.md)).
53
54	##

People who liked this also viewed

6 picks

Type