baoyu-diagram

图表生成器

创建多种类型的专业SVG图表。所有输出均为单个自包含的.svg文件，内嵌样式和字体。

支持的图表类型

类型	使用场景	关键特征
架构图	系统组件及关系	分组框、连接箭头、区域边界
流程图	决策逻辑、流程步骤	菱形决策、圆角步骤框、方向流
时序图	参与者之间的时间顺序交互	垂直生命线、水平消息、激活条
结构图	类图、ER图、组织架构图	分区框、类型化关系（继承、组合）
思维导图	头脑风暴、主题探索	中心节点、辐射分支、有机布局
时间线	按时间顺序的事件	水平/垂直轴线、事件标记、时间段
说明图	概念解释、比较	自由布局、图标、注释、视觉隐喻
状态机	状态转换、生命周期	圆角状态节点、带标签的转换、开始/结束标记
数据流图	数据转换管道	处理气泡、数据存储、外部实体

设计系统

颜色调色板

组件类别的语义颜色：

类别	填充 (rgba)	描边	用途
主要	`rgba(8, 51, 68, 0.4)`	`#22d3ee` (青色)	前端、面向用户、输入
次要	`rgba(6, 78, 59, 0.4)`	`#34d399` (翡翠绿)	后端、服务、处理
第三	`rgba(76, 29, 149, 0.4)`	`#a78bfa` (紫罗兰)	数据库、存储、持久化
强调	`rgba(120, 53, 15, 0.3)`	`#fbbf24` (琥珀色)	云、基础设施、区域
警告	`rgba(136, 19, 55, 0.4)`	`#fb7185` (玫瑰红)	安全、错误、警告
连接	`rgba(251, 146, 60, 0.3)`	`#fb923c` (橙色)	总线、队列、中间件
中性	`rgba(30, 41, 59, 0.5)`	`#94a3b8` (石板灰)	外部、通用、未知
高亮	`rgba(59, 130, 246, 0.3)`	`#60a5fa` (蓝色)	活动状态、焦点、当前步骤

对于流程图和时序图，按角色（参与者、决策、过程）分配颜色，而非按技术。

排版

使用内嵌SVG @font-face 或系统等宽字体回退：

