SuperAPI AI 工具集

figma-generate-diagram

设计与创作

查看项目

更新于 10-15 21:41

技能介绍

用途:这是 Figma MCP 服务器中 generate_diagram 工具的前置技能,必须在每次调用 generate_diagram 之前加载,否则会出现可避免的渲染失败和低质量输出。该工具接收 Mermaid.js 语法,生成可编辑的 FigJam 图表。

主要能力与支持类型:支持 flowchart、sequenceDiagram、stateDiagram/stateDiagram-v2、gantt、erDiagram。不支持饼图、思维导图、维恩图、类图、journey、timeline、quadrant、C4、git graph、需求图,遇到这些需求应直接告知用户不支持,而不是调用工具。工具无法修改已有图表的字体、无法移动单个形状、无法在生成后逐节点编辑;这类需求建议用户在 Figma 中手动编辑,内容级修改通常重新生成更快。

使用方式:先判断 generate_diagram 是否合适,再按用途路由到对应参考文档(架构流程图、流程图、时序图、ER 图、状态图、甘特图)。调用时必填 name 和 mermaidSyntax,可选 userIntent、useArchitectureLayoutCode(仅架构图)、fileKey。不要在 generate_diagram 前调用 create_new_file。生成后返回可在 FigJam 打开的链接。迭代或添加相关图表时应复用同一 fileKey,避免产生多个草稿文件;如需替换旧图,可先用 use_figma 删除旧节点再以相同 fileKey 生成。

通用约束:Mermaid 源码中不得使用 emoji、HTML 标签、\n 转义换行;节点 ID 用 camelCase 且不含空格,避免使用 end、subgraph、graph 作为节点 ID;标签中的特殊字符需加引号。时序图的 Note over/left of/right of 会被渲染器静默剥离;甘特图的 classDef、class 等样式会被预处理剥离。混合扩展必须使用 FigJam 支持的 API,不要调用 figma.createPage()。

适用场景与限制:适合把真实服务、流程、数据模型、状态、排期等转成 FigJam 图表。生成质量取决于上下文质量,应先从源码、用户文档、已有 Figma/FigJam 文件、其他 MCP 工具或用户提问中获取真实信息,不要编造边、标签或实体。若需要便签注释、按节点着色等 Mermaid 无法表达的内容,可结合 use_figma 的混合工作流。同一图表两次尝试后仍不满意,应停止重新生成并询问具体问题。