메뉴
生成 Mermaid 源码或包含 Mermaid fence 的 Markdown 图表，适用于用户明确要求 Mermaid、Markdown 图表、文档即代码或可 diff 图形。支持 flowchart、sequence、class、ER、state、gantt、gitGraph、journey、pie、mindmap、timeline、quadrant、xy、sankey 和 block。优先保证类型选择、语法、自动布局和文档可维护性，不用于 Draw.io 可编辑 XML、精确坐标 SVG 或照片插画。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
代码变更规划助手 - 分析需求、设计方案、评估影响，输出可执行的变更计划
代码合并助手 - 分析 Git 冲突、追溯改动原因、提供合并方案
根据自然语言需求或需求文档生成简约、可在 Draw.io/diagrams.net 中继续编辑的 `.drawio` XML 页面原型。用于 XML 原型、Draw.io 原型、可编辑页面原型、后台页面线框图、UI 评审稿和产品页面结构设计；不用于可运行 HTML、架构图、流程图或高装饰性成品 UI。
根据自然语言需求或需求文档生成简约、可交互、浏览器可直接打开的自包含 HTML 原型。用于 HTML 原型、交互原型、页面原型、前端原型、UI 原型、Web mockup、后台管理原型和产品交互验证；不用于正式前端工程、Draw.io 原型、架构图或仅需静态图片的任务。
生成浏览器可直接展示、缩放和嵌入网页或文档的高质量静态 SVG 矢量图。用于用户明确要求 SVG、矢量图、网页配图或展示型架构图；支持业务、应用、系统、技术、部署、数据架构，以及流程、生命周期、状态、时序、ER、依赖、知识关系、对比、决策矩阵、SWOT、时间线、路线图和总结图。不用于 Draw.io 可编辑 XML、Mermaid 或照片插画。
生成可在 Draw.io/diagrams.net 中继续编辑的 UTF-8 `.drawio` XML 图形。用于业务/应用/技术/部署/数据架构图、流程图、状态图、生命周期图、时序图、ER/依赖/知识关系图、对比、决策矩阵、SWOT、时间线、路线图和总结图；不用于 Mermaid、静态 SVG、位图插画、统计图表或 UI 原型。
| name | mermaid-gen |
| description | 生成 Mermaid 源码或包含 Mermaid fence 的 Markdown 图表，适用于用户明确要求 Mermaid、Markdown 图表、文档即代码或可 diff 图形。支持 flowchart、sequence、class、ER、state、gantt、gitGraph、journey、pie、mindmap、timeline、quadrant、xy、sankey 和 block。优先保证类型选择、语法、自动布局和文档可维护性，不用于 Draw.io 可编辑 XML、精确坐标 SVG 或照片插画。 |
生成 Mermaid 代码块或 Markdown 文件。用户未指定目录时保存到项目根目录 output/mermaid/。明确要求 SVG 时使用 svg-generator，明确要求 Draw.io 时使用 xml-diagram。
references/mermaid-dsl.md。references/mermaid-syntax.md。examples/*.md；示例用于理解图型结构，禁止只替换标题后交付。分析需求 → 选择图型 → 自然语言 Mermaid DSL → 控制方向和复杂度
→ 生成 Mermaid → 结构/语义校验 → CLI 真实渲染 → 简化并交付
确定图表目的、受众、输出形式、浅色或深色主题、阅读方向、核心节点、关系、分区和输出路径。区分用户事实与合理补充，不擅自增加业务关系。
Mermaid 适合自动布局和文档即代码，不承诺精确坐标。用户强调品牌化、复杂部署边界、像素级布局或高级展示时改用 SVG 或 Draw.io。
| 意图 | Mermaid 类型 |
|---|---|
| 流程、步骤、判断 | flowchart |
| 调用、消息、交互 | sequenceDiagram |
| 类、接口、继承 | classDiagram |
| 实体、数据库关系 | erDiagram |
| 状态变化 | stateDiagram-v2 |
| 排期与进度 | gantt |
| Git 分支与合并 | gitGraph |
| 用户体验旅程 | journey |
| 占比 | pie |
| 层级思维结构 | mindmap |
| 里程碑 | timeline |
| 优先级矩阵 | quadrantChart |
| 数值趋势 | xychart-beta |
| 流量迁移 | sankey-beta |
| 系统模块框图 | block-beta |
block-beta；带判断和流转关系时使用 flowchart。sequenceDiagram，不要在架构图中堆积箭头。erDiagram，不要用普通方框模拟。按 references/mermaid-dsl.md 描述图型、主题、方向、节点或参与者、关系、分区、复杂度和检查要求。DSL 不强制落盘，不使用 JSON、JSON Schema 或 DiagramPlan。
LR，层级和判断较多时优先 TD。style 修补。每个交付文件默认只包含一个主 Mermaid block。Markdown 结构使用：标题、简短说明、完整 Mermaid fence、必要说明。
浅色主题：
%%{init: {"theme":"base","themeVariables":{"fontFamily":"Inter, Noto Sans SC, Microsoft YaHei, sans-serif","primaryColor":"#FFFFFF","primaryBorderColor":"#2563EB","primaryTextColor":"#172033","lineColor":"#64748B","background":"#F6F8FB"}}}%%
深色主题：
%%{init: {"theme":"base","themeVariables":{"fontFamily":"Inter, Noto Sans SC, Microsoft YaHei, sans-serif","primaryColor":"#172033","primaryBorderColor":"#60A5FA","primaryTextColor":"#F8FAFC","lineColor":"#94A3B8","background":"#0F172A"}}}%%
一张图只使用一个主色和不超过三种语义色。避免逐节点 style；需要语义样式时使用少量 classDef。
交付前运行：
python -X utf8 scripts/validate_mermaid.py <Markdown 文件或目录> --require-render
修改 skill 示例时运行：
python -X utf8 scripts/validate_mermaid.py examples --check-coverage --require-render
python -m unittest discover -s tests -v
校验后查看真实渲染，检查节点拥挤、文字截断、线条交叉、回线过长和大面积不均衡。renderer 不可用时只能报告“结构通过、渲染未验证”。
交付 Mermaid 代码块或最终 Markdown 路径，并说明图型、主题和结构/渲染校验状态。不交付中间 DSL 或临时渲染文件，除非用户明确要求。