// 生成设计美观的图表 HTML 文件。支持 10 种图表类型：流程图、架构图、ER 图、商业模式画布、用户旅程图、思维导图、竞品分析图、SWOT 分析、产品路线图、组织架构图。支持 3 种内置视觉风格（黑白简约、深色暗调、Claude 暖色）+ 品牌风格扩展。 触发词："画个 XX 图"、"生成商业模式画布"、"做个架构图"、"画 ER 图"、"帮我画个流程图"、"生成用户旅程图"、"做个思维导图"、"竞品分析图"、"SWOT 分析图"、"产品路线图"、"组织架构图"、"商业模式画布"、"XX 风格的图表"、"帮我可视化"。 当用户提供了一段描述并要求可视化、画图、生成图表时使用。当用户要求切换图表风格时也触发。
创建专业、支持深色/浅色双主题切换的系统架构图，输出为独立的 HTML 文件（内含 SVG 图形）。当用户需要系统架构图、基础设施拓扑图、云架构可视化、安全架构图、网络拓扑图，或任何展示系统组件及其关系的技术图表时使用此技能。支持中文标注和说明，内置主题切换按钮。
AI 全能图表生成器（扩展版）。一键生成 35+ 种设计美观的图表 HTML 文件，涵盖技术架构、流程逻辑、业务战略、数据可视化、信息展示 5 大类别。支持 3 种内置视觉风格（黑白简约、深色暗调、Claude 暖色）+ 品牌风格扩展。 触发词："画个 XX 图"、"生成 XX 图"、"做个架构图/流程图/思维导图/时序图/甘特图/漏斗图/桑基图/用户旅程/商业模式画布/SWOT/竞品分析/产品路线图/组织架构/ER 图/C4 图/BPMN/状态机/决策树/泳道图/部署图/网络拓扑/威胁建模/价值链/OKR 树/韦恩图/热力图/KPI 看板/信息图/概念图"、"帮我可视化"、"XX 风格的图表"、"换成 XX 风格"。 当用户提供了一段描述并要求可视化、画图、生成图表时使用。当用户要求切换图表风格时也触发。
将文本内容进行逻辑拆解，生成精准的逻辑关系 SVG 图。支持递进、流程、循环、层次、对比、矩阵六种关系类型。当用户提供文本段落、文章、论述内容并要求生成逻辑图、思维导图、关系图、流程图时触发。支持中文，一次可拆解多张图。
| name | chart-craft |
| description | 生成设计美观的图表 HTML 文件。支持 10 种图表类型：流程图、架构图、ER 图、商业模式画布、用户旅程图、思维导图、竞品分析图、SWOT 分析、产品路线图、组织架构图。支持 3 种内置视觉风格（黑白简约、深色暗调、Claude 暖色）+ 品牌风格扩展。 触发词："画个 XX 图"、"生成商业模式画布"、"做个架构图"、"画 ER 图"、"帮我画个流程图"、"生成用户旅程图"、"做个思维导图"、"竞品分析图"、"SWOT 分析图"、"产品路线图"、"组织架构图"、"商业模式画布"、"XX 风格的图表"、"帮我可视化"。 当用户提供了一段描述并要求可视化、画图、生成图表时使用。当用户要求切换图表风格时也触发。 |
你是一位擅长信息可视化的设计师，能把文字描述转化为设计精美、布局清晰的图表 HTML 文件。每一张图都要做到：信息准确、视觉舒适、截图即可分享。
| # | 类型 | 英文名 | 适用场景 | 触发词 |
|---|---|---|---|---|
| 1 | 流程图 | Flowchart | 工作流、决策树、系统流程 | 流程图、工作流、流程 |
| 2 | 架构图 | Architecture | 系统架构、模块关系、技术栈 | 架构图、系统图、模块图 |
| 3 | ER 图 | ER Diagram | 数据模型、实体关系、数据库设计 | ER图、实体关系、数据模型 |
| 4 | 商业模式画布 | Business Model Canvas | 商业模式、产品规划、商业模式分析 | 商业模式画布、BMC、商业模式 |
| 5 | 用户旅程图 | User Journey Map | 用户体验、触点分析、服务设计 | 用户旅程、旅程图、体验地图 |
| 6 | 思维导图 | Mind Map | 头脑风暴、知识梳理、结构化思考 | 思维导图、脑图、发散图 |
| 7 | 竞品分析图 | Competitive Analysis | 竞品对比、市场定位、功能对比 | 竞品分析、竞品对比、竞争格局 |
| 8 | SWOT 分析 | SWOT Analysis | 战略分析、优劣势评估 | SWOT、优势劣势、战略分析 |
| 9 | 产品路线图 | Product Roadmap | 版本规划、里程碑、时间线 | 产品路线图、路线图、Roadmap、版本规划 |
| 10 | 组织架构图 | Org Chart | 团队结构、汇报关系、人员分工 | 组织架构、团队结构、组织图 |
当用户没有指定图表类型时，根据描述内容自动判断最适合的类型。
内置 3 种风格预设，详细 CSS token 见 references/style-presets.md。
| 风格 | 关键词 | 感觉 |
|---|---|---|
| 黑白简约 (mono) | 白底、黑字、细线、零装饰 | Notion 风格，干净利落 |
| 深色暗调 (dark) | 深灰底、浅字、渐变强调、微发光 | 科技感、高级感 |
| Claude 暖色 (claude) | 暖白底、赭石强调、衬线标题 | 温暖、知性、有质感 |
用户可以在生成后说"换成深色风格"或"用 Notion 风格重新生成"，直接切换风格重新输出。
用户输入（描述 + 图表意图）
│
▼
┌──────────────────────┐
│ Step 1：识别图表类型 │ ← 关键词匹配 + 内容分析
└────────┬─────────────┘
▼
┌──────────────────────┐
│ Step 2：收集内容 │ ← 从描述中提取 + 追问缺失信息
└────────┬─────────────┘
▼
┌──────────────────────┐
│ Step 3：选择风格 │ ← 默认 Claude 暖色 / 用户指定
└────────┬─────────────┘
▼
┌──────────────────────┐
│ Step 4：生成 HTML │ ← 输出单文件 HTML + 保存 + 预览
└──────────────────────┘
从用户的描述中判断要画什么图。判断依据：
用户明确说了图表名 → 直接匹配注册表
用户描述了内容但没有说图表名 → 根据内容特征自动判断：
无法判断 → 问用户一句话："你想画哪种图？"并简要列出适合的 2-3 个选项。
根据图表类型，从用户描述中提取关键信息。
如果信息足够（用户描述详细）：直接进入 Step 3。
如果信息不够：追问 2-3 个关键问题。不同图表的必填信息见 references/chart-templates.md。
追问原则：
按"风格选择规则"确定视觉风格。读取 references/style-presets.md 获取完整 CSS token。
如果用户指定了品牌风格，按以下流程获取设计 token：
cd /tmp && mkdir -p design-md-tmp && cd design-md-tmp && npx getdesign@latest add <slug> 2>&1输出一个完整的单文件 HTML。
HTML 结构规范：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[图表标题]</title>
<style>
/* 1. 全局重置与基础样式 */
/* 2. 风格变量（CSS Custom Properties） */
/* 3. 布局样式 */
/* 4. 图表组件样式 */
/* 5. 响应式 */
</style>
</head>
<body>
<!-- 标题区 -->
<!-- 图表主体（使用 HTML + CSS 布局，不用 Canvas） -->
<!-- 底部信息（可选） -->
</body>
</html>
设计原则：
文件保存：
00 收件箱/画板/chart-craft/MMDD-主题.html
0414-写作助手商业模式画布.htmlopen 命令打开浏览器预览以下是每种图表的核心结构。详细的布局模板和内容引导见 references/chart-templates.md。
<style> 标签内-apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serifGeorgia, "Times New Roman", serif生成后逐项自查：
| # | 检查项 | 标准 |
|---|---|---|
| 1 | 图表类型 | 匹配用户意图，不是"差不多"的图 |
| 2 | 信息完整 | 必填字段都有内容，无空白区块 |
| 3 | 布局清晰 | 层级分明，不拥挤，有呼吸感 |
| 4 | 风格一致 | 颜色、字体、圆角统一，无混搭 |
| 5 | 中文渲染 | 字体栈正确，中文清晰可读 |
| 6 | 截图友好 | 在 1400px 宽度下一屏展示完整 |
| 7 | 颜色对比 | 文字和背景对比度足够，浅色文字不浮 |
| 8 | 文字精炼 | 无冗长描述，每条要点一句到位 |
| 9 | 文件保存 | 路径和命名符合规范 |
| 10 | 浏览器预览 | open 命令已执行 |
| 用户说法 | 图表类型 | 风格 |
|---|---|---|
| "画个流程图" | 流程图 | 默认 |
| "生成架构图，深色风格" | 架构图 | dark |
| "做个 ER 图" | ER 图 | 默认 |
| "帮我画商业模式画布" | 商业模式画布 | 默认 |
| "画个用户旅程" | 用户旅程图 | 默认 |
| "思维导图，Notion 风格" | 思维导图 | mono |
| "竞品分析" | 竞品分析图 | 默认 |
| "做个 SWOT" | SWOT 分析 | 默认 |
| "产品路线图" | 产品路线图 | 默认 |
| "组织架构" | 组织架构图 | 默认 |
| "换成深色风格" | 重新渲染 | dark |
| "Stripe 风格的流程图" | 流程图 | 调用 brand-design-md |