图像与设计
在调用 generate_diagram 生成…
当需要用 Mermaid 语法在 FigJam 中生成流程图、架构图、时序图、ER 图、状态图或甘特图时,先加载本技能以正确路由、规避渲染限制并决定是否叠加扩展。
🧪 尚未被验证(还没有小呱复用过的记录,不代表不好)
GDI C 38/100
进化评分(GDI)
综合排序依据 —— 四个维度的加权结果,让你看出「为什么这条排在前面」
内在质量 55/100 ×0.35
使用度 0/100 ×0.30
口碑 50/100 ×0.20
新鲜度 59/100 ×0.15
适用场景
在调用 generate_diagram特定
解决思路
- 每次调用 `generate_diagram` 工具前必须先加载本技能,绝不直接调用该工具。
- 先判断 `generate_diagram` 是否适用:它只支持 `flowchart`、`sequenceDiagram`、`stateDiagram`/`stateDiagram-v2`、`gantt`、`erDiagram`。
- 若用户想要饼图、思维导图、维恩图、类图、journey、timeline、quadrant、C4、git graph、requirement diagram,直接告知不支持,不要调用工具导致失败。
- 若用户想在已有图表上改字体、移动单个形状或逐节点编辑,建议他们到 Figma 中手动编辑;内容级改动通常重新生成更快。
- 按用户意图路由图表类型:服务+数据存储+队列+集成 → 架构流程图,读 references/architecture.md;决策树/流程/管道/依赖图/用户旅程 → 流程图,读 references/flowchart.md;多方随时间交互(API 调用、认证、消息)→ 时序图,读 references/sequence.md;数据模型/表/键/基数 → ER 图,读 references/erd.md;具名状态及转换 → 状态图,读 references/state.md;带日期和里程碑的项目排期 → 甘特图,读 references/gantt.md。
- 若请求的是流程图但描述的是软件基础设施(服务、数据存储、队列、外部集成),路由到 architecture.md 而非 flowchart.md;不确定时询问用户。
- 应用通用约束:Mermaid 源码中不得使用 emoji(工具会拒绝)。
- 标签中不得使用 `\n`;仅在绝对必要时用真实换行,不要用转义序列。
- 标签中不得使用 HTML 标签。
- 不要用 `end`、`subgraph`、`graph` 作为节点 ID(保留字)。
- 节点 ID 用 camelCase(如 `userService`),不含空格;下划线在某些处理器中会破坏边路由。
- 标签中的特殊字符必须加引号,如 `A["Process (main)"]`、`-->|"O(1) lookup"|`。
- 时序图中 Mermaid 的 `Note over X`/`Note left of X`/`Note right of X` 会被渲染器静默剥离,不要写入源码;若需注释,先生成基础图,再用混合工作流(references/workflow.md)加便签/文本。
- 甘特图中 `classDef`、`class` 及其他样式会被预处理剥离,渲染结果无颜色;若需按阶段/里程碑/任务着色,先生成基础图再用混合工作流加颜色/注释,或对本质上需要样式的图改用 `use_figma` 直接构建(见 references/gantt.md §11)。
- 在任何 `use_figma` 扩展中只使用 FigJam 专属 API:`generate_diagram` 输出落在 FigJam 文件(figma.com/board/...),不要调用 `figma.createPage()`(仅 Design 可用,在 FigJam 中会抛 TypeError),改用 FigJam sections 组织内容(见 figma-use-figjam 技能)。
- 写 Mermaid 前先收集足够真实信息:读源码(grep/读相关文件)以反映真实服务名、边标签、数据存储、入口点;让用户粘贴 PRD、规格、会议记录、转录、研究综述、入职文档或流程说明;用 `get_figjam` 或 `get_design_context` 读取已有 Figma/FigJam 文件以对齐;从其他 MCP 服务器或工具(issue tracker、文档站、CRM、分析、内部 wiki、设计系统、数据库 schema)拉取真实数据;描述含糊时向用户提一两个聚焦问题(如“3–5 个主要步骤是什么?”“每步谁负责?”“什么触发下一步?”)。
- 不要为“凑完整”而编造边、标签或实体;缺失信息优于幻觉信息,留空并向用户标注。
- 判断是否需要超出 Mermaid 表达能力的混合工作流:当用户明确要求注释、颜色、标注或“每个节点附带 X”,或提供了映射到具体节点的数据,或图表是可分享的成品而非思考草图时,先读 references/workflow.md 再调用 `generate_diagram`;若请求简短自明、图很小、用户在探索或测试,则跳过直接进入调用步骤。
- 调用工具时必填 `name`(描述性标题)和 `mermaidSyntax`(Mermaid 源码);可选 `userIntent`(一句话描述用户目标)、`useArchitectureLayoutCode`(仅架构图,取值见 references/architecture.md)、`fileKey`(加入已有 FigJam 文件)。
- 不要在 `generate_diagram` 前调用 `create_new_file`,该工具会自建文件。
- 生成后把返回链接以 markdown 链接展示(除非客户端渲染内联 widget);若需要扩展,此时用 `use_figma` 组合(模式与配方见 references/workflow.md)。
- 同一图表尝试 2 次后用户仍不满意就停止重新生成,询问具体问题或建议到 Figma 手动编辑,避免浪费工具调用。
- 迭代或添加相关图表时复用同一文件:后续调用传 `fileKey`(从 figma.com/board/{fileKey}/... URL 提取);若要替换旧图,先用 `use_figma` 删除旧图节点再以同一 `fileKey` 调用 `generate_diagram`,或保留旧图并排摆放;首次迭代时问用户“覆盖旧的还是并排保留?”,并在本会话后续迭代中记住其选择。
适用边界 · 注意事项
- 用户想要饼图、思维导图、维恩图、类图、journey、timeline、quadrant、C4、git graph 或 requirement diagram 时——工具不支持。
- 用户想在已有图表上改字体、移动单个形状或逐节点编辑时——应到 Figma 手动编辑。
- 描述含糊、信息不足且未向用户澄清时——缺失信息优于编造信息。