<style>
  @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&amp;display=swap');
  text { font-family: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', monospace; }
</style>

按角色的字号：

标题： 16px，字重700
组件名称： 11-12px，字重600
子标签/描述： 9px，字重400，颜色 #94a3b8
注释/备注： 8px，字重400
小标签（箭头上）： 7-8px

核心视觉元素

背景： #0f172a (石板灰-900) 带细微网格：

<defs>
  <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
    <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#1e293b" stroke-width="0.5"/>
  </pattern>
</defs>
<rect width="100%" height="100%" fill="#0f172a"/>
<rect width="100%" height="100%" fill="url(#grid)"/>

箭头标记（标准）：

<marker id="arrow" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
  <polygon points="0 0, 10 3.5, 0 7" fill="#64748b"/>
</marker>

箭头标记（彩色）——根据需要为每种颜色创建：

<marker id="arrow-cyan" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
  <polygon points="0 0, 10 3.5, 0 7" fill="#22d3ee"/>
</marker>

开放箭头（用于异步/返回消息）：

<marker id="arrow-open" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
  <polyline points="0 0, 10 3.5, 0 7" fill="none" stroke="#64748b" stroke-width="1.5"/>
</marker>

SVG结构与分层

按以下顺序绘制元素以获得正确的z轴顺序（SVG从后往前绘制）：

背景填充 + 网格图案
区域/组边界（虚线轮廓）
连接箭头和线条
不透明遮罩矩形（与组件框相同位置，fill="#0f172a"）
组件框（半透明填充 + 描边）
文本标签
图例（右下角或底部区域，在所有边界之外）
标题块（左上角）

不透明遮罩矩形技巧至关重要——没有它，半透明的组件填充会显示下方的箭头：

<!-- 遮罩层：不透明背景以隐藏箭头 -->
<rect x="100" y="100" width="160" height="60" rx="6" fill="#0f172a"/>
<!-- 视觉层：样式化组件 -->
<rect x="100" y="100" width="160" height="60" rx="6" fill="rgba(8,51,68,0.4)" stroke="#22d3ee" stroke-width="1.5"/>
<text x="180" y="125" fill="white" font-size="11" font-weight="600" text-anchor="middle">API Gateway</text>
<text x="180" y="141" fill="#94a3b8" font-size="9" text-anchor="middle">Kong / Nginx</text>

间距规则

这些规则防止重叠——请严格遵守：

组件框高度： 50-70px（标准），80-120px（大型/复杂）
组件间最小间距： 垂直40px，水平30px
箭头标签间距： 距离任何框边缘10px
区域边界内边距： 内部边缘与包含的组件之间20px
图例放置： 至少低于图表最低元素20px
标题块： 距离左上角20px，在图表内容区域之外
viewBox： 始终扩展以容纳所有内容 + 四周30px内边距

组件模式

标准框（服务/过程）：

<rect x="X" y="Y" width="160" height="60" rx="6" fill="#0f172a"/>
<rect x="X" y="Y" width="160" height="60" rx="6" fill="FILL" stroke="STROKE" stroke-width="1.5"/>
<text x="CX" y="Y+24" fill="white" font-size="11" font-weight="600" text-anchor="middle">名称</text>
<text x="CX" y="Y+40" fill="#94a3b8" font-size="9" text-anchor="middle">描述</text>

决策菱形（流程图）：

<g transform="translate(CX, CY)">
  <polygon points="0,-35 50,0 0,35 -50,0" fill="#0f172a"/>
  <polygon points="0,-35 50,0 0,35 -50,0" fill="rgba(120,53,15,0.3)" stroke="#fbbf24" stroke-width="1.5"/>
  <text y="4" fill="white" font-size="10" font-weight="600" text-anchor="middle">条件?</text>
</g>

数据库圆柱体：

<g transform="translate(X, Y)">
  <rect x="0" y="10" width="120" height="50" rx="2" fill="#0f172a"/>
  <ellipse cx="60" cy="10" rx="60" ry="12" fill="#0f172a"/>
  <ellipse cx="60" cy="60" rx="60" ry="12" fill="#0f172a"/>
  <rect x="0" y="10" width="120" height="50" fill="rgba(76,29,149,0.4)"/>
  <ellipse cx="60" cy="10" rx="60" ry="12" fill="rgba(76,29,149,0.4)" stroke="#a78bfa" stroke-width="1.5"/>
  <ellipse cx="60" cy="60" rx="60" ry="12" fill="rgba(76,29,149,0.4)" stroke="#a78bfa" stroke-width="1.5"/>
  <line x1="0" y1="10" x2="0" y2="60" stroke="#a78bfa" stroke-width="1.5"/>
  <line x1="120" y1="10" x2="120" y2="60" stroke="#a78bfa" stroke-width="1.5"/>
  <text x="60" y="40" fill="white" font-size="11" font-weight="600" text-anchor="middle">PostgreSQL</text>
</g>

区域边界：

<rect x="X" y="Y" width="W" height="H" rx="12" fill="none" stroke="#fbbf24" stroke-width="1" stroke-dasharray="8,4"/>
<text x="X+12" y="Y+16" fill="#fbbf24" font-size="9" font-weight="600">AWS us-east-1</text>

安全组：

<rect x="X" y="Y" width="W" height="H" rx="8" fill="none" stroke="#fb7185" stroke-width="1" stroke-dasharray="4,4"/>
<text x="X+10" y="Y+14" fill="#fb7185" font-size="8" font-weight="500">VPC / 安全组</text>

类型特定布局指南

确定此SKILL.md文件的目录路径为{baseDir}。在开始布局之前，读取特定图表类型的参考文件。参考文件位于{baseDir}/references/，包含详细的布局算法和示例。

架构图

→ 读取 {baseDir}/references/architecture.md

要点：从左到右或从上到下的数据流。在区域边界内对相关服务进行分组。在层之间使用总线/连接器。将数据库放在底部或右侧。

流程图

→ 读取 {baseDir}/references/flowchart.md

要点：从上到下的主要流程。菱形用于决策，出口箭头上带有是/否标签。圆角矩形用于开始/结束。使用高亮颜色表示快乐路径。

时序图

→ 读取 {baseDir}/references/sequence.md

要点：参与者作为顶部的框，垂直虚线生命线，水平箭头表示消息（实线=同步，虚线=返回）。时间向下流动。激活条表示处理。如果复杂，对消息进行编号。

结构图

→ 读取 {baseDir}/references/structural.md

要点：分区框（类图的名称/属性/方法）。关系线：实线带实心菱形=组合，实线带空心菱形=聚合，虚线箭头=依赖，实线三角形=继承。

思维导图

从中心概念自由辐射布局。使用有机曲线（带三次贝塞尔曲线的<path>）作为分支。使用调色板变化分支颜色。中心节点字体较大，向外逐渐减小。

时间线

水平或垂直轴线。事件标记为轴上的圆形或菱形。描述文本交替偏移到两侧以避免重叠。使用颜色对事件类型进行分类。

状态机

圆角矩形状态，复合状态使用双边框。实心圆表示初始状态，靶心表示最终状态。弯曲箭头表示自转换。使用event [guard] / action格式标记所有转换。

输出规则

输出单个.svg文件——无外部依赖，除了Google Fonts导入
设置viewBox以容纳所有内容并带30px内边距；不要设置固定的width/height属性（让SVG响应式缩放）
在根<svg>元素上包含xmlns="http://www.w3.org/2000/svg"
将所有<style>、<defs>、标记和图案放在SVG顶部
使用text-anchor="middle"实现居中标签；确保文本不溢出框
中文文本支持： 当标签包含中文字符时，使用font-family: 'JetBrains Mono', 'Noto Sans SC', 'PingFang SC', sans-serif'并增加框宽度——CJK字符更宽
保存位置： 如果输入是文件，保存到{inputFileDir}/diagram/。否则保存到{projectDir}/diagram/{topic-slug}/。如果目录不存在则创建

脚本

确定此SKILL.md文件的目录路径为{baseDir}。脚本路径：{baseDir}/scripts/main.ts。

解析${BUN_X}运行时：如果安装了bun → bun；如果npx可用 → npx -y bun；否则建议安装bun。

SVG → @2x PNG

保存SVG后，将其转换为@2x PNG：

${BUN_X} {baseDir}/scripts/main.ts <svg-path> [options]

选项：

-s, --scale <n> — 缩放因子（默认：2）
-o, --output <path> — 自定义输出路径（默认：<input>@2x.png）
--json — JSON输出

流程

从用户请求中识别图表类型
如果该类型存在相关参考文件，则读取该文件
规划布局：列出所有组件，确定分组和流向，计算位置
按照上述分层顺序编写SVG
验证间距规则——无重叠，图例在边界外，viewBox足够大
保存SVG文件
运行${BUN_X} {baseDir}/scripts/main.ts <svg-path>生成@2x PNG
向用户展示两个文件

你可能还喜欢

docker-expert

41Kdevops-cloud

您是一位高级Docker容器化专家，拥有关于容器优化、安全加固、多阶段构建、编排模式以及基于当前行业最佳实践的生产部署策略的全面实用知识。

sickn33

获取

import-infrastructure-as-code

37Kdevops-cloud

Import existing Azure resources into Terraform using Azure CLI discovery and Azure Verified Modules (AVM). Use when asked to reverse-engineer live Azure infrastructure, generate Infrastructure as Code from existing subscriptions/resource groups/resource IDs, map dependencies, derive exact import addresses from downloaded module source, prevent configuration drift, and produce AVM-based Terraform files ready for validation and planning across any Azure resource type.

github

获取

devops-engineer

11Kdevops-cloud

Creates Dockerfiles, configures CI/CD pipelines, writes Kubernetes manifests, and generates Terraform/Pulumi infrastructure templates. Handles deployment automation, GitOps configuration, incident response runbooks, and internal developer platform tooling. Use when setting up CI/CD pipelines, containerizing applications, managing infrastructure as code, deploying to Kubernetes clusters, configuring cloud platforms, automating releases, or responding to production incidents. Invoke for pipelines, Docker, Kubernetes, GitOps, Terraform, GitHub Actions, on-call, or platform engineering.

jeffallan

获取

继续探索

浏览 devops-cloud 热门 Skills 最近更新