baoyu-diagram 流程图FlowchartSVG 绘制规范与实战指南【免费下载链接】baoyu-skills项目地址: https://gitcode.com/gh_mirrors/ba/baoyu-skills本文是基于 baoyu-skills 仓库中baoyu-diagram技能的 Flowchart 布局参考文档skills/baoyu-diagram/references/flowchart.md展开的深度实战指南。它系统讲解如何在 dark 主题下用纯 SVG 绘制专业流程图的形状词汇、布局算法、间距规范、判定分支标注与配色策略并延伸到复杂流程图的分组技巧、输出到 2x PNG 的完整工具链。读完本文你既能照规范手写可复制的流程图 SVG也能理解baoyu-diagram技能内部的完整设计系统与渲染原理。Flowchart 在 baoyu-diagram 技能中的定位baoyu-diagram是一个面向 AI Agent 的通用 SVG 图表生成技能支持架构图、流程图、时序图、结构图、思维导图、时间轴、状态机等十余种图表类型。在 SKILL.md 中Flowchart流程图被定位为处理决策逻辑与流程步骤的核心图表类型其特征是菱形决策节点、圆角流程步骤框、方向性流程箭头。技能约定开始绘制前Agent 必须读取{baseDir}/references/下对应类型的参考文档{baseDir}即SKILL.md所在目录其中 Flowchart 对应的就是flowchart.md文档内给出的关键点是主流程自上而下top-to-bottom决策用菱形节点出口箭头上标注 Yes/No开始/结束用圆角矩形Happy path主线路径使用 Highlight蓝色强调色所有输出均为单个自包含的.svg文件内嵌样式与字体不依赖任何外部资源除 Google Fonts 导入外。形状词汇表五种基本形状及其 SVG 实现绘制流程图的第一步是掌握形状语义。flowchart.md定义了五种核心形状每种形状都有固定的 SVG 元素实现方式形状语义SVG 元素大圆角矩形开始 / 结束节点rect rx25普通矩形流程步骤 / 动作rect rx6菱形决策 / 分支旋转 45° 的polygon平行四边形输入 / 输出带 skew 的polygon圆柱体数据存储椭圆 矩形组合从源码角度看决策菱形在 SKILL.md 中给出了标准的 70px 高实现模板g transformtranslate(CX, CY) polygon points0,-35 50,0 0,35 -50,0 fill#0f172a/ polygon points0,-35 50,0 0,35 -50,0 fillrgba(120,53,15,0.3) stroke#fbbf24 stroke-width1.5/ text y4 fillwhite font-size10 font-weight600 text-anchormiddleCondition?/text /g这里体现了一个贯穿全技能的双层绘制技巧先画一个同形状、不透明背景色#0f172a即 slate-900 背景色的遮罩层再画半透明填充的视觉层。因为组件填充是半透明的如果不先铺遮罩底层的箭头和连线会透出来。数据存储圆柱体Database Cylinder同样遵循这一模式不透明rect 上下两个ellipse构成遮罩再用半透明紫Tertiary 色系rgba(76,29,149,0.4) 描边#a78bfa绘制视觉层。流程方向主流程自上而下分支左右展开flowchart.md明确规定 Flowchart 的主流程方向为top to bottom自上而下主流程沿中心轴垂直向下延伸分支流程从决策节点向左右两侧展开。这与架构图支持 LTR 或 TTB 两种主方向不同——流程图是单主方向 横向分支的混合布局。因此在实际绘制时中心列始终留给主线两侧空间预留给分支与回路。布局算法四步规划一张不重叠的流程图flowchart.md给出了流程图布局的四步算法它是整个绘制的骨架识别主路径happy path / 最常走路径它沿中心轴直线向下贯穿整张图是视觉上的主干从决策节点产生分支Yes 分支继续沿中心向下No 分支向右空间紧张时向左展开合并路径用 L 形连接器将分支路由回主路径回环Loop-back在图表最左侧或最右侧用曲线路径向上折返。L 形连接器在 architecture.md 中有对应的路径模板流程图的合并分支可以复用同样的手法path dM x1,y1 L midX,y1 L midX,y2 fillnone stroke#64748b marker-endurl(#arrow)/即先沿 x 方向水平走一段L midX,y1再垂直折回主路径L midX,y2保证连线只走水平/垂直两段不与组件相交。间距规范一张可复用的数值表间距是防止节点重叠的硬性约束flowchart.md给出的关键数值如下项目数值步骤之间垂直间距60-80px足够容纳箭头 可选标签决策菱形高度顶点到顶点70px决策菱形宽度顶点到顶点100px分支相对中心的水平偏移200px合并连接器的净空距任何盒子 20px这些数值与 SKILL.md 的全局间距规则相互印证标准组件盒高度 50-70px、组件间最小垂直间距 40px、水平间距 30px、箭头标签距盒边 10px、图例至少低于最低元素 20px、viewBox四周保留 30px 内边距。绘制完成后应统一校验无重叠、图例在边界外、viewBox 足够大。判定标签Yes/No 出口箭头标注规范决策节点出口箭头的标签是流程图可读性的关键。规范要求将 Yes / No或 True / False、是 / 否直接放置在出口箭头上距离菱形边缘 10px处。flowchart.md给出了完整的双分支标注示例决策菱形中心位于 (400, 200)!-- Decision diamond at center (400, 200) -- !-- Yes: downward -- line x1400 y1235 x2400 y2300 stroke#64748b marker-endurl(#arrow)/ text x412 y260 fill#34d399 font-size8Yes/text !-- No: rightward -- line x1450 y1200 x2550 y2200 stroke#64748b marker-endurl(#arrow)/ text x480 y193 fill#fb7185 font-size8No/text该示例同时体现了配色策略的语义化运用Yes / 主路径使用 emerald#34d399Secondary 色标注No / 异常分支使用 rose#fb7185Alert 色标注。箭头引用了url(#arrow)标准箭头 marker。该 marker 在 SKILL.md 中定义如下marker idarrow markerWidth10 markerHeight7 refX9 refY3.5 orientauto polygon points0 0, 10 3.5, 0 7 fill#64748b/ /markerorientauto保证箭头方向随线段走向自动旋转需要彩色箭头时按相同结构复制出arrow-cyan、arrow-emerald等按色命名的 marker 即可。配色策略按角色分配语义色流程图的配色按角色actor / decision / process而非按技术栈分配这是baoyu-diagram对流程图和时序图的统一要求。flowchart.md的配色规则为元素颜色说明开始/结束节点Highlight蓝色#60a5fa强调入口与出口流程步骤Primarycyan#22d3ee或 Secondaryemerald#34d399常规处理步骤决策菱形Accentamber#fbbf24琥珀色天然吸引视线错误/异常路径Alertrose#fb7185虚线箭头警示语义主路径箭头比分支箭头更亮通过stroke-opacity差值区分主次在 SKILL.md 的全局色彩系统中这些语义色有精确的 rgba 填充值与描边值例如 Primary 填充rgba(8, 51, 68, 0.4)、描边#22d3eeAccent 填充rgba(120, 53, 15, 0.3)、描边#fbbf24。绘制时决策菱形即直接使用 Accent 色填充 描边流程步骤使用 Primary/Secondaryhappy path 上的箭头可用stroke-opacity略高于分支箭头形成清晰的主次视觉层级。复杂流程图10 步以上的三种扩展手法当流程图超过 10 个步骤时flowchart.md建议采用以下结构升级手段泳道Swim lanes把相关步骤纵向分组成多条泳道每条泳道是带标题栏的垂直列阶段行头Phase row header在每条泳道顶部添加阶段行标题标明该泳道负责的流程阶段复用架构图的区域边界模式泳道边界使用 dashed outline 区域框这与 architecture.md 中的 Region Boundary 完全同源。区域边界在 SKILL.md 中的标准模板为rect xX yY widthW heightH rx12 fillnone stroke#fbbf24 stroke-width1 stroke-dasharray8,4/ text xX12 yY16 fill#fbbf24 font-size9 font-weight600AWS us-east-1/text泳道场景下只需把标题文本换成阶段名如 订单创建、支付处理、履约发货并调整区域尺寸即可。多层嵌套时如云厂商 → VPC → 可用区还可以通过改变stroke-dasharray区分层级外层12,4、中层8,4、内层4,4。图层顺序保证 SVG 正确叠放的关键baoyu-diagram的 SVG 绘制顺序是硬性约定流程图同样必须遵守SVG 按从后到前绘制背景填充 网格 pattern区域/分组边界虚线框连接箭头与连线不透明遮罩矩形与组件盒同位置fill#0f172a组件盒半透明填充 描边文本标签图例右下角或底部位于所有边界之外标题块左上角背景使用 slate-900#0f172a 40px 网格 pattern网格线#1e293bstroke-width0.5这一深色底是整套 dark 主题设计系统的基础。输出与交付从 SVG 到 2x PNG 的完整工具链流程图 SVG 绘制完成后baoyu-diagram技能通过 scripts/main.ts 将 SVG 转换为 2x PNG 交付bun skills/baoyu-diagram/scripts/main.ts svg-path [options]脚本支持的选项与 SKILL.md 中记录一致-s, --scale n缩放系数默认 2-o, --output path自定义输出路径默认input2x.png--json以 JSON 格式输出结果含 input、output、width、height-h, --help显示帮助。从源码看该脚本的核心流程是解析 SVG 的viewBox正则viewBox...提取宽高若缺失则回退读取width/height属性→ 按scale计算目标像素尺寸 → 动态import(sharp)以density: 72 * scale栅格化 → 输出 PNG。两点值得注意scale1 时输出不带后缀getOutputPath中suffix scale 1 ? : 2x只有非 1 的倍率才会生成Nx后缀文件运行时自动解析${BUN_X}若本机装了bun用bun否则npx -y bun都不行则提示安装 bun——这决定了即使没有全局 bun 也能运行。输出规则方面SKILL.md 还要求viewBox四周保留 30px 内边距但不设固定width/height让 SVG 响应式缩放、根元素带xmlnshttp://www.w3.org/2000/svg、所有style/defs/marker/pattern 放在文件顶部、text-anchormiddle保证文本居中。中文字体与本地化标注流程图中若出现中文标签例如把 Yes/No 换成 是/否必须遵循 SKILL.md 的中文支持规则font-family改为JetBrains Mono, Noto Sans SC, PingFang SC, sans-serif同步增大盒子宽度——CJK 字符比拉丁字符更宽否则文本会溢出组件盒。这一规则与flowchart.md中 是 / 否 标签的本地化示例相互呼应也是国内场景绘制流程图时的常见坑点。绘制自检清单综合flowchart.md与 SKILL.md 的约束一张合格的流程图 SVG 应通过以下检查布局主路径沿中心垂直贯穿分支左右展开合并用 L 形连接器回环走最外侧间距步骤垂直间距 60-80px菱形高 70px、宽 100px分支偏移 200px合并净空 20px箭头标签距盒边 10px标签Yes/No或 True/False、是/否放在出口箭头上、距菱形 10px颜色语义正确Yesemerald、Norose配色开始/结束用 Highlight 蓝步骤用 Primary/Secondary决策用 Accent 琥珀异常路径用 Alert 玫红虚线happy path 箭头stroke-opacity更高图层遮罩层在连线之上、组件之下防止半透明填充透出底层箭头文本中文标签扩大盒宽、换用含 Noto Sans SC 的字体栈交付保存为单文件 SVG运行 main.ts 生成 2x PNG二者一并呈现给用户。遵循这套规范无论是 Agent 自动生成还是人工手写都能产出布局稳定、语义清晰、可直接嵌入文档或演示文稿的深色主题流程图。【免费下载链接】baoyu-skills项目地址: https://gitcode.com/gh_mirrors/ba/baoyu-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考