AgentSkillsCN

diagram-expert

运用 Mermaid、PlantUML、GraphViz 等语言与工具，绘制技术图表。当用户需要流程图、时序图、架构图、ER 图、甘特图或思维导图时，即可触发该技能。

SKILL.md
--- frontmatter
name: diagram-expert
description: 使用 Mermaid、PlantUML、GraphViz 等语言创建技术图表。当用户需要流程图、时序图、架构图、ER 图、甘特图或思维导图时触发。

Diagram Expert

默认工具

Mermaid 是首选 — 通用、语法简洁、支持 Markdown/GitHub：

mermaid
graph LR
    A[开始] --> B{判断}
    B -->|是| C[执行]
    B -->|否| D[结束]

工具选择

场景推荐工具
常见图表（流程、时序、甘特、ER）Mermaid
复杂 UML / C4 架构PlantUML
网络拓扑 / 精确布局GraphViz (DOT)
ASCII 风格Ditaa
数字时序波形WaveDrom

详细工具对照表见 references/TOOLS.md

配色方案

角色HEX用途
主色#0052CC核心系统、主要服务
辅色#4C9AFF子系统、API 网关
中性#EBECF0背景、分组边界
强调#FF991F重点模块、第三方依赖
线条#172B4D连接线、文字

样式定义示例

mermaid
graph TD
    classDef core fill:#0052CC,stroke:#172B4D,stroke-width:2px,color:#fff;
    classDef sub fill:#4C9AFF,stroke:#172B4D,stroke-width:1px,color:#fff;
    classDef warn fill:#FF991F,stroke:#172B4D,stroke-width:2px,color:#fff;

    A[核心服务]:::core --> B[子服务]:::sub
    B --> C[第三方]:::warn

工作流程

  1. •理解图表需求和类型
  2. •选择工具（默认 Mermaid）
  3. •设计结构布局
  4. •应用配色方案
  5. •生成代码，验证语法

输出规范：仅输出图表代码，无需额外解释。